feat: custom indicator length (#671)

* feat: custom indicator length

* fix: useEffect deps

* test: add test case

* chore: rename

* chore: update test case

.gitignore

@@ -31,6 +31,7 @@ es
 coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 
 # umi
 .umi

docs/demo/indicator.md

@@ -0,0 +1,8 @@
+---
+title: Indicator
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/indicator.tsx"></code>

docs/examples/indicator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Tabs from'../../src';
+import '../../assets/index.less';
+
+export default () => {
+  const [destroy, setDestroy] = React.useState(false);
+  const [items, setItems] = React.useState([
+    {
+      label: 'Light',
+      key: 'light',
+      children: 'Light!',
+    },
+    {
+      label: 'Bamboo',
+      key: 'bamboo',
+      children: 'Bamboo!',
+    },
+    {
+      label: 'Cute',
+      key: 'cute',
+      children: 'Cute!',
+      disabled: true,
+    },
+  ]);
+
+  if (destroy) {
+    return null;
+  }
+
+  return (
+    <React.StrictMode>
+      <Tabs tabBarExtraContent="extra" items={items} getIndicatorLength={(origin) => origin - 16} />
+    </React.StrictMode>
+  );
+};

src/TabNavList/index.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import useEvent from 'rc-util/lib/hooks/useEvent';
-import raf from 'rc-util/lib/raf';
 import { useComposeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
@@ -27,6 +26,8 @@ import AddButton from './AddButton';
 import ExtraContent from './ExtraContent';
 import OperationNode from './OperationNode';
 import TabNode from './TabNode';
+import useIndicator from '../hooks/useIndicator';
+import type { GetIndicatorLength } from '../hooks/useIndicator';
 
 export interface TabNavListProps {
   id: string;
@@ -49,6 +50,7 @@ export interface TabNavListProps {
   children?: (node: React.ReactElement) => React.ReactElement;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
+  indicatorLength?: GetIndicatorLength;
 }
 
 const getSize = (refObj: React.RefObject<HTMLElement>): SizeInfo => {
@@ -80,6 +82,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     children,
     onTabClick,
     onTabScroll,
+    indicatorLength,
   } = props;
   const containerRef = useRef<HTMLDivElement>();
   const extraLeftRef = useRef<HTMLDivElement>();
@@ -361,41 +364,13 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
   const hiddenTabs = [...startHiddenTabs, ...endHiddenTabs];
 
   // =================== Link & Operations ===================
-  const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
-
   const activeTabOffset = tabOffsets.get(activeKey);
-
-  // Delay set ink style to avoid remove tab blink
-  const inkBarRafRef = useRef<number>();
-  function cleanInkBarRaf() {
-    raf.cancel(inkBarRafRef.current);
-  }
-
-  useEffect(() => {
-    const newInkStyle: React.CSSProperties = {};
-
-    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 = raf(() => {
-      setInkStyle(newInkStyle);
-    });
-
-    return cleanInkBarRaf;
-  }, [activeTabOffset, tabPositionTopOrBottom, rtl]);
+  const { style: indicatorStyle } = useIndicator({
+    activeTabOffset,
+    horizontal: tabPositionTopOrBottom,
+    rtl,
+    indicatorLength,
+  })
 
   // ========================= Effect ========================
   useEffect(() => {
@@ -485,7 +460,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
                 className={classNames(`${prefixCls}-ink-bar`, {
                   [`${prefixCls}-ink-bar-animated`]: animated.inkBar,
                 })}
-                style={inkStyle}
+                style={indicatorStyle}
               />
             </div>
           </ResizeObserver>

src/Tabs.tsx

@@ -6,18 +6,19 @@ import isMobile from 'rc-util/lib/isMobile';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import TabPanelList from './TabPanelList';
 import type {
-  TabPosition,
-  RenderTabBar,
-  TabsLocale,
-  EditableConfig,
   AnimatedConfig,
+  EditableConfig,
   OnTabScroll,
+  RenderTabBar,
   Tab,
   TabBarExtraContent,
+  TabPosition,
+  TabsLocale,
 } from './interface';
 import TabContext from './TabContext';
 import TabNavListWrapper from './TabNavList/Wrapper';
 import useAnimateConfig from './hooks/useAnimateConfig';
+import type { GetIndicatorLength } from './hooks/useIndicator';
 
 /**
  * Should added antd:
@@ -68,6 +69,9 @@ export interface TabsProps
   moreTransitionName?: string;
 
   popupClassName?: string;
+
+  // Indicator
+  indicatorLength?: GetIndicatorLength;
 }
 
 function Tabs(
@@ -95,6 +99,7 @@ function Tabs(
     onTabScroll,
     getPopupContainer,
     popupClassName,
+    indicatorLength,
     ...restProps
   }: TabsProps,
   ref: React.Ref<HTMLDivElement>,
@@ -166,8 +171,6 @@ function Tabs(
     mobile,
   };
 
-  let tabNavBar: React.ReactElement;
-
   const tabNavBarProps = {
     ...sharedProps,
     editable,
@@ -182,6 +185,7 @@ function Tabs(
     panes: null,
     getPopupContainer,
     popupClassName,
+    indicatorLength,
   };
 
   return (
@@ -201,7 +205,6 @@ function Tabs(
         )}
         {...restProps}
       >
-        {tabNavBar}
         <TabNavListWrapper {...tabNavBarProps} renderTabBar={renderTabBar} />
         <TabPanelList
           destroyInactiveTabPane={destroyInactiveTabPane}

src/hooks/useIndicator.ts

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react';
+import raf from 'rc-util/lib/raf';
+import { TabOffset } from '../interface';
+
+export type GetIndicatorLength = number | ((origin: number) => number);
+
+export type UseIndicator = (options: {
+  activeTabOffset: TabOffset,
+  horizontal: boolean;
+  rtl: boolean;
+  indicatorLength: GetIndicatorLength;
+}) => {
+  style: React.CSSProperties;
+}
+
+const useIndicator: UseIndicator = ({
+  activeTabOffset,
+  horizontal,
+  rtl,
+                                      indicatorLength,
+                                    }) => {
+  const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
+  const inkBarRafRef = useRef<number>();
+
+  const getLength = (origin: number) => {
+    if (typeof indicatorLength === 'function') {
+      return indicatorLength(origin);
+    }
+    if (typeof indicatorLength === 'number') {
+      return indicatorLength;
+    }
+    return origin;
+  }
+
+  // Delay set ink style to avoid remove tab blink
+  function cleanInkBarRaf() {
+    raf.cancel(inkBarRafRef.current);
+  }
+
+  useEffect(() => {
+    const newInkStyle: React.CSSProperties = {};
+
+    if (activeTabOffset) {
+      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);
+      } else {
+        newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
+        newInkStyle.transform = 'translateY(-50%)';
+        newInkStyle.height = getLength(activeTabOffset.height);
+      }
+    }
+
+    cleanInkBarRaf();
+    inkBarRafRef.current = raf(() => {
+      setInkStyle(newInkStyle);
+    });
+
+    return cleanInkBarRaf;
+  }, [activeTabOffset, horizontal, rtl, indicatorLength]);
+
+  return {
+    style: inkStyle,
+  }
+}
+
+export default useIndicator;

tests/common/util.tsx

@@ -20,11 +20,12 @@ export interface HackInfo {
   add?: number;
   more?: number;
   extra?: number;
+  dropdown?: number;
 }
 
 export function getOffsetSizeFunc(info: HackInfo = {}) {
   return function getOffsetSize() {
-    const { container = 50, extra = 10, tabNode = 20, add = 10, more = 10 } = info;
+    const { container = 50, extra = 10, tabNode = 20, add = 10, more = 10, dropdown = 10 } = info;
 
     if (this.classList.contains('rc-tabs-nav')) {
       return container;
@@ -70,9 +71,9 @@ export function getOffsetSizeFunc(info: HackInfo = {}) {
     // if (this.className.includes('rc-tabs-nav-more')) {
     //   return info.more || 10;
     // }
-    // if (this.className.includes('rc-tabs-dropdown')) {
-    //   return info.dropdown || 10;
-    // }
+    if (this.className.includes('rc-tabs-dropdown')) {
+      return dropdown;
+    }
 
     throw new Error(`className not match ${this.className}`);
   };
@@ -81,6 +82,9 @@ export function getOffsetSizeFunc(info: HackInfo = {}) {
 export function btnOffsetPosition() {
   // eslint-disable-next-line @typescript-eslint/no-invalid-this
   const btn = this as HTMLButtonElement;
+  if (!btn.parentNode) {
+    return 0;
+  }
   const btnList = Array.from(btn.parentNode.childNodes).filter(ele =>
     (ele as HTMLElement).className.includes('rc-tabs-tab'),
   );

tests/index.test.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import Tabs from '../src';
 import type { TabsProps } from '../src/Tabs';
 import type { HackInfo } from './common/util';
-import { getOffsetSizeFunc } from './common/util';
+import { getOffsetSizeFunc, waitFakeTimer } from './common/util';
 
 global.animated = null;
 
@@ -583,4 +583,14 @@ describe('Tabs.Basic', () => {
   it('key could be number', () => {
     render(<Tabs items={[{key: 1 as any, label: 'test'}]} />)
   })
+
+  it('support getIndicatorLength',  async () => {
+    const { container, rerender } = render(getTabs({ indicatorLength: 10 }));
+    await waitFakeTimer();
+    expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '10px' });
+
+    rerender(getTabs({ indicatorLength: (origin) => origin - 2 }));
+    await waitFakeTimer();
+    expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '18px' });
+  })
 });