rc-tabs - npm Package Compare versions

Comparing version 12.14.1 to 12.15.0

es/hooks/useIndicator.d.ts

@@ -1,5 +0,5 @@
-import type React from 'react';
+import React from 'react';
 import type { TabOffset } from '../interface';
 export type GetIndicatorSize = number | ((origin: number) => number);
-export type UseIndicator = (options: {
+interface UseIndicatorOptions {
     activeTabOffset: TabOffset;
@@ -9,6 +9,7 @@ horizontal: boolean;
     indicatorSize: GetIndicatorSize;
-}) => {
+    indicatorAlign: 'start' | 'center' | 'end';
+}
+declare const useIndicator: (options: UseIndicatorOptions) => {
     style: React.CSSProperties;
 };
-declare const useIndicator: UseIndicator;
 export default useIndicator;

es/hooks/useIndicator.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import raf from "rc-util/es/raf";
-import { useEffect, useRef, useState } from 'react';
-var useIndicator = function useIndicator(_ref) {
-  var activeTabOffset = _ref.activeTabOffset,
-    horizontal = _ref.horizontal,
-    rtl = _ref.rtl,
-    indicatorSize = _ref.indicatorSize;
+import React, { useEffect, useRef, useState } from 'react';
+var useIndicator = function useIndicator(options) {
+  var activeTabOffset = options.activeTabOffset,
+    horizontal = options.horizontal,
+    rtl = options.rtl,
+    indicatorSize = options.indicatorSize,
+    indicatorAlign = options.indicatorAlign;
   var _useState = useState(),
@@ -14,3 +15,3 @@ _useState2 = _slicedToArray(_useState, 2),
   var inkBarRafRef = useRef();
-  var getLength = function getLength(origin) {
+  var getLength = React.useCallback(function (origin) {
     if (typeof indicatorSize === 'function') {
@@ -23,3 +24,3 @@ return indicatorSize(origin);
     return origin;
-  };
+  }, [indicatorSize]);
 
@@ -34,14 +35,28 @@ // Delay set ink style to avoid remove tab blink
       if (horizontal) {
-        if (rtl) {
-          newInkStyle.right = activeTabOffset.right + activeTabOffset.width / 2;
-          newInkStyle.transform = 'translateX(50%)';
-        } else {
-          newInkStyle.left = activeTabOffset.left + activeTabOffset.width / 2;
-          newInkStyle.transform = 'translateX(-50%)';
+        newInkStyle.width = getLength(activeTabOffset.width);
+        var key = rtl ? 'right' : 'left';
+        if (indicatorAlign === 'start') {
+          newInkStyle[key] = activeTabOffset[key];
         }
-        newInkStyle.width = getLength(activeTabOffset.width);
+        if (indicatorAlign === 'center') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
+          newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
+        }
+        if (indicatorAlign === 'end') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
+          newInkStyle.transform = 'translateX(-100%)';
+        }
       } else {
-        newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
-        newInkStyle.transform = 'translateY(-50%)';
         newInkStyle.height = getLength(activeTabOffset.height);
+        if (indicatorAlign === 'start') {
+          newInkStyle.top = activeTabOffset.top;
+        }
+        if (indicatorAlign === 'center') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
+          newInkStyle.transform = 'translateY(-50%)';
+        }
+        if (indicatorAlign === 'end') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
+          newInkStyle.transform = 'translateY(-100%)';
+        }
       }
@@ -54,3 +69,3 @@ }
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicatorSize]);
+  }, [activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign, getLength]);
   return {
@@ -57,0 +72,0 @@ style: inkStyle

es/TabNavList/index.d.ts

@@ -26,4 +26,5 @@ import * as React from 'react';
     indicatorSize?: GetIndicatorSize;
+    indicatorAlign?: 'start' | 'center' | 'end';
 }
 declare const TabNavList: React.ForwardRefExoticComponent<TabNavListProps & React.RefAttributes<HTMLDivElement>>;
 export default TabNavList;

es/TabNavList/index.js

@@ -6,2 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* eslint-disable react-hooks/exhaustive-deps */
 import classNames from 'classnames';
@@ -13,2 +14,3 @@ import ResizeObserver from 'rc-resize-observer';
 import { useEffect, useRef, useState } from 'react';
+import TabContext from "../TabContext";
 import useIndicator from "../hooks/useIndicator";
@@ -20,3 +22,2 @@ import useOffsets from "../hooks/useOffsets";
 import useVisibleRange from "../hooks/useVisibleRange";
-import TabContext from "../TabContext";
 import { genDataNodeKey, stringify } from "../util";
@@ -86,3 +87,4 @@ import AddButton from "./AddButton";
     onTabScroll = props.onTabScroll,
-    indicatorSize = props.indicatorSize;
+    indicatorSize = props.indicatorSize,
+    indicatorAlign = props.indicatorAlign;
   var _React$useContext = React.useContext(TabContext),
@@ -382,3 +384,4 @@ prefixCls = _React$useContext.prefixCls,
       rtl: rtl,
