test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

feat: Steps supports items (#37531)

Browse Source 
* 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
This commit is contained in:
黑雨 2022-09-16 15:52:14 +08:00 committed by GitHub
parent 4692733ca9
commit 65f067eb13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1196 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/config-provider/__tests__/components.test.tsx
View File

@ -489,9 +489,15 @@ describe('ConfigProvider', () => {
myProps.iconPrefix = 'prefixIcon';
}
return (
<Steps {...props}>
<Steps.Step title="Bamboo" description="Little Light" />
</Steps>
<Steps
{...props}
items={[
{
title: 'Bamboo',
description: 'Little Light',
},
]}
/>
);
});

47
components/config-provider/demo/direction.md
View File

@ -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 }) => {
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<div>
<Steps progressDot current={currentStep}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
progressDot
current={currentStep}
items={[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
<br />
<Steps current={currentStep} onChange={onStepsChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
<Steps
current={currentStep}
onChange={onStepsChange}
items={[
{
title: 'Step 1',
description: 'This is a description.',
},
{
title: 'Step 2',
description: 'This is a description.',
},
{
title: 'Step 3',
description: 'This is a description.',
},
]}
/>
</div>
</Col>
</Row>

57
components/config-provider/demo/theme.md
View File

@ -369,23 +369,50 @@ const App: React.FC = () => {
<Pagination showQuickJumper defaultCurrent={2} total={500} />
{/* Steps */}
<Steps current={1} percent={60}>
<Steps.Step title="Finished" description="This is a description." />
<Steps.Step
title="In Progress"
subTitle="Left 00:00:08"
description="This is a description."
/>
<Steps.Step title="Waiting" description="This is a description." />
</Steps>
<Steps
current={1}
percent={60}
items={[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
subTitle: 'Left 00:00:08',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
{/* Steps - dot */}
<Steps current={2} status="error" progressDot>
<Steps.Step title="Finished" description="You can hover on the dot." />
<Steps.Step title="In Progress" description="You can hover on the dot." />
<Steps.Step title="Error" description="You can hover on the dot." />
<Steps.Step title="Waiting" description="You can hover on the dot." />
</Steps>
<Steps
current={2}
status="error"
progressDot
items={[
{
title: 'Finished',
description: 'You can hover on the dot.',
},
{
title: 'In Progress',
description: 'You can hover on the dot.',
},
{
title: 'Error',
description: 'You can hover on the dot.',
},
{
title: 'Waiting',
description: 'You can hover on the dot.',
},
]}
/>
{/* Form - Input */}
<Form>

133
components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -504,6 +504,139 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md extend conte
</div>
`;
exports[`renders ./components/steps/demo/deprecated.md extend context correctly 1`] = `
<div
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
>
<div
class="ant-steps-item ant-steps-item-finish"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
aria-label="check"
class="anticon anticon-check ant-steps-finish-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="check"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
2
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
<div
class="ant-steps-item-subtitle"
title="Left 00:00:08"
>
Left 00:00:08
</div>
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
3
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/steps/demo/error.md extend context correctly 1`] = `
<div
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"

133
components/steps/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -384,6 +384,139 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`
</div>
`;
exports[`renders ./components/steps/demo/deprecated.md correctly 1`] = `
<div
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
>
<div
class="ant-steps-item ant-steps-item-finish"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
aria-label="check"
class="anticon anticon-check ant-steps-finish-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="check"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
2
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
<div
class="ant-steps-item-subtitle"
title="Left 00:00:08"
>
Left 00:00:08
</div>
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
3
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/steps/demo/error.md correctly 1`] = `
<div
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"

236
components/steps/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -5,3 +5,239 @@ exports[`Steps rtl render component should be rendered correctly in RTL directio
class="ant-steps ant-steps-vertical ant-steps-rtl"
/>
`;
exports[`Steps should render correct 1`] = `
<div
class="ant-steps ant-steps-vertical"
>
<div
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
1
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
2
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
<div
class="ant-steps-item-subtitle"
title="Left 00:00:08"
>
Left 00:00:08
</div>
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
3
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
</div>
`;
exports[`Steps should render correct when use Step 1`] = `
<div
class="ant-steps ant-steps-vertical"
>
<div
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
1
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
2
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
<div
class="ant-steps-item-subtitle"
title="Left 00:00:08"
>
Left 00:00:08
</div>
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
3
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
</div>
`;
exports[`Steps should render correct when use null 1`] = `
<div
class="ant-steps ant-steps-vertical"
/>
`;

61
components/steps/__tests__/index.test.tsx
View File

@ -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(
<Steps
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>,
);
expect(container.firstChild).toMatchSnapshot();
});
it('should render correct when use Step', () => {
const { container } = render(
<Steps>
<Steps.Step title="Finished" description={description} />
<Steps.Step title="In Progress" description={description} subTitle="Left 00:00:08" />
<Steps.Step title="Waiting" description={description} />
</Steps>,
);
expect(container.firstChild).toMatchSnapshot();
});
it('should render correct when use null', () => {
const { container } = render(<Steps>null</Steps>);
expect(container.firstChild).toMatchSnapshot();
});
it('deprecated warning', () => {
resetWarned();
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render(
<Steps>
<Steps.Step title="Finished" description={description} />
</Steps>,
);
expect(container.querySelectorAll('.ant-steps-item')).toHaveLength(1);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Steps] Step is deprecated. Please use `items` directly.',
);
errorSpy.mockRestore();
});
});

50
components/steps/demo/clickable.md
View File

@ -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 (
<>
<Steps current={current} onChange={onChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
<Steps
current={current}
onChange={onChange}
items={[
{
title: 'Step 1',
description,
},
{
title: 'Step 2',
description,
},
{
title: 'Step 3',
description,
},
]}
/>
<Divider />
<Steps current={current} onChange={onChange} direction="vertical">
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
<Steps
current={current}
onChange={onChange}
direction="vertical"
items={[
{
title: 'Step 1',
description,
},
{
title: 'Step 2',
description,
},
{
title: 'Step 3',
description,
},
]}
/>
</>
);
};

32
components/steps/demo/customized-progress-dot.md
View File

@ -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 }) => (
<Popover
content={
@ -31,14 +29,30 @@ const customDot: StepsProps['progressDot'] = (dot, { status, index }) => (
{dot}
</Popover>
);
const description = 'You can hover on the dot.';
const App: React.FC = () => (
<Steps current={1} progressDot={customDot}>
<Step title="Finished" description="You can hover on the dot." />
<Step title="In Progress" description="You can hover on the dot." />
<Step title="Waiting" description="You can hover on the dot." />
<Step title="Waiting" description="You can hover on the dot." />
</Steps>
<Steps
current={1}
progressDot={customDot}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;

32
components/steps/demo/deprecated.md Normal file
View File

@ -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 = () => (
<Steps current={1}>
<Step title="Finished" description={description} />
<Step title="In Progress" description={description} subTitle="Left 00:00:08" />
<Step title="Waiting" description={description} />
</Steps>
);
export default App;
```

26
components/steps/demo/error.md
View File

@ -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 = () => (
<Steps current={1} status="error">
<Step title="Finished" description="This is a description" />
<Step title="In Process" description="This is a description" />
<Step title="Waiting" description="This is a description" />
</Steps>
<Steps
current={1}
status="error"
items={[
{
title: 'Finished',
description,
},
{
title: 'In Process',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;

36
components/steps/demo/icon.md
View File

@ -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 = () => (
<Steps>
<Step status="finish" title="Login" icon={<UserOutlined />} />
<Step status="finish" title="Verification" icon={<SolutionOutlined />} />
<Step status="process" title="Pay" icon={<LoadingOutlined />} />
<Step status="wait" title="Done" icon={<SmileOutlined />} />
</Steps>
<Steps
items={[
{
title: 'Login',
status: 'finish',
icon: <UserOutlined />,
},
{
title: 'Verification',
status: 'finish',
icon: <SolutionOutlined />,
},
{
title: 'Pay',
status: 'process',
icon: <LoadingOutlined />,
},
{
title: 'Done',
status: 'wait',
icon: <SmileOutlined />,
},
]}
/>
);
export default App;

35
components/steps/demo/label-placement.md
View File

@ -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 = () => (
<>
<Steps current={1} labelPlacement="vertical">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={1} labelPlacement="vertical" items={items} />
<br />
<Steps current={1} percent={60} labelPlacement="vertical">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={1} percent={60} labelPlacement="vertical" items={items} />
<br />
<Steps current={1} size="small" labelPlacement="vertical">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={1} size="small" labelPlacement="vertical" items={items} />
</>
);

94
components/steps/demo/nav.md
View File

@ -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"
>
<Step
title="Step 1"
subTitle="00:00:05"
status="finish"
description="This is a description."
/>
<Step
title="Step 2"
subTitle="00:01:02"
status="process"
description="This is a description."
/>
<Step
title="Step 3"
subTitle="waiting for longlong time"
status="wait"
description="This is a description."
/>
</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.',
},
]}
/>
<Steps
type="navigation"
current={current}
onChange={onChange}
className="site-navigation-steps"
>
<Step status="finish" title="Step 1" />
<Step status="process" title="Step 2" />
<Step status="wait" title="Step 3" />
<Step status="wait" title="Step 4" />
</Steps>
items={[
{
status: 'finish',
title: 'Step 1',
},
{
status: 'process',
title: 'Step 2',
},
{
status: 'wait',
title: 'Step 3',
},
{
status: 'wait',
title: 'Step 4',
},
]}
/>
<Steps
type="navigation"
size="small"
current={current}
onChange={onChange}
className="site-navigation-steps"
>
<Step status="finish" title="finish 1" />
<Step status="finish" title="finish 2" />
<Step status="process" title="current process" />
<Step status="wait" title="wait" disabled />
</Steps>
items={[
{
status: 'finish',
title: 'finish 1',
},
{
status: 'finish',
title: 'finish 2',
},
{
status: 'process',
title: 'current process',
},
{
status: 'wait',
title: 'wait',
disabled: true,
},
]}
/>
</>
);
};

55
components/steps/demo/progress-debug.md
View File

@ -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<StepsProps['status']>('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 (
<>
<Button onClick={() => setPercentage(0)}>Percentage to undefined</Button>
@ -41,26 +55,23 @@ const App: React.FC = () => {
<Button onClick={() => setStatus('process')}>Status Process</Button>
<Button onClick={() => setStatus('finish')}>Status Finish</Button>
<Button onClick={() => setStatus('error')}>Status Error</Button>
<Steps current={current} percent={percent} status={status}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={current} percent={percent} status={status} size="small">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={current} percent={percent} status={status} direction="vertical">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={current} percent={percent} status={status} size="small" direction="vertical">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps current={current} percent={percent} status={status} items={items} />
<Steps current={current} percent={percent} status={status} size="small" items={items} />
<Steps
current={current}
percent={percent}
status={status}
direction="vertical"
items={items}
/>
<Steps
current={current}
percent={percent}
status={status}
size="small"
direction="vertical"
items={items}
/>
</>
);
};

61
components/steps/demo/progress-dot-small.md
View File

@ -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 = () => (
<>
<Steps progressDot current={1} size="small">
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
progressDot
current={1}
size="small"
items={[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
<Divider />
<Steps progressDot current={1} direction="vertical" size="small">
<Step title="Finished" description="This is a description. This is a description." />
<Step title="Finished" description="This is a description. This is a description." />
<Step title="In Progress" description="This is a description. This is a description." />
<Step title="Waiting" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
progressDot
current={1}
direction="vertical"
size="small"
items={[
{
title: 'Finished',
description: 'This is a description. This is a description.',
},
{
title: 'Finished',
description: 'This is a description. This is a description.',
},
{
title: 'In Progress',
description: 'This is a description. This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
</>
);

59
components/steps/demo/progress-dot.md
View File

@ -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 = () => (
<>
<Steps progressDot current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
progressDot
current={1}
items={[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
<Divider />
<Steps progressDot current={1} direction="vertical">
<Step title="Finished" description="This is a description. This is a description." />
<Step title="Finished" description="This is a description. This is a description." />
<Step title="In Progress" description="This is a description. This is a description." />
<Step title="Waiting" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
progressDot
current={1}
direction="vertical"
items={[
{
title: 'Finished',
description: 'This is a description. This is a description.',
},
{
title: 'Finished',
description: 'This is a description. This is a description.',
},
{
title: 'In Progress',
description: 'This is a description. This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
</>
);

27
components/steps/demo/progress.md
View File

@ -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 = () => (
<Steps current={1} percent={60}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
current={1}
percent={60}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
subTitle: 'Left 00:00:08',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;

26
components/steps/demo/simple.md
View File

@ -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 = () => (
<Steps current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;

22
components/steps/demo/small-size.md
View File

@ -17,14 +17,22 @@ By setting like this: `<Steps size="small">`, you can get a mini version.
import { Steps } from 'antd';
import React from 'react';
const { Step } = Steps;
const App: React.FC = () => (
<Steps size="small" current={1}>
<Step title="Finished" />
<Step title="In Progress" />
<Step title="Waiting" />
</Steps>
<Steps
size="small"
current={1}
items={[
{
title: 'Finished',
},
{
title: 'In Progress',
},
{
title: 'Waiting',
},
]}
/>
);
export default App;

9
components/steps/demo/step-next.md
View File

@ -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 current={current}>
{steps.map(item => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<Steps current={current} items={items} />
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
{current < steps.length - 1 && (

49
components/steps/demo/steps-in-steps.md
View File

@ -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<StepsProps['size']>('default');
const description = 'This is a description.';
const horizontalSteps = (
<Card>
<Steps size={size}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
size={size}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
</Card>
);
@ -44,11 +54,24 @@ const App: React.FC = () => {
<Radio value="small">Small</Radio>
<Radio value="default">Default</Radio>
</Radio.Group>
<Steps size={size} direction="vertical">
<Step title="Finished" description={horizontalSteps} />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
size={size}
direction="vertical"
items={[
{
title: 'Finished',
description: horizontalSteps,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
</>
);
};

24
components/steps/demo/vertical-small.md
View File

@ -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 = () => (
<Steps direction="vertical" size="small" current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
direction="vertical"
size="small"
current={1}
items={[
{ title: 'Finished', description },
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;

26
components/steps/demo/vertical.md
View File

@ -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 = () => (
<Steps direction="vertical" current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Steps
direction="vertical"
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;

10
components/steps/index.en-US.md
View File

@ -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 <Tabs items={items} />;
// works when <4.24.0, deprecated when >=4.24.0 🙅🏻‍♀️
<Steps>
<Step title="first step" />
<Step title="second step" />
<Step title="third step" />
</Steps>
</Steps>;
```
### 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.

37
components/steps/index.tsx
View File

@ -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<HTMLElement>;
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<HTMLElement>;
status?: 'wait' | 'process' | 'finish' | 'error';
disabled?: boolean;
title?: React.ReactNode;
subTitle?: React.ReactNode;
style?: React.CSSProperties;
items?: StepProps[];
}
interface StepsType extends React.FC<StepsProps> {
@ -44,7 +46,7 @@ interface StepsType extends React.FC<StepsProps> {
}
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: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
error: <CloseOutlined className={`${prefixCls}-error-icon`} />,
};
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 (
<div className={`${prefixCls}-progress-icon`}>
<Progress
type="circle"
@ -91,15 +97,16 @@ const Steps: StepsType = props => {
{node}
</div>
);
return iconWithProgress;
}
return node;
};
return (
<RcSteps
icons={icons}
{...restProps}
size={size}
items={mergedItems}
direction={getDirection()}
stepIcon={stepIconRender}
prefixCls={prefixCls}

17
components/steps/index.zh-CN.md
View File

@ -13,14 +13,24 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
## API
### 4.24.0 用法升级
```__react
import Alert from '../alert';
ReactDOM.render(<Alert message="在 4.24.0 版本后，我们提供了 <Steps items={[...]} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
```
```jsx
// >=4.24.0 可用，推荐的写法 ✅
const items = [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }];
return <Steps items={items} />;
// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️
<Steps>
<Step title="第一步" />
<Step title="第二步" />
<Step title="第三步" />
</Steps>
</Steps>;
```
### 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
步骤条内的每一个步骤。

30
components/steps/useLegacyItems.ts Normal file
View File

@ -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<T>(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<StepProps>) => {
if (React.isValidElement(node)) {
const { props } = node;
const item: StepProps = {
...props,
};
return item;
}
return null;
});
return filter(childrenItems);
}

3
components/tabs/index.en-US.md
View File

@ -68,10 +68,11 @@ return <Tabs items={items} />;
| 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 |
| --- | --- | --- | --- |

2
package.json
View File

@ -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",