1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- "use client";
- import * as React from 'react';
- import classNames from 'classnames';
- import { getSize } from './utils';
- const Steps = props => {
- const {
- size,
- steps,
- rounding: customRounding = Math.round,
- percent = 0,
- strokeWidth = 8,
- strokeColor,
- trailColor = null,
- prefixCls,
- children
- } = props;
- const current = customRounding(steps * (percent / 100));
- const stepWidth = size === 'small' ? 2 : 14;
- const mergedSize = size !== null && size !== void 0 ? size : [stepWidth, strokeWidth];
- const [width, height] = getSize(mergedSize, 'step', {
- steps,
- strokeWidth
- });
- const unitWidth = width / steps;
- const styledSteps = Array.from({
- length: steps
- });
- for (let i = 0; i < steps; i++) {
- const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
- styledSteps[i] = /*#__PURE__*/React.createElement("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 /*#__PURE__*/React.createElement("div", {
- className: `${prefixCls}-steps-outer`
- }, styledSteps, children);
- };
- export default Steps;
|