acud/es/progress/LineProgress.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/**
 * @file 条形进度条
 * @author liuhanwei
 */
import React from 'react';
import classNames from 'classnames';
import MultiToneSuccess from "acud-icon/es/icons/MultiToneSuccess";
import MultiToneError from "acud-icon/es/icons/MultiToneError";
import { sizeRatioMap, isNumber } from './common';
var LineProgress = function LineProgress(_ref) {
  var _ref$percent = _ref.percent,
    percent = _ref$percent === void 0 ? 0 : _ref$percent,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'line' : _ref$type,
    status = _ref.status,
    size = _ref.size,
    strokeColor = _ref.strokeColor,
    iconStrokeColor = _ref.iconStrokeColor,
    _ref$infoType = _ref.infoType,
    infoType = _ref$infoType === void 0 ? 'text' : _ref$infoType,
    trailColor = _ref.trailColor,
    textColor = _ref.textColor,
    textSize = _ref.textSize,
    labelText = _ref.labelText,
    _ref$strokeLinecap = _ref.strokeLinecap,
    strokeLinecap = _ref$strokeLinecap === void 0 ? 'round' : _ref$strokeLinecap,
    customizeStrokeWidth = _ref.strokeWidth,
    _ref$infoPosition = _ref.infoPosition,
    customizeInfoPosition = _ref$infoPosition === void 0 ? 'outer' : _ref$infoPosition,
    style = _ref.style,
    className = _ref.className,
    prefixCls = _ref.prefixCls;
  var BASE_LINE_WIDTH = 4;
  // strokeWidth取值异常时，将使用size对应的宽度
  var strokeWidth = isNumber(customizeStrokeWidth) ? customizeStrokeWidth : sizeRatioMap[size] * BASE_LINE_WIDTH;
  // 最外层容器的类名，将所有状态类名尽可能地代理到这层处理
  var extendedName = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), "".concat(prefixCls, "-").concat(size), "".concat(prefixCls, "-").concat(status), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-label-hidden"), infoType === 'none'), "".concat(prefixCls, "-linecap-round"), strokeLinecap !== 'square'), className);
  // 设置进度条宽度
  var wrapperStyles = {
    height: "".concat(strokeWidth, "px")
  };
  // 设置进度轨道颜色
  var trailStyles = {
    backgroundColor: trailColor
  };
  // 设置进度百分比长度和颜色
  var barStyles = {
    width: "".concat(percent, "%"),
    backgroundColor: strokeColor
  };
  // 当infoPosition值为inner或infoType值为icon，信息显示在进度条外
  var infoPosition = customizeInfoPosition !== 'inner' || infoType === 'icon' ? 'outer' : 'inner';
  // 当文本显示在进度条内时，进度小于50，显示在未完成部分；大于50，显示在完成部分
  var innerLabelPosition = percent < 50 ? 'right' : 'left';
  // 设置自定义文本样式
  var labelStyles = {
    color: textColor,
    fontSize: "".concat(textSize, "px")
  };
  var labelClassNames = classNames("".concat(prefixCls, "-label"), "".concat(prefixCls, "-label-").concat(infoPosition), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-label-icon"), infoType === 'icon'), "".concat(prefixCls, "-label-inner-").concat(innerLabelPosition), infoPosition === 'inner'));
  var ProgressLabel = /*#__PURE__*/React.createElement("span", {
    className: labelClassNames,
    style: labelStyles
  }, labelText);
  // 若信息类型为图标，在成功和异常时，显示图标
  if (infoType === 'icon') {
    if (status === 'success') {
      ProgressLabel = /*#__PURE__*/React.createElement(MultiToneSuccess, {
        className: labelClassNames,
        color: iconStrokeColor,
        width: "16px"
      });
    } else if (status === 'error') {
      ProgressLabel = /*#__PURE__*/React.createElement(MultiToneError, {
        className: labelClassNames,
        color: iconStrokeColor,
        width: "16px"
      });
    }
  }
  return /*#__PURE__*/React.createElement("div", {
    className: extendedName,
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-wrapper"),
    style: wrapperStyles
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-trail"),
    style: trailStyles
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-bar"),
    style: barStyles
  }, infoPosition === 'inner' && ProgressLabel))), infoPosition === 'outer' && ProgressLabel);
};
export default LineProgress;