1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15 |
|
16 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
17 |
|
18 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
19 |
|
20 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
21 |
|
22 | var _react = _interopRequireWildcard(require("react"));
|
23 |
|
24 | var _classnames2 = _interopRequireDefault(require("classnames"));
|
25 |
|
26 | var _modalProvider = _interopRequireDefault(require("../../pro/lib/modal-provider"));
|
27 |
|
28 | var _enum = require("./enum");
|
29 |
|
30 | var _utils = require("./utils");
|
31 |
|
32 | var _enum2 = require("../_util/enum");
|
33 |
|
34 | var _configure = require("../configure");
|
35 |
|
36 | var _warning = _interopRequireDefault(require("../_util/warning"));
|
37 |
|
38 | var _TabBar = _interopRequireDefault(require("./TabBar"));
|
39 |
|
40 | var _icon = _interopRequireDefault(require("../icon"));
|
41 |
|
42 | var _TabContent = _interopRequireDefault(require("./TabContent"));
|
43 |
|
44 | var _isFlexSupported = _interopRequireDefault(require("../_util/isFlexSupported"));
|
45 |
|
46 | var _TabsContext = _interopRequireDefault(require("./TabsContext"));
|
47 |
|
48 | function isAnimated(animated) {
|
49 | return (0, _typeof2["default"])(animated) === 'object';
|
50 | }
|
51 |
|
52 | var TabsWithContext = function TabsWithContext(props) {
|
53 | var _classnames;
|
54 |
|
55 | var tabPosition = props.tabPosition,
|
56 | className = props.className,
|
57 | destroyInactiveTabPane = props.destroyInactiveTabPane,
|
58 | style = props.style,
|
59 | size = props.size,
|
60 | type = props.type,
|
61 | tabBarStyle = props.tabBarStyle,
|
62 | _props$inkBarStyle = props.inkBarStyle,
|
63 | inkBarStyle = _props$inkBarStyle === void 0 ? (0, _configure.getConfig)('tabsInkBarStyle') : _props$inkBarStyle,
|
64 | hideAdd = props.hideAdd,
|
65 | _props$animated = props.animated,
|
66 | animated = _props$animated === void 0 ? true : _props$animated,
|
67 | tabBarGutter = props.tabBarGutter,
|
68 | onEdit = props.onEdit,
|
69 | tabBarExtraContent = props.tabBarExtraContent,
|
70 | hideOnlyGroup = props.hideOnlyGroup,
|
71 | customizedCode = props.customizedCode,
|
72 | customizable = props.customizable,
|
73 | children = props.children,
|
74 | propDefaultActiveKey = props.defaultActiveKey,
|
75 | setCustomized = props.setCustomized,
|
76 | customized = props.customized,
|
77 | customizePrefixCls = props.prefixCls,
|
78 | propActiveKey = props.activeKey,
|
79 | onChange = props.onChange,
|
80 | onTabClick = props.onTabClick,
|
81 | onPrevClick = props.onPrevClick,
|
82 | onNextClick = props.onNextClick,
|
83 | keyboard = props.keyboard,
|
84 | restProps = (0, _objectWithoutProperties2["default"])(props, ["tabPosition", "className", "destroyInactiveTabPane", "style", "size", "type", "tabBarStyle", "inkBarStyle", "hideAdd", "animated", "tabBarGutter", "onEdit", "tabBarExtraContent", "hideOnlyGroup", "customizedCode", "customizable", "children", "defaultActiveKey", "setCustomized", "customized", "prefixCls", "activeKey", "onChange", "onTabClick", "onPrevClick", "onNextClick", "keyboard"]);
|
85 | var hasPropActiveKey = 'activeKey' in props;
|
86 | var prefixCls = (0, _configure.getPrefixCls)('tabs', customizePrefixCls);
|
87 | var saveCustomized = (0, _react.useCallback)(function (newCustomized) {
|
88 | if (customizable) {
|
89 | setCustomized(newCustomized);
|
90 |
|
91 | if (customizedCode) {
|
92 | var customizedSave = (0, _configure.getConfig)('customizedSave');
|
93 | customizedSave(customizedCode, newCustomized, 'Tabs');
|
94 | }
|
95 | }
|
96 | }, [customizable, customizedCode]);
|
97 |
|
98 | var _useMemo = (0, _react.useMemo)(function () {
|
99 | return (0, _utils.normalizePanes)(children, customized);
|
100 | }, [children, customized]),
|
101 | _useMemo2 = (0, _slicedToArray2["default"])(_useMemo, 2),
|
102 | totalPanelsMap = _useMemo2[0],
|
103 | groupedPanelsMap = _useMemo2[1];
|
104 |
|
105 | var defaultActiveKey = (0, _react.useMemo)(function () {
|
106 | var option = {
|
107 | activeKey: propActiveKey,
|
108 | defaultActiveKey: propDefaultActiveKey
|
109 | };
|
110 | return (0, _utils.getDefaultActiveKey)(totalPanelsMap, groupedPanelsMap, option);
|
111 | }, []);
|
112 | var actuallyDefaultActiveKey = (0, _react.useMemo)(function () {
|
113 | if (customized) {
|
114 | var $defaultActiveKey = customized.defaultActiveKey;
|
115 |
|
116 | if ($defaultActiveKey !== undefined) {
|
117 | if (onChange && $defaultActiveKey !== defaultActiveKey) {
|
118 | onChange($defaultActiveKey);
|
119 | }
|
120 |
|
121 | return $defaultActiveKey;
|
122 | }
|
123 | }
|
124 |
|
125 | return defaultActiveKey;
|
126 | }, [defaultActiveKey]);
|
127 |
|
128 | var _useState = (0, _react.useState)(actuallyDefaultActiveKey),
|
129 | _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
130 | activeKey = _useState2[0],
|
131 | setActiveKey = _useState2[1];
|
132 |
|
133 | var activeGroupKey = (0, _react.useMemo)(function () {
|
134 | if (groupedPanelsMap.size) {
|
135 | if (activeKey) {
|
136 | var _iteratorNormalCompletion = true;
|
137 | var _didIteratorError = false;
|
138 | var _iteratorError = undefined;
|
139 |
|
140 | try {
|
141 | for (var _iterator = groupedPanelsMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
142 | var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
|
143 | groupKey = _step$value[0],
|
144 | panelsMap = _step$value[1].panelsMap;
|
145 |
|
146 | var _iteratorNormalCompletion2 = true;
|
147 | var _didIteratorError2 = false;
|
148 | var _iteratorError2 = undefined;
|
149 |
|
150 | try {
|
151 | for (var _iterator2 = panelsMap[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
152 | var _step2$value = (0, _slicedToArray2["default"])(_step2.value, 1),
|
153 | panelKey = _step2$value[0];
|
154 |
|
155 | if (panelKey === activeKey) {
|
156 | return groupKey;
|
157 | }
|
158 | }
|
159 | } catch (err) {
|
160 | _didIteratorError2 = true;
|
161 | _iteratorError2 = err;
|
162 | } finally {
|
163 | try {
|
164 | if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
|
165 | _iterator2["return"]();
|
166 | }
|
167 | } finally {
|
168 | if (_didIteratorError2) {
|
169 | throw _iteratorError2;
|
170 | }
|
171 | }
|
172 | }
|
173 | }
|
174 | } catch (err) {
|
175 | _didIteratorError = true;
|
176 | _iteratorError = err;
|
177 | } finally {
|
178 | try {
|
179 | if (!_iteratorNormalCompletion && _iterator["return"] != null) {
|
180 | _iterator["return"]();
|
181 | }
|
182 | } finally {
|
183 | if (_didIteratorError) {
|
184 | throw _iteratorError;
|
185 | }
|
186 | }
|
187 | }
|
188 | }
|
189 |
|
190 | return (0, _utils.getDefaultGroupKey)(groupedPanelsMap);
|
191 | }
|
192 | }, [groupedPanelsMap, activeKey]);
|
193 | var currentGroup = activeGroupKey && groupedPanelsMap.get(activeGroupKey);
|
194 | var currentPanelMap = currentGroup ? currentGroup.panelsMap : totalPanelsMap;
|
195 | var changeActiveKey = (0, _react.useCallback)(function (key, byGroup) {
|
196 | if (activeKey !== key) {
|
197 | if (!byGroup && currentGroup) {
|
198 | currentGroup.lastActiveKey = key;
|
199 | }
|
200 |
|
201 | if (!hasPropActiveKey) {
|
202 | setActiveKey(key);
|
203 | }
|
204 |
|
205 | if (onChange) {
|
206 | onChange(key);
|
207 | }
|
208 | }
|
209 | }, [hasPropActiveKey, activeKey, onChange, currentGroup]);
|
210 | var value = {
|
211 | defaultActiveKey: propDefaultActiveKey,
|
212 | actuallyDefaultActiveKey: actuallyDefaultActiveKey,
|
213 | propActiveKey: propActiveKey,
|
214 | prefixCls: prefixCls,
|
215 | keyboard: keyboard,
|
216 | tabBarPosition: tabPosition,
|
217 | hideOnlyGroup: hideOnlyGroup,
|
218 | customizable: customizable,
|
219 | customized: customized,
|
220 | saveCustomized: saveCustomized,
|
221 | activeKey: activeKey,
|
222 | activeGroupKey: activeGroupKey,
|
223 | changeActiveKey: changeActiveKey,
|
224 | groupedPanelsMap: groupedPanelsMap,
|
225 | currentPanelMap: currentPanelMap,
|
226 | totalPanelsMap: totalPanelsMap,
|
227 | onTabClick: onTabClick,
|
228 | onPrevClick: onPrevClick,
|
229 | onNextClick: onNextClick,
|
230 | children: children
|
231 | };
|
232 | var inkBarAnimated = isAnimated(animated) ? animated.inkBar : animated;
|
233 | var tabPaneAnimated = isAnimated(animated) ? animated.tabPane : animated;
|
234 |
|
235 | if (type !== _enum.TabsType.line) {
|
236 | tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false;
|
237 | }
|
238 |
|
239 | var isCard = type === _enum.TabsType.card || type === _enum.TabsType['editable-card'];
|
240 | (0, _warning["default"])(!(isCard && (size === _enum2.Size.small || size === _enum2.Size.large)), 'Tabs[type=card|editable-card] doesn\'t have small or large size, it\'s by designed.');
|
241 | var createNewTab = (0, _react.useCallback)(function (e) {
|
242 | if (onEdit) {
|
243 | onEdit(e, 'add');
|
244 | }
|
245 | }, [onEdit]);
|
246 | var removeTab = (0, _react.useCallback)(function (targetKey, e) {
|
247 | e.stopPropagation();
|
248 |
|
249 | if (!targetKey) {
|
250 | return;
|
251 | }
|
252 |
|
253 | if (onEdit) {
|
254 | onEdit(targetKey, 'remove');
|
255 | }
|
256 | }, [onEdit]);
|
257 | (0, _react.useEffect)(function () {
|
258 | if (hasPropActiveKey) {
|
259 | if (propActiveKey !== activeKey) {
|
260 | setActiveKey(propActiveKey);
|
261 | }
|
262 | } else if (activeKey === undefined || !totalPanelsMap.has(activeKey)) {
|
263 | setActiveKey((0, _utils.getDefaultActiveKeyInGroup)(currentPanelMap));
|
264 | }
|
265 | }, [hasPropActiveKey, propActiveKey, activeKey, totalPanelsMap, currentPanelMap]);
|
266 | var cls = (0, _classnames2["default"])(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), "".concat(prefixCls, "-").concat(type), (0, _utils.isVertical)(tabPosition) ? "".concat(prefixCls, "-vertical") : "".concat(prefixCls, "-horizontal"), (_classnames = {}, (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-").concat(size), !!size), (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-card"), isCard), (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-no-animation"), !tabPaneAnimated), (0, _defineProperty2["default"])(_classnames, 'no-flex', !(0, _isFlexSupported["default"])()), _classnames), className);
|
267 | var extraContent = !hideAdd && type === _enum.TabsType['editable-card'] ?
|
268 | _react["default"].createElement("span", {
|
269 | key: "tabBarExtraContent"
|
270 | }, _react["default"].createElement(_icon["default"], {
|
271 | type: "add",
|
272 | className: "".concat(prefixCls, "-new-tab"),
|
273 | onClick: createNewTab
|
274 | }), tabBarExtraContent) : tabBarExtraContent;
|
275 | var tabBarProps = {
|
276 | inkBarAnimated: inkBarAnimated,
|
277 | extraContent: extraContent,
|
278 | style: tabBarStyle,
|
279 | tabBarGutter: tabBarGutter,
|
280 | type: type,
|
281 | onRemoveTab: removeTab,
|
282 | inkBarStyle: inkBarStyle
|
283 | };
|
284 | var tabContentProps = {
|
285 | animatedWithMargin: true,
|
286 | animated: tabPaneAnimated,
|
287 | destroyInactiveTabPane: destroyInactiveTabPane
|
288 | };
|
289 | var contents = [_react["default"].createElement(_TabBar["default"], (0, _extends2["default"])({
|
290 | key: "tabBar"
|
291 | }, tabBarProps)), _react["default"].createElement(_TabContent["default"], (0, _extends2["default"])({
|
292 | key: "tabContent"
|
293 | }, tabContentProps))];
|
294 |
|
295 | if (tabPosition === _enum.TabsPosition.bottom) {
|
296 | contents.reverse();
|
297 | }
|
298 |
|
299 | var tabs = _react["default"].createElement("div", (0, _extends2["default"])({
|
300 | className: cls,
|
301 | style: style
|
302 | }, (0, _utils.getDataAttr)(restProps)), contents);
|
303 |
|
304 | return _react["default"].createElement(_TabsContext["default"].Provider, {
|
305 | value: value
|
306 | }, customizable ? _react["default"].createElement(_modalProvider["default"], null, tabs) : tabs);
|
307 | };
|
308 |
|
309 | TabsWithContext.displayName = 'TabsWithContext';
|
310 | var _default = TabsWithContext;
|
311 | exports["default"] = _default;
|
312 |
|