mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
d769795aa0
* 🐛 fix bug: percent={(3 / 9) * 100} steps={9} shows 2 * ✅ add test for last commit * ✨ update jest snapshot * ✅ add test
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
import { ProgressProps, ProgressSize } from './progress';
|
|
|
|
interface StepsProps extends ProgressProps {
|
|
steps: number;
|
|
size?: ProgressSize;
|
|
strokeColor?: string;
|
|
trailColor?: string;
|
|
}
|
|
|
|
const Steps: React.FC<StepsProps> = props => {
|
|
const {
|
|
size,
|
|
steps,
|
|
percent = 0,
|
|
strokeWidth = 8,
|
|
strokeColor,
|
|
trailColor,
|
|
prefixCls,
|
|
children,
|
|
} = props;
|
|
const current = Math.round(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 : trailColor,
|
|
width: stepWidth,
|
|
height: strokeWidth,
|
|
}}
|
|
/>,
|
|
);
|
|
}
|
|
return (
|
|
<div className={`${prefixCls}-steps-outer`}>
|
|
{styledSteps}
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Steps;
|