mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: steps percent (#25839)

Browse Source 
* feat: Steps with progress

* test: update snapshot

* fix: lint

* Update package.json

Co-authored-by: 偏右 <afc163@gmail.com>

* refactor: remove progressIcon && rename percentage to percent

* test: snapshot

* fix: icon position offset

* fix: position offset

* fix: icon position offset

* docs

* fix: small line offset

Co-authored-by: 偏右 <afc163@gmail.com>
This commit is contained in:
07akioni 2020-07-27 21:40:36 +08:00 committed by GitHub
parent 1638a9c163
commit c2f208e2d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 1105 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

939
components/steps/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1195,6 +1195,945 @@ Array [
]
`;
exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
<div
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
percent="60"
>
<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"
class=""
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"
>
<div
class="ant-steps-progress-icon"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div
class="ant-progress-inner"
style="width:38px;height:38px;font-size:11.7px"
>
<svg
class="ant-progress-circle"
viewBox="0 0 100 100"
>
<path
class="ant-progress-circle-trail"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
opacity="1"
stroke=""
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:180.95573684677208px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
class="ant-progress-text"
/>
</div>
</div>
<span
class="ant-steps-icon"
>
2
</span>
</div>
</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/progress-debug.md correctly 1`] = `
Array [
<button
class="ant-btn"
type="button"
>
<span>
Percentage to undefined
</span>
</button>,
<button
class="ant-btn"
type="button"
>
<span>
Percentage +
</span>
</button>,
<button
class="ant-btn"
type="button"
>
<span>
Current +
</span>
</button>,
<button
class="ant-btn"
type="button"
>
<span>
Status Wait
</span>
</button>,
<button
class="ant-btn"
type="button"
>
<span>
Status Process
</span>
</button>,
<button
class="ant-btn"
type="button"
>
<span>
Status Finish
</span>
</button>,
<button
class="ant-btn"
type="button"
>
<span>
Status Error
</span>
</button>,
<div
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
percent="0"
>
<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"
class=""
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"
>
<div
class="ant-steps-progress-icon"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div
class="ant-progress-inner"
style="width:38px;height:38px;font-size:11.7px"
>
<svg
class="ant-progress-circle"
viewBox="0 0 100 100"
>
<path
class="ant-progress-circle-trail"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
opacity="0"
stroke=""
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
class="ant-progress-text"
/>
</div>
</div>
<span
class="ant-steps-icon"
>
2
</span>
</div>
</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>,
<div
class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal"
percent="0"
>
<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"
class=""
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"
>
<div
class="ant-steps-progress-icon"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div
class="ant-progress-inner"
style="width:30px;height:30px;font-size:10.5px"
>
<svg
class="ant-progress-circle"
viewBox="0 0 100 100"
>
<path
class="ant-progress-circle-trail"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
opacity="0"
stroke=""
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
class="ant-progress-text"
/>
</div>
</div>
<span
class="ant-steps-icon"
>
2
</span>
</div>
</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>,
<div
class="ant-steps ant-steps-vertical"
percent="0"
>
<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"
class=""
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"
>
<div
class="ant-steps-progress-icon"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div
class="ant-progress-inner"
style="width:38px;height:38px;font-size:11.7px"
>
<svg
class="ant-progress-circle"
viewBox="0 0 100 100"
>
<path
class="ant-progress-circle-trail"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
opacity="0"
stroke=""
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
class="ant-progress-text"
/>
</div>
</div>
<span
class="ant-steps-icon"
>
2
</span>
</div>
</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>,
<div
class="ant-steps ant-steps-vertical ant-steps-small"
percent="0"
>
<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"
class=""
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"
>
<div
class="ant-steps-progress-icon"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div
class="ant-progress-inner"
style="width:30px;height:30px;font-size:10.5px"
>
<svg
class="ant-progress-circle"
viewBox="0 0 100 100"
>
<path
class="ant-progress-circle-trail"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
d="M 50,50 m 0,-48
a 48,48 0 1 1 0,96
a 48,48 0 1 1 0,-96"
fill-opacity="0"
opacity="0"
stroke=""
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
class="ant-progress-text"
/>
</div>
</div>
<span
class="ant-steps-icon"
>
2
</span>
</div>
</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/progress-dot.md correctly 1`] = `
Array [
<div

67
components/steps/demo/progress-debug.md Normal file
View File

@ -0,0 +1,67 @@
---
order: 99
title:
zh-CN: Progress Debug
en-US: Progress Debug
debug: true
---
## zh-CN
Buggy!
## en-US
Buggy!
```jsx
import { Steps, Button } from 'antd';
const { Step } = Steps;
function Demo() {
const [percent, setPercentage] = React.useState(0);
const [current, setCurrent] = React.useState(1);
const [status, setStatus] = React.useState('process');
return (
<>
<Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
<Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
<Button
onClick={() => {
setCurrent((current + 1) % 3);
setPercentage(0);
}}
>
Current +
</Button>
<Button onClick={() => setStatus('wait')}>Status Wait</Button>
<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>
</>
);
}
ReactDOM.render(<Demo />, mountNode);
```

29
components/steps/demo/progress.md Normal file
View File

@ -0,0 +1,29 @@
---
order: 13
title:
zh-CN: 带有进度的步骤
en-US: Steps with progress
---
## zh-CN
带有进度的步骤。
## en-US
Steps with progress.
```jsx
import { Steps } from 'antd';
const { Step } = Steps;
ReactDOM.render(
<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>,
mountNode,
);
```

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

@ -38,6 +38,7 @@ 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` | |
| initial | Set the initial step, counting from 0 | number | 0 | |
| onChange | Trigger when Step is changed | (current) => void | - | |
| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
### Steps.Step

