Steps.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. "use client";
  2. import * as React from 'react';
  3. import classNames from 'classnames';
  4. import { getSize } from './utils';
  5. const Steps = props => {
  6. const {
  7. size,
  8. steps,
  9. rounding: customRounding = Math.round,
  10. percent = 0,
  11. strokeWidth = 8,
  12. strokeColor,
  13. trailColor = null,
  14. prefixCls,
  15. children
  16. } = props;
  17. const current = customRounding(steps * (percent / 100));
  18. const stepWidth = size === 'small' ? 2 : 14;
  19. const mergedSize = size !== null && size !== void 0 ? size : [stepWidth, strokeWidth];
  20. const [width, height] = getSize(mergedSize, 'step', {
  21. steps,
  22. strokeWidth
  23. });
  24. const unitWidth = width / steps;
  25. const styledSteps = Array.from({
  26. length: steps
  27. });
  28. for (let i = 0; i < steps; i++) {
  29. const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
  30. styledSteps[i] = /*#__PURE__*/React.createElement("div", {
  31. key: i,
  32. className: classNames(`${prefixCls}-steps-item`, {
  33. [`${prefixCls}-steps-item-active`]: i <= current - 1
  34. }),
  35. style: {
  36. backgroundColor: i <= current - 1 ? color : trailColor,
  37. width: unitWidth,
  38. height
  39. }
  40. });
  41. }
  42. return /*#__PURE__*/React.createElement("div", {
  43. className: `${prefixCls}-steps-outer`
  44. }, styledSteps, children);
  45. };
  46. export default Steps;