rc-tabs - npm Package Compare versions

Comparing version 12.1.0-alpha.1 to 12.2.1

es/hooks/useVisibleRange.d.ts

 import type { Tab, TabOffsetMap } from '../interface';
 import type { TabNavListProps } from '../TabNavList';
-export default function useVisibleRange(tabOffsets: TabOffsetMap, containerSize: {
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-}, tabContentNodeSize: {
-    width: number;
-    height: number;
-}, addNodeSize: {
-    width: number;
-    height: number;
-}, { tabs, tabPosition, rtl }: {
+export declare type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export default function useVisibleRange(tabOffsets: TabOffsetMap, visibleTabContentValue: number, transform: number, tabContentSizeValue: number, addNodeSizeValue: number, operationNodeSizeValue: number, { tabs, tabPosition, rtl }: {
     tabs: Tab[];
-} & TabNavListProps): [number, number];
+} & TabNavListProps): [visibleStart: number, visibleEnd: number];

es/hooks/useVisibleRange.js

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 };
-export default function useVisibleRange(tabOffsets, containerSize, tabContentNodeSize, addNodeSize, _ref) {
+export default function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, _ref) {
   var tabs = _ref.tabs,
       tabPosition = _ref.tabPosition,
       rtl = _ref.rtl;
-  var unit;
+  var charUnit;
   var position;
@@ -19,20 +19,11 @@ var transformSize;
   if (['top', 'bottom'].includes(tabPosition)) {
-    unit = 'width';
+    charUnit = 'width';
     position = rtl ? 'right' : 'left';
-    transformSize = Math.abs(containerSize.left);
+    transformSize = Math.abs(transform);
   } else {
-    unit = 'height';
+    charUnit = 'height';
     position = 'top';
-    transformSize = -containerSize.top;
+    transformSize = -transform;
   }
 
-  var basicSize = containerSize[unit];
-  var tabContentSize = tabContentNodeSize[unit];
-  var addSize = addNodeSize[unit];
-  var mergedBasicSize = basicSize;
-
-  if (tabContentSize + addSize > basicSize && tabContentSize < basicSize) {
-    mergedBasicSize = basicSize - addSize;
-  }
-
   return useMemo(function () {
@@ -49,3 +40,3 @@ if (!tabs.length) {
 
-      if (offset[position] + offset[unit] > transformSize + mergedBasicSize) {
+      if (offset[position] + offset[charUnit] > transformSize + visibleTabContentValue) {
         endIndex = i - 1;
@@ -68,5 +59,5 @@ break;
     return [startIndex, endIndex];
-  }, [tabOffsets, transformSize, mergedBasicSize, tabPosition, tabs.map(function (tab) {
+  }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {
     return tab.key;
   }).join('_'), rtl]);
 }

es/interface.d.ts

@@ -5,2 +5,3 @@ import type React from 'react';
 import type { TabPaneProps } from './TabPanelList/TabPane';
+export declare type SizeInfo = [width: number, height: number];
 export declare type TabSizeMap = Map<React.Key, {
@@ -7,0 +8,0 @@ width: number;

es/TabNavList/index.js

@@ -6,3 +6,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
@@ -12,2 +11,3 @@ import { useState, useRef, useEffect } from 'react';
 import raf from "rc-util/es/raf";
+import { useComposeRef } from "rc-util/es/ref";
 import ResizeObserver from 'rc-resize-observer';
@@ -24,29 +24,21 @@ import useRaf, { useRafState } from '../hooks/useRaf';
 import useSyncState from '../hooks/useSyncState';
+import { stringify } from '../util';
+import ExtraContent from './ExtraContent';
 
-var ExtraContent = function ExtraContent(_ref) {
-  var position = _ref.position,
-      prefixCls = _ref.prefixCls,
-      extra = _ref.extra;
-  if (!extra) return null;
-  var content; // Parse extra
+var getSize = function getSize(refObj) {
+  var _ref = refObj.current || {},
+      _ref$offsetWidth = _ref.offsetWidth,
+      offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
+      _ref$offsetHeight = _ref.offsetHeight,
+      offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
 
-  var assertExtra = {};
+  return [offsetWidth, offsetHeight];
+};
+/**
+ * Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
+ */
 
-  if (extra && _typeof(extra) === 'object' && ! /*#__PURE__*/React.isValidElement(extra)) {
-    assertExtra = extra;
-  } else {
-    assertExtra.right = extra;
-  }
 
-  if (position === 'right') {
-    content = assertExtra.right;
-  }
-
-  if (position === 'left') {
-    content = assertExtra.left;
-  }
-
-  return content ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-extra-content")
-  }, content) : null;
+var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
+  return size[tabPositionTopOrBottom ? 0 : 1];
 };
@@ -75,2 +67,5 @@
       onTabScroll = props.onTabScroll;
+  var containerRef = useRef();
+  var extraLeftRef = useRef();
+  var extraRightRef = useRef();
   var tabsWrapperRef = useRef();
@@ -110,32 +105,22 @@ var tabListRef = useRef();
 
-  var _useState = useState(0),
+  var _useState = useState([0, 0]),
       _useState2 = _slicedToArray(_useState, 2),
-      wrapperScrollWidth = _useState2[0],
-      setWrapperScrollWidth = _useState2[1];
+      containerExcludeExtraSize = _useState2[0],
+      setContainerExcludeExtraSize = _useState2[1];
 
-  var _useState3 = useState(0),
+  var _useState3 = useState([0, 0]),
       _useState4 = _slicedToArray(_useState3, 2),
-      wrapperScrollHeight = _useState4[0],
-      setWrapperScrollHeight = _useState4[1];
+      tabContentSize = _useState4[0],
+      setTabContentSize = _useState4[1];
 
-  var _useState5 = useState(null),
+  var _useState5 = useState([0, 0]),
       _useState6 = _slicedToArray(_useState5, 2),
-      wrapperWidth = _useState6[0],
-      setWrapperWidth = _useState6[1];
+      addSize = _useState6[0],
+      setAddSize = _useState6[1];
 
-  var _useState7 = useState(null),
+  var _useState7 = useState([0, 0]),
       _useState8 = _slicedToArray(_useState7, 2),
-      wrapperHeight = _useState8[0],
-      setWrapperHeight = _useState8[1];
+      operationSize = _useState8[0],
+      setOperationSize = _useState8[1];
 
-  var _useState9 = useState(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      addWidth = _useState10[0],
-      setAddWidth = _useState10[1];
-
-  var _useState11 = useState(0),
-      _useState12 = _slicedToArray(_useState11, 2),
-      addHeight = _useState12[0],
-      setAddHeight = _useState12[1];
-
   var _useRafState = useRafState(new Map()),
@@ -146,4 +131,11 @@ _useRafState2 = _slicedToArray(_useRafState, 2),
 
-  var tabOffsets = useOffsets(tabs, tabSizes, wrapperScrollWidth); // ========================== Util =========================
+  var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]); // ========================== Unit =========================
 
+  var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
+  var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
+  var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
+  var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
+  var needScroll = containerExcludeExtraSizeValue < tabContentSizeValue + addSizeValue;
+  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue; // ========================== Util =========================
+
   var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
@@ -154,9 +146,9 @@ var transformMin = 0;
   if (!tabPositionTopOrBottom) {
-    transformMin = Math.min(0, wrapperHeight - wrapperScrollHeight);
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
     transformMax = 0;
   } else if (rtl) {
     transformMin = 0;
-    transformMax = Math.max(0, wrapperScrollWidth - wrapperWidth);
+    transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
   } else {
-    transformMin = Math.min(0, wrapperWidth - wrapperScrollWidth);
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
     transformMax = 0;
@@ -180,6 +172,6 @@ }
 
-  var _useState13 = useState(),
-      _useState14 = _slicedToArray(_useState13, 2),
-      lockAnimation = _useState14[0],
-      setLockAnimation = _useState14[1];
+  var _useState9 = useState(),
+      _useState10 = _slicedToArray(_useState9, 2),
+      lockAnimation = _useState10[0],
+      setLockAnimation = _useState10[1];
 
@@ -200,16 +192,12 @@ function doLockAnimation() {
       });
