refactor: refactor indicator props (#46786)

* refactor: refactor indicator props * Update components/tabs/index.tsx Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * fix: update * fix: fix * fix: fix * fix: fix * fix: fix * test: add test case * docs: update docs * Update components/config-provider/index.en-US.md Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/config-provider/index.zh-CN.md Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.tsx Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.zh-CN.md Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.en-US.md Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.zh-CN.md Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: MadCcc <madccc@foxmail.com>
2025-01-18 22:36:31 +08:00 · 2024-01-05 10:56:11 +08:00 · 2024-01-05 10:56:11 +08:00 · ca39a4b1ee
commit ca39a4b1ee
parent 635220b62d
11 changed files with 51 additions and 38 deletions
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -175,7 +175,7 @@ export interface ConfigConsumerProps {
  tag?: ComponentStyleConfig;
  table?: ComponentStyleConfig;
  card?: ComponentStyleConfig;
-  tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicatorSize'>;
+  tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
  timeline?: ComponentStyleConfig;
  timePicker?: ComponentStyleConfig;
  upload?: ComponentStyleConfig;
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -147,7 +147,7 @@ const {
 | statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -190,7 +190,7 @@ export interface ConfigProviderProps {
  tag?: ComponentStyleConfig;
  table?: ComponentStyleConfig;
  card?: ComponentStyleConfig;
-  tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicatorSize'>;
+  tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
  timeline?: ComponentStyleConfig;
  timePicker?: ComponentStyleConfig;
  upload?: ComponentStyleConfig;
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -149,7 +149,7 @@ const {
 | statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
--- a/components/tabs/tests/index.test.tsx
+++ b/components/tabs/tests/index.test.tsx
@ -1,9 +1,10 @@
 import React from 'react';
+
 import Tabs from '..';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
-import { resetWarned } from '../../_util/warning';
 import ConfigProvider from '../../config-provider';

 const { TabPane } = Tabs;
@ -129,10 +130,10 @@ describe('Tabs', () => {

  it('indicator in ConfigProvider should work', () => {
    const { container } = render(
-      <ConfigProvider tabs={{ indicatorSize: 12 }}>
+      <ConfigProvider tabs={{ indicator: { size: 12 } }}>
        <Tabs items={[{ key: '1', label: 'foo' }]} className="Tabs_1" />
        <Tabs items={[{ key: '2', label: 'bar' }]} className="Tabs_2" />
-        <Tabs items={[{ key: '3', label: 'too' }]} indicatorSize={4} className="Tabs_3" />
+        <Tabs items={[{ key: '3', label: 'too' }]} indicator={{ size: 4 }} className="Tabs_3" />
      </ConfigProvider>,
    );

@ -140,4 +141,13 @@ describe('Tabs', () => {
    expect(container.querySelector('.Tabs_2 .ant-tabs-ink-bar')).toHaveStyle({ width: 12 });
    expect(container.querySelector('.Tabs_3 .ant-tabs-ink-bar')).toHaveStyle({ width: 4 });
  });
+
+  it('warning for indicatorSize', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Tabs indicatorSize={10} />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tabs] `indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });
--- a/components/tabs/demo/custom-indicator.md
+++ b/components/tabs/demo/custom-indicator.md
@ -1,7 +1,7 @@
 ## zh-CN

-自定义指示器宽度和对齐方式。
+设置 `indicator` 属性，自定义指示条宽度和对齐方式。

 ## en-US

-Custom indicator size and align.
+Set `indicator` prop to custom indicator size and align.
--- a/components/tabs/demo/custom-indicator.tsx
+++ b/components/tabs/demo/custom-indicator.tsx
@ -7,39 +7,28 @@ const onChange = (key: string) => {
 };

 const items: TabsProps['items'] = [
-  {
-    key: '1',
-    label: 'Tab 1',
-    children: 'Content of Tab Pane 1',
-  },
-  {
-    key: '2',
-    label: 'Tab 2',
-    children: 'Content of Tab Pane 2',
-  },
-  {
-    key: '3',
-    label: 'Tab 3',
-    children: 'Content of Tab Pane 3',
-  },
+  { key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' },
+  { key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' },
+  { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },
 ];

+type Align = 'start' | 'center' | 'end';
+
 const App: React.FC = () => {
-  const [align, setAlign] = React.useState<TabsProps['indicatorAlign']>('center');
+  const [alignValue, setAlignValue] = React.useState<Align>('center');
  return (
    <>
      <Segmented
        defaultValue="center"
        style={{ marginBottom: 8 }}
-        onChange={(value) => setAlign(value as TabsProps['indicatorAlign'])}
+        onChange={(value) => setAlignValue(value as Align)}
        options={['start', 'center', 'end']}
      />
      <Tabs
        defaultActiveKey="1"
        items={items}
        onChange={onChange}
-        indicatorSize={(origin) => origin - 20}
-        indicatorAlign={align}
+        indicator={{ size: (origin) => origin - 20, align: alignValue }}
      />
    </>
  );
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -53,8 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | centered | Centers tabs | boolean | false | 4.4.0 |
 | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - |  |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false |  |
-| indicatorAlign | Customize align of indicator | `start` \| `center` \| `end` | `center` | 5.13.0 |
-| indicatorSize | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 |
+| indicator | Customize `size` and `align` of indicator | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
 | items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 |
 | moreIcon | The custom icon of ellipsis | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
 | popupClassName | `className` for more dropdown. | string | - | 4.21.0 |
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@ -5,17 +5,19 @@ import PlusOutlined from '@ant-design/icons/PlusOutlined';
 import classNames from 'classnames';
 import type { TabsProps as RcTabsProps } from 'rc-tabs';
 import RcTabs from 'rc-tabs';
+import type { GetIndicatorSize } from 'rc-tabs/lib/hooks/useIndicator';
 import type { EditableConfig } from 'rc-tabs/lib/interface';

 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import useAnimateConfig from './hooks/useAnimateConfig';
 import useLegacyItems from './hooks/useLegacyItems';
 import useStyle from './style';
-import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
-import TabPane, { type TabPaneProps } from './TabPane';
+import TabPane from './TabPane';
+import type { TabPaneProps } from './TabPane';

 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
@ -31,6 +33,8 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
  addIcon?: React.ReactNode;
  onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
  children?: React.ReactNode;
+  /** @deprecated Please use `indicator={{ size: ... }}` instead */
+  indicatorSize?: GetIndicatorSize;
 }

 const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
@ -49,6 +53,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
    animated,
    style,
    indicatorSize,
+    indicator,
    ...otherProps
  } = props;
  const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = otherProps;
@ -78,16 +83,27 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
      'breaking',
      '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
    );
+
+    warning(
+      !(indicatorSize || tabs?.indicatorSize),
+      'deprecated',
+      '`indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.',
+    );
  }

+  const size = useSize(customSize);
+
  const mergedItems = useLegacyItems(items, children);

  const mergedAnimated = useAnimateConfig(prefixCls, animated);

-  const size = useSize(customSize);
-
  const mergedStyle: React.CSSProperties = { ...tabs?.style, ...style };

+  const mergedIndicator: TabsProps['indicator'] = {
+    align: indicator?.align ?? tabs?.indicator?.align,
+    size: indicator?.size ?? indicatorSize ?? tabs?.indicator?.size ?? tabs?.indicatorSize,
+  };
+
  return wrapCSSVar(
    <RcTabs
      direction={direction}
@ -115,7 +131,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
      moreIcon={moreIcon}
      prefixCls={prefixCls}
      animated={mergedAnimated}
-      indicatorSize={indicatorSize ?? tabs?.indicatorSize}
+      indicator={mergedIndicator}
    />,
  );
 };
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -55,8 +55,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | centered | 标签居中展示 | boolean | false | 4.4.0 |
 | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
-| indicatorAlign | 自定义指示条对齐方式 | `start` \| `center` \| `end` | `center` | 5.13.0 |
-| indicatorSize | 自定义指示条长度，默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 |
+| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
 | items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 |
 | moreIcon | 自定义折叠 icon | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
 | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
--- a/package.json
+++ b/package.json
@ -151,7 +151,7 @@
    "rc-steps": "~6.0.1",
    "rc-switch": "~4.1.0",
    "rc-table": "~7.36.1",
-    "rc-tabs": "~12.15.0",
+    "rc-tabs": "~14.0.0",
    "rc-textarea": "~1.6.3",
    "rc-tooltip": "~6.1.3",
    "rc-tree": "~5.8.2",