ant-design/components/progress/Steps.tsx
lijianan d32d8d669f
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
type: fix Progress rounding type definition (#52803)
Co-authored-by: afc163 <afc163@gmail.com>
2025-02-14 18:34:52 +08:00

56 lines
1.5 KiB
TypeScript

import * as React from 'react';
import classNames from 'classnames';
import type { ProgressProps } from './progress';
import { getSize } from './utils';
interface ProgressStepsProps extends ProgressProps {
steps: number;
strokeColor?: string | string[];
trailColor?: string;
}
const Steps: React.FC<ProgressStepsProps> = (props) => {
const {
size,
steps,
rounding: customRounding = Math.round,
percent = 0,
strokeWidth = 8,
strokeColor,
trailColor = null as any,
prefixCls,
children,
} = props;
const current = customRounding(steps * (percent / 100));
const stepWidth = size === 'small' ? 2 : 14;
const mergedSize = size ?? [stepWidth, strokeWidth];
const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth });
const unitWidth = width / steps;
const styledSteps = Array.from<React.ReactNode>({ length: steps });
for (let i = 0; i < steps; i++) {
const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
styledSteps[i] = (
<div
key={i}
className={classNames(`${prefixCls}-steps-item`, {
[`${prefixCls}-steps-item-active`]: i <= current - 1,
})}
style={{
backgroundColor: i <= current - 1 ? color : trailColor,
width: unitWidth,
height,
}}
/>
);
}
return (
<div className={`${prefixCls}-steps-outer`}>
{styledSteps}
{children}
</div>
);
};
export default Steps;