TabPane.js
2.07 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = TabPane;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
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 = (0, _slicedToArray2.default)(_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: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedStyle), style),
className: (0, _classnames.default)("".concat(prefixCls, "-tabpane"), active && "".concat(prefixCls, "-tabpane-active"), className)
}, (active || visited || forceRender) && children);
}