preact-arco-design/es/Progress/line-progess.js

Arco Design React UI Library.

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import React, { useCallback } from "preact/compat";
import cs from "../_util/classNames";
import { isFunction, isObject } from "../_util/is";
import IconExclamationCircleFill from "../../icon/react-icon/IconExclamationCircleFill";

var getBackground = function getBackground(color, percent) {
  if (isObject(color)) {
    var val = Object.keys(color).map(function (key) {
      return "".concat(color[key], " ").concat(key);
    }).join(',');
    var sizeProps = percent ? {
      backgroundSize: "".concat(100 * 100 / percent, "%")
    } : {};
    return __assign({
      backgroundImage: "linear-gradient(to right, ".concat(val, ")")
    }, sizeProps);
  }

  return {
    backgroundColor: color
  };
};

var defaultStrokeWidth = {
  small: 3,
  default: 4,
  large: 8
};

function LineProgress(props) {
  var _a, _b;

  var // textInside,
  type = props.type,
      size = props.size,
      prefixCls = props.prefixCls,
      buffer = props.buffer,
      percent = props.percent,
      status = props.status,
      color = props.color,
      animation = props.animation,
      showText = props.showText,
      bufferColor = props.bufferColor,
      formatText = props.formatText,
      trailColor = props.trailColor;
  var strokeWidth = props.strokeWidth || defaultStrokeWidth[size];
  var cls = "".concat(prefixCls, "-").concat(type);
  var height = strokeWidth;
  var isFinish = status === 'success' || status === 'error' || percent >= 100;
  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,
      backgroundColor: trailColor
    }
  }, buffer && !isFinish && React.createElement("div", {
    className: "".concat(cls, "-inner-buffer"),
    style: __assign({
      width: "".concat(percent > 0 ? percent + 10 : 0, "%")
    }, getBackground(bufferColor))
  }), React.createElement("div", {
    className: cs("".concat(cls, "-inner"), (_a = {}, _a["".concat(cls, "-inner-animate")] = animation, _a)),
    style: __assign({
      width: "".concat(percent, "%")
    }, getBackground(color, percent))
  })), showText && React.createElement("div", {
    className: cs("".concat(cls, "-text"), (_b = {}, _b["".concat(cls, "-text-with-icon")] = status, _b))
  }, getText()));
}

LineProgress.defaultProps = {
  showText: true,
  size: 'default',
  status: 'normal'
};
export default LineProgress;