+    } // Skip scroll if place is enough
+
+
+    if (containerExcludeExtraSizeValue >= tabContentSizeValue) {
+      return false;
     }
 
     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);
@@ -232,5 +220,19 @@ }
     return clearTouchMoving;
-  }, [lockAnimation]); // ========================= Scroll ========================
+  }, [lockAnimation]); // ===================== Visible Range =====================
+  // Render tab node & collect tab offset
 
-  function scrollToTab() {
+  var _useVisibleRange = useVisibleRange(tabOffsets, // Container
+  visibleTabContentValue, // Transform
+  tabPositionTopOrBottom ? transformLeft : transformTop, // Tabs
+  tabContentSizeValue, // Add
+  addSizeValue, // Operation
+  operationSizeValue, _objectSpread(_objectSpread({}, props), {}, {
+    tabs: tabs
+  })),
+      _useVisibleRange2 = _slicedToArray(_useVisibleRange, 2),
+      visibleStart = _useVisibleRange2[0],
+      visibleEnd = _useVisibleRange2[1]; // ========================= Scroll ========================
+
+
+  var scrollToTab = function scrollToTab() {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
@@ -252,4 +254,4 @@ var tabOffset = tabOffsets.get(key) || {
           newTransform = tabOffset.right;
-        } else if (tabOffset.right + tabOffset.width > transformLeft + wrapperWidth) {
-          newTransform = tabOffset.right + tabOffset.width - wrapperWidth;
+        } else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
+          newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
         }
@@ -259,4 +261,4 @@ } // LTR
         newTransform = -tabOffset.left;