-      indicatorSize: indicatorSize
+      indicatorSize: indicatorSize,
+      indicatorAlign: indicatorAlign
     }),
@@ -390,3 +393,2 @@ indicatorStyle = _useIndicator.style;
     scrollToTab();
-    // eslint-disable-next-line
   }, [activeKey, transformMin, transformMax, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]);
@@ -393,0 +395,0 @@

es/Tabs.d.ts

@@ -31,4 +31,5 @@ import * as React from 'react';
     indicatorSize?: GetIndicatorSize;
+    indicatorAlign?: 'start' | 'center' | 'end';
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

es/Tabs.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize"];
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize", "indicatorAlign"];
 // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
@@ -15,7 +15,6 @@ import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import useAnimateConfig from "./hooks/useAnimateConfig";
 import TabContext from "./TabContext";
 import TabNavListWrapper from "./TabNavList/Wrapper";
 import TabPanelList from "./TabPanelList";
-
+import useAnimateConfig from "./hooks/useAnimateConfig";
 /**
@@ -29,5 +28,3 @@ * Should added antd:
  * - keyboard
- */
-
-// Used for accessibility
+ */ // Used for accessibility
 var uuid = 0;
@@ -62,2 +59,4 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
     indicatorSize = props.indicatorSize,
+    _props$indicatorAlign = props.indicatorAlign,
+    indicatorAlign = _props$indicatorAlign === void 0 ? 'center' : _props$indicatorAlign,
     restProps = _objectWithoutProperties(props, _excluded);
@@ -165,3 +164,4 @@ var tabs = React.useMemo(function () {
     popupClassName: popupClassName,
-    indicatorSize: indicatorSize
+    indicatorSize: indicatorSize,
+    indicatorAlign: indicatorAlign
   });
@@ -168,0 +168,0 @@ return /*#__PURE__*/React.createElement(TabContext.Provider, {

lib/hooks/useIndicator.d.ts

@@ -1,5 +0,5 @@
-import type React from 'react';
+import React from 'react';
 import type { TabOffset } from '../interface';
 export type GetIndicatorSize = number | ((origin: number) => number);
-export type UseIndicator = (options: {
+interface UseIndicatorOptions {
     activeTabOffset: TabOffset;
@@ -9,6 +9,7 @@ horizontal: boolean;
     indicatorSize: GetIndicatorSize;
-}) => {
+    indicatorAlign: 'start' | 'center' | 'end';
+}
+declare const useIndicator: (options: UseIndicatorOptions) => {
     style: React.CSSProperties;
 };
-declare const useIndicator: UseIndicator;
 export default useIndicator;

lib/hooks/useIndicator.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -10,8 +11,11 @@ value: true
 var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
-var _react = require("react");
-var useIndicator = function useIndicator(_ref) {
-  var activeTabOffset = _ref.activeTabOffset,
-    horizontal = _ref.horizontal,
-    rtl = _ref.rtl,
-    indicatorSize = _ref.indicatorSize;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var useIndicator = function useIndicator(options) {
+  var activeTabOffset = options.activeTabOffset,
+    horizontal = options.horizontal,
+    rtl = options.rtl,
+    indicatorSize = options.indicatorSize,
+    indicatorAlign = options.indicatorAlign;
   var _useState = (0, _react.useState)(),
@@ -22,3 +26,3 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
   var inkBarRafRef = (0, _react.useRef)();
-  var getLength = function getLength(origin) {
+  var getLength = _react.default.useCallback(function (origin) {
     if (typeof indicatorSize === 'function') {
@@ -31,3 +35,3 @@ return indicatorSize(origin);
     return origin;
-  };
+  }, [indicatorSize]);
 
@@ -42,14 +46,28 @@ // Delay set ink style to avoid remove tab blink
       if (horizontal) {
-        if (rtl) {
-          newInkStyle.right = activeTabOffset.right + activeTabOffset.width / 2;
-          newInkStyle.transform = 'translateX(50%)';
-        } else {
-          newInkStyle.left = activeTabOffset.left + activeTabOffset.width / 2;
-          newInkStyle.transform = 'translateX(-50%)';
+        newInkStyle.width = getLength(activeTabOffset.width);
+        var key = rtl ? 'right' : 'left';
+        if (indicatorAlign === 'start') {
+          newInkStyle[key] = activeTabOffset[key];
         }
-        newInkStyle.width = getLength(activeTabOffset.width);
+        if (indicatorAlign === 'center') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
+          newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
+        }
+        if (indicatorAlign === 'end') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
+          newInkStyle.transform = 'translateX(-100%)';
+        }
       } else {
-        newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
-        newInkStyle.transform = 'translateY(-50%)';
         newInkStyle.height = getLength(activeTabOffset.height);
+        if (indicatorAlign === 'start') {
+          newInkStyle.top = activeTabOffset.top;
+        }
+        if (indicatorAlign === 'center') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
+          newInkStyle.transform = 'translateY(-50%)';
+        }
+        if (indicatorAlign === 'end') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
+          newInkStyle.transform = 'translateY(-100%)';
+        }
       }
@@ -62,3 +80,3 @@ }
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicatorSize]);
+  }, [activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign, getLength]);
   return {
@@ -65,0 +83,0 @@ style: inkStyle

lib/TabNavList/index.d.ts

@@ -26,4 +26,5 @@ import * as React from 'react';
     indicatorSize?: GetIndicatorSize;
+    indicatorAlign?: 'start' | 'center' | 'end';
 }
 declare const TabNavList: React.ForwardRefExoticComponent<TabNavListProps & React.RefAttributes<HTMLDivElement>>;
 export default TabNavList;

