change Tabs to use react hooks
This commit is contained in:
parent
45e6d15fb3
commit
c2bf474136
|
@ -1,22 +1,7 @@
|
||||||
import React, { Component } from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
class Tab extends Component {
|
|
||||||
onClick = () => {
|
|
||||||
const { label, onClick } = this.props;
|
|
||||||
onClick(label);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
onClick,
|
|
||||||
props: {
|
|
||||||
activeTab,
|
|
||||||
label,
|
|
||||||
},
|
|
||||||
} = this;
|
|
||||||
|
|
||||||
|
const Tab = ({ onClick, activeTab, label }) => {
|
||||||
let className = 'tab-list-item';
|
let className = 'tab-list-item';
|
||||||
|
|
||||||
if (activeTab === label) {
|
if (activeTab === label) {
|
||||||
className += ' tab-list-active';
|
className += ' tab-list-active';
|
||||||
}
|
}
|
||||||
|
@ -25,12 +10,11 @@ class Tab extends Component {
|
||||||
<li
|
<li
|
||||||
role="presentation"
|
role="presentation"
|
||||||
className={className}
|
className={className}
|
||||||
onClick={onClick}
|
onClick={() => onClick(label)}
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default Tab;
|
export default Tab;
|
||||||
|
|
|
@ -1,31 +1,9 @@
|
||||||
import React, { Component } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
import Tab from './Tab';
|
import Tab from './Tab';
|
||||||
|
|
||||||
class Tabs extends Component {
|
const Tabs = ({ children }) => {
|
||||||
constructor(props) {
|
const [activeTab, setActiveTab] = useState(children[0].props.label);
|
||||||
super(props);
|
|
||||||
|
|
||||||
const { children } = this.props;
|
|
||||||
this.state = {
|
|
||||||
activeTab: children[0].props.label,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onClickTabItem = (tab) => {
|
|
||||||
this.setState({ activeTab: tab });
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
onClickTabItem,
|
|
||||||
props: {
|
|
||||||
children,
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
activeTab,
|
|
||||||
},
|
|
||||||
} = this;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
|
@ -41,7 +19,7 @@ class Tabs extends Component {
|
||||||
activeTab={activeTab}
|
activeTab={activeTab}
|
||||||
key={label}
|
key={label}
|
||||||
label={label}
|
label={label}
|
||||||
onClick={onClickTabItem}
|
onClick={(tab) => setActiveTab(tab)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -56,7 +34,6 @@ class Tabs extends Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default Tabs;
|
export default Tabs;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user