-      } else if (tabOffset.left + tabOffset.width > -transformLeft + wrapperWidth) {
-        newTransform = -(tabOffset.left + tabOffset.width - wrapperWidth);
+      } else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
+        newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
       }
@@ -272,4 +274,4 @@
         _newTransform = -tabOffset.top;
-      } else if (tabOffset.top + tabOffset.height > -transformTop + wrapperHeight) {
-        _newTransform = -(tabOffset.top + tabOffset.height - wrapperHeight);
+      } else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
+        _newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
       }
@@ -280,24 +282,5 @@
     }
-  } // ========================== Tab ==========================
-  // Render tab node & collect tab offset
+  }; // ========================== Tab ==========================
 
 
-  var _useVisibleRange = useVisibleRange(tabOffsets, {
-    width: wrapperWidth,
-    height: wrapperHeight,
-    left: transformLeft,
-    top: transformTop
-  }, {
-    width: wrapperScrollWidth,
-    height: wrapperScrollHeight
-  }, {
-    width: addWidth,
-    height: addHeight
-  }, _objectSpread(_objectSpread({}, props), {}, {
-    tabs: tabs
-  })),
-      _useVisibleRange2 = _slicedToArray(_useVisibleRange, 2),
-      visibleStart = _useVisibleRange2[0],
-      visibleEnd = _useVisibleRange2[1];
-
   var tabNodeStyle = {};
