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

Steps component

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "style", "status", "itemWidth", "icon", "adjustMarginRight", "stepNumber", "title", "description", "progressDot"];
import React from 'react';
import Icon from '@uiw/react-icon';
import "./style/index.css";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default function Step(props) {
  var {
      prefixCls = 'w-steps',
      className,
      style,
      status,
      itemWidth,
      icon,
      adjustMarginRight,
      stepNumber,
      title,
      description,
      progressDot
    } = props,
    restProps = _objectWithoutPropertiesLoose(props, _excluded);
  var classString = [prefixCls + "-item", prefixCls + "-item-" + status, className, icon ? prefixCls + "-custom" : null].filter(Boolean).join(' ').trim();
  var stepItemStyle = _extends({}, style);
  var stepItemDotStyle = {};
  if (itemWidth) {
    stepItemStyle.width = itemWidth;
  }
  if (adjustMarginRight) {
    stepItemStyle.marginRight = adjustMarginRight;
    if (progressDot) {
      stepItemDotStyle.paddingRight = Math.abs(adjustMarginRight);
    }
  }
  var iconNode = null;
  if (progressDot && !icon) {
    iconNode = /*#__PURE__*/_jsx("span", {
      className: prefixCls + "-dot"
    });
  } else if (icon && typeof icon !== 'string') {
    iconNode = /*#__PURE__*/_jsx("span", {
      className: prefixCls + "-icon",
      children: icon
    });
  } else if (icon && typeof icon === 'string' || status === 'finish' || status === 'error') {
    iconNode = /*#__PURE__*/_jsx(Icon, {
      type: [icon && typeof icon === 'string' ? "" + icon : null, !icon && status === 'finish' ? 'check' : null, !icon && status === 'error' ? 'close' : null].filter(Boolean).join(' ').trim()
    });
  } else {
    iconNode = /*#__PURE__*/_jsx("span", {
      className: prefixCls + "-icon",
      children: stepNumber
    });
  }
  return /*#__PURE__*/_jsxs("div", _extends({}, restProps, {
    className: classString,
    style: stepItemStyle,
    children: [/*#__PURE__*/_jsx("div", {
      className: prefixCls + "-item-tail",
      style: stepItemDotStyle,
      children: /*#__PURE__*/_jsx("i", {
        style: {
          paddingRight: '100%'
        }
      })
    }), /*#__PURE__*/_jsx("div", {
      className: prefixCls + "-item-head",
      children: /*#__PURE__*/_jsx("div", {
        className: [prefixCls + "-item-inner", !!icon && 'is-icon'].filter(Boolean).join(' ').trim(),
        children: iconNode
      })
    }), /*#__PURE__*/_jsxs("div", {
      className: [prefixCls + "-item-main", !!icon && 'is-icon-main'].filter(Boolean).join(' ').trim(),
      children: [/*#__PURE__*/_jsx("div", {
        className: prefixCls + "-item-title",
        children: title
      }), description && /*#__PURE__*/_jsx("div", {
        className: prefixCls + "-item-description",
        children: description
      })]
    })]
  }));
}