chore: rm compatible logic (#696)

src/TabNavList/index.tsx

@@ -51,9 +51,6 @@ export interface TabNavListProps {
   children?: (node: React.ReactElement) => React.ReactElement;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
-
-  /** @deprecated Use `indicator={ size: ... }` instead */
-  indicatorSize?: GetIndicatorSize;
   indicator?: {
     size?: GetIndicatorSize;
     align?: 'start' | 'center' | 'end';
@@ -111,14 +108,9 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
     children,
     onTabClick,
     onTabScroll,
-    indicatorSize,
     indicator,
   } = props;
 
-  const mergedIndicatorSize = indicator?.size || indicatorSize;
-
-  const mergedIndicatorAlign = indicator?.align || 'center';
-
   const { prefixCls, tabs } = React.useContext(TabContext);
   const containerRef = useRef<HTMLDivElement>(null);
   const extraLeftRef = useRef<HTMLDivElement>(null);
@@ -405,11 +397,8 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
   const { style: indicatorStyle } = useIndicator({
     activeTabOffset,
     horizontal: tabPositionTopOrBottom,
+    indicator,
     rtl,
-    indicator: {
-      size: mergedIndicatorSize,
-      align: mergedIndicatorAlign,
-    },
   });
 
   // ========================= Effect ========================

src/Tabs.tsx

@@ -67,11 +67,7 @@ export interface TabsProps
   moreIcon?: React.ReactNode;
   /** @private Internal usage. Not promise will rename in future */
   moreTransitionName?: string;
-
   popupClassName?: string;
-
-  /** @deprecated Use `indicator={ size: ... }` instead */
-  indicatorSize?: GetIndicatorSize;
   indicator?: {
     size?: GetIndicatorSize;
     align?: 'start' | 'center' | 'end';
@@ -103,7 +99,6 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     onTabScroll,
     getPopupContainer,
     popupClassName,
-    indicatorSize,
     indicator,
     ...restProps
   } = props;
@@ -188,7 +183,6 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     panes: null,
     getPopupContainer,
     popupClassName,
-    indicatorSize,
     indicator,
   };
 

src/hooks/useIndicator.ts

@@ -15,21 +15,24 @@ interface UseIndicatorOptions {
 }
 
 const useIndicator = (options: UseIndicatorOptions) => {
-  const { activeTabOffset, horizontal, rtl, indicator } = options;
+  const { activeTabOffset, horizontal, rtl, indicator = {} } = options;
+
+  const { size, align = 'center' } = indicator;
+
   const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
   const inkBarRafRef = useRef<number>();
 
   const getLength = React.useCallback(
     (origin: number) => {
-      if (typeof indicator?.size === 'function') {
-        return indicator?.size(origin);
+      if (typeof size === 'function') {
+        return size(origin);
       }
-      if (typeof indicator?.size === 'number') {
-        return indicator?.size;
+      if (typeof size === 'number') {
+        return size;
       }
       return origin;
     },
-    [indicator],
+    [size],
   );
 
   // Delay set ink style to avoid remove tab blink
@@ -44,27 +47,27 @@ const useIndicator = (options: UseIndicatorOptions) => {
       if (horizontal) {
         newInkStyle.width = getLength(activeTabOffset.width);
         const key = rtl ? 'right' : 'left';
-        if (indicator?.align === 'start') {
+        if (align === 'start') {
           newInkStyle[key] = activeTabOffset[key];
         }
-        if (indicator?.align === 'center') {
+        if (align === 'center') {
           newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
           newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
         }
-        if (indicator?.align === 'end') {
+        if (align === 'end') {
           newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
           newInkStyle.transform = 'translateX(-100%)';
         }
       } else {
         newInkStyle.height = getLength(activeTabOffset.height);
-        if (indicator?.align === 'start') {
+        if (align === 'start') {
           newInkStyle.top = activeTabOffset.top;
         }
-        if (indicator?.align === 'center') {
+        if (align === 'center') {
           newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
           newInkStyle.transform = 'translateY(-50%)';
         }
-        if (indicator?.align === 'end') {
+        if (align === 'end') {
           newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
           newInkStyle.transform = 'translateY(-100%)';
         }
@@ -77,7 +80,7 @@ const useIndicator = (options: UseIndicatorOptions) => {
     });
 
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicator?.align, getLength]);
+  }, [activeTabOffset, horizontal, rtl, align, getLength]);
 
   return { style: inkStyle };
 };

tests/index.test.tsx

@@ -630,11 +630,11 @@ describe('Tabs.Basic', () => {
   });
 
   it('support indicatorSize', async () => {
-    const { container, rerender } = render(getTabs({ indicatorSize: 10 }));
+    const { container, rerender } = render(getTabs({ indicator: { size: 10 } }));
     await waitFakeTimer();
     expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '10px' });
 
-    rerender(getTabs({ indicatorSize: origin => origin - 2 }));
+    rerender(getTabs({ indicator: { size: origin => origin - 2 } }));
     await waitFakeTimer();
     expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '18px' });
   });