TabPane.js
1.65 KB
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
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import classNames from 'classnames';
export default function TabPane(_ref) {
var prefixCls = _ref.prefixCls,
forceRender = _ref.forceRender,
className = _ref.className,
style = _ref.style,
id = _ref.id,
active = _ref.active,
animated = _ref.animated,
destroyInactiveTabPane = _ref.destroyInactiveTabPane,
tabKey = _ref.tabKey,
children = _ref.children;
var _React$useState = React.useState(forceRender),
_React$useState2 = _slicedToArray(_React$useState, 2),
visited = _React$useState2[0],
setVisited = _React$useState2[1];
React.useEffect(function () {
if (active) {
setVisited(true);
} else if (destroyInactiveTabPane) {
setVisited(false);
}
}, [active, destroyInactiveTabPane]);
var mergedStyle = {};
if (!active) {
if (animated) {
mergedStyle.visibility = 'hidden';
mergedStyle.height = 0;
mergedStyle.overflowY = 'hidden';
} else {
mergedStyle.display = 'none';
}
}
return /*#__PURE__*/React.createElement("div", {
id: id && "".concat(id, "-panel-").concat(tabKey),
role: "tabpanel",
tabIndex: active ? 0 : -1,
"aria-labelledby": id && "".concat(id, "-tab-").concat(tabKey),
"aria-hidden": !active,
style: _objectSpread(_objectSpread({}, mergedStyle), style),
className: classNames("".concat(prefixCls, "-tabpane"), active && "".concat(prefixCls, "-tabpane-active"), className)
}, (active || visited || forceRender) && children);
}