choerodon-ui/es/progress/progress.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import { Circle } from '../rc-components/progress';
import Loading from './Loading';
import { Size } from '../_util/enum';
import { ProgressPosition, ProgressStatus, ProgressType } from './enum';
import { getPrefixCls } from '../configure';

var Progress =
/*#__PURE__*/
function (_Component) {
  _inherits(Progress, _Component);

  var _super = _createSuper(Progress);

  function Progress() {
    var _this;

    _classCallCheck(this, Progress);

    _this = _super.apply(this, arguments);

    _this.renderPointer = function () {
      var props = _this.props;
      var customizePrefixCls = props.prefixCls,
          _props$percent = props.percent,
          percent = _props$percent === void 0 ? 0 : _props$percent,
          status = props.status,
          successPercent = props.successPercent;
      var prefixCls = getPrefixCls('progress', customizePrefixCls);
      var progressStatus = parseInt(successPercent ? successPercent.toString() : percent.toString(), 10) >= 100 && !('status' in props) ? ProgressStatus.success : status || ProgressStatus.normal;
      return React.createElement("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        width: "38",
        height: "32",
        viewBox: "0 0 38 32"
      }, React.createElement("path", {
        // style={{
        //   fill: strokeColor ? strokeColor : '',
        // }}
        className: "".concat(prefixCls, "-status-pointer-").concat(progressStatus),
        fill: "#6887E8",
        d: "M103.371587,49.724578 C103.681687,50.1292204 103.634794,50.6951896 103.280961,51.0440945 L103.186137,51.1265795 L78.8502947,69.7769214 C79.5504585,70.8623565 79.9567807,72.1551739 79.9567807,73.5428929 C79.9567807,77.3850168 76.8421239,80.4996736 73,80.4996736 C69.1578761,80.4996736 66.0432193,77.3850168 66.0432193,73.5428929 C66.0432193,69.700769 69.1578761,66.5861122 73,66.5861122 C74.7317808,66.5861122 76.3157678,67.218893 77.5333601,68.265854 L101.969586,49.5391281 C102.407948,49.2031866 103.035646,49.2862154 103.371587,49.724578 Z M73,68.5861122 C70.2624456,68.5861122 68.0432193,70.8053385 68.0432193,73.5428929 C68.0432193,76.2804473 70.2624456,78.4996736 73,78.4996736 C75.7375544,78.4996736 77.9567807,76.2804473 77.9567807,73.5428929 C77.9567807,70.8053385 75.7375544,68.5861122 73,68.5861122 Z",
        transform: "translate(-66 -49)"
      }));
    };
    /**
     * 计算指针角度
     */


    _this.getPointerDeg = function () {
      var _this$props = _this.props,
          _this$props$percent = _this$props.percent,
          percent = _this$props$percent === void 0 ? 0 : _this$props$percent,
          _this$props$gapDegree = _this$props.gapDegree,
          gapDegree = _this$props$gapDegree === void 0 ? 0 : _this$props$gapDegree; // 缺口角度

      var gapDeg = gapDegree || 75; // percent 角度

      var percentDeg = (360 - gapDeg) * (percent / 100); // 初始位置 0 -> 126 + 缺口角度/2 + percent 角度 + diffDeg

      var diffDeg = 0;

      if (percent <= 75 && percent > 50) {
        diffDeg = -3;
      } else if (percent > 75) {
        diffDeg = -5;
      } else if (percent < 50) {
        diffDeg = 5;
      }

      var deg = 128 + gapDeg / 2 + percentDeg + diffDeg;
      return {
        transform: "rotate(".concat(deg, "deg)")
      };
    };

    return _this;
  }

  _createClass(Progress, [{
    key: "render",
    value: function render() {
      var _classNames;

      var props = this.props;

      var customizePrefixCls = props.prefixCls,
          className = props.className,
          _props$percent2 = props.percent,
          percent = _props$percent2 === void 0 ? 0 : _props$percent2,
          status = props.status,
          format = props.format,
          trailColor = props.trailColor,
          size = props.size,
          successPercent = props.successPercent,
          type = props.type,
          strokeWidth = props.strokeWidth,
          strokeColor = props.strokeColor,
          width = props.width,
          showInfo = props.showInfo,
          _props$gapDegree = props.gapDegree,
          gapDegree = _props$gapDegree === void 0 ? 0 : _props$gapDegree,
          gapPosition = props.gapPosition,
          showPointer = props.showPointer,
          restProps = _objectWithoutProperties(props, ["prefixCls", "className", "percent", "status", "format", "trailColor", "size", "successPercent", "type", "strokeWidth", "strokeColor", "width", "showInfo", "gapDegree", "gapPosition", "showPointer"]);

      var prefixCls = getPrefixCls('progress', customizePrefixCls);
      var progressStatus = parseInt(successPercent ? successPercent.toString() : percent.toString(), 10) >= 100 && !('status' in props) ? ProgressStatus.success : status || ProgressStatus.normal;
      var progressInfo;
      var progressCenter;
      var progress;

      var textFormatter = format || function (percentNumber) {
        return "".concat(percentNumber, "%");
      };

      if (showInfo) {
        var text;
        var circleType = type === ProgressType.circle || type === ProgressType.dashboard;

        if (progressStatus === ProgressStatus.exception) {
          text = format ? textFormatter(percent) : React.createElement(Icon, {
            type: circleType ? 'close' : 'cancel'
          });
        } else if (progressStatus === ProgressStatus.success) {
          text = format ? textFormatter(percent) : React.createElement(Icon, {
            type: circleType ? 'check' : 'check_circle'
          });
        } else {
          text = textFormatter(percent);
        }

        progressInfo = React.createElement("span", {
          className: "".concat(prefixCls, "-text")
        }, text);

        if (showPointer) {
          progressCenter = React.createElement("div", {
            className: "".concat(prefixCls, "-pointer"),
            style: this.getPointerDeg()
          }, this.renderPointer());
          progressInfo = React.createElement("span", {
            className: "".concat(prefixCls, "-text-bottom")
          }, text);
        }
      }

      if (type === ProgressType.line) {
        var percentStyle = {
          width: "".concat(percent, "%"),
          height: strokeWidth || (size === Size.small ? 6 : 8),
          background: strokeColor
        };
        var successPercentStyle = {
          width: "".concat(successPercent, "%"),
          height: strokeWidth || (size === Size.small ? 6 : 8)
        };
        var successSegment = successPercent !== undefined ? React.createElement("div", {
          className: "".concat(prefixCls, "-success-bg"),
          style: successPercentStyle
        }) : null;
        progress = React.createElement("div", null, React.createElement("div", {
          className: "".concat(prefixCls, "-outer")
        }, React.createElement("div", {
          className: "".concat(prefixCls, "-inner")
        }, React.createElement("div", {
          className: "".concat(prefixCls, "-bg"),
          style: percentStyle
        }), successSegment)), progressInfo);
      } else if (type === ProgressType.circle || type === ProgressType.dashboard) {
        var circleSize = width || 120;
        var circleStyle = {
          width: circleSize,
          height: circleSize,
          fontSize: circleSize * 0.15 + 6
        };
        var circleWidth = strokeWidth || 6;
        var gapPos = gapPosition || type === ProgressType.dashboard && ProgressPosition.bottom || ProgressPosition.top;
        var gapDeg = gapDegree || type === ProgressType.dashboard && 75;
        progress = React.createElement("div", {
          className: "".concat(prefixCls, "-inner"),
          style: circleStyle
        }, React.createElement(Circle, {
          percent: percent,
          strokeWidth: circleWidth,
          trailWidth: circleWidth,
          trailColor: trailColor,
          strokeColor: strokeColor,
          prefixCls: prefixCls,
          gapDegree: gapDeg,
          gapPosition: gapPos
        }), progressCenter, progressInfo);
      } else if (type === ProgressType.loading) {
        progress = React.createElement("div", {
          className: "".concat(prefixCls, "-inner")
        }, React.createElement(Loading, null));
      }

      var classString = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type === ProgressType.dashboard && ProgressType.circle || type), true), _defineProperty(_classNames, "".concat(prefixCls, "-status-").concat(progressStatus), true), _defineProperty(_classNames, "".concat(prefixCls, "-show-info"), showInfo), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), size), _classNames), className);
      return React.createElement("div", _extends({}, restProps, {
        className: classString
      }), progress);
    }
  }]);

  return Progress;
}(Component);

export { Progress as default };
Progress.displayName = 'Progress';
Progress.defaultProps = {
  type: ProgressType.line,
  percent: 0,
  showInfo: true,
  showPointer: false,
  trailColor: '#f3f3f3',
  size: Size["default"]
};
Progress.propTypes = {
  status: PropTypes.oneOf([ProgressStatus.normal, ProgressStatus.exception, ProgressStatus.active, ProgressStatus.success]),
  type: PropTypes.oneOf([ProgressType.line, ProgressType.circle, ProgressType.dashboard, ProgressType.loading]),
  showInfo: PropTypes.bool,
  showPointer: PropTypes.bool,
  percent: PropTypes.number,
  width: PropTypes.number,
  strokeWidth: PropTypes.number,
  strokeColor: PropTypes.string,
  trailColor: PropTypes.string,
  format: PropTypes.func,
  gapDegree: PropTypes.number,
  size: PropTypes.oneOf([Size["default"], Size.small, Size.large])
};
//# sourceMappingURL=progress.js.map