Skip to content

Commit b2159c9

Browse files
portableCoderdanez
portableCoder
authored and
danez
committed
feat: Updated all the class components to newer functional components
1 parent a71cab0 commit b2159c9

File tree

7 files changed

+396
-391
lines changed

7 files changed

+396
-391
lines changed

‎src/components/Tab.js

Lines changed: 80 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,91 @@
11
import PropTypes from 'prop-types';
2-
import React, { Component } from 'react';
2+
import React, { useEffect, useRef } from 'react';
33
import cx from 'clsx';
44

55
const DEFAULT_CLASS = 'react-tabs__tab';
6+
const DEFAULT_PROPS = {
7+
className: DEFAULT_CLASS,
8+
disabledClassName: `${DEFAULT_CLASS}--disabled`,
9+
focus: false,
10+
id: null,
11+
panelId: null,
12+
selected: false,
13+
selectedClassName: `${DEFAULT_CLASS}--selected`,
14+
};
615

7-
export default class Tab extends Component {
8-
static defaultProps = {
9-
className: DEFAULT_CLASS,
10-
disabledClassName: `${DEFAULT_CLASS}--disabled`,
11-
focus: false,
12-
id: null,
13-
panelId: null,
14-
selected: false,
15-
selectedClassName: `${DEFAULT_CLASS}--selected`,
16-
};
17-
18-
static propTypes = {
19-
children: PropTypes.oneOfType([
20-
PropTypes.array,
21-
PropTypes.object,
22-
PropTypes.string,
23-
]),
24-
className: PropTypes.oneOfType([
25-
PropTypes.string,
26-
PropTypes.array,
27-
PropTypes.object,
28-
]),
29-
disabled: PropTypes.bool,
30-
tabIndex: PropTypes.string,
31-
disabledClassName: PropTypes.string,
32-
focus: PropTypes.bool, // private
33-
id: PropTypes.string, // private
34-
panelId: PropTypes.string, // private
35-
selected: PropTypes.bool, // private
36-
selectedClassName: PropTypes.string,
37-
tabRef: PropTypes.func, // private
38-
};
39-
40-
componentDidMount() {
41-
this.checkFocus();
42-
}
16+
const propTypes = {
17+
children: PropTypes.oneOfType([
18+
PropTypes.array,
19+
PropTypes.object,
20+
PropTypes.string,
21+
]),
22+
className: PropTypes.oneOfType([
23+
PropTypes.string,
24+
PropTypes.array,
25+
PropTypes.object,
26+
]),
27+
disabled: PropTypes.bool,
28+
tabIndex: PropTypes.string,
29+
disabledClassName: PropTypes.string,
30+
focus: PropTypes.bool, // private
31+
id: PropTypes.string, // private
32+
panelId: PropTypes.string, // private
33+
selected: PropTypes.bool, // private
34+
selectedClassName: PropTypes.string,
35+
tabRef: PropTypes.func,
36+
};
4337

44-
componentDidUpdate() {
45-
this.checkFocus();
46-
}
47-
48-
checkFocus() {
49-
const { selected, focus } = this.props;
38+
const Tab = (props) => {
39+
let nodeRef = useRef();
40+
const checkFocus = () => {
41+
const { selected, focus } = props;
5042
if (selected && focus) {
51-
this.node.focus();
43+
nodeRef.current.focus();
5244
}
53-
}
54-
55-
render() {
56-
const {
57-
children,
58-
className,
59-
disabled,
60-
disabledClassName,
61-
focus, // unused
62-
id,
63-
panelId,
64-
selected,
65-
selectedClassName,
66-
tabIndex,
67-
tabRef,
68-
...attributes
69-
} = this.props;
45+
};
46+
useEffect(() => {
47+
checkFocus();
48+
});
49+
const {
50+
children,
51+
className,
52+
disabled,
53+
disabledClassName,
54+
focus, // unused
55+
id,
56+
panelId,
57+
selected,
58+
selectedClassName,
59+
tabIndex,
60+
tabRef,
61+
...attributes
62+
} = props;
7063

71-
return (
72-
<li
73-
{...attributes}
74-
className={cx(className, {
75-
[selectedClassName]: selected,
76-
[disabledClassName]: disabled,
77-
})}
78-
ref={(node) => {
79-
this.node = node;
80-
if (tabRef) tabRef(node);
81-
}}
82-
role="tab"
83-
id={id}
84-
aria-selected={selected ? 'true' : 'false'}
85-
aria-disabled={disabled ? 'true' : 'false'}
86-
aria-controls={panelId}
87-
tabIndex={tabIndex || (selected ? '0' : null)}
88-
data-rttab
89-
>
90-
{children}
91-
</li>
92-
);
93-
}
94-
}
64+
return (
65+
<li
66+
{...attributes}
67+
className={cx(className, {
68+
[selectedClassName]: selected,
69+
[disabledClassName]: disabled,
70+
})}
71+
ref={(node) => {
72+
nodeRef.current = node;
73+
if (tabRef) tabRef(node);
74+
}}
75+
role="tab"
76+
id={id}
77+
aria-selected={selected ? 'true' : 'false'}
78+
aria-disabled={disabled ? 'true' : 'false'}
79+
aria-controls={panelId}
80+
tabIndex={tabIndex || (selected ? '0' : null)}
81+
data-rttab
82+
>
83+
{children}
84+
</li>
85+
);
86+
};
87+
Tab.propTypes = propTypes;
9588

