From 65f067eb132fc50e7b6c050a17bb81c61973f0f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Fri, 16 Sep 2022 15:52:14 +0800 Subject: [PATCH] feat: Steps supports items (#37531) * feat: support items * feat: update demo * test: update package * test: update use type * test: update for test * test: update for lint * feat: update doc * test: update for lint * test: update for lint * test: update for lint * test: add deprecated dome * test: add deprecated dome * doc: update doc * feat: update package * test: add test case --- .../__tests__/components.test.tsx | 12 +- components/config-provider/demo/direction.md | 47 +++- components/config-provider/demo/theme.md | 57 +++-- .../__snapshots__/demo-extend.test.ts.snap | 133 ++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 133 ++++++++++ .../__snapshots__/index.test.tsx.snap | 236 ++++++++++++++++++ components/steps/__tests__/index.test.tsx | 61 +++++ components/steps/demo/clickable.md | 50 +++- .../steps/demo/customized-progress-dot.md | 32 ++- components/steps/demo/deprecated.md | 32 +++ components/steps/demo/error.md | 26 +- components/steps/demo/icon.md | 36 ++- components/steps/demo/label-placement.md | 35 +-- components/steps/demo/nav.md | 94 ++++--- components/steps/demo/progress-debug.md | 55 ++-- components/steps/demo/progress-dot-small.md | 61 +++-- components/steps/demo/progress-dot.md | 59 +++-- components/steps/demo/progress.md | 27 +- components/steps/demo/simple.md | 26 +- components/steps/demo/small-size.md | 22 +- components/steps/demo/step-next.md | 9 +- components/steps/demo/steps-in-steps.md | 49 +++- components/steps/demo/vertical-small.md | 24 +- components/steps/demo/vertical.md | 26 +- components/steps/index.en-US.md | 10 +- components/steps/index.tsx | 37 +-- components/steps/index.zh-CN.md | 17 +- components/steps/useLegacyItems.ts | 30 +++ components/tabs/index.en-US.md | 3 +- package.json | 2 +- 30 files changed, 1196 insertions(+), 245 deletions(-) create mode 100644 components/steps/demo/deprecated.md create mode 100644 components/steps/useLegacyItems.ts diff --git a/components/config-provider/__tests__/components.test.tsx b/components/config-provider/__tests__/components.test.tsx index ff3eb2ee07..e6895954de 100644 --- a/components/config-provider/__tests__/components.test.tsx +++ b/components/config-provider/__tests__/components.test.tsx @@ -489,9 +489,15 @@ describe('ConfigProvider', () => { myProps.iconPrefix = 'prefixIcon'; } return ( - - - + ); }); diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md index 1cacb536f7..bde2b637dc 100644 --- a/components/config-provider/demo/direction.md +++ b/components/config-provider/demo/direction.md @@ -52,7 +52,6 @@ const ButtonGroup = Button.Group; const { Option } = Select; const { TreeNode } = Tree; const { Search } = Input; -const { Step } = Steps; const cascaderOptions = [ { @@ -391,17 +390,43 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => { Steps example
- - - - - +
- - - - - +
diff --git a/components/config-provider/demo/theme.md b/components/config-provider/demo/theme.md index ca1b3c217c..7596737879 100644 --- a/components/config-provider/demo/theme.md +++ b/components/config-provider/demo/theme.md @@ -369,23 +369,50 @@ const App: React.FC = () => { {/* Steps */} - - - - - + {/* Steps - dot */} - - - - - - + {/* Form - Input */}
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap index b6af47008c..86a74fc75e 100644 --- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -504,6 +504,139 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md extend conte `; +exports[`renders ./components/steps/demo/deprecated.md extend context correctly 1`] = ` +
+
+
+
+
+ + + + + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 2 + +
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
+`; + exports[`renders ./components/steps/demo/error.md extend context correctly 1`] = `
`; +exports[`renders ./components/steps/demo/deprecated.md correctly 1`] = ` +
+
+
+
+
+ + + + + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 2 + +
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
+`; + exports[`renders ./components/steps/demo/error.md correctly 1`] = `
`; + +exports[`Steps should render correct 1`] = ` +
+
+
+
+
+ + 1 + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 2 + +
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
+`; + +exports[`Steps should render correct when use Step 1`] = ` +
+
+
+
+
+ + 1 + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 2 + +
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
+`; + +exports[`Steps should render correct when use null 1`] = ` +
+`; diff --git a/components/steps/__tests__/index.test.tsx b/components/steps/__tests__/index.test.tsx index bb96509655..84a11fe976 100644 --- a/components/steps/__tests__/index.test.tsx +++ b/components/steps/__tests__/index.test.tsx @@ -1,8 +1,69 @@ +import React from 'react'; import Steps from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; +import { render } from '../../../tests/utils'; +import { resetWarned } from '../../_util/warning'; describe('Steps', () => { mountTest(Steps); rtlTest(Steps); + + const description = 'This is a description.'; + it('should render correct', () => { + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should render correct when use Step', () => { + const { container } = render( + + + + + , + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should render correct when use null', () => { + const { container } = render(null); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('deprecated warning', () => { + resetWarned(); + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + const { container } = render( + + + , + ); + + expect(container.querySelectorAll('.ant-steps-item')).toHaveLength(1); + + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Steps] Step is deprecated. Please use `items` directly.', + ); + errorSpy.mockRestore(); + }); }); diff --git a/components/steps/demo/clickable.md b/components/steps/demo/clickable.md index a6a1211509..cadc1aeef4 100644 --- a/components/steps/demo/clickable.md +++ b/components/steps/demo/clickable.md @@ -17,8 +17,6 @@ Setting `onChange` makes Steps clickable. import { Divider, Steps } from 'antd'; import React, { useState } from 'react'; -const { Step } = Steps; - const App: React.FC = () => { const [current, setCurrent] = useState(0); @@ -26,22 +24,50 @@ const App: React.FC = () => { console.log('onChange:', current); setCurrent(value); }; + const description = 'This is a description.'; return ( <> - - - - - + - - - - - + ); }; diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md index ca53d06067..cd3a44325a 100644 --- a/components/steps/demo/customized-progress-dot.md +++ b/components/steps/demo/customized-progress-dot.md @@ -18,8 +18,6 @@ import type { StepsProps } from 'antd'; import { Popover, Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - const customDot: StepsProps['progressDot'] = (dot, { status, index }) => ( ( {dot} ); - +const description = 'You can hover on the dot.'; const App: React.FC = () => ( - - - - - - + ); export default App; diff --git a/components/steps/demo/deprecated.md b/components/steps/demo/deprecated.md new file mode 100644 index 0000000000..381c0d11d7 --- /dev/null +++ b/components/steps/demo/deprecated.md @@ -0,0 +1,32 @@ +--- +order: -1 +title: + zh-CN: 基本用法（废弃的语法糖） + en-US: Basic +version: < 4.24.0 +--- + +## zh-CN + +简单的步骤条。 + +## en-US + +The most basic step bar. + +```tsx +import { Steps } from 'antd'; +import React from 'react'; + +const { Step } = Steps; +const description = 'This is a description.'; +const App: React.FC = () => ( + + + + + +); + +export default App; +``` diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md index 7cc4edf105..375396cbe3 100644 --- a/components/steps/demo/error.md +++ b/components/steps/demo/error.md @@ -17,14 +17,26 @@ By using `status` of `Steps`, you can specify the state for current step. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - +const description = 'This is a description'; const App: React.FC = () => ( - - - - - + ); export default App; diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md index 8f557bae36..b718e302d6 100644 --- a/components/steps/demo/icon.md +++ b/components/steps/demo/icon.md @@ -7,26 +7,42 @@ title: ## zh-CN -通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。 +通过设置 `items` 的 `icon` 属性，可以启用自定义图标。 ## en-US -You can use your own custom icons by setting the property `icon` for `Steps.Step`. +You can use your own custom icons by setting the property `icon` for `items`. ```tsx import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons'; import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - const App: React.FC = () => ( - - } /> - } /> - } /> - } /> - + , + }, + { + title: 'Verification', + status: 'finish', + icon: , + }, + { + title: 'Pay', + status: 'process', + icon: , + }, + { + title: 'Done', + status: 'wait', + icon: , + }, + ]} + /> ); export default App; diff --git a/components/steps/demo/label-placement.md b/components/steps/demo/label-placement.md index bcc0e15122..5b6e8db47f 100644 --- a/components/steps/demo/label-placement.md +++ b/components/steps/demo/label-placement.md @@ -17,27 +17,28 @@ Set labelPlacement to `vertical`. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - +const description = 'This is a description.'; +const items = [ + { + title: 'Finished', + description, + }, + { + title: 'In Progress', + description, + }, + { + title: 'Waiting', + description, + }, +]; const App: React.FC = () => ( <> - - - - - +
- - - - - +
- - - - - + ); diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md index dc8465fa1c..840cdee61c 100644 --- a/components/steps/demo/nav.md +++ b/components/steps/demo/nav.md @@ -17,8 +17,6 @@ Navigation steps. import { Steps } from 'antd'; import React, { useState } from 'react'; -const { Step } = Steps; - const App: React.FC = () => { const [current, setCurrent] = useState(0); @@ -35,49 +33,77 @@ const App: React.FC = () => { current={current} onChange={onChange} className="site-navigation-steps" - > - - - - + items={[ + { + title: 'Step 1', + subTitle: '00:00:05', + status: 'finish', + description: 'This is a description.', + }, + { + title: 'Step 2', + subTitle: '00:01:02', + status: 'process', + description: 'This is a description.', + }, + { + title: 'Step 3', + subTitle: 'waiting for longlong time', + status: 'wait', + description: 'This is a description.', + }, + ]} + /> - - - - - + items={[ + { + status: 'finish', + title: 'Step 1', + }, + { + status: 'process', + title: 'Step 2', + }, + { + status: 'wait', + title: 'Step 3', + }, + { + status: 'wait', + title: 'Step 4', + }, + ]} + /> - - - - - + items={[ + { + status: 'finish', + title: 'finish 1', + }, + { + status: 'finish', + title: 'finish 2', + }, + { + status: 'process', + title: 'current process', + }, + { + status: 'wait', + title: 'wait', + disabled: true, + }, + ]} + /> ); }; diff --git a/components/steps/demo/progress-debug.md b/components/steps/demo/progress-debug.md index 3ed83210cf..0e4e4bb9f1 100644 --- a/components/steps/demo/progress-debug.md +++ b/components/steps/demo/progress-debug.md @@ -19,12 +19,26 @@ import type { StepsProps } from 'antd'; import { Button, Steps } from 'antd'; import React, { useState } from 'react'; -const { Step } = Steps; - const App: React.FC = () => { const [percent, setPercentage] = useState(0); const [current, setCurrent] = useState(1); const [status, setStatus] = useState('process'); + const description = 'This is a description.'; + const items = [ + { + title: 'Finished', + description, + }, + { + title: 'In Progress', + subTitle: 'Left 00:00:08', + description, + }, + { + title: 'Waiting', + description, + }, + ]; return ( <> @@ -41,26 +55,23 @@ const App: React.FC = () => { - - - - - - - - - - - - - - - - - - - - + + + + ); }; diff --git a/components/steps/demo/progress-dot-small.md b/components/steps/demo/progress-dot-small.md index 84574bfd52..803e5f61c4 100644 --- a/components/steps/demo/progress-dot-small.md +++ b/components/steps/demo/progress-dot-small.md @@ -18,23 +18,56 @@ Steps with progress dot style. import { Divider, Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - const App: React.FC = () => ( <> - - - - - + - - - - - - - + ); diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md index 0030c7ec47..0b14326249 100644 --- a/components/steps/demo/progress-dot.md +++ b/components/steps/demo/progress-dot.md @@ -17,23 +17,54 @@ Steps with progress dot style. import { Divider, Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - const App: React.FC = () => ( <> - - - - - + - - - - - - - + ); diff --git a/components/steps/demo/progress.md b/components/steps/demo/progress.md index c0aad6e7f2..ba86fe682c 100644 --- a/components/steps/demo/progress.md +++ b/components/steps/demo/progress.md @@ -17,14 +17,27 @@ Steps with progress. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - +const description = 'This is a description.'; const App: React.FC = () => ( - - - - - + ); export default App; diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md index 2f9567a48a..62e98b0eb7 100644 --- a/components/steps/demo/simple.md +++ b/components/steps/demo/simple.md @@ -17,14 +17,26 @@ The most basic step bar. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - +const description = 'This is a description.'; const App: React.FC = () => ( - - - - - + ); export default App; diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md index 316d53d93b..9924205805 100644 --- a/components/steps/demo/small-size.md +++ b/components/steps/demo/small-size.md @@ -17,14 +17,22 @@ By setting like this: ``, you can get a mini version. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - const App: React.FC = () => ( - - - - - + ); export default App; diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md index 7adf0a256a..93e4c15fcf 100644 --- a/components/steps/demo/step-next.md +++ b/components/steps/demo/step-next.md @@ -17,8 +17,6 @@ Cooperate with the content and buttons, to represent the progress of a process. import { Button, message, Steps } from 'antd'; import React, { useState } from 'react'; -const { Step } = Steps; - const steps = [ { title: 'First', @@ -44,14 +42,11 @@ const App: React.FC = () => { const prev = () => { setCurrent(current - 1); }; + const items = steps.map(item => ({ key: item.title, title: item.title })); return ( <> - - {steps.map(item => ( - - ))} - +
{steps[current].content}
{current < steps.length - 1 && ( diff --git a/components/steps/demo/steps-in-steps.md b/components/steps/demo/steps-in-steps.md index 075606dcb5..e1f531ffac 100644 --- a/components/steps/demo/steps-in-steps.md +++ b/components/steps/demo/steps-in-steps.md @@ -19,18 +19,28 @@ import type { StepsProps } from 'antd'; import { Card, Radio, Steps } from 'antd'; import React, { useState } from 'react'; -const { Step } = Steps; - const App: React.FC = () => { const [size, setSize] = useState('default'); - + const description = 'This is a description.'; const horizontalSteps = ( - - - - - + ); @@ -44,11 +54,24 @@ const App: React.FC = () => { Small Default - - - - - + ); }; diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md index eb8cb1a97a..d5963ebeca 100644 --- a/components/steps/demo/vertical-small.md +++ b/components/steps/demo/vertical-small.md @@ -17,14 +17,24 @@ A simple mini version step bar in the vertical direction. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - +const description = 'This is a description.'; const App: React.FC = () => ( - - - - - + ); export default App; diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md index 2830219793..101dce1949 100644 --- a/components/steps/demo/vertical.md +++ b/components/steps/demo/vertical.md @@ -17,14 +17,26 @@ A simple step bar in the vertical direction. import { Steps } from 'antd'; import React from 'react'; -const { Step } = Steps; - +const description = 'This is a description.'; const App: React.FC = () => ( - - - - - + ); export default App; diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index dde7a90a14..8ff25a2a98 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -15,11 +15,16 @@ When a given task is complicated or has a certain sequence in the series of subt ## API ```jsx +// works when >=4.24.0, recommended ✅ +const items = [{ title: 'first step' }, { title: 'second step' }, { title: 'third step' }]; +return ; + +// works when <4.24.0, deprecated when >=4.24.0 🙅🏻‍♀️ - +; ``` ### Steps @@ -40,8 +45,9 @@ The whole of the step bar. | status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | | type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | | | onChange | Trigger when Step is changed | (current) => void | - | | +| items | StepItem content | [StepItem](#StepItem) | [] | 4.24.0 | -### Steps.Step +### StepItem A single step in the step bar. diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 2fd8a163bc..f473999e23 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -7,6 +7,19 @@ import * as React from 'react'; import { ConfigContext } from '../config-provider'; import useBreakpoint from '../grid/hooks/useBreakpoint'; import Progress from '../progress'; +import useLegacyItems from './useLegacyItems'; + +export interface StepProps { + className?: string; + description?: React.ReactNode; + icon?: React.ReactNode; + onClick?: React.MouseEventHandler; + status?: 'wait' | 'process' | 'finish' | 'error'; + disabled?: boolean; + title?: React.ReactNode; + subTitle?: React.ReactNode; + style?: React.CSSProperties; +} export interface StepsProps { type?: 'default' | 'navigation'; @@ -25,18 +38,7 @@ export interface StepsProps { percent?: number; onChange?: (current: number) => void; children?: React.ReactNode; -} - -export interface StepProps { - className?: string; - description?: React.ReactNode; - icon?: React.ReactNode; - onClick?: React.MouseEventHandler; - status?: 'wait' | 'process' | 'finish' | 'error'; - disabled?: boolean; - title?: React.ReactNode; - subTitle?: React.ReactNode; - style?: React.CSSProperties; + items?: StepProps[]; } interface StepsType extends React.FC { @@ -44,7 +46,7 @@ interface StepsType extends React.FC { } const Steps: StepsType = props => { - const { percent, size, className, direction, responsive, ...restProps } = props; + const { percent, size, className, direction, responsive, items, children, ...restProps } = props; const { xs } = useBreakpoint(responsive); const { getPrefixCls, direction: rtlDirection } = React.useContext(ConfigContext); @@ -55,6 +57,8 @@ const Steps: StepsType = props => { const prefixCls = getPrefixCls('steps', props.prefixCls); const iconPrefix = getPrefixCls('', props.iconPrefix); + const mergedItems = useLegacyItems(items, children); + const stepsClassName = classNames( { [`${prefixCls}-rtl`]: rtlDirection === 'rtl', @@ -66,6 +70,7 @@ const Steps: StepsType = props => { finish: , error: , }; + const stepIconRender = ({ node, status, @@ -79,7 +84,8 @@ const Steps: StepsType = props => { if (status === 'process' && percent !== undefined) { // currently it's hard-coded, since we can't easily read the actually width of icon const progressWidth = size === 'small' ? 32 : 40; - const iconWithProgress = ( + // iconWithProgress + return (
{ {node}
); - return iconWithProgress; } return node; }; + return ( , mountNode); +``` ```jsx +// >=4.24.0 可用，推荐的写法 ✅ +const items = [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }]; +return ; + +// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️ - +; ``` ### Steps @@ -41,8 +51,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | | | type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | | | onChange | 点击切换步骤时触发 | (current) => void | - | | +| items | 配置选项卡内容 | [StepItem](#StepItem) | [] | 4.24.0 | -### Steps.Step +### StepItem 步骤条内的每一个步骤。 diff --git a/components/steps/useLegacyItems.ts b/components/steps/useLegacyItems.ts new file mode 100644 index 0000000000..2bd600838d --- /dev/null +++ b/components/steps/useLegacyItems.ts @@ -0,0 +1,30 @@ +import * as React from 'react'; +import toArray from 'rc-util/lib/Children/toArray'; +import type { StepProps } from '.'; +import warning from '../_util/warning'; + +function filter(items: (T | null)[]): T[] { + return items.filter(item => item) as T[]; +} + +export default function useLegacyItems(items?: StepProps[], children?: React.ReactNode) { + if (items) { + return items; + } + + warning(!children, 'Steps', 'Step is deprecated. Please use `items` directly.'); + + const childrenItems = toArray(children).map((node: React.ReactElement) => { + if (React.isValidElement(node)) { + const { props } = node; + const item: StepProps = { + ...props, + }; + return item; + } + + return null; + }); + + return filter(childrenItems); +} diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index c796ad1d77..a429f044ff 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -68,10 +68,11 @@ return ; | onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action): void | - | | | onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | | | onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | +| items | TabItem content | [TabItem](#TabItem) | [] | 4.23.0 | More option at [rc-tabs option](https://github.com/react-component/tabs#tabs) -### Tabs.TabPane +### TabItem | Property | Description | Type | Default | | --- | --- | --- | --- | diff --git a/package.json b/package.json index 82066cc1e0..7bd8e38f6a 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,7 @@ "rc-segmented": "~2.1.0", "rc-select": "~14.1.1", "rc-slider": "~10.0.0", - "rc-steps": "~4.1.0", + "rc-steps": "~5.0.0-alpha.0", "rc-switch": "~3.2.0", "rc-table": "~7.26.0", "rc-tabs": "~12.1.0-alpha.1",