36
components/steps/index.tsx
View File

@ -1,10 +1,12 @@
import * as React from 'react';
import omit from 'omit.js';
import RcSteps from 'rc-steps';
import CheckOutlined from '@ant-design/icons/CheckOutlined';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import Progress from '../progress';
export interface StepsProps {
type?: 'default' | 'navigation';
@ -19,6 +21,7 @@ export interface StepsProps {
size?: 'default' | 'small';
status?: 'wait' | 'process' | 'finish' | 'error';
style?: React.CSSProperties;
percent?: number;
onChange?: (current: number) => void;
}
@ -44,6 +47,7 @@ export default class Steps extends React.Component<StepsProps, any> {
renderSteps = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
const prefixCls = getPrefixCls('steps', this.props.prefixCls);
const iconPrefix = getPrefixCls('', this.props.iconPrefix);
const { percent, size } = this.props;
const className = classNames(this.props.className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
@ -51,10 +55,40 @@ export default class Steps extends React.Component<StepsProps, any> {
finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
error: <CloseOutlined className={`${prefixCls}-error-icon`} />,
};
const stepIconRender = ({
node,
status,
}: {
node: React.ReactNode;
index: number;
status: string;
title: string | React.ReactNode;
description: string | React.ReactNode;
}) => {
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' ? 30 : 38;
const iconWithProgress = (
<div className={`${prefixCls}-progress-icon`}>
<Progress
type="circle"
percent={percent}
width={progressWidth}
strokeWidth={4}
format={() => null}
/>
{node}
</div>
);
return iconWithProgress;
}
return node;
};
return (
<RcSteps
icons={icons}
{...this.props}
{...omit(this.props, ['progress'])}
stepIcon={stepIconRender}
prefixCls={prefixCls}
iconPrefix={iconPrefix}
className={className}

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

@ -39,6 +39,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| onChange | 点击切换步骤时触发 | (current) => void | - | |
| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
### Steps.Step

11
components/steps/style/index.less
View File

@ -67,7 +67,7 @@
border-radius: @steps-icon-size;
transition: background-color 0.3s, border-color 0.3s;
> .@{steps-prefix-cls}-icon {
.@{steps-prefix-cls}-icon {
position: relative;
top: @steps-icon-top;
color: @primary-color;
@ -125,7 +125,7 @@
.step-item-status(process);
&-process &-icon {
background: @process-icon-color;
> .@{steps-prefix-cls}-icon {
.@{steps-prefix-cls}-icon {
color: @process-icon-text-color;
}
}
@ -188,11 +188,11 @@
.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
.@{steps-prefix-cls}-item {
margin-right: 16px;
padding-left: 16px;
white-space: nowrap;
&:last-child {
margin-right: 0;
&:first-child {
padding-left: 0;
}
&:last-child .@{steps-prefix-cls}-item-title {
padding-right: 0;
@ -243,3 +243,4 @@
@import 'progress-dot';
@import 'nav';
@import './rtl';
@import './progress.less';

2
components/steps/style/index.tsx
View File

@ -1,2 +1,4 @@
import '../../style/index.less';
import './index.less';
import '../../progress/style';

21
components/steps/style/progress.less Normal file
View File

@ -0,0 +1,21 @@
@progress-prefix-cls: ~'@{ant-prefix}-progress';
.@{steps-prefix-cls}:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation) {
&:not(.@{steps-prefix-cls}-vertical) {
.@{steps-prefix-cls}-item {
padding-top: 4px;
}
}
.@{steps-prefix-cls}-item {
.@{steps-prefix-cls}-item-icon {
position: relative;
.@{progress-prefix-cls} {
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}
}
}

6
components/steps/style/small.less
View File

@ -1,10 +1,10 @@
.@{steps-prefix-cls}-small {
&.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
.@{steps-prefix-cls}-item {
margin-right: 12px;
padding-left: 12px;
&:last-child {
margin-right: 0;
&:first-child {
padding-left: 0;
}
}
.@{steps-prefix-cls}-item-icon {

2
package.json
View File

@ -134,7 +134,7 @@
"rc-resize-observer": "^0.2.3",
"rc-select": "^11.0.10",
"rc-slider": "~9.3.0",
"rc-steps": "~4.0.1",
"rc-steps": "~4.1.0",
"rc-switch": "~3.2.0",
"rc-table": "~7.8.0",
"rc-tabs": "~11.5.0",