@@ -351,18 +334,15 @@
   var onListHolderResize = useRaf(function () {
-    var _tabsWrapperRef$curre, _tabsWrapperRef$curre2, _innerAddButtonRef$cu, _innerAddButtonRef$cu2, _tabListRef$current, _tabListRef$current2;
-
     // Update wrapper records
-    var offsetWidth = ((_tabsWrapperRef$curre = tabsWrapperRef.current) === null || _tabsWrapperRef$curre === void 0 ? void 0 : _tabsWrapperRef$curre.offsetWidth) || 0;
-    var offsetHeight = ((_tabsWrapperRef$curre2 = tabsWrapperRef.current) === null || _tabsWrapperRef$curre2 === void 0 ? void 0 : _tabsWrapperRef$curre2.offsetHeight) || 0;
-    var newAddWidth = ((_innerAddButtonRef$cu = innerAddButtonRef.current) === null || _innerAddButtonRef$cu === void 0 ? void 0 : _innerAddButtonRef$cu.offsetWidth) || 0;
-    var newAddHeight = ((_innerAddButtonRef$cu2 = innerAddButtonRef.current) === null || _innerAddButtonRef$cu2 === void 0 ? void 0 : _innerAddButtonRef$cu2.offsetHeight) || 0;
-    setWrapperWidth(offsetWidth);
-    setWrapperHeight(offsetHeight);
-    setAddWidth(newAddWidth);
-    setAddHeight(newAddHeight);
-    var newWrapperScrollWidth = (((_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.offsetWidth) || 0) - newAddWidth;
-    var newWrapperScrollHeight = (((_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.offsetHeight) || 0) - newAddHeight;
-    setWrapperScrollWidth(newWrapperScrollWidth);
-    setWrapperScrollHeight(newWrapperScrollHeight); // Update buttons records
+    var containerSize = getSize(containerRef);
+    var extraLeftSize = getSize(extraLeftRef);
+    var extraRightSize = getSize(extraRightRef);
+    setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
+    var newAddSize = getSize(innerAddButtonRef);
+    setAddSize(newAddSize);
+    var newOperationSize = getSize(operationsRef);
+    setOperationSize(newOperationSize); // Which includes add button size
 
+    var tabContentFullSize = getSize(tabListRef);
+    setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]); // Update buttons records
+
     setTabSizes(function () {
@@ -391,6 +371,6 @@ var newSizes = new Map();
 
-  var _useState15 = useState(),
-      _useState16 = _slicedToArray(_useState15, 2),
-      inkStyle = _useState16[0],
-      setInkStyle = _useState16[1];
+  var _useState11 = useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      inkStyle = _useState12[0],
+      setInkStyle = _useState12[1];
 
@@ -431,10 +411,8 @@ var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink
   useEffect(function () {
-    scrollToTab();
-  }, [activeKey, activeTabOffset, tabOffsets, tabPositionTopOrBottom]); // Should recalculate when rtl changed
+    scrollToTab(); // eslint-disable-next-line
+  }, [activeKey, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]); // Should recalculate when rtl changed
 
   useEffect(function () {
-    onListHolderResize();
-  }, [rtl, tabBarGutter, activeKey, tabs.map(function (tab) {
-    return tab.key;
-  }).join('_')]); // ========================= Render ========================
+    onListHolderResize(); // eslint-disable-next-line
+  }, [rtl]); // ========================= Render ========================
 
@@ -451,14 +429,16 @@ var hasDropdown = !!hiddenTabs.length;
       pingRight = transformLeft > 0;
-      pingLeft = transformLeft + wrapperWidth < wrapperScrollWidth;
+      pingLeft = transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
     } else {
       pingLeft = transformLeft < 0;
-      pingRight = -transformLeft + wrapperWidth < wrapperScrollWidth;
+      pingRight = -transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
     }
   } else {
     pingTop = transformTop < 0;
-    pingBottom = -transformTop + wrapperHeight < wrapperScrollHeight;
+    pingBottom = -transformTop + containerExcludeExtraSizeValue < tabContentSizeValue;
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
+  return /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: useComposeRef(ref, containerRef),
     role: "tablist",
@@ -472,8 +452,7 @@ className: classNames("".concat(prefixCls, "-nav"), className),
   }, /*#__PURE__*/React.createElement(ExtraContent, {
+    ref: extraLeftRef,
     position: "left",
     extra: extra,
     prefixCls: prefixCls
-  }), /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: onListHolderResize
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: classNames(wrapPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-left"), pingLeft), _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-right"), pingRight), _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-top"), pingTop), _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-bottom"), pingBottom), _classNames)),
@@ -501,3 +480,3 @@ ref: tabsWrapperRef
     style: inkStyle
-  }))))), /*#__PURE__*/React.createElement(OperationNode, _extends({}, props, {
+  })))), /*#__PURE__*/React.createElement(OperationNode, _extends({}, props, {
     removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
@@ -510,6 +489,7 @@ ref: operationsRef,
   })), /*#__PURE__*/React.createElement(ExtraContent, {
+    ref: extraRightRef,
     position: "right",
     extra: extra,
     prefixCls: prefixCls
-  }));
+  })));
   /* eslint-enable */
@@ -516,0 +496,0 @@ }

lib/hooks/useVisibleRange.d.ts

 import type { Tab, TabOffsetMap } from '../interface';
 import type { TabNavListProps } from '../TabNavList';
