From ca39a4b1eed70ff945745d4dc2735cd99f059201 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 5 Jan 2024 10:56:11 +0800 Subject: [PATCH] refactor: refactor indicator props (#46786) * refactor: refactor indicator props * Update components/tabs/index.tsx Co-authored-by: afc163 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 Signed-off-by: lijianan <574980606@qq.com> * Update components/config-provider/index.zh-CN.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.tsx Co-authored-by: MadCcc 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 Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.en-US.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.zh-CN.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 Co-authored-by: MadCcc --- components/config-provider/context.ts | 2 +- components/config-provider/index.en-US.md | 2 +- components/config-provider/index.tsx | 2 +- components/config-provider/index.zh-CN.md | 2 +- components/tabs/__tests__/index.test.tsx | 16 +++++++++++--- components/tabs/demo/custom-indicator.md | 4 ++-- components/tabs/demo/custom-indicator.tsx | 27 +++++++---------------- components/tabs/index.en-US.md | 3 +-- components/tabs/index.tsx | 26 +++++++++++++++++----- components/tabs/index.zh-CN.md | 3 +-- package.json | 2 +- 11 files changed, 51 insertions(+), 38 deletions(-) diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 4e913b360f..712078ad61 100644 --- 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; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 227dec4c7e..e216d6950b 100644 --- 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 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 02c90930aa..a7cc98f8a2 100644 --- 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; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index cf11efd50d..1e24fb32ca 100644 --- 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 | diff --git a/components/tabs/__tests__/index.test.tsx b/components/tabs/__tests__/index.test.tsx index 11f3cbbdf8..e090744c2f 100644 --- 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( - + - + , ); @@ -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(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Tabs] `indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.', + ); + errorSpy.mockRestore(); + }); }); diff --git a/components/tabs/demo/custom-indicator.md b/components/tabs/demo/custom-indicator.md index 39f619cb86..551d3e0260 100644 --- 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. diff --git a/components/tabs/demo/custom-indicator.tsx b/components/tabs/demo/custom-indicator.tsx index 476cf6d95b..99e73f531b 100644 --- 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('center'); + const [alignValue, setAlignValue] = React.useState('center'); return ( <> setAlign(value as TabsProps['indicatorAlign'])} + onChange={(value) => setAlignValue(value as Align)} options={['start', 'center', 'end']} /> origin - 20} - indicatorAlign={align} + indicator={{ size: (origin) => origin - 20, align: alignValue }} /> ); diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 2032fc129e..9387294f9c 100644 --- 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 | <EllipsisOutlined /> | 4.14.0 | | popupClassName | `className` for more dropdown. | string | - | 4.21.0 | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 915dd0f52c..a551d2c861 100755 --- 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 { 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 & { TabPane: typeof TabPane } = (props) => { @@ -49,6 +53,7 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { animated, style, indicatorSize, + indicator, ...otherProps } = props; const { prefixCls: customizePrefixCls, moreIcon = } = otherProps; @@ -78,16 +83,27 @@ const Tabs: React.FC & { 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( & { TabPane: typeof TabPane } = (props) => { moreIcon={moreIcon} prefixCls={prefixCls} animated={mergedAnimated} - indicatorSize={indicatorSize ?? tabs?.indicatorSize} + indicator={mergedIndicator} />, ); }; diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 80c3a505c0..c6188f2abe 100644 --- 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 | <EllipsisOutlined /> | 4.14.0 | | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 | diff --git a/package.json b/package.json index 8b7f147f99..9fe4c9d55e 100644 --- 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",