diff options
Diffstat (limited to 'src/components/ui/Tabs')
-rw-r--r-- | src/components/ui/Tabs/TabItem.js | 17 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.js | 69 | ||||
-rw-r--r-- | src/components/ui/Tabs/index.js | 6 |
3 files changed, 92 insertions, 0 deletions
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js new file mode 100644 index 000000000..9ff9f009e --- /dev/null +++ b/src/components/ui/Tabs/TabItem.js | |||
@@ -0,0 +1,17 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | |||
3 | import { oneOrManyChildElements } from '../../../prop-types'; | ||
4 | |||
5 | export default class TabItem extends Component { | ||
6 | static propTypes = { | ||
7 | children: oneOrManyChildElements.isRequired, | ||
8 | } | ||
9 | |||
10 | render() { | ||
11 | const { children } = this.props; | ||
12 | |||
13 | return ( | ||
14 | <div>{children}</div> | ||
15 | ); | ||
16 | } | ||
17 | } | ||
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js new file mode 100644 index 000000000..50397f9bb --- /dev/null +++ b/src/components/ui/Tabs/Tabs.js | |||
@@ -0,0 +1,69 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | |||
6 | import { oneOrManyChildElements } from '../../../prop-types'; | ||
7 | |||
8 | @observer | ||
9 | export default class Tab extends Component { | ||
10 | static propTypes = { | ||
11 | children: oneOrManyChildElements.isRequired, | ||
12 | active: PropTypes.number, | ||
13 | }; | ||
14 | |||
15 | static defaultProps = { | ||
16 | active: 0, | ||
17 | }; | ||
18 | |||
19 | componentWillMount() { | ||
20 | this.setState({ active: this.props.active }); | ||
21 | } | ||
22 | |||
23 | switchTab(index) { | ||
24 | this.setState({ active: index }); | ||
25 | } | ||
26 | |||
27 | render() { | ||
28 | const { children: childElements } = this.props; | ||
29 | const children = childElements.filter(c => !!c); | ||
30 | |||
31 | if (children.length === 1) { | ||
32 | return <div>{children}</div>; | ||
33 | } | ||
34 | |||
35 | return ( | ||
36 | <div className="content-tabs"> | ||
37 | <div className="content-tabs__tabs"> | ||
38 | {React.Children.map(children, (child, i) => ( | ||
39 | <button | ||
40 | key={i} | ||
41 | className={classnames({ | ||
42 | 'content-tabs__item': true, | ||
43 | 'is-active': this.state.active === i, | ||
44 | })} | ||
45 | onClick={() => this.switchTab(i)} | ||
46 | type="button" | ||
47 | > | ||
48 | {child.props.title} | ||
49 | </button> | ||
50 | ))} | ||
51 | </div> | ||
52 | <div className="content-tabs__content"> | ||
53 | {React.Children.map(children, (child, i) => ( | ||
54 | <div | ||
55 | key={i} | ||
56 | className={classnames({ | ||
57 | 'content-tabs__item': true, | ||
58 | 'is-active': this.state.active === i, | ||
59 | })} | ||
60 | type="button" | ||
61 | > | ||
62 | {child} | ||
63 | </div> | ||
64 | ))} | ||
65 | </div> | ||
66 | </div> | ||
67 | ); | ||
68 | } | ||
69 | } | ||
diff --git a/src/components/ui/Tabs/index.js b/src/components/ui/Tabs/index.js new file mode 100644 index 000000000..e4adb62c7 --- /dev/null +++ b/src/components/ui/Tabs/index.js | |||
@@ -0,0 +1,6 @@ | |||
1 | import Tabs from './Tabs'; | ||
2 | import TabItem from './TabItem'; | ||
3 | |||
4 | export default Tabs; | ||
5 | |||
6 | export { TabItem }; | ||