@douyinfe/semi-ui/lib/cjs/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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.stepSizeMapIconSize = exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/steps/constants");
var _semiIcons = require("@douyinfe/semi-icons");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var stepSizeMapIconSize;
(function (stepSizeMapIconSize) {
  stepSizeMapIconSize["small"] = "large";
  stepSizeMapIconSize["default"] = "extra-large";
})(stepSizeMapIconSize || (exports.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.default.isValidElement(icon)) {
        inner = icon;
      }
    } else if ('status' in props) {
      switch (status) {
        case 'error':
          inner = /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, {
            size: stepSizeMapIconSize[size]
          });
          break;
        case 'wait':
          inner = /*#__PURE__*/_react.default.createElement("span", {
            className: `${prefixCls}-number-icon`
          }, stepNumber);
          break;
        case 'process':
          inner = /*#__PURE__*/_react.default.createElement("span", {
            className: `${prefixCls}-number-icon`
          }, stepNumber);
          progress = true;
          break;
        case 'finish':
          inner = /*#__PURE__*/_react.default.createElement(_semiIcons.IconTickCircle, {
            size: stepSizeMapIconSize[size]
          });
          break;
        case 'warning':
          inner = /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertTriangle, {
            size: stepSizeMapIconSize[size]
          });
          break;
        default:
          inner = null;
          break;
      }
    }
    const cls = (0, _classnames.default)({
      [`${prefixCls}-icon`]: true,
      [`${prefixCls}-custom-icon`]: 'icon' in props,
      [`${prefixCls}-icon-process`]: progress
    });
    return inner ? /*#__PURE__*/_react.default.createElement("span", {
      className: cls
    }, inner) : null;
  };
  const classString = (0, _classnames.default)(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.default.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.default.createElement("div", {
    className: `${prefixCls}-container`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-left`
  }, renderIcon()), /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-content`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-title`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-title-text`
  }, title)), description && /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-description`
  }, description))));
};
BasicStep.propTypes = {
  prefixCls: _propTypes.default.string,
  description: _propTypes.default.node,
  icon: _propTypes.default.node,
  status: _propTypes.default.oneOf(['wait', 'process', 'finish', 'error', 'warning']),
  title: _propTypes.default.node,
  className: _propTypes.default.string,
  style: _propTypes.default.object,
  onClick: _propTypes.default.func,
  active: _propTypes.default.bool,
  done: _propTypes.default.bool
};
BasicStep.defaultProps = {
  prefixCls: _constants.stepsClasses.ITEM,
  active: false,
  done: false,
  status: 'wait',
  className: ''
};
var _default = exports.default = BasicStep;