1 | import React from 'react';
|
2 | import warning from 'warning';
|
3 | import PropTypes from 'prop-types';
|
4 | import { isVertical } from './utils';
|
5 |
|
6 | export default class TabBarTabsNode extends React.Component {
|
7 | constructor(props){
|
8 | super(props);
|
9 | }
|
10 | onTabClick(key) {
|
11 | this.props.onTabClick(key);
|
12 | }
|
13 | render() {
|
14 | const {
|
15 | panels: children,
|
16 | activeKey,
|
17 | clsPrefix,
|
18 | tabBarGutter,
|
19 | saveRef,
|
20 | tabBarPosition,
|
21 | renderTabBarNode,
|
22 | direction,
|
23 | } = this.props;
|
24 | const rst = [];
|
25 |
|
26 | React.Children.forEach(children, (child, index) => {
|
27 | if (!child) {
|
28 | return;
|
29 | }
|
30 | const key = child.key;
|
31 | let cls = activeKey === key ? `${clsPrefix}-tab-active` : '';
|
32 | cls += ` ${clsPrefix}-tab`;
|
33 | let events = {};
|
34 | if (child.props.disabled) {
|
35 | cls += ` ${clsPrefix}-tab-disabled`;
|
36 | } else {
|
37 | events = {
|
38 | onClick: this.onTabClick.bind(this, key),
|
39 | };
|
40 | }
|
41 | const ref = {};
|
42 | if (activeKey === key) {
|
43 | ref.ref = saveRef('activeTab');
|
44 | }
|
45 |
|
46 | const gutter = tabBarGutter && index === children.length - 1 ? 0 : tabBarGutter;
|
47 |
|
48 | const marginProperty = direction === 'rtl' ? 'marginLeft' : 'marginRight';
|
49 | const style = {
|
50 | [isVertical(tabBarPosition) ? 'marginBottom' : marginProperty]: gutter,
|
51 | };
|
52 | warning('tab' in child.props, 'There must be `tab` property on children of Tabs.');
|
53 |
|
54 | let node = (
|
55 | <div
|
56 | role="tab"
|
57 | aria-disabled={child.props.disabled ? 'true' : 'false'}
|
58 | aria-selected={activeKey === key ? 'true' : 'false'}
|
59 | {...events}
|
60 | className={cls}
|
61 | key={key}
|
62 | style={style}
|
63 | {...ref}
|
64 | nid={child.props.nid}
|
65 | uitype={child.props.uitype}
|
66 | nodekey={key}
|
67 | >
|
68 | {child.props.tab}
|
69 | </div>
|
70 | );
|
71 |
|
72 | if (renderTabBarNode) {
|
73 | node = renderTabBarNode(node);
|
74 | }
|
75 |
|
76 | rst.push(node);
|
77 | });
|
78 |
|
79 | return (
|
80 | <div ref={saveRef('navTabsContainer')}>
|
81 | {rst}
|
82 | </div>
|
83 | );
|
84 | }
|
85 | }
|
86 |
|
87 | TabBarTabsNode.propTypes = {
|
88 | activeKey: PropTypes.string,
|
89 | panels: PropTypes.node,
|
90 | clsPrefix: PropTypes.string,
|
91 | tabBarGutter: PropTypes.number,
|
92 | onTabClick: PropTypes.func,
|
93 | saveRef: PropTypes.func,
|
94 | renderTabBarNode: PropTypes.func,
|
95 | tabBarPosition: PropTypes.string,
|
96 | direction: PropTypes.string,
|
97 | };
|
98 |
|
99 | TabBarTabsNode.defaultProps = {
|
100 | panels: [],
|
101 | clsPrefix: [],
|
102 | tabBarGutter: null,
|
103 | onTabClick: () => { },
|
104 | saveRef: () => { },
|
105 | };
|