"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof3 = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _classnames = _interopRequireDefault(require("classnames")); var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState")); var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile")); var _react = _interopRequireWildcard(require("react")); var React = _react; var _TabContext = _interopRequireDefault(require("./TabContext")); var _Wrapper = _interopRequireDefault(require("./TabNavList/Wrapper")); var _TabPanelList = _interopRequireDefault(require("./TabPanelList")); var _useAnimateConfig = _interopRequireDefault(require("./hooks/useAnimateConfig")); var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "more", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicator"]; // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /** * Should added antd: * - type * * Removed: * - onNextClick * - onPrevClick * - keyboard */ // Used for accessibility var uuid = 0; var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) { var id = props.id, _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? 'rc-tabs' : _props$prefixCls, className = props.className, items = props.items, direction = props.direction, activeKey = props.activeKey, defaultActiveKey = props.defaultActiveKey, editable = props.editable, animated = props.animated, _props$tabPosition = props.tabPosition, tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition, tabBarGutter = props.tabBarGutter, tabBarStyle = props.tabBarStyle, tabBarExtraContent = props.tabBarExtraContent, locale = props.locale, more = props.more, destroyInactiveTabPane = props.destroyInactiveTabPane, renderTabBar = props.renderTabBar, onChange = props.onChange, onTabClick = props.onTabClick, onTabScroll = props.onTabScroll, getPopupContainer = props.getPopupContainer, popupClassName = props.popupClassName, indicator = props.indicator, restProps = (0, _objectWithoutProperties2.default)(props, _excluded); var tabs = React.useMemo(function () { return (items || []).filter(function (item) { return item && (0, _typeof2.default)(item) === 'object' && 'key' in item; }); }, [items]); var rtl = direction === 'rtl'; var mergedAnimated = (0, _useAnimateConfig.default)(animated); // ======================== Mobile ======================== var _useState = (0, _react.useState)(false), _useState2 = (0, _slicedToArray2.default)(_useState, 2), mobile = _useState2[0], setMobile = _useState2[1]; (0, _react.useEffect)(function () { // Only update on the client side setMobile((0, _isMobile.default)()); }, []); // ====================== Active Key ====================== var _useMergedState = (0, _useMergedState5.default)(function () { var _tabs$; return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key; }, { value: activeKey, defaultValue: defaultActiveKey }), _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2), mergedActiveKey = _useMergedState2[0], setMergedActiveKey = _useMergedState2[1]; var _useState3 = (0, _react.useState)(function () { return tabs.findIndex(function (tab) { return tab.key === mergedActiveKey; }); }), _useState4 = (0, _slicedToArray2.default)(_useState3, 2), activeIndex = _useState4[0], setActiveIndex = _useState4[1]; // Reset active key if not exist anymore (0, _react.useEffect)(function () { var newActiveIndex = tabs.findIndex(function (tab) { return tab.key === mergedActiveKey; }); if (newActiveIndex === -1) { var _tabs$newActiveIndex; newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1)); setMergedActiveKey((_tabs$newActiveIndex = tabs[newActiveIndex]) === null || _tabs$newActiveIndex === void 0 ? void 0 : _tabs$newActiveIndex.key); } setActiveIndex(newActiveIndex); }, [tabs.map(function (tab) { return tab.key; }).join('_'), mergedActiveKey, activeIndex]); // ===================== Accessibility ==================== var _useMergedState3 = (0, _useMergedState5.default)(null, { value: id }), _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2), mergedId = _useMergedState4[0], setMergedId = _useMergedState4[1]; // Async generate id to avoid ssr mapping failed (0, _react.useEffect)(function () { if (!id) { setMergedId("rc-tabs-".concat(process.env.NODE_ENV === 'test' ? 'test' : uuid)); uuid += 1; } }, []); // ======================== Events ======================== function onInternalTabClick(key, e) { onTabClick === null || onTabClick === void 0 || onTabClick(key, e); var isActiveChanged = key !== mergedActiveKey; setMergedActiveKey(key); if (isActiveChanged) { onChange === null || onChange === void 0 || onChange(key); } } // ======================== Render ======================== var sharedProps = { id: mergedId, activeKey: mergedActiveKey, animated: mergedAnimated, tabPosition: tabPosition, rtl: rtl, mobile: mobile }; var tabNavBarProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedProps), {}, { editable: editable, locale: locale, more: more, tabBarGutter: tabBarGutter, onTabClick: onInternalTabClick, onTabScroll: onTabScroll, extra: tabBarExtraContent, style: tabBarStyle, panes: null, getPopupContainer: getPopupContainer, popupClassName: popupClassName, indicator: indicator }); return /*#__PURE__*/React.createElement(_TabContext.default.Provider, { value: { tabs: tabs, prefixCls: prefixCls } }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({ ref: ref, id: id, className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-mobile"), mobile), "".concat(prefixCls, "-editable"), editable), "".concat(prefixCls, "-rtl"), rtl), className) }, restProps), /*#__PURE__*/React.createElement(_Wrapper.default, (0, _extends2.default)({}, tabNavBarProps, { renderTabBar: renderTabBar })), /*#__PURE__*/React.createElement(_TabPanelList.default, (0, _extends2.default)({ destroyInactiveTabPane: destroyInactiveTabPane }, sharedProps, { animated: mergedAnimated })))); }); if (process.env.NODE_ENV !== 'production') { Tabs.displayName = 'Tabs'; } var _default = exports.default = Tabs;