acud/es/progress/CircleProgress.js

acg react 组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/**
 * @file 环形进度条
 * @author liuhanwei
 */
import React from 'react';
import classNames from 'classnames';
import OutlinedCheck from "acud-icon/es/icons/OutlinedCheck";
import OutlinedClose from "acud-icon/es/icons/OutlinedClose";
import { sizeRatioMap, isNumber } from './common';
var CircleProgress = function CircleProgress(_ref) {
  var _ref$percent = _ref.percent,
    percent = _ref$percent === void 0 ? 0 : _ref$percent,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'circle' : _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,
    customizeStrokeLinecap = _ref$strokeLinecap === void 0 ? 'round' : _ref$strokeLinecap,
    customizeStageWidth = _ref.stageWidth,
    customizeStrokeRatio = _ref.strokeRatio,
    style = _ref.style,
    className = _ref.className,
    prefixCls = _ref.prefixCls;
  // SVG基础视窗尺寸
  var VIEX_BOX_SIZE = 50;
  // stageWidth取值异常时，将使用size对应的值
  var stageWidth = isNumber(customizeStageWidth) ? customizeStageWidth : '';
  // strokeRatio取值异常时，将使用默认值
  var strokeRatio = isNumber(customizeStrokeRatio) ? customizeStrokeRatio : 10;
  // 根据strokeRatio计算strokeWidth
  var strokeWidth = strokeRatio * VIEX_BOX_SIZE / 100;
  // SVG基础视窗定义
  var viewBoxPath = "0 0 ".concat(VIEX_BOX_SIZE, " ").concat(VIEX_BOX_SIZE);
  // 环宽度一半的位置到环心的距离
  var radius = VIEX_BOX_SIZE / 2 - strokeWidth / 2;
  // 环路径
  var circlePath = "\n        M ".concat(VIEX_BOX_SIZE / 2, " ").concat(VIEX_BOX_SIZE / 2, "\n        m 0 -").concat(radius, "\n        a ").concat(radius, " ").concat(radius, " 0 1 1 0 ").concat(2 * radius, "\n        a ").concat(radius, " ").concat(radius, " 0 1 1 0 -").concat(2 * radius, "\n    ");
  // strokeLinecap取值不为square，则全取round
  var strokeLinecap = percent !== 0 ? customizeStrokeLinecap === 'square' ? 'square' : 'round' : null;
  // 最外层容器的类名，将所有状态类名尽可能地代理到这层处理
  var extendedName = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), "".concat(prefixCls, "-").concat(size), "".concat(prefixCls, "-").concat(status), _defineProperty({}, "".concat(prefixCls, "-label-hidden"), infoType === 'none'), className);
  // 容器样式
  var stageStyles = _extends(_extends({}, style), {
    width: "".concat(stageWidth, "px"),
    height: "".concat(stageWidth, "px")
  });
  // 计算圆环周长
  var perimeter = 2 * Math.PI * radius;
  // 填充长度
  var fillLength = percent ? perimeter * (percent - 1) / 100 : 0;
  // 根据进度百分比设置圆环填充样式，-1为了减去linecap多出的长度
  var progressStyles = {
    strokeDasharray: "".concat(fillLength, "px, ").concat(perimeter - fillLength, "px"),
    strokeDashoffset: 0,
    transition: 'stroke-dasharray 300ms cubic-bezier(.08, .82, .17, 1)'
  };
  // 设置自定义文本样式
  var labelStyles = {
    color: textColor,
    fontSize: "".concat(textSize, "px")
  };
  var labelClassNames = classNames("".concat(prefixCls, "-label"), _defineProperty({}, "".concat(prefixCls, "-label-icon"), infoType === 'icon'));
  var ProgressLabel = /*#__PURE__*/React.createElement("span", {
    className: labelClassNames,
    style: labelStyles
  }, labelText);
  var iconWidth = sizeRatioMap[size] * 12;
  // 若信息类型为图标，在成功和异常时，显示图标
  if (infoType === 'icon') {
    if (status === 'success') {
      ProgressLabel = /*#__PURE__*/React.createElement(OutlinedCheck, {
        className: labelClassNames,
        width: iconWidth,
        fill: iconStrokeColor
      });
    } else if (status === 'error') {
      ProgressLabel = /*#__PURE__*/React.createElement(OutlinedClose, {
        className: labelClassNames,
        width: iconWidth,
        fill: iconStrokeColor
      });
    }
  }
  return /*#__PURE__*/React.createElement("div", {
    className: extendedName,
    style: stageStyles
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-trail")
  }, /*#__PURE__*/React.createElement("svg", {
    viewBox: viewBoxPath
  }, /*#__PURE__*/React.createElement("path", {
    d: circlePath,
    stroke: trailColor || 'currentColor',
    strokeWidth: strokeWidth,
    fill: "none"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-bar")
  }, /*#__PURE__*/React.createElement("svg", {
    viewBox: viewBoxPath
  }, /*#__PURE__*/React.createElement("path", {
    d: circlePath,
    stroke: strokeColor || 'currentColor',
    strokeWidth: percent ? strokeWidth : 0,
    strokeLinecap: strokeLinecap,
    fill: "none",
    style: progressStyles
  }))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-text-wrapper")
  }, ProgressLabel));
};
export default CircleProgress;