1 |
|
2 |
|
3 |
|
4 |
|
5 | import React from 'react';
|
6 | import classnames from 'classnames';
|
7 | import {
|
8 | getTransformByIndex,
|
9 | getActiveIndex,
|
10 | getTransformPropValue,
|
11 | getMarginStyle,
|
12 | } from './utils';
|
13 | import PropTypes from 'prop-types';
|
14 | import createClass from 'create-react-class';
|
15 |
|
16 | const TabContent = createClass({
|
17 | propTypes: {
|
18 | animated: PropTypes.bool,
|
19 | animatedWithMargin: PropTypes.bool,
|
20 | clsPrefix: PropTypes.string,
|
21 | children: PropTypes.any,
|
22 | activeKey: PropTypes.string,
|
23 | style: PropTypes.any,
|
24 | tabBarPosition: PropTypes.string,
|
25 | },
|
26 | getDefaultProps() {
|
27 | return {
|
28 | animated: true,
|
29 | };
|
30 | },
|
31 | getTabPanes() {
|
32 | const props = this.props;
|
33 | const activeKey = props.activeKey;
|
34 | const children = props.children;
|
35 | const newChildren = [];
|
36 |
|
37 | React.Children.forEach(children, (child) => {
|
38 | if (!child) {
|
39 | return;
|
40 | }
|
41 | const key = child.key;
|
42 | const active = activeKey === key;
|
43 | newChildren.push(React.cloneElement(child, {
|
44 | active,
|
45 | destroyInactiveTabPane: props.destroyInactiveTabPane,
|
46 | rootclsPrefix: props.clsPrefix,
|
47 | }));
|
48 | });
|
49 |
|
50 | return newChildren;
|
51 | },
|
52 | render() {
|
53 | const { props } = this;
|
54 | const {
|
55 | clsPrefix, children, activeKey,
|
56 | tabBarPosition, animated, animatedWithMargin,
|
57 | } = props;
|
58 | let { style } = props;
|
59 | const classes = classnames({
|
60 | [`${clsPrefix}-content`]: true,
|
61 | [animated ?
|
62 | `${clsPrefix}-content-animated` :
|
63 | `${clsPrefix}-content-no-animated`]: true,
|
64 | });
|
65 | if (animated) {
|
66 | const activeIndex = getActiveIndex(children, activeKey);
|
67 | if (activeIndex !== -1) {
|
68 | const animatedStyle = animatedWithMargin ?
|
69 | getMarginStyle(activeIndex, tabBarPosition) :
|
70 | getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition));
|
71 | style = {
|
72 | ...style,
|
73 | ...animatedStyle,
|
74 | };
|
75 | } else {
|
76 | style = {
|
77 | ...style,
|
78 | display: 'none',
|
79 | };
|
80 | }
|
81 | }
|
82 | return (
|
83 | <div
|
84 | className={classes}
|
85 | style={style}
|
86 | >
|
87 | {this.getTabPanes()}
|
88 | </div>
|
89 | );
|
90 | },
|
91 | });
|
92 |
|
93 | export default TabContent;
|