From c968dee3cf96c21f8c768698f287c9520ec96985 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 30 Aug 2023 15:03:22 +0800
Subject: [PATCH 1/2] refactor: rename indicatorLength with indicatorSize

---
 docs/examples/indicator.tsx |  2 +-
 src/TabNavList/index.tsx    |  8 ++++----
 src/Tabs.tsx                |  8 ++++----
 src/hooks/useIndicator.ts   | 21 +++++++++++----------
 tests/index.test.tsx        |  6 +++---
 5 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/docs/examples/indicator.tsx b/docs/examples/indicator.tsx
index 30b9579e..82b5bf21 100644
--- a/docs/examples/indicator.tsx
+++ b/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} getindicatorSize={(origin) => origin - 16} />
     </React.StrictMode>
   );
 };
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 704a618a..ff0add85 100644
--- a/src/TabNavList/index.tsx
+++ b/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 ========================
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index e9ff7dbe..084faa25 100644
--- a/src/Tabs.tsx
+++ b/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 (
diff --git a/src/hooks/useIndicator.ts b/src/hooks/useIndicator.ts
index ee2f1a47..7a0d05d1 100644
--- a/src/hooks/useIndicator.ts
+++ b/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,
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 8fe33338..c70782d9 100644
--- a/tests/index.test.tsx
+++ b/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' });
   })

From fab08748cfc0a2b225e2bb163347bf98ae88e526 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 30 Aug 2023 15:04:10 +0800
Subject: [PATCH 2/2] chore: code clean

---
 docs/examples/indicator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/examples/indicator.tsx b/docs/examples/indicator.tsx
index 82b5bf21..c204587b 100644
--- a/docs/examples/indicator.tsx
+++ b/docs/examples/indicator.tsx
@@ -29,7 +29,7 @@ export default () => {
 
   return (
     <React.StrictMode>
-      <Tabs tabBarExtraContent="extra" items={items} getindicatorSize={(origin) => origin - 16} />
+      <Tabs tabBarExtraContent="extra" items={items} indicatorSize={(origin) => origin - 16} />
     </React.StrictMode>
   );
 };