@uiw/react-steps/esm/Steps.js

Steps component

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "style", "className", "children", "current", "status", "progressDot", "direction"];
import React, { useEffect, useRef, useState } from 'react';
import Step from './Step';
import { jsx as _jsx } from "react/jsx-runtime";
function InternalSteps(props) {
  var {
      prefixCls = 'w-steps',
      style = {},
      children,
      current,
      status = 'process',
      progressDot = false,
      direction = 'horizontal'
    } = props,
    resetProps = _objectWithoutPropertiesLoose(props, _excluded);
  var warpRef = useRef(null);
  var [lastStepOffsetWidth, setLastStepOffsetWidth] = useState(0);
  var filteredChildren = React.Children.toArray(children).filter(c => !!c);
  var lastIndex = filteredChildren.length - 1; // 最后一个节点的索引数字
  var classString = [prefixCls, prefixCls + "-" + direction, !!progressDot ? prefixCls + "-dot" : null].filter(Boolean).join(' ').trim();
  useEffect(() => calcStepOffsetWidth());

  // 计算每一步的宽度
  function calcStepOffsetWidth() {
    var domNode = warpRef.current;
    if (domNode && domNode.lastChild) {
      var width = (domNode.lastChild.offsetWidth || 0) + 1;
      if (width === lastStepOffsetWidth || Math.abs(width - lastStepOffsetWidth) <= 3) {
        return;
      }
      setLastStepOffsetWidth(width);
    }
  }
  return /*#__PURE__*/_jsx("div", _extends({
    className: classString,
    style: style
  }, resetProps, {
    ref: warpRef,
    children: React.Children.map(children, (child, index) => {
      var childProps = _extends({
        stepNumber: "" + (index + 1),
        prefixCls,
        progressDot
      }, child.props);
      if (index !== lastIndex && direction !== 'vertical') {
        childProps.itemWidth = 100 / lastIndex + "%";
        childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1);
      }
      if (progressDot && direction !== 'vertical') {
        childProps.itemWidth = 100 / filteredChildren.length + "%";
        childProps.adjustMarginRight = 0;
      }
      // 错误前面
      if (status === 'error' && index === current - 1) {
        childProps.className = prefixCls + "-next-error";
      }
      if (!child.props.status) {
        if (index === current) {
          childProps.status = status;
        } else if (index < current) {
          childProps.status = 'finish';
        } else {
          childProps.status = 'wait';
        }
      }
      return /*#__PURE__*/React.cloneElement(child, childProps);
    })
  }));
}
InternalSteps.Step = Step;
export default InternalSteps;