tdesign-react/es/steps/StepItem.js

TDesign Component for React

/**
 * tdesign v1.15.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import React, { useContext } from 'react';
import classNames from 'classnames';
import { CloseIcon, CheckIcon } from 'tdesign-icons-react';
import useConfig from '../hooks/useConfig.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import StepsContext from './StepsContext.js';
import { stepItemDefaultProps } from './defaultProps.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-eca3a3de.js';
import '../config-provider/ConfigContext.js';
import 'lodash-es';
import '../locale/zh_CN.js';
import '../_chunks/dep-e29214cb.js';
import 'dayjs';
import '../_chunks/dep-3c9ab31a.js';

var StepItem = function StepItem(originalProps) {
  var props = useDefaultProps(originalProps, stepItemDefaultProps);
  var index = props.index,
    icon = props.icon,
    title = props.title,
    content = props.content,
    value = props.value,
    children = props.children,
    style = props.style,
    status = props.status;
  var _useContext = useContext(StepsContext),
    current = _useContext.current,
    theme = _useContext.theme,
    onChange = _useContext.onChange,
    readonly = _useContext.readonly;
  var _useConfig = useConfig(),
    classPrefix = _useConfig.classPrefix,
    globalStepsConfig = _useConfig.steps;
  var _useGlobalIcon = useGlobalIcon({
      CloseIcon: CloseIcon,
      CheckIcon: CheckIcon
    }),
    CloseIcon$1 = _useGlobalIcon.CloseIcon,
    CheckIcon$1 = _useGlobalIcon.CheckIcon;
  var canClick = status !== "process" && !readonly;
  var iconNode = React.useMemo(function () {
    if (!icon || theme !== "default") {
      return null;
    }
    if (icon !== true) {
      return icon;
    }
    var iconCls = "".concat(classPrefix, "-steps-item__icon--number");
    var getDefaultIconByStatus = function getDefaultIconByStatus() {
      switch (status) {
        case "error":
          return globalStepsConfig.errorIcon || /* @__PURE__ */React.createElement(CloseIcon$1, null);
        case "finish":
          return globalStepsConfig.checkIcon || /* @__PURE__ */React.createElement(CheckIcon$1, null);
        default:
          return Number(index) + 1;
      }
    };
    return /* @__PURE__ */React.createElement("span", {
      className: iconCls
    }, getDefaultIconByStatus());
  }, [icon, classPrefix, theme, status, globalStepsConfig, index, CloseIcon$1, CheckIcon$1]);
  function onStepClick(e) {
    if (!canClick) {
      return;
    }
    var currentValue = value !== null && value !== void 0 ? value : index;
    onChange(currentValue, current, {
      e: e
    });
  }
  return /* @__PURE__ */React.createElement("div", {
    style: style,
    className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-steps-item"), true), "".concat(classPrefix, "-steps-item--wait"), status === "default"), "".concat(classPrefix, "-steps-item--error"), status === "error"), "".concat(classPrefix, "-steps-item--finish"), status === "finish"), "".concat(classPrefix, "-steps-item--process"), status === "process"), props.className, !!props.className))
  }, /* @__PURE__ */React.createElement("div", {
    className: classNames("".concat(classPrefix, "-steps-item__inner"), _defineProperty({}, "".concat(classPrefix, "-steps-item--clickable"), canClick)),
    onClick: onStepClick
  }, /* @__PURE__ */React.createElement("div", {
    className: classNames("".concat(classPrefix, "-steps-item__icon"), _defineProperty({}, "".concat(classPrefix, "-steps-item-").concat(status), status))
  }, iconNode), /* @__PURE__ */React.createElement("div", {
    className: "".concat(classPrefix, "-steps-item__content")
  }, /* @__PURE__ */React.createElement("div", {
    className: "".concat(classPrefix, "-steps-item__title")
  }, title), /* @__PURE__ */React.createElement("div", {
    className: "".concat(classPrefix, "-steps-item__description")
  }, content), children ? /* @__PURE__ */React.createElement("div", {
    className: "".concat(classPrefix, "-steps-item__extra")
  }, children) : null)));
};
StepItem.displayName = "StepItem";

export { StepItem as default };
//# sourceMappingURL=StepItem.js.map