tdesign-react/lib/steps/Steps.js

TDesign Component for React

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

import { _ as _defineProperty } from '../_chunks/dep-d67deb2c.js';
import { _ as _slicedToArray } from '../_chunks/dep-10d5731f.js';
import React, { useMemo, useCallback } from 'react';
import classNames from 'classnames';
import forwardRefWithStatics from '../_util/forwardRefWithStatics.js';
import useConfig from '../hooks/useConfig.js';
import useControlled from '../hooks/useControlled.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import StepItem from './StepItem.js';
import StepsContext from './StepsContext.js';
import { stepsDefaultProps } from './defaultProps.js';
import '../_chunks/dep-8abcbcbc.js';
import '../_chunks/dep-74a10cfb.js';
import 'hoist-non-react-statics';
import '../config-provider/ConfigContext.js';
import 'lodash-es';
import '../_chunks/dep-6b235a32.js';
import '../_chunks/dep-b9afa32b.js';
import 'dayjs';
import '../_util/noop.js';
import 'tdesign-icons-react';
import '../hooks/useGlobalIcon.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Steps = forwardRefWithStatics(function (originalProps, ref) {
  var props = useDefaultProps(originalProps, stepsDefaultProps);
  var style = props.style,
    layout = props.layout,
    theme = props.theme,
    sequence = props.sequence,
    separator = props.separator,
    children = props.children,
    options = props.options;
  var _useConfig = useConfig(),
    classPrefix = _useConfig.classPrefix;
  var _useControlled = useControlled(props, "current", props.onChange),
    _useControlled2 = _slicedToArray(_useControlled, 2),
    current = _useControlled2[0],
    onChange = _useControlled2[1];
  var indexMap = useMemo(function () {
    var map = {};
    if (options) {
      options.forEach(function (item, index) {
        if (item.value !== void 0) {
          map[item.value] = index;
        }
      });
    } else {
      React.Children.forEach(children, function (child, index) {
        if (! /*#__PURE__*/React.isValidElement(child)) {
          return;
        }
        if (child.props.value !== void 0) {
          map[child.props.value] = index;
        }
      });
    }
    return map;
  }, [options, children]);
  var handleStatus = useCallback(function (item, index) {
    var _item$value;
    if (current === "FINISH") {
      return "finish";
    }
    if (item.status && item.status !== "default") {
      return item.status;
    }
    if (item.value === void 0) {
      if (sequence === "positive" && typeof current === "number" && index < current) {
        return "finish";
      }
      if (sequence === "reverse" && typeof current === "number" && index > current) {
        return "finish";
      }
    }
    if (item.value !== void 0) {
      var matchIndex = indexMap[current];
      if (matchIndex === void 0) {
        console.warn("TDesign Steps Warn: The current `value` is not exist.");
        return "default";
      }
      if (sequence === "positive" && index < matchIndex) {
        return "finish";
      }
      if (sequence === "reverse" && index > matchIndex) {
        return "finish";
      }
    }
    var key = (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : index;
    if (key === current) {
      return "process";
    }
    return "default";
  }, [current, sequence, indexMap]);
  var stepItemList = useMemo(function () {
    if (options) {
      var optionsDisplayList = sequence === "reverse" ? options.reverse() : options;
      return options.map(function (item, index) {
        var stepIndex = sequence === "reverse" ? optionsDisplayList.length - index - 1 : index;
        return /* @__PURE__ */React.createElement(StepItem, _objectSpread(_objectSpread({
          key: index
        }, item), {}, {
          index: stepIndex,
          status: handleStatus(item, index)
        }));
      });
    }
    var childrenList = React.Children.toArray(children);
    var childrenDisplayList = sequence === "reverse" ? childrenList.reverse() : childrenList;
    return childrenList.map(function (child, index) {
      var stepIndex = sequence === "reverse" ? childrenDisplayList.length - index - 1 : index;
      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
        index: stepIndex,
        status: handleStatus(child.props, index)
      }));
    });
  }, [options, children, sequence, handleStatus]);
  return /* @__PURE__ */React.createElement(StepsContext.Provider, {
    value: {
      current: current,
      theme: theme,
      readOnly: props.readOnly || props.readonly,
      onChange: onChange
    }
  }, /* @__PURE__ */React.createElement("div", {
    ref: ref,
    style: style,
    className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-steps"), true), "".concat(classPrefix, "-steps--").concat(theme, "-anchor"), theme), "".concat(classPrefix, "-steps--").concat(layout), layout), "".concat(classPrefix, "-steps--").concat(sequence), sequence), "".concat(classPrefix, "-steps--").concat(separator, "-separator"), separator), props.className, !!props.className))
  }, stepItemList));
}, {
  StepItem: StepItem
});
Steps.displayName = "Steps";

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