-export default function useVisibleRange(tabOffsets: TabOffsetMap, containerSize: {
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-}, tabContentNodeSize: {
-    width: number;
-    height: number;
-}, addNodeSize: {
-    width: number;
-    height: number;
-}, { tabs, tabPosition, rtl }: {
+export declare type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export default function useVisibleRange(tabOffsets: TabOffsetMap, visibleTabContentValue: number, transform: number, tabContentSizeValue: number, addNodeSizeValue: number, operationNodeSizeValue: number, { tabs, tabPosition, rtl }: {
     tabs: Tab[];
-} & TabNavListProps): [number, number];
+} & TabNavListProps): [visibleStart: number, visibleEnd: number];

lib/hooks/useVisibleRange.js

@@ -18,7 +18,7 @@ "use strict";
 
-function useVisibleRange(tabOffsets, containerSize, tabContentNodeSize, addNodeSize, _ref) {
+function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, _ref) {
   var tabs = _ref.tabs,
       tabPosition = _ref.tabPosition,
       rtl = _ref.rtl;
-  var unit;
+  var charUnit;
   var position;
@@ -28,20 +28,11 @@ var transformSize;
   if (['top', 'bottom'].includes(tabPosition)) {
-    unit = 'width';
+    charUnit = 'width';
     position = rtl ? 'right' : 'left';
-    transformSize = Math.abs(containerSize.left);
+    transformSize = Math.abs(transform);
   } else {
-    unit = 'height';
+    charUnit = 'height';
     position = 'top';
-    transformSize = -containerSize.top;
+    transformSize = -transform;
   }
 
-  var basicSize = containerSize[unit];
-  var tabContentSize = tabContentNodeSize[unit];
-  var addSize = addNodeSize[unit];
-  var mergedBasicSize = basicSize;
-
-  if (tabContentSize + addSize > basicSize && tabContentSize < basicSize) {
-    mergedBasicSize = basicSize - addSize;
-  }
-
   return (0, _react.useMemo)(function () {
@@ -58,3 +49,3 @@ if (!tabs.length) {
 
-      if (offset[position] + offset[unit] > transformSize + mergedBasicSize) {
+      if (offset[position] + offset[charUnit] > transformSize + visibleTabContentValue) {
         endIndex = i - 1;
@@ -77,5 +68,5 @@ break;
     return [startIndex, endIndex];
-  }, [tabOffsets, transformSize, mergedBasicSize, tabPosition, tabs.map(function (tab) {
+  }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {
     return tab.key;
   }).join('_'), rtl]);
 }

lib/interface.d.ts

@@ -5,2 +5,3 @@ import type React from 'react';
 import type { TabPaneProps } from './TabPanelList/TabPane';
+export declare type SizeInfo = [width: number, height: number];
 export declare type TabSizeMap = Map<React.Key, {
@@ -7,0 +8,0 @@ width: number;

lib/TabNavList/index.js

@@ -5,3 +5,3 @@ "use strict";
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
@@ -23,4 +23,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var React = _interopRequireWildcard(require("react"));
@@ -32,2 +30,4 @@
 
+var _ref3 = require("rc-util/lib/ref");
+
 var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
@@ -55,32 +55,26 @@
 
-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); }
+var _util = require("../util");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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 = _interopRequireDefault(require("./ExtraContent"));
 
-var ExtraContent = function ExtraContent(_ref) {
-  var position = _ref.position,
-      prefixCls = _ref.prefixCls,
-      extra = _ref.extra;
-  if (!extra) return null;
-  var content; // Parse extra
+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); }
 
-  var assertExtra = {};
+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; }
 
-  if (extra && (0, _typeof2.default)(extra) === 'object' && ! /*#__PURE__*/React.isValidElement(extra)) {
-    assertExtra = extra;
-  } else {
-    assertExtra.right = extra;
-  }
+var getSize = function getSize(refObj) {
+  var _ref = refObj.current || {},
+      _ref$offsetWidth = _ref.offsetWidth,
+      offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
+      _ref$offsetHeight = _ref.offsetHeight,
+      offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
 
-  if (position === 'right') {
-    content = assertExtra.right;
-  }
+  return [offsetWidth, offsetHeight];
+};
+/**
+ * Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
+ */
 
-  if (position === 'left') {
-    content = assertExtra.left;
-  }
 
-  return content ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-extra-content")
-  }, content) : null;
+var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
+  return size[tabPositionTopOrBottom ? 0 : 1];
 };
