diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap index c953f80317..976a3ec991 100644 --- a/components/steps/__tests__/__snapshots__/demo.test.js.snap +++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap @@ -1195,6 +1195,945 @@ Array [ ] `; +exports[`renders ./components/steps/demo/progress.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/progress-debug.md correctly 1`] = ` +Array [ + , + , + , + , + , + , + , +
+
+
+
+
+ + + + + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+ + 2 + +
+
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
, +
+
+
+
+
+ + + + + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+ + 2 + +
+
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
, +
+
+
+
+
+ + + + + +
+
+
+ Finished +
+
+ This is a description. +
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+ + 2 + +
+
+
+
+ In Progress +
+ Left 00:00:08 +
+
+
+ This is a description. +
+
+
+
+
+
+
+
+ + 3 + +
+
+
+ Waiting +
+
+ This is a description. +
+
+
+
+
, +
+
+
+
+
+ + + + + +
+
+
+ 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/progress-dot.md correctly 1`] = ` Array [
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +ReactDOM.render(, mountNode); +``` diff --git a/components/steps/demo/progress.md b/components/steps/demo/progress.md new file mode 100644 index 0000000000..a31e597edd --- /dev/null +++ b/components/steps/demo/progress.md @@ -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( + + + + + , + mountNode, +); +``` diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index 5dc9fd3842..3a2539dac7 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -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 diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 5fa381a934..88a4f2eb2c 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -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 { 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 { finish: , error: , }; + 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 = ( +
+ null} + /> + {node} +
+ ); + return iconWithProgress; + } + return node; + }; return ( void | - | | +| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 | ### Steps.Step diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 2f2236b344..9eb817be72 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -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'; diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 3a3ab0de59..8382bb66c9 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -1,2 +1,4 @@ import '../../style/index.less'; import './index.less'; + +import '../../progress/style'; diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less new file mode 100644 index 0000000000..82664c4019 --- /dev/null +++ b/components/steps/style/progress.less @@ -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; + } + } + } +} diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 424720d567..6c50ab3ece 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -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 { diff --git a/package.json b/package.json index 8f3479ea57..a1bbb887c2 100644 --- a/package.json +++ b/package.json @@ -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",