refactor: rename indicatorLength with indicatorSize (#672)

* refactor: rename indicatorLength with indicatorSize

* chore: code clean

Author: MadCcc

docs/examples/indicator.tsx

@@ -29,7 +29,7 @@ export default () => {
 
   return (
     <React.StrictMode>
-      <Tabs tabBarExtraContent="extra" items={items} getIndicatorLength={(origin) => origin - 16} />
+      <Tabs tabBarExtraContent="extra" items={items} indicatorSize={(origin) => origin - 16} />
     </React.StrictMode>
   );
 };

src/TabNavList/index.tsx

@@ -27,7 +27,7 @@ import ExtraContent from './ExtraContent';
 import OperationNode from './OperationNode';
 import TabNode from './TabNode';
 import useIndicator from '../hooks/useIndicator';
-import type { GetIndicatorLength } from '../hooks/useIndicator';
+import type { GetIndicatorSize } from '../hooks/useIndicator';
 
 export interface TabNavListProps {
   id: string;
@@ -50,7 +50,7 @@ export interface TabNavListProps {
   children?: (node: React.ReactElement) => React.ReactElement;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
-  indicatorLength?: GetIndicatorLength;
+  indicatorSize?: GetIndicatorSize;
 }
 
 const getSize = (refObj: React.RefObject<HTMLElement>): SizeInfo => {
@@ -82,7 +82,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     children,
     onTabClick,
     onTabScroll,
-    indicatorLength,
+    indicatorSize,
   } = props;
   const containerRef = useRef<HTMLDivElement>();
   const extraLeftRef = useRef<HTMLDivElement>();
@@ -369,7 +369,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     activeTabOffset,
     horizontal: tabPositionTopOrBottom,
     rtl,
-    indicatorLength,
+    indicatorSize,
   })
 
   // ========================= Effect ========================

src/Tabs.tsx

@@ -18,7 +18,7 @@ import type {
 import TabContext from './TabContext';
 import TabNavListWrapper from './TabNavList/Wrapper';
 import useAnimateConfig from './hooks/useAnimateConfig';
-import type { GetIndicatorLength } from './hooks/useIndicator';
+import type { GetIndicatorSize } from './hooks/useIndicator';
 
 /**
  * Should added antd:
@@ -71,7 +71,7 @@ export interface TabsProps
   popupClassName?: string;
 
   // Indicator
-  indicatorLength?: GetIndicatorLength;
+  indicatorSize?: GetIndicatorSize;
 }
 
 function Tabs(
@@ -99,7 +99,7 @@ function Tabs(
     onTabScroll,
     getPopupContainer,
     popupClassName,
-    indicatorLength,
+    indicatorSize,
     ...restProps
   }: TabsProps,
   ref: React.Ref<HTMLDivElement>,
@@ -185,7 +185,7 @@ function Tabs(
     panes: null,
     getPopupContainer,
     popupClassName,
-    indicatorLength,
+    indicatorSize,
   };
 
   return (

src/hooks/useIndicator.ts

@@ -1,14 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react';
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import raf from 'rc-util/lib/raf';
-import { TabOffset } from '../interface';
+import type { TabOffset } from '../interface';
 
-export type GetIndicatorLength = number | ((origin: number) => number);
+export type GetIndicatorSize = number | ((origin: number) => number);
 
 export type UseIndicator = (options: {
   activeTabOffset: TabOffset,
   horizontal: boolean;
   rtl: boolean;
-  indicatorLength: GetIndicatorLength;
+  indicatorSize: GetIndicatorSize;
 }) => {
   style: React.CSSProperties;
 }
@@ -17,17 +18,17 @@ const useIndicator: UseIndicator = ({
   activeTabOffset,
   horizontal,
   rtl,
-                                      indicatorLength,
+                                      indicatorSize,
                                     }) => {
   const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
   const inkBarRafRef = useRef<number>();
 
   const getLength = (origin: number) => {
-    if (typeof indicatorLength === 'function') {
-      return indicatorLength(origin);
+    if (typeof indicatorSize === 'function') {
+      return indicatorSize(origin);
     }
-    if (typeof indicatorLength === 'number') {
-      return indicatorLength;
+    if (typeof indicatorSize === 'number') {
+      return indicatorSize;
     }
     return origin;
   }
@@ -63,7 +64,7 @@ const useIndicator: UseIndicator = ({
     });
 
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicatorLength]);
+  }, [activeTabOffset, horizontal, rtl, indicatorSize]);
 
   return {
     style: inkStyle,

tests/index.test.tsx

@@ -584,12 +584,12 @@ describe('Tabs.Basic', () => {
     render(<Tabs items={[{key: 1 as any, label: 'test'}]} />)
   })
 
-  it('support getIndicatorLength',  async () => {
-    const { container, rerender } = render(getTabs({ indicatorLength: 10 }));
+  it('support indicatorSize',  async () => {
+    const { container, rerender } = render(getTabs({ indicatorSize: 10 }));
     await waitFakeTimer();
     expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '10px' });
 
-    rerender(getTabs({ indicatorLength: (origin) => origin - 2 }));
+    rerender(getTabs({ indicatorSize: (origin) => origin - 2 }));
     await waitFakeTimer();
     expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '18px' });
   })