acud/lib/progress/LineProgress.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _MultiToneSuccess = _interopRequireDefault(require("acud-icon/lib/icons/MultiToneSuccess"));
var _MultiToneError = _interopRequireDefault(require("acud-icon/lib/icons/MultiToneError"));
var _common = require("./common");
/**
 * @file 条形进度条
 * @author liuhanwei
 */

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 = (0, _common.isNumber)(customizeStrokeWidth) ? customizeStrokeWidth : _common.sizeRatioMap[size] * BASE_LINE_WIDTH;
  // 最外层容器的类名，将所有状态类名尽可能地代理到这层处理
  var extendedName = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-").concat(type), "".concat(prefixCls, "-").concat(size), "".concat(prefixCls, "-").concat(status), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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 = (0, _classnames["default"])("".concat(prefixCls, "-label"), "".concat(prefixCls, "-label-").concat(infoPosition), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-label-icon"), infoType === 'icon'), "".concat(prefixCls, "-label-inner-").concat(innerLabelPosition), infoPosition === 'inner'));
  var ProgressLabel = /*#__PURE__*/_react["default"].createElement("span", {
    className: labelClassNames,
    style: labelStyles
  }, labelText);
  // 若信息类型为图标，在成功和异常时，显示图标
  if (infoType === 'icon') {
    if (status === 'success') {
      ProgressLabel = /*#__PURE__*/_react["default"].createElement(_MultiToneSuccess["default"], {
        className: labelClassNames,
        color: iconStrokeColor,
        width: "16px"
      });
    } else if (status === 'error') {
      ProgressLabel = /*#__PURE__*/_react["default"].createElement(_MultiToneError["default"], {
        className: labelClassNames,
        color: iconStrokeColor,
        width: "16px"
      });
    }
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: extendedName,
    style: style
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-wrapper"),
    style: wrapperStyles
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-trail"),
    style: trailStyles
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-bar"),
    style: barStyles
  }, infoPosition === 'inner' && ProgressLabel))), infoPosition === 'outer' && ProgressLabel);
};
var _default = exports["default"] = LineProgress;