@@ -109,2 +103,5 @@
       onTabScroll = props.onTabScroll;
+  var containerRef = (0, React.useRef)();
+  var extraLeftRef = (0, React.useRef)();
+  var extraRightRef = (0, React.useRef)();
   var tabsWrapperRef = (0, React.useRef)();
@@ -144,32 +141,22 @@ var tabListRef = (0, React.useRef)();
 
-  var _useState = (0, React.useState)(0),
+  var _useState = (0, React.useState)([0, 0]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      wrapperScrollWidth = _useState2[0],
-      setWrapperScrollWidth = _useState2[1];
+      containerExcludeExtraSize = _useState2[0],
+      setContainerExcludeExtraSize = _useState2[1];
 
-  var _useState3 = (0, React.useState)(0),
+  var _useState3 = (0, React.useState)([0, 0]),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      wrapperScrollHeight = _useState4[0],
-      setWrapperScrollHeight = _useState4[1];
+      tabContentSize = _useState4[0],
+      setTabContentSize = _useState4[1];
 
-  var _useState5 = (0, React.useState)(null),
+  var _useState5 = (0, React.useState)([0, 0]),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      wrapperWidth = _useState6[0],
-      setWrapperWidth = _useState6[1];
+      addSize = _useState6[0],
+      setAddSize = _useState6[1];
 
-  var _useState7 = (0, React.useState)(null),
+  var _useState7 = (0, React.useState)([0, 0]),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      wrapperHeight = _useState8[0],
-      setWrapperHeight = _useState8[1];
+      operationSize = _useState8[0],
+      setOperationSize = _useState8[1];
 
-  var _useState9 = (0, React.useState)(0),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      addWidth = _useState10[0],
-      setAddWidth = _useState10[1];
-
-  var _useState11 = (0, React.useState)(0),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      addHeight = _useState12[0],
-      setAddHeight = _useState12[1];
-
   var _useRafState = (0, _useRaf.useRafState)(new Map()),
@@ -180,4 +167,11 @@ _useRafState2 = (0, _slicedToArray2.default)(_useRafState, 2),
 
-  var tabOffsets = (0, _useOffsets.default)(tabs, tabSizes, wrapperScrollWidth); // ========================== Util =========================
+  var tabOffsets = (0, _useOffsets.default)(tabs, tabSizes, tabContentSize[0]); // ========================== Unit =========================
 
+  var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
+  var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
+  var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
+  var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
+  var needScroll = containerExcludeExtraSizeValue < tabContentSizeValue + addSizeValue;
+  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue; // ========================== Util =========================
+
   var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
@@ -188,9 +182,9 @@ var transformMin = 0;
   if (!tabPositionTopOrBottom) {
-    transformMin = Math.min(0, wrapperHeight - wrapperScrollHeight);
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
     transformMax = 0;
   } else if (rtl) {
     transformMin = 0;
-    transformMax = Math.max(0, wrapperScrollWidth - wrapperWidth);
+    transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
   } else {
-    transformMin = Math.min(0, wrapperWidth - wrapperScrollWidth);
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
     transformMax = 0;
@@ -214,6 +208,6 @@ }
 
-  var _useState13 = (0, React.useState)(),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      lockAnimation = _useState14[0],
-      setLockAnimation = _useState14[1];
+  var _useState9 = (0, React.useState)(),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      lockAnimation = _useState10[0],
+      setLockAnimation = _useState10[1];
 
@@ -234,16 +228,12 @@ function doLockAnimation() {
       });
+    } // Skip scroll if place is enough
+
+
+    if (containerExcludeExtraSizeValue >= tabContentSizeValue) {
+      return false;
     }
 
     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);
@@ -266,5 +256,19 @@ }
     return clearTouchMoving;
-  }, [lockAnimation]); // ========================= Scroll ========================
+  }, [lockAnimation]); // ===================== Visible Range =====================
+  // Render tab node & collect tab offset
 
