preact-arco-design/es/Progress/steps-progress.js

Arco Design React UI Library.

var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
      r,
      ar = [],
      e;

  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
      ar.push(r.value);
    }
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }

  return ar;
};

var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
    if (ar || !(i in from)) {
      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
      ar[i] = from[i];
    }
  }
  return to.concat(ar || Array.prototype.slice.call(from));
};

import React, { useCallback } from "preact/compat";
import cs from "../_util/classNames";
import { isFunction } from "../_util/is";
import IconExclamationCircleFill from "../../icon/react-icon/IconExclamationCircleFill";
export var StepsProgress = function StepsProgress(props) {
  var _a;

  var size = props.size,
      prefixCls = props.prefixCls,
      percent = props.percent,
      status = props.status,
      color = props.color,
      type = props.type,
      showText = props.showText,
      formatText = props.formatText,
      trailColor = props.trailColor;
  var strokeWidth = props.strokeWidth || (size === 'small' ? 8 : 4);
  var cls = "".concat(prefixCls, "-").concat(type);
  var height = strokeWidth;
  var getText = useCallback(function () {
    if (isFunction(formatText)) {
      return formatText(percent);
    }

    switch (status) {
      case 'error':
        return React.createElement("span", null, percent, "% ", React.createElement(IconExclamationCircleFill, null));

      default:
        return "".concat(percent, "%");
    }
  }, [formatText, percent, status]);
  return React.createElement("div", {
    className: "".concat(cls, "-wrapper")
  }, React.createElement("div", {
    className: "".concat(cls, "-outer"),
    role: "progressbar",
    "aria-valuemin": 0,
    "aria-valuemax": 100,
    "aria-valuenow": percent,
    style: {
      height: height
    }
  }, __spreadArray([], __read(new Array(props.steps)), false).map(function (_, index) {
    var _a;

    var isActive = percent > 100 / props.steps * index;
    return React.createElement("div", {
      key: index,
      className: cs("".concat(cls, "-item"), (_a = {}, _a["".concat(cls, "-item-active")] = isActive, _a)),
      style: {
        backgroundColor: isActive ? color : trailColor || ''
      }
    });
  })), showText && React.createElement("div", {
    className: cs("".concat(cls, "-text"), (_a = {}, _a["".concat(cls, "-text-with-icon")] = status, _a))
  }, getText()));
};
StepsProgress.defaultProps = {
  showText: true,
  size: 'default',
  status: 'normal'
};
export default StepsProgress;