/
TabBarSwipeableTabs.js
75 lines (69 loc) · 1.93 KB
/
TabBarSwipeableTabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
export default class TabBarSwipeableTabs extends React.Component {
render() {
const props = this.props;
const children = props.panels;
const activeKey = props.activeKey;
const rst = [];
const prefixCls = props.prefixCls;
const _flexWidth = `${1 / props.pageSize * 100}%`;
const tabStyle = {
WebkitFlexBasis: _flexWidth,
flexBasis: _flexWidth,
};
React.Children.forEach(children, (child) => {
if (!child) {
return;
}
const key = child.key;
const cls = classnames(`${prefixCls}-tab`, {
[`${prefixCls}-tab-active`]: activeKey === key,
[`${prefixCls}-tab-disabled`]: child.props.disabled,
});
let events = {};
if (!child.props.disabled) {
events = {
onClick: this.props.onTabClick.bind(this, key),
};
}
const refProps = {};
if (activeKey === key) {
refProps.ref = this.props.saveRef('activeTab');
}
const id = this.props.id ? `${key}-${this.props.id}` : key;
rst.push(<div
role="tab"
style={tabStyle}
aria-disabled={child.props.disabled ? 'true' : 'false'}
aria-selected={activeKey === key ? 'true' : 'false'}
tabIndex={activeKey === key ? 0 : -1}
{...events}
className={cls}
key={key}
id={`tab-${id}`}
aria-controls={`tabpane-${id}`}
{...refProps}
>
{child.props.tab}
</div>);
});
return rst;
}
}
TabBarSwipeableTabs.propTypes = {
pageSize: PropTypes.number,
onTabClick: PropTypes.func,
saveRef: PropTypes.func,
destroyInactiveTabPane: PropTypes.bool,
prefixCls: PropTypes.string,
activeKey: PropTypes.string,
panels: PropTypes.node,
id: PropTypes.string
};
TabBarSwipeableTabs.defaultProps = {
pageSize: 5,
onTabClick: () => {},
saveRef: () => {},
};