-  function scrollToTab() {
+  var _useVisibleRange = (0, _useVisibleRange3.default)(tabOffsets, // Container
+  visibleTabContentValue, // Transform
+  tabPositionTopOrBottom ? transformLeft : transformTop, // Tabs
+  tabContentSizeValue, // Add
+  addSizeValue, // Operation
+  operationSizeValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    tabs: tabs
+  })),
+      _useVisibleRange2 = (0, _slicedToArray2.default)(_useVisibleRange, 2),
+      visibleStart = _useVisibleRange2[0],
+      visibleEnd = _useVisibleRange2[1]; // ========================= Scroll ========================
+
+
+  var scrollToTab = function scrollToTab() {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
@@ -286,4 +290,4 @@ var tabOffset = tabOffsets.get(key) || {
           newTransform = tabOffset.right;
-        } else if (tabOffset.right + tabOffset.width > transformLeft + wrapperWidth) {
-          newTransform = tabOffset.right + tabOffset.width - wrapperWidth;
+        } else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
+          newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
         }
@@ -293,4 +297,4 @@ } // LTR
         newTransform = -tabOffset.left;
-      } else if (tabOffset.left + tabOffset.width > -transformLeft + wrapperWidth) {
-        newTransform = -(tabOffset.left + tabOffset.width - wrapperWidth);
+      } else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
+        newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
       }
@@ -306,4 +310,4 @@
         _newTransform = -tabOffset.top;
-      } else if (tabOffset.top + tabOffset.height > -transformTop + wrapperHeight) {
-        _newTransform = -(tabOffset.top + tabOffset.height - wrapperHeight);
+      } else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
+        _newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
       }
@@ -314,24 +318,5 @@
     }
-  } // ========================== Tab ==========================
-  // Render tab node & collect tab offset
+  }; // ========================== Tab ==========================
 
 
-  var _useVisibleRange = (0, _useVisibleRange3.default)(tabOffsets, {
-    width: wrapperWidth,
-    height: wrapperHeight,
-    left: transformLeft,
-    top: transformTop
-  }, {
-    width: wrapperScrollWidth,
-    height: wrapperScrollHeight
-  }, {
-    width: addWidth,
-    height: addHeight
-  }, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    tabs: tabs
-  })),
-      _useVisibleRange2 = (0, _slicedToArray2.default)(_useVisibleRange, 2),
-      visibleStart = _useVisibleRange2[0],
-      visibleEnd = _useVisibleRange2[1];
-
   var tabNodeStyle = {};
@@ -385,18 +370,15 @@
   var onListHolderResize = (0, _useRaf.default)(function () {
-    var _tabsWrapperRef$curre, _tabsWrapperRef$curre2, _innerAddButtonRef$cu, _innerAddButtonRef$cu2, _tabListRef$current, _tabListRef$current2;
-
     // Update wrapper records
-    var offsetWidth = ((_tabsWrapperRef$curre = tabsWrapperRef.current) === null || _tabsWrapperRef$curre === void 0 ? void 0 : _tabsWrapperRef$curre.offsetWidth) || 0;
-    var offsetHeight = ((_tabsWrapperRef$curre2 = tabsWrapperRef.current) === null || _tabsWrapperRef$curre2 === void 0 ? void 0 : _tabsWrapperRef$curre2.offsetHeight) || 0;
-    var newAddWidth = ((_innerAddButtonRef$cu = innerAddButtonRef.current) === null || _innerAddButtonRef$cu === void 0 ? void 0 : _innerAddButtonRef$cu.offsetWidth) || 0;
-    var newAddHeight = ((_innerAddButtonRef$cu2 = innerAddButtonRef.current) === null || _innerAddButtonRef$cu2 === void 0 ? void 0 : _innerAddButtonRef$cu2.offsetHeight) || 0;
-    setWrapperWidth(offsetWidth);
-    setWrapperHeight(offsetHeight);
-    setAddWidth(newAddWidth);
-    setAddHeight(newAddHeight);
-    var newWrapperScrollWidth = (((_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.offsetWidth) || 0) - newAddWidth;
-    var newWrapperScrollHeight = (((_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.offsetHeight) || 0) - newAddHeight;
-    setWrapperScrollWidth(newWrapperScrollWidth);
-    setWrapperScrollHeight(newWrapperScrollHeight); // Update buttons records
+    var containerSize = getSize(containerRef);
+    var extraLeftSize = getSize(extraLeftRef);
+    var extraRightSize = getSize(extraRightRef);
+    setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
+    var newAddSize = getSize(innerAddButtonRef);
+    setAddSize(newAddSize);
+    var newOperationSize = getSize(operationsRef);
+    setOperationSize(newOperationSize); // Which includes add button size
 
+    var tabContentFullSize = getSize(tabListRef);
+    setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]); // Update buttons records
+
     setTabSizes(function () {
@@ -425,6 +407,6 @@ var newSizes = new Map();
 
-  var _useState15 = (0, React.useState)(),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      inkStyle = _useState16[0],
-      setInkStyle = _useState16[1];
+  var _useState11 = (0, React.useState)(),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      inkStyle = _useState12[0],
+      setInkStyle = _useState12[1];
 
@@ -465,10 +447,8 @@ var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink
   (0, React.useEffect)(function () {
-    scrollToTab();
-  }, [activeKey, activeTabOffset, tabOffsets, tabPositionTopOrBottom]); // Should recalculate when rtl changed
+    scrollToTab(); // eslint-disable-next-line
+  }, [activeKey, (0, _util.stringify)(activeTabOffset), (0, _util.stringify)(tabOffsets), tabPositionTopOrBottom]); // Should recalculate when rtl changed
 
   (0, React.useEffect)(function () {
-    onListHolderResize();
-  }, [rtl, tabBarGutter, activeKey, tabs.map(function (tab) {
-    return tab.key;
-  }).join('_')]); // ========================= Render ========================
+    onListHolderResize(); // eslint-disable-next-line
+  }, [rtl]); // ========================= Render ========================
 
