@ucloud-fe/react-components 1.5.16 → 1.5.17

package/lib/components/Tabs/TabBar.js

@@ -1,663 +0,0 @@
-"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames5 = _interopRequireDefault(require("classnames"));
-
-var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-
-var _utils = require("./utils");
-
-var _RefContext = _interopRequireDefault(require("./RefContext"));
-
-var _style2 = require("./style");
-
-var _this = void 0;
-
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var noop = function noop() {
-  (0, _newArrowCheck2.default)(this, _this);
-  return undefined;
-}.bind(void 0);
-
-var warning = function warning(skip, msg) {
-  (0, _newArrowCheck2.default)(this, _this);
-  return !skip && console.warn(msg);
-}.bind(void 0);
-
-var TabBarTabsNode = function TabBarTabsNode(_ref) {
-  var _this2 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var activeKey = _ref.activeKey,
-      panes = _ref.panes,
-      tabBarGutter = _ref.tabBarGutter,
-      tabBarPosition = _ref.tabBarPosition,
-      direction = _ref.direction,
-      _ref$onTabClick = _ref.onTabClick,
-      onTabClick = _ref$onTabClick === void 0 ? noop : _ref$onTabClick;
-
-  var _useContext = (0, _react.useContext)(_RefContext.default),
-      saveRef = _useContext.saveRef;
-
-  var rst = [];
-  panes.forEach(function (pane, index) {
-    var _classnames;
-
-    (0, _newArrowCheck2.default)(this, _this2);
-    if (!pane) return;
-    var key = pane.key;
-    var paneProps = pane.pane.props;
-    var className = (0, _classnames5.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab"), 1), (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab-active"), activeKey === key), (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab-disabled"), paneProps.disabled), _classnames));
-    var gutter = tabBarGutter && index === panes.length - 1 ? 0 : tabBarGutter;
-    var marginProperty = direction === 'rtl' ? 'marginLeft' : 'marginRight';
-    var style = (0, _defineProperty2.default)({}, (0, _utils.isVertical)(tabBarPosition) ? 'marginBottom' : marginProperty, gutter);
-    warning('tab' in paneProps, 'There must be `tab` property on children of Tabs.');
-
-    var node = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      className: className,
-      key: key,
-      style: style
-    }, activeKey === key ? {
-      ref: saveRef('activeTab')
-    } : {}, paneProps.disabled ? {} : {
-      onClick: onTabClick.bind(this, key)
-    }), paneProps.tab);
-
-    rst.push(node);
-  }.bind(this));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: saveRef('navTabsContainer')
-  }, rst);
-}.bind(void 0);
-
-TabBarTabsNode.propTypes = {
-  tabBarGutter: _propTypes.default.number,
-  direction: _propTypes.default.string.isRequired,
-  onTabClick: _propTypes.default.func.isRequired
-};
-
-var TabBarRootNode = function TabBarRootNode(_ref2) {
-  var _this3 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var _ref2$tabBarPosition = _ref2.tabBarPosition,
-      tabBarPosition = _ref2$tabBarPosition === void 0 ? 'top' : _ref2$tabBarPosition,
-      children = _ref2.children,
-      extraContent = _ref2.extraContent,
-      _ref2$onKeyDown = _ref2.onKeyDown,
-      onKeyDown = _ref2$onKeyDown === void 0 ? noop : _ref2$onKeyDown,
-      styleType = _ref2.styleType;
-
-  var _useContext2 = (0, _react.useContext)(_RefContext.default),
-      _useContext2$saveRef = _useContext2.saveRef,
-      saveRef = _useContext2$saveRef === void 0 ? function () {
-    (0, _newArrowCheck2.default)(this, _this3);
-    return null;
-  }.bind(this) : _useContext2$saveRef;
-
-  var cls = (0, _classnames5.default)("".concat(_style2.prefixCls, "-bar"), "".concat(_style2.prefixCls, "-").concat(tabBarPosition, "-bar"), "".concat(_style2.prefixCls, "-styletype-").concat(styleType, "-bar"));
-  var topOrBottom = (0, _utils.isVertical)(tabBarPosition);
-  var tabBarExtraContentStyle = topOrBottom ? {
-    float: 'right'
-  } : {};
-  var extraContentStyle = extraContent && /*#__PURE__*/_react.default.isValidElement(extraContent) ? extraContent.props.style : {};
-  var newChildren = children;
-
-  if (extraContent) {
-    if ( /*#__PURE__*/_react.default.isValidElement(extraContent)) {
-      extraContent = /*#__PURE__*/(0, _react.cloneElement)(extraContent, {
-        key: 'extra',
-        style: _objectSpread(_objectSpread({}, tabBarExtraContentStyle), extraContentStyle)
-      });
-    }
-
-    newChildren = topOrBottom ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extraContent, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, extraContent);
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    role: "tablist",
-    className: cls,
-    tabIndex: 0,
-    ref: saveRef('root'),
-    onKeyDown: onKeyDown
-  }, newChildren);
-}.bind(void 0);
-
-TabBarRootNode.propTypes = {
-  className: _propTypes.default.string,
-  children: _propTypes.default.node.isRequired,
-  extraContent: _propTypes.default.node,
-  onKeyDown: _propTypes.default.func,
-  styleType: _propTypes.default.string.isRequired
-};
-
-function scrollInkBar(props) {
-  var getRef = props.getRef,
-      direction = props.direction,
-      tabBarPosition = props.tabBarPosition;
-  var rootNode = getRef('root');
-  var wrapNode = getRef('nav') || rootNode;
-  var inkBarNode = getRef('inkBar');
-  var activeTab = getRef('activeTab');
-  if (!inkBarNode || !wrapNode || !rootNode) return;
-  var inkBarNodeStyle = inkBarNode.style;
-  var display = !!activeTab;
-  inkBarNodeStyle.display = display ? 'block' : 'none';
-  if (!display) return;
-
-  if (activeTab) {
-    var tabNode = activeTab;
-    var transformSupported = (0, _utils.isTransform3dSupported)(inkBarNodeStyle); // Reset current style
-
-    (0, _utils.setTransform)(inkBarNodeStyle, '');
-    inkBarNodeStyle.width = '';
-    inkBarNodeStyle.height = '';
-    inkBarNodeStyle.left = '';
-    inkBarNodeStyle.top = '';
-    inkBarNodeStyle.bottom = '';
-    inkBarNodeStyle.right = '';
-
-    if ((0, _utils.isVertical)(tabBarPosition)) {
-      var top = tabNode.offsetTop;
-      var height = tabNode.offsetHeight;
-
-      if (transformSupported) {
-        (0, _utils.setTransform)(inkBarNodeStyle, "translate3d(0,".concat(top, "px,0)"));
-        inkBarNodeStyle.top = '0';
-      } else {
-        inkBarNodeStyle.top = "".concat(top, "px");
-      }
-
-      inkBarNodeStyle.height = "".concat(height, "px");
-    } else {
-      var left = tabNode.offsetLeft;
-      var width = tabNode.offsetWidth; // If tabNode width equal to wrapNode width when tabBarPosition is top or bottom
-      // It means no css working, then ink bar should not have width until css is loaded
-      // Fix https://github.com/ant-design/ant-design/issues/7564
-
-      if (width === rootNode.offsetWidth) {
-        width = 0;
-      }
-
-      if (direction === 'rtl') {
-        left = (0, _utils.getStyle)(tabNode, 'margin-left') - left;
-      } // use 3d gpu to optimize render
-
-
-      if (transformSupported) {
-        (0, _utils.setTransform)(inkBarNodeStyle, "translate3d(".concat(left, "px,0,0)"));
-      } else {
-        inkBarNodeStyle.left = "".concat(left, "px");
-      }
-
-      inkBarNodeStyle.width = "".concat(width, "px");
-    }
-  }
-}
-
-var InkTabBarNode = function InkTabBarNode(_ref3) {
-  var _this4 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var panes = _ref3.panes,
-      activeKey = _ref3.activeKey,
-      tabBarPosition = _ref3.tabBarPosition,
-      _ref3$inkBarAnimated = _ref3.inkBarAnimated,
-      inkBarAnimated = _ref3$inkBarAnimated === void 0 ? true : _ref3$inkBarAnimated,
-      direction = _ref3.direction;
-
-  var _useContext3 = (0, _react.useContext)(_RefContext.default),
-      saveRef = _useContext3.saveRef,
-      getRef = _useContext3.getRef;
-
-  var onResize = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this4);
-    scrollInkBar({
-      getRef: getRef,
-      tabBarPosition: tabBarPosition,
-      direction: direction
-    });
-  }.bind(this), [direction, getRef, tabBarPosition]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this4);
-    onResize();
-  }.bind(this), [panes, activeKey, onResize]);
-  (0, _react.useEffect)(function () {
-    var _this5 = this;
-
-    (0, _newArrowCheck2.default)(this, _this4);
-    var resizeObserver = new _resizeObserverPolyfill.default(onResize);
-    var containerNode = getRef('container');
-    if (containerNode) resizeObserver.observe(containerNode);
-    return function () {
-      (0, _newArrowCheck2.default)(this, _this5);
-
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    }.bind(this);
-  }.bind(this), [getRef, onResize]);
-  var className = "".concat(_style2.prefixCls, "-ink-bar");
-  var classes = (0, _classnames5.default)(className, inkBarAnimated ? "".concat(className, "-animated") : "".concat(className, "-no-animated"));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes,
-    key: "inkBar",
-    ref: saveRef('inkBar')
-  });
-}.bind(void 0);
-
-InkTabBarNode.propTypes = {
-  inkBarAnimated: _propTypes.default.bool,
-  direction: _propTypes.default.string.isRequired,
-  styles: _propTypes.default.shape({})
-};
-
-var getOffsetWH = function getOffsetWH(node, tabBarPosition) {
-  (0, _newArrowCheck2.default)(this, _this);
-  if (!node) return 0;
-
-  if ((0, _utils.isVertical)(tabBarPosition)) {
-    return node.offsetHeight;
-  }
-
-  return node.offsetWidth;
-}.bind(void 0);
-
-var getScrollWH = function getScrollWH(node, tabBarPosition) {
-  (0, _newArrowCheck2.default)(this, _this);
-  if (!node) return 0;
-
-  if ((0, _utils.isVertical)(tabBarPosition)) {
-    return node.scrollHeight;
-  }
-
-  return node.scrollWidth;
-}.bind(void 0);
-
-var getOffsetLT = function getOffsetLT(node, tabBarPosition) {
-  (0, _newArrowCheck2.default)(this, _this);
-  if (!node) return 0;
-
-  if ((0, _utils.isVertical)(tabBarPosition)) {
-    return node.offsetTop;
-  }
-
-  return node.offsetLeft;
-}.bind(void 0);
-
-var setNavOffset = function setNavOffset(offset, context) {
-  (0, _newArrowCheck2.default)(this, _this);
-  var currentOffset = context.currentOffset,
-      getRef = context.getRef,
-      tabBarPosition = context.tabBarPosition,
-      direction = context.direction;
-  var navNode = getRef('nav');
-  var navTabsContainer = getRef('navTabsContainer');
-  var navNodeWH = getScrollWH(navTabsContainer || navNode, tabBarPosition); // Add 1px to fix `offsetWidth` with decimal in Chrome not correct handle
-  // https://github.com/ant-design/ant-design/issues/13423
-
-  var containerWH = getOffsetWH(getRef('container'), tabBarPosition) + 1;
-  var navWrapNodeWH = getOffsetWH(getRef('navWrap'), tabBarPosition);
-  var minOffset = containerWH - navNodeWH;
-  if (offset > 0) offset = 0;
-
-  if (minOffset >= 0) {
-    offset = 0;
-  } else if (minOffset >= offset) {
-    var realOffset = navWrapNodeWH - navNodeWH;
-    offset = realOffset;
-  }
-
-  if (currentOffset !== offset) {
-    var navOffset = {};
-
-    var _navNode = getRef('nav');
-
-    if (!_navNode) return currentOffset;
-    var navStyle = _navNode.style;
-    var transformSupported = (0, _utils.isTransform3dSupported)(navStyle);
-
-    if ((0, _utils.isVertical)(tabBarPosition)) {
-      if (transformSupported) {
-        navOffset = {
-          value: "translate3d(0,".concat(offset, "px,0)")
-        };
-      } else {
-        navOffset = {
-          name: 'top',
-          value: "".concat(offset, "px")
-        };
-      }
-    } else {
-      if (transformSupported) {
-        if (direction === 'rtl') {
-          offset = -offset;
-        }
-
-        navOffset = {
-          value: "translate3d(".concat(offset, "px,0,0)")
-        };
-      } else {
-        navOffset = {
-          name: 'left',
-          value: "".concat(offset, "px")
-        };
-      }
-    }
-
-    if (navOffset.value) {
-      if (transformSupported) {
-        (0, _utils.setTransform)(navStyle, navOffset.value);
-      } else if (navOffset.name) {
-        navStyle[navOffset.name] = navOffset.value;
-      }
-    }
-  }
-
-  return offset;
-}.bind(void 0);
-
-var getNextPrev = function getNextPrev(_ref4) {
-  (0, _newArrowCheck2.default)(this, _this);
-  var getRef = _ref4.getRef,
-      tabBarPosition = _ref4.tabBarPosition,
-      currentOffset = _ref4.currentOffset;
-  var navNode = getRef('nav');
-  var navTabsContainer = getRef('navTabsContainer');
-  var navNodeWH = getScrollWH(navTabsContainer || navNode, tabBarPosition); // Add 1px to fix `offsetWidth` with decimal in Chrome not correct handle
-  // https://github.com/ant-design/ant-design/issues/13423
-
-  var containerWH = getOffsetWH(getRef('container'), tabBarPosition) + 1;
-  var minOffset = containerWH - navNodeWH;
-  var next, prev;
-
-  if (minOffset >= 0) {
-    next = false;
-  } else if (minOffset < currentOffset) {
-    next = true;
-  } else {
-    next = false;
-  }
-
-  if (currentOffset < 0) {
-    prev = true;
-  } else {
-    prev = false;
-  }
-
-  return {
-    next: next,
-    prev: prev
-  };
-}.bind(void 0);
-
-var getOffsetOfActive = function getOffsetOfActive(context) {
-  (0, _newArrowCheck2.default)(this, _this);
-  var getRef = context.getRef,
-      next = context.next,
-      prev = context.prev,
-      tabBarPosition = context.tabBarPosition,
-      currentOffset = context.currentOffset;
-  var activeTab = getRef('activeTab');
-  var navWrap = getRef('navWrap');
-  if (!activeTab) return; // when not scrollable or enter scrollable first time, don't emit scrolling
-
-  var needToScroll = next || prev;
-  if (!needToScroll) return;
-  var activeTabWH = getScrollWH(activeTab, tabBarPosition);
-  var wrapWH = getOffsetWH(navWrap, tabBarPosition);
-  var activeTabOffset = getOffsetLT(activeTab, tabBarPosition);
-
-  if (-currentOffset < activeTabOffset + activeTabWH - wrapWH) {
-    return -(activeTabOffset + activeTabWH - wrapWH);
-  } else if (-currentOffset > activeTabOffset) {
-    return -activeTabOffset;
-  }
-}.bind(void 0);
-
-var ScrollableTabBarNode = function ScrollableTabBarNode(_ref5) {
-  var _this6 = this,
-      _classnames2,
-      _classnames3,
-      _classnames4;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var tabBarPosition = _ref5.tabBarPosition,
-      _ref5$scrollAnimated = _ref5.scrollAnimated,
-      scrollAnimated = _ref5$scrollAnimated === void 0 ? true : _ref5$scrollAnimated,
-      _ref5$onPrevClick = _ref5.onPrevClick,
-      onPrevClick = _ref5$onPrevClick === void 0 ? noop : _ref5$onPrevClick,
-      _ref5$onNextClick = _ref5.onNextClick,
-      onNextClick = _ref5$onNextClick === void 0 ? noop : _ref5$onNextClick,
-      prevIcon = _ref5.prevIcon,
-      nextIcon = _ref5.nextIcon,
-      children = _ref5.children,
-      direction = _ref5.direction,
-      activeKey = _ref5.activeKey;
-  var offsetRef = (0, _react.useRef)(0);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      next = _useState2[0],
-      setNext = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      prev = _useState4[0],
-      setPrev = _useState4[1];
-
-  var showNextPrev = prev || next;
-
-  var _useContext4 = (0, _react.useContext)(_RefContext.default),
-      saveRef = _useContext4.saveRef,
-      getRef = _useContext4.getRef; // update next/prev icon
-
-
-  var setNextPrev = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this6);
-
-    var _getNextPrev = getNextPrev({
-      getRef: getRef,
-      currentOffset: offsetRef.current,
-      tabBarPosition: tabBarPosition
-    }),
-        next = _getNextPrev.next,
-        prev = _getNextPrev.prev;
-
-    setNext(next);
-    setPrev(prev);
-  }.bind(this), [getRef, tabBarPosition]); // set nav offset
-
-  var setOffset = (0, _react.useCallback)(function (offset) {
-    (0, _newArrowCheck2.default)(this, _this6);
-    var newOffset = setNavOffset(offset, {
-      currentOffset: offsetRef.current,
-      direction: direction,
-      tabBarPosition: tabBarPosition,
-      getRef: getRef
-    });
-    offsetRef.current = newOffset;
-  }.bind(this), [direction, getRef, tabBarPosition]); // scroll bar to active tab
-
-  var scrollToActiveTab = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this6);
-    var offset = getOffsetOfActive({
-      getRef: getRef,
-      next: next,
-      prev: prev,
-      tabBarPosition: tabBarPosition,
-      currentOffset: offsetRef.current
-    });
-    if (offset != null) setOffset(offset);
-  }.bind(this), [getRef, next, prev, setOffset, tabBarPosition]);
-  var prevTransitionEnd = (0, _react.useCallback)(function (e) {
-    (0, _newArrowCheck2.default)(this, _this6);
-    if (e.propertyName !== 'opacity') return;
-    scrollToActiveTab();
-    setNextPrev();
-  }.bind(this), [scrollToActiveTab, setNextPrev]);
-  var onPrev = (0, _react.useCallback)(function (e) {
-    (0, _newArrowCheck2.default)(this, _this6);
-    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(e);
-    var navWrapNode = getRef('navWrap');
-    var navWrapNodeWH = getOffsetWH(navWrapNode, tabBarPosition);
-    setOffset(offsetRef.current + navWrapNodeWH);
-    setNextPrev();
-  }.bind(this), [getRef, onPrevClick, setNextPrev, setOffset, tabBarPosition]);
-  var onNext = (0, _react.useCallback)(function (e) {
-    (0, _newArrowCheck2.default)(this, _this6);
-    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(e);
-    var navWrapNode = getRef('navWrap');
-    var navWrapNodeWH = getOffsetWH(navWrapNode, tabBarPosition);
-    setOffset(offsetRef.current - navWrapNodeWH);
-    setNextPrev();
-  }.bind(this), [getRef, onNextClick, setNextPrev, setOffset, tabBarPosition]); // reset offset when tabBarPosition change
-
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this6);
-    setOffset(0); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }.bind(this), [tabBarPosition]); // scroll to active when initial and activeKey changed
-
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this6);
-    scrollToActiveTab(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }.bind(this), [activeKey, tabBarPosition]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this6);
-    setNextPrev();
-  }.bind(this), [children, setNextPrev, tabBarPosition]); // set next/prev when size change
-
-  (0, _react.useEffect)(function () {
-    var _this7 = this;
-
-    (0, _newArrowCheck2.default)(this, _this6);
-    var debouncedResize = (0, _debounce2.default)(function () {
-      (0, _newArrowCheck2.default)(this, _this7);
-      setNextPrev();
-    }.bind(this), 200);
-    var resizeObserver = new _resizeObserverPolyfill.default(debouncedResize);
-    var containerNode = getRef('container');
-    if (containerNode) resizeObserver.observe(containerNode);
-    return function () {
-      (0, _newArrowCheck2.default)(this, _this7);
-
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-
-      if (debouncedResize.cancel) {
-        debouncedResize.cancel();
-      }
-    }.bind(this);
-  }.bind(this), [getRef, setNextPrev]);
-
-  var prevButton = /*#__PURE__*/_react.default.createElement("span", {
-    onClick: onPrev,
-    unselectable: "on",
-    className: (0, _classnames5.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-prev"), 1), (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-btn-disabled"), !prev), (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-arrow-show"), showNextPrev), _classnames2)),
-    onTransitionEnd: prevTransitionEnd
-  }, prevIcon || /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_style2.prefixCls, "-tab-prev-icon")
-  }));
-
-  var nextButton = /*#__PURE__*/_react.default.createElement("span", {
-    onClick: onNext,
-    unselectable: "on",
-    className: (0, _classnames5.default)((_classnames3 = {}, (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-next"), 1), (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-btn-disabled"), !next), (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-arrow-show"), showNextPrev), _classnames3))
-  }, nextIcon || /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_style2.prefixCls, "-tab-next-icon")
-  }));
-
-  var navClassName = "".concat(_style2.prefixCls, "-nav");
-  var navClasses = (0, _classnames5.default)(navClassName, scrollAnimated ? "".concat(navClassName, "-animated") : "".concat(navClassName, "-no-animated"));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames5.default)((_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(_style2.prefixCls, "-nav-container"), 1), (0, _defineProperty2.default)(_classnames4, "".concat(_style2.prefixCls, "-nav-container-scrolling"), showNextPrev), _classnames4)),
-    ref: saveRef('container')
-  }, prevButton, nextButton, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_style2.prefixCls, "-nav-wrap"),
-    ref: saveRef('navWrap')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_style2.prefixCls, "-nav-scroll")
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: navClasses,
-    ref: saveRef('nav')
-  }, children))));
-}.bind(void 0);
-
-ScrollableTabBarNode.propTypes = {
-  scrollAnimated: _propTypes.default.bool,
-  onPrevClick: _propTypes.default.func,
-  onNextClick: _propTypes.default.func,
-  prevIcon: _propTypes.default.node,
-  nextIcon: _propTypes.default.node,
-  children: _propTypes.default.node,
-  direction: _propTypes.default.string
-};
-
-var TabBar = function TabBar(props) {
-  var _this8 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var refs = (0, _react.useRef)({});
-  var getRef = (0, _react.useCallback)(function (name) {
-    (0, _newArrowCheck2.default)(this, _this8);
-    return refs.current[name];
-  }.bind(this), []);
-  var saveRef = (0, _react.useCallback)(function (name) {
-    var _this9 = this;
-
-    (0, _newArrowCheck2.default)(this, _this8);
-    return function (node) {
-      (0, _newArrowCheck2.default)(this, _this9);
-      if (!node) return;
-      refs.current[name] = node;
-    }.bind(this);
-  }.bind(this), []);
-  var styleType = props.styleType;
-  return /*#__PURE__*/_react.default.createElement(_RefContext.default.Provider, {
-    value: {
-      getRef: getRef,
-      saveRef: saveRef
-    }
-  }, /*#__PURE__*/_react.default.createElement(TabBarRootNode, props, /*#__PURE__*/_react.default.createElement(ScrollableTabBarNode, props, /*#__PURE__*/_react.default.createElement(TabBarTabsNode, props), styleType === 'ink' ? /*#__PURE__*/_react.default.createElement(InkTabBarNode, props) : null)));
-}.bind(void 0);
-
-TabBar.propTypes = {
-  onKeyDown: _propTypes.default.func.isRequired,
-  onTabClick: _propTypes.default.func.isRequired,
-  direction: _propTypes.default.string.isRequired,
-  styleType: _propTypes.default.string.isRequired
-};
-
-var _default = /*#__PURE__*/(0, _react.memo)(TabBar);
-
-exports.default = _default;

package/lib/components/Tabs/TabContent.d.ts

@@ -1,12 +0,0 @@
-import React, { Key } from 'react';
-import { Panes, TabBarPosition } from './shared';
-interface TabContentProps {
-    panes: Panes;
-    activeKey: Key | null;
-    tabBarPosition: TabBarPosition;
-    destroyInactiveTabPane?: boolean;
-    styleType: string;
-    className?: string;
-}
-declare const _default: React.MemoExoticComponent<({ panes, activeKey, tabBarPosition, destroyInactiveTabPane, styleType, className }: TabContentProps) => JSX.Element>;
-export default _default;