feat: Tabs support indicatorPosition prop (#691)

* feat: Tabs support indicatorPosition prop

* test: add test case

* update demo

* test: add test cas

* revert function

* Update src/hooks/useIndicator.ts

Co-authored-by: MadCcc <[email protected]>

* fix: fix

* fix: fix

---------

Co-authored-by: MadCcc <[email protected]>

Author: li-jia-nan

.dumirc.ts

@@ -5,4 +5,4 @@ export default defineConfig({
     name: 'Tabs',
   },
   mfsu: false,
-});
+});

assets/position.less

@@ -52,7 +52,8 @@
       flex-direction: column;
       min-width: 50px;
 
-      &-list, &-operations {
+      &-list,
+      &-operations {
         flex: 1 0 auto; // fix safari scroll problem
         flex-direction: column;
       }

docs/examples/indicator.tsx

@@ -1,35 +1,63 @@
 import React from 'react';
 import '../../assets/index.less';
+import type { TabsProps } from '../../src';
 import Tabs from '../../src';
 
-export default () => {
-  const [destroy] = React.useState(false);
-  const [items] = React.useState([
-    {
-      label: 'Light',
-      key: 'light',
-      children: 'Light!',
-    },
-    {
-      label: 'Bamboo',
-      key: 'bamboo',
-      children: 'Bamboo!',
-    },
-    {
-      label: 'Cute',
-      key: 'cute',
-      children: 'Cute!',
-      disabled: true,
-    },
-  ]);
+const items: TabsProps['items'] = [
+  {
+    label: 'Light',
+    key: 'light',
+    children: 'Light!',
+  },
+  {
+    label: 'Bamboo',
+    key: 'bamboo',
+    children: 'Bamboo!',
+  },
+  {
+    label: 'Cute',
+    key: 'cute',
+    children: 'Cute!',
+  },
+];
 
-  if (destroy) {
-    return null;
-  }
-
-  return (
-    <React.StrictMode>
-      <Tabs tabBarExtraContent="extra" items={items} indicatorSize={origin => origin - 16} />
-    </React.StrictMode>
-  );
-};
+export default () => (
+  <>
+    <Tabs
+      tabPosition="top"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="start"
+    />
+    <Tabs
+      tabPosition="top"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="center"
+    />
+    <Tabs
+      tabPosition="top"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="end"
+    />
+    <Tabs
+      tabPosition="left"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="start"
+    />
+    <Tabs
+      tabPosition="left"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="center"
+    />
+    <Tabs
+      tabPosition="left"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="end"
+    />
+  </>
+);

src/TabNavList/Wrapper.tsx

@@ -15,7 +15,6 @@ const TabNavListWrapper: React.FC<TabNavListWrapperProps> = ({ renderTabBar, ...
   if (renderTabBar) {
     const tabNavBarProps = {
       ...restProps,
-
       // Legacy support. We do not use this actually
       panes: tabs.map<React.ReactNode>(({ label, key, ...restTabProps }) => (
         <TabPane tab={label} key={key} tabKey={key} {...restTabProps} />

src/TabNavList/index.tsx

@@ -5,6 +5,7 @@ import useEvent from 'rc-util/lib/hooks/useEvent';
 import { useComposeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
+import TabContext from '../TabContext';
 import type { GetIndicatorSize } from '../hooks/useIndicator';
 import useIndicator from '../hooks/useIndicator';
 import useOffsets from '../hooks/useOffsets';
@@ -23,7 +24,6 @@ import type {
   TabSizeMap,
   TabsLocale,
 } from '../interface';
-import TabContext from '../TabContext';
 import { genDataNodeKey, stringify } from '../util';
 import AddButton from './AddButton';
 import ExtraContent from './ExtraContent';
@@ -52,6 +52,7 @@ export interface TabNavListProps {
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
   indicatorSize?: GetIndicatorSize;
+  indicatorAlign?: 'start' | 'center' | 'end';
 }
 
 const getTabSize = (tab: HTMLElement, containerRect: { x: number; y: number }) => {
@@ -106,6 +107,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
     onTabClick,
     onTabScroll,
     indicatorSize,
+    indicatorAlign,
   } = props;
   const { prefixCls, tabs } = React.useContext(TabContext);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -395,6 +397,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
     horizontal: tabPositionTopOrBottom,
     rtl,
     indicatorSize,
+    indicatorAlign,
   });
 
   // ========================= Effect ========================
@@ -480,7 +483,6 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
                     visibility: hasDropdown ? 'hidden' : null,
                   }}
                 />
-
                 <div
                   className={classNames(`${prefixCls}-ink-bar`, {
                     [`${prefixCls}-ink-bar-animated`]: animated.inkBar,

src/Tabs.tsx

@@ -4,6 +4,9 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import isMobile from 'rc-util/lib/isMobile';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import TabContext from './TabContext';
+import TabNavListWrapper from './TabNavList/Wrapper';
+import TabPanelList from './TabPanelList';
 import useAnimateConfig from './hooks/useAnimateConfig';
 import type { GetIndicatorSize } from './hooks/useIndicator';
 import type {
@@ -16,9 +19,6 @@ import type {
   TabPosition,
   TabsLocale,
 } from './interface';
-import TabContext from './TabContext';
-import TabNavListWrapper from './TabNavList/Wrapper';
-import TabPanelList from './TabPanelList';
 
 /**
  * Should added antd:
@@ -72,6 +72,7 @@ export interface TabsProps
 
   // Indicator
   indicatorSize?: GetIndicatorSize;
+  indicatorAlign?: 'start' | 'center' | 'end';
 }
 
 const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
@@ -100,9 +101,10 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     getPopupContainer,
     popupClassName,
     indicatorSize,
+    indicatorAlign = 'center',
     ...restProps
   } = props;
-  const tabs = React.useMemo(
+  const tabs = React.useMemo<Tab[]>(
     () => (items || []).filter(item => item && typeof item === 'object' && 'key' in item),
     [items],
   );
@@ -184,6 +186,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     getPopupContainer,
     popupClassName,
     indicatorSize,
+    indicatorAlign,
   };
 
   return (

src/hooks/useIndicator.ts

@@ -1,32 +1,34 @@
 import raf from 'rc-util/lib/raf';
-import type React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { TabOffset } from '../interface';
 
 export type GetIndicatorSize = number | ((origin: number) => number);
 
-export type UseIndicator = (options: {
+interface UseIndicatorOptions {
   activeTabOffset: TabOffset;
   horizontal: boolean;
   rtl: boolean;
   indicatorSize: GetIndicatorSize;
-}) => {
-  style: React.CSSProperties;
-};
+  indicatorAlign: 'start' | 'center' | 'end';
+}
 
-const useIndicator: UseIndicator = ({ activeTabOffset, horizontal, rtl, indicatorSize }) => {
+const useIndicator = (options: UseIndicatorOptions) => {
+  const { activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign } = options;
   const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
   const inkBarRafRef = useRef<number>();
 
-  const getLength = (origin: number) => {
-    if (typeof indicatorSize === 'function') {
-      return indicatorSize(origin);
-    }
-    if (typeof indicatorSize === 'number') {
-      return indicatorSize;
-    }
-    return origin;
-  };
+  const getLength = React.useCallback(
+    (origin: number) => {
+      if (typeof indicatorSize === 'function') {
+        return indicatorSize(origin);
+      }
+      if (typeof indicatorSize === 'number') {
+        return indicatorSize;
+      }
+      return origin;
+    },
+    [indicatorSize],
+  );
 
   // Delay set ink style to avoid remove tab blink
   function cleanInkBarRaf() {
@@ -38,18 +40,32 @@ const useIndicator: UseIndicator = ({ activeTabOffset, horizontal, rtl, indicato
 
     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);
+        const key = rtl ? 'right' : 'left';
+        if (indicatorAlign === 'start') {
+          newInkStyle[key] = activeTabOffset[key];
+        }
+        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%)';
+        }
       }
     }
 
@@ -59,11 +75,9 @@ const useIndicator: UseIndicator = ({ activeTabOffset, horizontal, rtl, indicato
     });
 
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicatorSize]);
+  }, [activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign, getLength]);
 
-  return {
-    style: inkStyle,
-  };
+  return { style: inkStyle };
 };
 
 export default useIndicator;

src/interface.ts

@@ -17,6 +17,7 @@ export interface TabOffset {
   right: number;
   top: number;
 }
+
 export type TabOffsetMap = Map<React.Key, TabOffset>;
 
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';