tntd/lib/progress/progress.js

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {};
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _configProvider = require("antd/lib/config-provider");
var _progress = _interopRequireDefault(require("antd/lib/progress"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ellipsis = _interopRequireDefault(require("../ellipsis"));
var _icon = _interopRequireDefault(require("../icon"));
require("./progress.less");
var _tooltip = require("antd/lib/tooltip");
Object.keys(_tooltip).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _tooltip[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _tooltip[key];
    }
  });
});
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : {
    "default": e
  };
}
function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != _typeof(t) || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != _typeof(i)) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
var iconMap = {
  line: {
    success: 'check-circle',
    exception: 'close-circle'
  },
  circle: {
    success: 'check',
    exception: 'close'
  }
};
var ifPercentBottom = function ifPercentBottom(type, percentPosition) {
  return type === 'line' && percentPosition === 'bottom';
};
var percentTransform = function percentTransform(percent) {
  return percent >= 100 ? 100 : percent <= 0 ? 0 : percent;
};
var themeStrokeColor = function themeStrokeColor(status, strokeColor, percent) {
  return status !== 'success' && status !== 'exception' && !strokeColor && percent !== 100 ? 'var(--blue-5)' : '';
};
var Progress = function Progress(props) {
  var className = props.className,
    _props$type = props.type,
    type = _props$type === void 0 ? 'line' : _props$type,
    _props$percentPositio = props.percentPosition,
    percentPosition = _props$percentPositio === void 0 ? 'right' : _props$percentPositio,
    _props$percent = props.percent,
    percent = _props$percent === void 0 ? 0 : _props$percent,
    format = props.format,
    size = props.size,
    label = props.label,
    _props$width = props.width,
    width = _props$width === void 0 ? 132 : _props$width,
    status = props.status,
    halfCircle = props.halfCircle,
    _props$gapDegree = props.gapDegree,
    gapDegree = _props$gapDegree === void 0 ? props.halfCircle ? 135 : props.gapDegree : _props$gapDegree,
    strokeColor = props.strokeColor,
    _props$strokeWidth = props.strokeWidth,
    strokeWidth = _props$strokeWidth === void 0 ? 7 : _props$strokeWidth;
  var _percent = percentTransform(percent);
  var _strokeColor = themeStrokeColor(status, strokeColor, _percent);
  return _react["default"].createElement(_configProvider.ConfigConsumer, null, function (_ref) {
    var getPrefixCls = _ref.getPrefixCls;
    var prefixCls = getPrefixCls('progress');
    var CusLabelOrPercent = function CusLabelOrPercent(props) {
      var type = props.type,
        theme = props.theme;
      var labelPercentClassName = (0, _classnames["default"])("".concat(prefixCls, "-percent-bottom"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-percent-bottom-").concat(size), size === 'small'), "".concat(prefixCls, "-percent-bottom-").concat(type), type === 'line'));
      var showIcon = function showIcon(status) {
        return _react["default"].createElement(_icon["default"], {
          type: "".concat(iconMap[type][status]),
          theme: theme,
          className: (0, _classnames["default"])(_defineProperty({}, "".concat(labelPercentClassName, " ").concat(labelPercentClassName, "-").concat(status || 'success'), type === 'line'))
        });
      };
      var showPercent = _react["default"].createElement("div", {
        className: labelPercentClassName
      }, format ? format === null || format === void 0 ? void 0 : format(_percent) : _percent + '%');
      var displayContent;
      if (status === 'success' || status === 'exception') {
        displayContent = showIcon(status);
      } else if (status === 'normal' || status === 'active') {
        displayContent = showPercent;
      } else {
        // 如果状态为空
        displayContent = _percent === 100 ? showIcon('success') : showPercent;
      }
      return displayContent;
    };
    var CusCircleAndDashboardFormat = function CusCircleAndDashboardFormat(props) {
      var widthNum = props.widthNum;
      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-cus-format")
      }, !!label && _react["default"].createElement(_ellipsis["default"], {
        className: "".concat(prefixCls, "-cus-format-label"),
        title: label,
        widthLimit: widthNum <= 64 ? widthNum : 'calc(100% - 50px)',
        placement: widthNum <= 64 ? 'bottom' : 'top'
      }), _react["default"].createElement(CusLabelOrPercent, {
        type: "circle",
        theme: "outlined"
      }));
    };
    //line
    var LineProgress = function LineProgress() {
      return _react["default"].createElement(_progress["default"], Object.assign({
        strokeColor: _strokeColor
      }, props, {
        className: (0, _classnames["default"])('tnt-progress', className, _defineProperty({}, "".concat(prefixCls, "-percent-bottom"), percentPosition === 'bottom'))
      }));
    };
    //circle,dashboard (额外新增label和半圆选项)
    var CircleAndDashboardProgress = function CircleAndDashboardProgress() {
      var widthNum = Number(String(width).split('px').shift());
      return _react["default"].createElement(_progress["default"], Object.assign({
        gapDegree: gapDegree,
        strokeColor: _strokeColor,
        strokeWidth: strokeWidth
      }, props, {
        type: halfCircle ? 'dashboard' : type,
        className: (0, _classnames["default"])('tnt-progress', "".concat(prefixCls, "-circle-progress"), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-small-circle"), widthNum <= 64 && label), "".concat(prefixCls, "-large-circle"), widthNum > 64 && label), "".concat(prefixCls, "-small-half-circle"), halfCircle && widthNum <= 64 && label), "".concat(prefixCls, "-large-half-circle"), halfCircle && widthNum > 64 && label)),
        format: function format() {
          return _react["default"].createElement(CusCircleAndDashboardFormat, {
            widthNum: widthNum
          });
        }
      }));
    };
    var progressMap = {
      line: _react["default"].createElement(LineProgress, null),
      circle: _react["default"].createElement(CircleAndDashboardProgress, null),
      dashboard: _react["default"].createElement(CircleAndDashboardProgress, null)
    };
    return progressMap[type];
  });
};
var _default = exports["default"] = Progress;