acud 0.0.60

package/lib/tabs/src/TabNavList/index.js

@@ -0,0 +1,609 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+
+var _OutlinedRight = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedRight"));
+
+var _OutlinedLeft = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLeft"));
+
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+
+var _useRaf = _interopRequireWildcard(require("../hooks/useRaf"));
+
+var _TabNode = _interopRequireDefault(require("./TabNode"));
+
+var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
+
+var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));
+
+var _TabContext = _interopRequireDefault(require("../TabContext"));
+
+var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));
+
+var _useRefs3 = _interopRequireDefault(require("../hooks/useRefs"));
+
+var _AddButton = _interopRequireDefault(require("./AddButton"));
+
+var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ExtraContent = function ExtraContent(_ref) {
+  var position = _ref.position,
+      prefixCls = _ref.prefixCls,
+      extra = _ref.extra;
+  if (!extra) return null;
+  var content;
+  var assertExtra = extra;
+
+  if (position === 'right') {
+    content = assertExtra.right || !assertExtra.left && assertExtra || null;
+  }
+
+  if (position === 'left') {
+    content = assertExtra.left || null;
+  }
+
+  return content ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-extra-content")
+  }, content) : null;
+};
+
+function TabNavList(props, ref) {
+  var _classNames;
+
+  var _React$useContext = React.useContext(_TabContext["default"]),
+      prefixCls = _React$useContext.prefixCls,
+      tabs = _React$useContext.tabs;
+
+  var className = props.className,
+      style = props.style,
+      id = props.id,
+      animated = props.animated,
+      activeKey = props.activeKey,
+      rtl = props.rtl,
+      extra = props.extra,
+      editable = props.editable,
+      locale = props.locale,
+      tabPosition = props.tabPosition,
+      tabBarGutter = props.tabBarGutter,
+      mobile = props.mobile,
+      children = props.children,
+      onTabClick = props.onTabClick,
+      onTabScroll = props.onTabScroll,
+      _onEditTabNav = props.onEditTabNav;
+  var tabsWrapperRef = (0, React.useRef)();
+  var tabListRef = (0, React.useRef)();
+  var operationsRef = (0, React.useRef)();
+  var innerAddButtonRef = (0, React.useRef)();
+
+  var _useRefs = (0, _useRefs3["default"])(),
+      _useRefs2 = (0, _slicedToArray2["default"])(_useRefs, 2),
+      getBtnRef = _useRefs2[0],
+      removeBtnRef = _useRefs2[1];
+
+  var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
+
+  var _useSyncState = (0, _useSyncState5["default"])(0, function (next, prev) {
+    if (tabPositionTopOrBottom && onTabScroll) {
+      onTabScroll({
+        direction: next > prev ? 'left' : 'right'
+      });
+    }
+  }),
+      _useSyncState2 = (0, _slicedToArray2["default"])(_useSyncState, 2),
+      transformLeft = _useSyncState2[0],
+      setTransformLeft = _useSyncState2[1];
+
+  var _useSyncState3 = (0, _useSyncState5["default"])(0, function (next, prev) {
+    if (!tabPositionTopOrBottom && onTabScroll) {
+      onTabScroll({
+        direction: next > prev ? 'top' : 'bottom'
+      });
+    }
+  }),
+      _useSyncState4 = (0, _slicedToArray2["default"])(_useSyncState3, 2),
+      transformTop = _useSyncState4[0],
+      setTransformTop = _useSyncState4[1];
+
+  var _useState = (0, React.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      wrapperScrollWidth = _useState2[0],
+      setWrapperScrollWidth = _useState2[1];
+
+  var _useState3 = (0, React.useState)(0),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      wrapperScrollHeight = _useState4[0],
+      setWrapperScrollHeight = _useState4[1];
+
+  var _useState5 = (0, React.useState)(0),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      wrapperContentWidth = _useState6[0],
+      setWrapperContentWidth = _useState6[1];
+
+  var _useState7 = (0, React.useState)(0),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      wrapperContentHeight = _useState8[0],
+      setWrapperContentHeight = _useState8[1];
+
+  var _useState9 = (0, React.useState)(null),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      wrapperWidth = _useState10[0],
+      setWrapperWidth = _useState10[1];
+
+  var _useState11 = (0, React.useState)(null),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      wrapperHeight = _useState12[0],
+      setWrapperHeight = _useState12[1];
+
+  var _useState13 = (0, React.useState)(0),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      addWidth = _useState14[0],
+      setAddWidth = _useState14[1];
+
+  var _useState15 = (0, React.useState)(0),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      addHeight = _useState16[0],
+      setAddHeight = _useState16[1];
+
+  var _useRafState = (0, _useRaf.useRafState)(new Map()),
+      _useRafState2 = (0, _slicedToArray2["default"])(_useRafState, 2),
+      tabSizes = _useRafState2[0],
+      setTabSizes = _useRafState2[1];
+
+  var tabOffsets = (0, _useOffsets["default"])(tabs, tabSizes, wrapperScrollWidth); // ========================== Util =========================
+
+  var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
+  var transformMin = 0;
+  var transformMax = 0;
+
+  if (!tabPositionTopOrBottom) {
+    transformMin = Math.min(0, wrapperHeight - wrapperScrollHeight);
+    transformMax = 0;
+  } else if (rtl) {
+    transformMin = 0;
+    transformMax = Math.max(0, wrapperScrollWidth - wrapperWidth);
+  } else {
+    transformMin = Math.min(0, wrapperWidth - wrapperScrollWidth);
+    transformMax = 0;
+  }
+
+  function alignInRange(value) {
+    if (value < transformMin) {
+      return transformMin;
+    }
+
+    if (value > transformMax) {
+      return transformMax;
+    }
+
+    return value;
+  } // ========================= Mobile ========================
+
+
+  var touchMovingRef = (0, React.useRef)();
+
+  var _useState17 = (0, React.useState)(),
+      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+      lockAnimation = _useState18[0],
+      setLockAnimation = _useState18[1];
+
+  function doLockAnimation() {
+    setLockAnimation(Date.now());
+  }
+
+  function clearTouchMoving() {
+    window.clearTimeout(touchMovingRef.current);
+  }
+
+  (0, _useTouchMove["default"])(tabsWrapperRef, function (offsetX, offsetY) {
+    function doMove(setState, offset) {
+      setState(function (value) {
+        var newValue = alignInRange(value + offset);
+        return newValue;
+      });
+    }
+
+    if (tabPositionTopOrBottom) {
+      // Skip scroll if place is enough
+      if (wrapperWidth >= wrapperScrollWidth) {
+        return false;
+      }
+
+      doMove(setTransformLeft, offsetX);
+    } else {
+      if (wrapperHeight >= wrapperScrollHeight) {
+        return false;
+      }
+
+      doMove(setTransformTop, offsetY);
+    }
+
+    clearTouchMoving();
+    doLockAnimation();
+    return true;
+  });
+  (0, React.useEffect)(function () {
+    clearTouchMoving();
+
+    if (lockAnimation) {
+      touchMovingRef.current = window.setTimeout(function () {
+        setLockAnimation(0);
+      }, 100);
+    }
+
+    return clearTouchMoving;
+  }, [lockAnimation]); // ========================= Scroll ========================
+
+  function scrollToTab() {
+    var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
+    var tabOffset = tabOffsets.get(key) || {
+      width: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0
+    };
+
+    if (tabPositionTopOrBottom) {
+      // ============ Align with top & bottom ============
+      var newTransform = transformLeft; // RTL
+
+      if (rtl) {
+        if (tabOffset.right < transformLeft) {
+          newTransform = tabOffset.right;
+        } else if (tabOffset.right + tabOffset.width > transformLeft + wrapperWidth) {
+          newTransform = tabOffset.right + tabOffset.width - wrapperWidth;
+        }
+      } // LTR
+      else if (tabOffset.left < -transformLeft) {
+        newTransform = -tabOffset.left;
+      } else if (tabOffset.left + tabOffset.width > -transformLeft + wrapperWidth) {
+        newTransform = -(tabOffset.left + tabOffset.width - wrapperWidth);
+      }
+
+      setTransformTop(0);
+      setTransformLeft(alignInRange(newTransform));
+    } else {
+      // ============ Align with left & right ============
+      var _newTransform = transformTop;
+
+      if (tabOffset.top < -transformTop) {
+        _newTransform = -tabOffset.top;
+      } else if (tabOffset.top + tabOffset.height > -transformTop + wrapperHeight) {
+        _newTransform = -(tabOffset.top + tabOffset.height - wrapperHeight);
+      }
+
+      setTransformLeft(0);
+      setTransformTop(alignInRange(_newTransform));
+    }
+  } // ========================== Tab ==========================
+  // Render tab node & collect tab offset
+
+
+  var _useVisibleRange = (0, _useVisibleRange3["default"])(tabOffsets, {
+    width: wrapperWidth,
+    height: wrapperHeight,
+    left: transformLeft,
+    top: transformTop
+  }, {
+    width: wrapperContentWidth,
+    height: wrapperContentHeight
+  }, {
+    width: addWidth,
+    height: addHeight
+  }, (0, _extends2["default"])((0, _extends2["default"])({}, props), {
+    tabs: tabs
+  })),
+      _useVisibleRange2 = (0, _slicedToArray2["default"])(_useVisibleRange, 2),
+      visibleStart = _useVisibleRange2[0],
+      visibleEnd = _useVisibleRange2[1];
+
+  var tabNodes = tabs.map(function (tab, index) {
+    var key = tab.key;
+    return /*#__PURE__*/React.createElement(_TabNode["default"], {
+      id: id,
+      prefixCls: prefixCls,
+      key: key,
+      rtl: rtl,
+      tab: tab,
+      closable: tab.closable,
+      editable: editable,
+      active: key === activeKey && tabSizes.size > 1,
+      tabPosition: tabPosition,
+      tabBarGutter: tabBarGutter,
+      renderWrapper: children,
+      removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
+      ref: getBtnRef(key),
+      onClick: function onClick(e) {
+        onTabClick(key, e);
+      },
+      onRemove: function onRemove() {
+        removeBtnRef(key);
+      },
+      onFocus: function onFocus() {
+        scrollToTab(key);
+        doLockAnimation(); // Focus element will make scrollLeft change which we should reset back
+
+        if (!rtl) {
+          tabsWrapperRef.current.scrollLeft = 0;
+        }
+
+        tabsWrapperRef.current.scrollTop = 0;
+      },
+      onEditTabNav: function onEditTabNav(tabContent) {
+        var _tabs = (0, _cloneDeep["default"])(tabs);
+
+        _tabs[index].tab = tabContent;
+        _onEditTabNav && _onEditTabNav(_tabs);
+      }
+    });
+  });
+  var onListHolderResize = (0, _useRaf["default"])(function () {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j; // Update wrapper records
+
+
+    var offsetWidth = ((_a = tabsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    var offsetHeight = ((_b = tabsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+    var newAddWidth = ((_c = innerAddButtonRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth) || 0;
+    var newAddHeight = ((_d = innerAddButtonRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
+    var newOperationWidth = ((_e = operationsRef.current) === null || _e === void 0 ? void 0 : _e.offsetWidth) || 0;
+    var newOperationHeight = ((_f = operationsRef.current) === null || _f === void 0 ? void 0 : _f.offsetHeight) || 0;
+    setWrapperWidth(offsetWidth);
+    setWrapperHeight(offsetHeight);
+    setAddWidth(newAddWidth);
+    setAddHeight(newAddHeight);
+    var newWrapperScrollWidth = (((_g = tabListRef.current) === null || _g === void 0 ? void 0 : _g.offsetWidth) || 0) - newAddWidth;
+    var newWrapperScrollHeight = (((_h = tabListRef.current) === null || _h === void 0 ? void 0 : _h.offsetHeight) || 0) - newAddHeight;
+    setWrapperScrollWidth(newWrapperScrollWidth);
+    setWrapperScrollHeight(newWrapperScrollHeight);
+    var isOperationHidden = (_j = operationsRef.current) === null || _j === void 0 ? void 0 : _j.className.includes(operationsHiddenClassName);
+    setWrapperContentWidth(newWrapperScrollWidth - (isOperationHidden ? 0 : newOperationWidth));
+    setWrapperContentHeight(newWrapperScrollHeight - (isOperationHidden ? 0 : newOperationHeight)); // Update buttons records
+
+    setTabSizes(function () {
+      var newSizes = new Map();
+      tabs.forEach(function (_ref2) {
+        var key = _ref2.key;
+        var btnNode = getBtnRef(key).current;
+
+        if (btnNode) {
+          newSizes.set(key, {
+            width: btnNode.offsetWidth,
+            height: btnNode.offsetHeight,
+            left: btnNode.offsetLeft,
+            top: btnNode.offsetTop
+          });
+        }
+      });
+      return newSizes;
+    });
+  }); // ======================== Dropdown =======================
+
+  var startHiddenTabs = tabs.slice(0, visibleStart);
+  var endHiddenTabs = tabs.slice(visibleEnd + 1);
+  var hiddenTabs = [].concat((0, _toConsumableArray2["default"])(startHiddenTabs), (0, _toConsumableArray2["default"])(endHiddenTabs)); // =================== Link & Operations ===================
+
+  var _useState19 = (0, React.useState)(),
+      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
+      inkStyle = _useState20[0],
+      setInkStyle = _useState20[1];
+
+  var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink
+
+  var inkBarRafRef = (0, React.useRef)();
+
+  function cleanInkBarRaf() {
+    _raf["default"].cancel(inkBarRafRef.current);
+  }
+
+  (0, React.useEffect)(function () {
+    var newInkStyle = {};
+
+    if (activeTabOffset) {
+      if (tabPositionTopOrBottom) {
+        if (rtl) {
+          newInkStyle.right = activeTabOffset.right;
+        } else {
+          newInkStyle.left = activeTabOffset.left;
+        }
+
+        newInkStyle.width = activeTabOffset.width;
+      } else {
+        newInkStyle.top = activeTabOffset.top;
+        newInkStyle.height = activeTabOffset.height;
+      }
+    }
+
+    cleanInkBarRaf();
+    inkBarRafRef.current = (0, _raf["default"])(function () {
+      setInkStyle(newInkStyle);
+    });
+    return cleanInkBarRaf;
+  }, [activeTabOffset, tabPositionTopOrBottom, rtl]); // ========================= Effect ========================
+
+  (0, React.useEffect)(function () {
+    scrollToTab();
+  }, [activeKey, activeTabOffset, tabOffsets, tabPositionTopOrBottom]); // Should recalculate when rtl changed
+
+  (0, React.useEffect)(function () {
+    onListHolderResize();
+  }, [rtl, tabBarGutter, activeKey, tabs.map(function (tab) {
+    return tab.key;
+  }).join('_')]); // ========================= Render ========================
+
+  var hasDropdown = !!hiddenTabs.length;
+  var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
+  var pingLeft;
+  var pingRight;
+  var pingTop;
+  var pingBottom;
+
+  if (tabPositionTopOrBottom) {
+    if (rtl) {
+      pingRight = transformLeft > 0;
+      pingLeft = transformLeft + wrapperWidth < wrapperScrollWidth;
+    } else {
+      pingLeft = transformLeft < 0;
+      pingRight = -transformLeft + wrapperWidth < wrapperScrollWidth;
+    }
+  } else {
+    pingTop = transformTop < 0;
+    pingBottom = -transformTop + wrapperHeight < wrapperScrollHeight;
+  } // operations
+
+
+  var _useState21 = (0, React.useState)(null),
+      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+      scrolledKey = _useState22[0],
+      setScrolledKey = _useState22[1];
+
+  var popupId = "".concat(id, "-more-popup");
+  var moreStyle = (0, _defineProperty2["default"])({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
+  moreStyle.cursor = 'pointer';
+
+  if (!hiddenTabs.length) {
+    moreStyle.visibility = 'hidden';
+    moreStyle.order = 1;
+  }
+
+  var onMoreClick = function onMoreClick(type) {
+    var step = tabs.length - tabs.length || 1;
+    var index = (0, _findIndex["default"])(tabs, function (tab) {
+      return tab.key === scrolledKey;
+    });
+
+    if (type === 'left') {
+      if (index <= 0) {
+        return;
+      }
+
+      var targetIndex = index - step * 2 <= 0 ? 0 : index - step * 2;
+      scrollToTab(tabs[targetIndex].key);
+      setScrolledKey(tabs[targetIndex].key);
+    } else {
+      if (index >= tabs.length - step) {
+        return;
+      }
+
+      var _targetIndex = index + step * 2 > tabs.length - 1 ? tabs.length - 1 : index + step * 2;
+
+      scrollToTab(tabs[_targetIndex].key);
+      setScrolledKey(tabs[_targetIndex].key);
+    }
+  };
+
+  var moreLeftNode = mobile ? null : /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(prefixCls, "-nav-more left"),
+    style: moreStyle,
+    tabIndex: -1,
+    "aria-hidden": "true",
+    "aria-haspopup": "listbox",
+    "aria-controls": "".concat(popupId, "-left"),
+    id: "".concat(id, "-more"),
+    onClick: function onClick() {
+      return onMoreClick('left');
+    }
+  }, /*#__PURE__*/React.createElement(_OutlinedLeft["default"], null));
+  var moreRightNode = mobile ? null : /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(prefixCls, "-nav-more right"),
+    style: moreStyle,
+    tabIndex: -1,
+    "aria-hidden": "true",
+    "aria-haspopup": "listbox",
+    "aria-controls": "".concat(popupId, "-right"),
+    id: "".concat(id, "-more") // aria-expanded={open}
+    ,
+    onClick: function onClick() {
+      return onMoreClick('right');
+    }
+  }, /*#__PURE__*/React.createElement(_OutlinedRight["default"], null));
+  (0, React.useEffect)(function () {
+    setScrolledKey(activeKey);
+  }, [activeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    role: "tablist",
+    className: (0, _classnames["default"])("".concat(prefixCls, "-nav"), className),
+    style: style,
+    onKeyDown: function onKeyDown() {
+      // No need animation when use keyboard
+      doLockAnimation();
+    }
+  }, /*#__PURE__*/React.createElement(ExtraContent, {
+    position: "left",
+    extra: extra,
+    prefixCls: prefixCls
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])("".concat(prefixCls, "-nav-operations"), !hasDropdown && operationsHiddenClassName)
+  }, moreLeftNode), /*#__PURE__*/React.createElement(_rcResizeObserver["default"], {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])(wrapPrefix, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(wrapPrefix, "-ping-left"), pingLeft), (0, _defineProperty2["default"])(_classNames, "".concat(wrapPrefix, "-ping-right"), pingRight), (0, _defineProperty2["default"])(_classNames, "".concat(wrapPrefix, "-ping-top"), pingTop), (0, _defineProperty2["default"])(_classNames, "".concat(wrapPrefix, "-ping-bottom"), pingBottom), _classNames)),
+    ref: tabsWrapperRef
+  }, /*#__PURE__*/React.createElement(_rcResizeObserver["default"], {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tabListRef,
+    className: "".concat(prefixCls, "-nav-list"),
+    style: {
+      transform: "translate(".concat(transformLeft, "px, ").concat(transformTop, "px)"),
+      transition: lockAnimation ? 'none' : undefined
+    }
+  }, tabNodes, /*#__PURE__*/React.createElement(_AddButton["default"], {
+    ref: innerAddButtonRef,
+    prefixCls: prefixCls,
+    locale: locale,
+    editable: editable,
+    style: {
+      visibility: hasDropdown ? 'hidden' : null
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])("".concat(prefixCls, "-ink-bar"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-ink-bar-animated"), animated.inkBar)),
+    style: inkStyle
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])("".concat(prefixCls, "-nav-operations"), !hasDropdown && operationsHiddenClassName)
+  }, moreRightNode, /*#__PURE__*/React.createElement(_AddButton["default"], {
+    prefixCls: prefixCls,
+    locale: locale,
+    editable: editable
+  })), /*#__PURE__*/React.createElement(ExtraContent, {
+    position: "right",
+    extra: extra,
+    prefixCls: prefixCls
+  }));
+  /* eslint-enable */
+}
+
+var _default = /*#__PURE__*/React.forwardRef(TabNavList);
+
+exports["default"] = _default;

package/lib/tabs/src/TabPanelList/TabPane.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface TabPaneProps {
+    tab?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    forceRender?: boolean;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    prefixCls?: string;
+    tabKey?: string;
+    id?: string;
+    animated?: boolean;
+    active?: boolean;
+    destroyInactiveTabPane?: boolean;
+}
+export default function TabPane({ prefixCls, forceRender, className, style, id, active, animated, destroyInactiveTabPane, tabKey, children, }: TabPaneProps): JSX.Element;

package/lib/tabs/src/TabPanelList/TabPane.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TabPane;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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, _extends2["default"])((0, _extends2["default"])({}, mergedStyle), style),
+    className: (0, _classnames["default"])("".concat(prefixCls, "-tabpane"), active && "".concat(prefixCls, "-tabpane-active"), className)
+  }, (active || visited || forceRender) && children);
+}