@@ -485,14 +465,16 @@ var hasDropdown = !!hiddenTabs.length;
       pingRight = transformLeft > 0;
-      pingLeft = transformLeft + wrapperWidth < wrapperScrollWidth;
+      pingLeft = transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
     } else {
       pingLeft = transformLeft < 0;
-      pingRight = -transformLeft + wrapperWidth < wrapperScrollWidth;
+      pingRight = -transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
     }
   } else {
     pingTop = transformTop < 0;
-    pingBottom = -transformTop + wrapperHeight < wrapperScrollHeight;
+    pingBottom = -transformTop + containerExcludeExtraSizeValue < tabContentSizeValue;
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
+  return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: (0, _ref3.useComposeRef)(ref, containerRef),
     role: "tablist",
@@ -505,9 +487,8 @@ className: (0, _classnames.default)("".concat(prefixCls, "-nav"), className),
     }
-  }, /*#__PURE__*/React.createElement(ExtraContent, {
+  }, /*#__PURE__*/React.createElement(_ExtraContent.default, {
+    ref: extraLeftRef,
     position: "left",
     extra: extra,
     prefixCls: prefixCls
-  }), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
-    onResize: onListHolderResize
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__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)),
@@ -535,3 +516,3 @@ ref: tabsWrapperRef
     style: inkStyle
-  }))))), /*#__PURE__*/React.createElement(_OperationNode.default, (0, _extends2.default)({}, props, {
+  })))), /*#__PURE__*/React.createElement(_OperationNode.default, (0, _extends2.default)({}, props, {
     removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
@@ -543,7 +524,8 @@ ref: operationsRef,
     tabMoving: !!lockAnimation
-  })), /*#__PURE__*/React.createElement(ExtraContent, {
+  })), /*#__PURE__*/React.createElement(_ExtraContent.default, {
+    ref: extraRightRef,
     position: "right",
     extra: extra,
     prefixCls: prefixCls
-  }));
+  })));
   /* eslint-enable */
@@ -550,0 +532,0 @@ }

package.json

 {
   "name": "rc-tabs",
-  "version": "12.1.0-alpha.1",
+  "version": "12.2.1",
   "description": "tabs ui component for react",
@@ -72,3 +72,2 @@ "engines": {
     "react-dom": "^16.0.0",
-    "react-router": "^3.0.0",
     "react-sticky": "^6.0.3",
@@ -75,0 +74,0 @@ "react-test-renderer": "^16.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163285

increased by7.71%

Dev dependency count

32

decreased by-3.03%

Number of package files

88

increased by15.79%

Lines of code

3777

increased by6.69%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

10

increased by25%

No dependency changes