mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
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 <yoyo837@hotmail.com> * fix tsd and add transition * add default color for Progress steps * color => background * @success-color => @info-color * @progress-default-color Co-authored-by: Amumu <yoyo837@hotmail.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
Charlie Jonas
GitHub
parent
059b106ccf
commit
37c894f1a2
@ -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<StepsProps> = 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(<div key={i} className={`${prefixCls}-steps-item`} style={stepStyle} />);
|
||||
}
|
||||
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(
|
||||
<div
|
||||
key={i}
|
||||
className={classNames(`${prefixCls}-steps-item`, {
|
||||
[`${prefixCls}-steps-item-active`]: i <= current - 1,
|
||||
})}
|
||||
style={{
|
||||
backgroundColor: i <= current - 1 ? strokeColor : undefined,
|
||||
width: stepWidth,
|
||||
height: strokeWidth,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={`${prefixCls}-steps-outer`}>
|
||||
{getStyledSteps()}
|
||||
{styledSteps}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1424,16 +1424,16 @@ Array [
|
||||
class="ant-progress-steps-outer"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:14px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1451,24 +1451,24 @@ Array [
|
||||
class="ant-progress-steps-outer"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:14px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1486,24 +1486,24 @@ Array [
|
||||
class="ant-progress-steps-outer"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:2px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="background-color:#52c41a;width:2px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:2px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="background-color:#52c41a;width:2px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:2px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="background-color:#52c41a;width:2px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:2px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="background-color:#52c41a;width:2px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:#1890ff;width:2px;height:8px"
|
||||
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||
style="background-color:#52c41a;width:2px;height:8px"
|
||||
/>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
|
||||
@ -560,15 +560,15 @@ exports[`Progress should support steps 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-steps-item"
|
||||
style="background-color:undefined;width:14px;height:8px"
|
||||
style="width:14px;height:8px"
|
||||
/>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
|
||||
@ -138,4 +138,25 @@ describe('Progress', () => {
|
||||
const wrapper = mount(<Progress steps={3} />);
|
||||
expect(wrapper).toMatchRenderedSnapshot();
|
||||
});
|
||||
|
||||
it('steps should be changable', () => {
|
||||
const wrapper = mount(<Progress steps={5} percent={60} />);
|
||||
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(<Progress steps={5} percent={60} strokeColor="#1890ff" />);
|
||||
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)',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,11 +18,11 @@ import { Progress } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Progress percent={50} steps={3} strokeColor="#1890ff" />
|
||||
<Progress percent={50} steps={3} />
|
||||
<br />
|
||||
<Progress percent={30} steps={5} strokeColor="#1890ff" />
|
||||
<Progress percent={30} steps={5} />
|
||||
<br />
|
||||
<Progress percent={100} steps={5} size="small" strokeColor="#1890ff" />
|
||||
<Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -99,6 +99,7 @@ export default class Progress extends React.Component<ProgressProps> {
|
||||
type,
|
||||
steps,
|
||||
showInfo,
|
||||
strokeColor,
|
||||
...restProps
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('progress', customizePrefixCls);
|
||||
@ -108,7 +109,12 @@ export default class Progress extends React.Component<ProgressProps> {
|
||||
// Render progress shape
|
||||
if (type === 'line') {
|
||||
progress = steps ? (
|
||||
<Steps {...this.props} prefixCls={prefixCls} steps={steps}>
|
||||
<Steps
|
||||
{...this.props}
|
||||
strokeColor={typeof strokeColor === 'string' ? strokeColor : undefined}
|
||||
prefixCls={prefixCls}
|
||||
steps={steps}
|
||||
>
|
||||
{progressInfo}
|
||||
</Steps>
|
||||
) : (
|
||||
|
||||
@ -26,6 +26,11 @@
|
||||
min-width: 2px;
|
||||
margin-right: 2px;
|
||||
background: @progress-steps-item-bg;
|
||||
transition: all 0.3s;
|
||||
|
||||
&-active {
|
||||
background: @progress-default-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user