lib/TabNavList/index.js

@@ -20,2 +20,3 @@ "use strict";
 var React = _react;
+var _TabContext = _interopRequireDefault(require("../TabContext"));
 var _useIndicator2 = _interopRequireDefault(require("../hooks/useIndicator"));
@@ -27,3 +28,2 @@ var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
 var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));
-var _TabContext = _interopRequireDefault(require("../TabContext"));
 var _util = require("../util");
@@ -36,2 +36,4 @@ var _AddButton = _interopRequireDefault(require("./AddButton"));
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable react-hooks/exhaustive-deps */
+
 var getTabSize = function getTabSize(tab, containerRect) {
@@ -96,3 +98,4 @@ // tabListRef
     onTabScroll = props.onTabScroll,
-    indicatorSize = props.indicatorSize;
+    indicatorSize = props.indicatorSize,
+    indicatorAlign = props.indicatorAlign;
   var _React$useContext = React.useContext(_TabContext.default),
@@ -392,3 +395,4 @@ prefixCls = _React$useContext.prefixCls,
       rtl: rtl,
-      indicatorSize: indicatorSize
+      indicatorSize: indicatorSize,
+      indicatorAlign: indicatorAlign
     }),
@@ -400,3 +404,2 @@ indicatorStyle = _useIndicator.style;
     scrollToTab();
-    // eslint-disable-next-line
   }, [activeKey, transformMin, transformMax, (0, _util.stringify)(activeTabOffset), (0, _util.stringify)(tabOffsets), tabPositionTopOrBottom]);
@@ -403,0 +406,0 @@

lib/Tabs.d.ts

@@ -31,4 +31,5 @@ import * as React from 'react';
     indicatorSize?: GetIndicatorSize;
+    indicatorAlign?: 'start' | 'center' | 'end';
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

lib/Tabs.js

@@ -20,7 +20,7 @@ "use strict";
 var React = _react;
-var _useAnimateConfig = _interopRequireDefault(require("./hooks/useAnimateConfig"));
 var _TabContext = _interopRequireDefault(require("./TabContext"));
 var _Wrapper = _interopRequireDefault(require("./TabNavList/Wrapper"));
 var _TabPanelList = _interopRequireDefault(require("./TabPanelList"));
-var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize"]; // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+var _useAnimateConfig = _interopRequireDefault(require("./hooks/useAnimateConfig"));
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize", "indicatorAlign"]; // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -66,2 +66,4 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     indicatorSize = props.indicatorSize,
+    _props$indicatorAlign = props.indicatorAlign,
+    indicatorAlign = _props$indicatorAlign === void 0 ? 'center' : _props$indicatorAlign,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -169,3 +171,4 @@ var tabs = React.useMemo(function () {
     popupClassName: popupClassName,
-    indicatorSize: indicatorSize
+    indicatorSize: indicatorSize,
+    indicatorAlign: indicatorAlign
   });
@@ -172,0 +175,0 @@ return /*#__PURE__*/React.createElement(_TabContext.default.Provider, {

package.json

 {
   "name": "rc-tabs",
-  "version": "12.14.1",
+  "version": "12.15.0",
   "description": "tabs ui component for react",
@@ -52,3 +52,3 @@ "keywords": [
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^14.1.2",
     "@types/classnames": "^2.2.10",
@@ -58,5 +58,5 @@ "@types/enzyme": "^3.10.5",
     "@types/keyv": "4.2.0",
-    "@types/react": "^17.0.14",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "^18.0.11",
-    "@umijs/fabric": "^2.3.1",
+    "@umijs/fabric": "^4.0.1",
     "coveralls": "^3.0.6",
@@ -70,7 +70,7 @@ "cross-env": "^7.0.2",
     "father": "^4.0.0",
-    "gh-pages": "^5.0.0",
+    "gh-pages": "^6.1.0",
     "history": "^5.3.0",
     "immutability-helper": "^3.0.1",
     "less": "^4.1.3",
-    "np": "^7.5.0",
+    "np": "^9.0.0",
     "preact-compat": "^3.16.0",
@@ -77,0 +77,0 @@ "rc-test": "^7.0.14",

No alert changes

Improved metrics

Total package byte prevSize

164318

increased by1.96%

Lines of code

3965

increased by1.25%

No dependency changes