@douyinfe/semi-ui/lib/es/steps/basicStep.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
import { IconTickCircle, IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
export var stepSizeMapIconSize;
(function (stepSizeMapIconSize) {
  stepSizeMapIconSize["small"] = "large";
  stepSizeMapIconSize["default"] = "extra-large";
})(stepSizeMapIconSize || (stepSizeMapIconSize = {}));
const BasicStep = props => {
  const {
    prefixCls,
    className,
    size,
    title,
    description,
    status,
    style,
    active,
    done,
    icon,
    stepNumber,
    onClick,
    onChange,
    onKeyDown
  } = props;
  const renderIcon = () => {
    let inner, progress;
    if ('icon' in props) {
      if ( /*#__PURE__*/React.isValidElement(icon)) {
        inner = icon;
      }
    } else if ('status' in props) {
      switch (status) {
        case 'error':
          inner = /*#__PURE__*/React.createElement(IconAlertCircle, {
            size: stepSizeMapIconSize[size]
          });
          break;
        case 'wait':
          inner = /*#__PURE__*/React.createElement("span", {
            className: `${prefixCls}-number-icon`
          }, stepNumber);
          break;
        case 'process':
          inner = /*#__PURE__*/React.createElement("span", {
            className: `${prefixCls}-number-icon`
          }, stepNumber);
          progress = true;
          break;
        case 'finish':
          inner = /*#__PURE__*/React.createElement(IconTickCircle, {
            size: stepSizeMapIconSize[size]
          });
          break;
        case 'warning':
          inner = /*#__PURE__*/React.createElement(IconAlertTriangle, {
            size: stepSizeMapIconSize[size]
          });
          break;
        default:
          inner = null;
          break;
      }
    }
    const cls = classnames({
      [`${prefixCls}-icon`]: true,
      [`${prefixCls}-custom-icon`]: 'icon' in props,
      [`${prefixCls}-icon-process`]: progress
    });
    return inner ? /*#__PURE__*/React.createElement("span", {
      className: cls
    }, inner) : null;
  };
  const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
    [`${prefixCls}-active`]: active,
    [`${prefixCls}-done`]: done,
    [`${prefixCls}-hover`]: onChange || props.onClick,
    [`${prefixCls}-clickable`]: onChange || onClick,
    [`${prefixCls}-${status}-hover`]: onChange || props.onClick
  }, className);
  const handleClick = e => {
    onClick === null || onClick === void 0 ? void 0 : onClick(e);
    onChange === null || onChange === void 0 ? void 0 : onChange();
  };
  const handleKeyDown = e => {
    if (e.key === 'Enter') {
      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
      onChange === null || onChange === void 0 ? void 0 : onChange();
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    role: props["role"],
    "aria-label": props["aria-label"],
    tabIndex: 0,
    "aria-current": "step",
    className: classString,
    style: style,
    onClick: e => handleClick(e),
    onKeyDown: handleKeyDown
  }, /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-container`
  }, /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-left`
  }, renderIcon()), /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-content`
  }, /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-title`
  }, /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-title-text`
  }, title)), description && /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-description`
  }, description))));
};
BasicStep.propTypes = {
  prefixCls: PropTypes.string,
  description: PropTypes.node,
  icon: PropTypes.node,
  status: PropTypes.oneOf(['wait', 'process', 'finish', 'error', 'warning']),
  title: PropTypes.node,
  className: PropTypes.string,
  style: PropTypes.object,
  onClick: PropTypes.func,
  active: PropTypes.bool,
  done: PropTypes.bool
};
BasicStep.defaultProps = {
  prefixCls: css.ITEM,
  active: false,
  done: false,
  status: 'wait',
  className: ''
};
export default BasicStep;