From 37c894f1a2f2b9fce6ecf088b464087ea402e718 Mon Sep 17 00:00:00 2001 From: Charlie Jonas Date: Thu, 28 May 2020 23:43:53 -0600 Subject: [PATCH] fix: Progress steps didn't change when update percent (#24534) * #24532 Progress with steps does not reverse indicator when moving reducing progress percent * updating snapshots * Update components/progress/Steps.tsx Co-authored-by: Amumu * fix tsd and add transition * add default color for Progress steps * color => background * @success-color => @info-color * @progress-default-color Co-authored-by: Amumu Co-authored-by: afc163 --- components/progress/Steps.tsx | 40 ++++++++++--------- .../__tests__/__snapshots__/demo.test.js.snap | 40 +++++++++---------- .../__snapshots__/index.test.js.snap | 6 +-- components/progress/__tests__/index.test.js | 21 ++++++++++ components/progress/demo/steps.md | 6 +-- components/progress/progress.tsx | 8 +++- components/progress/style/index.less | 5 +++ 7 files changed, 80 insertions(+), 46 deletions(-) diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx index b1b90cd211..4f563cffe5 100644 --- a/components/progress/Steps.tsx +++ b/components/progress/Steps.tsx @@ -1,34 +1,36 @@ import * as React from 'react'; +import classNames from 'classnames'; import { ProgressProps, ProgressSize } from './progress'; interface StepsProps extends ProgressProps { steps: number; size?: ProgressSize; + strokeColor?: string; } const Steps: React.FC = props => { const { size, steps, percent = 0, strokeWidth = 8, strokeColor, prefixCls, children } = props; - const getStyledSteps = () => { - const current = Math.floor(steps * (percent / 100)); - const stepWidth = size === 'small' ? 2 : 14; - const styleSteps = []; - for (let i = 0; i < steps; i++) { - let color; - if (i <= current - 1) { - color = strokeColor; - } - const stepStyle = { - backgroundColor: `${color}`, - width: `${stepWidth}px`, - height: `${strokeWidth}px`, - }; - styleSteps.push(
); - } - return styleSteps; - }; + const current = Math.floor(steps * (percent / 100)); + const stepWidth = size === 'small' ? 2 : 14; + const styledSteps = []; + for (let i = 0; i < steps; i += 1) { + styledSteps.push( +
, + ); + } return (
- {getStyledSteps()} + {styledSteps} {children}
); diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index 898a2e3459..5452f45d9e 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -1424,16 +1424,16 @@ Array [ class="ant-progress-steps-outer" >
{ const wrapper = mount(); expect(wrapper).toMatchRenderedSnapshot(); }); + + it('steps should be changable', () => { + const wrapper = mount(); + expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(3); + wrapper.setProps({ percent: 40 }); + expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(2); + }); + + it('steps should be changable when has strokeColor', () => { + const wrapper = mount(); + expect(wrapper.find('.ant-progress-steps-item').at(0).getDOMNode().style.backgroundColor).toBe( + 'rgb(24, 144, 255)', + ); + wrapper.setProps({ percent: 40 }); + expect(wrapper.find('.ant-progress-steps-item').at(2).getDOMNode().style.backgroundColor).toBe( + '', + ); + expect(wrapper.find('.ant-progress-steps-item').at(1).getDOMNode().style.backgroundColor).toBe( + 'rgb(24, 144, 255)', + ); + }); }); diff --git a/components/progress/demo/steps.md b/components/progress/demo/steps.md index 2d49b42814..e2cb6c2a1c 100644 --- a/components/progress/demo/steps.md +++ b/components/progress/demo/steps.md @@ -18,11 +18,11 @@ import { Progress } from 'antd'; ReactDOM.render( <> - +
- +
- + , mountNode, ); diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index c5b57651b5..4382b75045 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -99,6 +99,7 @@ export default class Progress extends React.Component { type, steps, showInfo, + strokeColor, ...restProps } = props; const prefixCls = getPrefixCls('progress', customizePrefixCls); @@ -108,7 +109,12 @@ export default class Progress extends React.Component { // Render progress shape if (type === 'line') { progress = steps ? ( - + {progressInfo} ) : ( diff --git a/components/progress/style/index.less b/components/progress/style/index.less index c0c95e724f..338d8d633c 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -26,6 +26,11 @@ min-width: 2px; margin-right: 2px; background: @progress-steps-item-bg; + transition: all 0.3s; + + &-active { + background: @progress-default-color; + } } }