9689
Tab.tabsRole = 'Tab';
90+
Tab.defaultProps = DEFAULT_PROPS;
91+
export default Tab;

‎src/components/TabList.js

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
import PropTypes from 'prop-types';
2-
import React, { Component } from 'react';
2+
import React from 'react';
33
import cx from 'clsx';
44

5-
export default class TabList extends Component {
6-
static defaultProps = {
7-
className: 'react-tabs__tab-list',
8-
};
5+
const defaultProps = {
6+
className: 'react-tabs__tab-list',
7+
};
8+
const propTypes = {
9+
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
10+
className: PropTypes.oneOfType([
11+
PropTypes.string,
12+
PropTypes.array,
13+
PropTypes.object,
14+
]),
15+
};
16+
const TabList = (props) => {
17+
const { children, className, ...attributes } = props;
918

10-
static propTypes = {
11-
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
12-
className: PropTypes.oneOfType([
13-
PropTypes.string,
14-
PropTypes.array,
15-
PropTypes.object,
16-
]),
17-
};
18-
19-
render() {
20-
const { children, className, ...attributes } = this.props;
21-
22-
return (
23-
<ul {...attributes} className={cx(className)} role="tablist">
24-
{children}
25-
</ul>
26-
);
27-
}
28-
}
19+
return (
20+
<ul {...attributes} className={cx(className)} role="tablist">
21+
{children}
22+
</ul>
23+
);
24+
};
2925

3026
TabList.tabsRole = 'TabList';
27+
TabList.propTypes = propTypes;
28+
TabList.defaultProps = defaultProps;
29+
export default TabList;

‎src/components/TabPanel.js

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,54 @@
11
import PropTypes from 'prop-types';
2-
import React, { Component } from 'react';
2+
import React from 'react';
33
import cx from 'clsx';
44

55
const DEFAULT_CLASS = 'react-tabs__tab-panel';
6+
const defaultProps = {
7+
className: DEFAULT_CLASS,
8+
forceRender: false,
9+
selectedClassName: `${DEFAULT_CLASS}--selected`,
10+
};
11+
const propTypes = {
12+
children: PropTypes.node,
13+
className: PropTypes.oneOfType([
14+
PropTypes.string,
15+
PropTypes.array,
16+
PropTypes.object,
17+
]),
18+
forceRender: PropTypes.bool,
19+
id: PropTypes.string, // private
20+
selected: PropTypes.bool, // private
21+
selectedClassName: PropTypes.string,
22+
tabId: PropTypes.string, // private
23+
};
24+
const TabPanel = (props) => {
25+
const {
26+
children,
27+
className,
28+
forceRender,
29+
id,
30+
selected,
31+
selectedClassName,
32+
tabId,
33+
...attributes
34+
} = props;
635

7-
export default class TabPanel extends Component {
8-
static defaultProps = {
9-
className: DEFAULT_CLASS,
10-
forceRender: false,
11-
selectedClassName: `${DEFAULT_CLASS}--selected`,
12-
};
13-
14-
static propTypes = {
15-
children: PropTypes.node,
16-
className: PropTypes.oneOfType([
17-
PropTypes.string,
18-
PropTypes.array,
19-
PropTypes.object,
20-
]),
21-
forceRender: PropTypes.bool,
22-
id: PropTypes.string, // private
23-
selected: PropTypes.bool, // private
24-
selectedClassName: PropTypes.string,
25-
tabId: PropTypes.string, // private
26-
};
27-
28-
render() {
29-
const {
30-
children,
31-
className,
32-
forceRender,
33-
id,
34-
selected,
35-
selectedClassName,
36-
tabId,
37-
...attributes
38-
} = this.props;
39-
40-
return (
41-
<div
42-
{...attributes}
43-
className={cx(className, {
44-
[selectedClassName]: selected,
45-
})}
46-
role="tabpanel"
47-
id={id}
48-
aria-labelledby={tabId}
49-
>
50-
{forceRender || selected ? children : null}
51-
</div>
52-
);
53-
}
54-
}
36+
return (
37+
<div
38+
{...attributes}
39+
className={cx(className, {
40+
[selectedClassName]: selected,
41+
})}
42+
role="tabpanel"
43+
id={id}
44+
aria-labelledby={tabId}
45+
>
46+
{forceRender || selected ? children : null}
47+
</div>
48+
);
49+
};
5550

5651
TabPanel.tabsRole = 'TabPanel';
52+
TabPanel.propTypes = propTypes;
53+
TabPanel.defaultProps = defaultProps;
54+
export default TabPanel;

0 commit comments

Comments
 (0)