choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
248 lines (217 loc) • 10.4 kB
JavaScript
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 _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["prefixCls", "className", "percent", "status", "format", "trailColor", "size", "successPercent", "type", "strokeWidth", "strokeColor", "width", "showInfo", "gapDegree", "gapPosition", "showPointer"];
import React, { Component } from 'react';
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 ConfigContext from '../config-provider/ConfigContext';
var validProgress = function validProgress(progress) {
if (!progress || progress < 0) {
return 0;
}
if (progress > 100) {
return 100;
}
return progress;
};
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 getPrefixCls = _this.context.getPrefixCls;
var prefixCls = getPrefixCls('progress', customizePrefixCls);
var progressStatus = parseInt(successPercent ? successPercent.toString() : percent.toString(), 10) >= 100 && !('status' in props) ? ProgressStatus.success : status || ProgressStatus.normal;
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "38",
height: "32",
viewBox: "0 0 38 32"
}, /*#__PURE__*/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, _excluded);
var getPrefixCls = this.context.getPrefixCls;
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 (format || progressStatus !== ProgressStatus.exception && progressStatus !== ProgressStatus.success) {
text = textFormatter(validProgress(percent), validProgress(successPercent));
} else if (progressStatus === ProgressStatus.exception) {
text = /*#__PURE__*/React.createElement(Icon, {
type: circleType ? 'close' : 'cancel'
});
} else if (progressStatus === ProgressStatus.success) {
text = /*#__PURE__*/React.createElement(Icon, {
type: circleType ? 'check' : 'check_circle'
});
}
progressInfo = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-text")
}, text);
if (showPointer) {
progressCenter = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-pointer"),
style: this.getPointerDeg()
}, this.renderPointer());
progressInfo = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-text-bottom")
}, text);
}
}
if (type === ProgressType.line) {
var percentStyle = {
width: "".concat(validProgress(percent), "%"),
height: strokeWidth || (size === Size.small ? 6 : 8),
background: strokeColor
};
var successPercentStyle = {
width: "".concat(validProgress(successPercent), "%"),
height: strokeWidth || (size === Size.small ? 6 : 8)
};
var successSegment = successPercent !== undefined ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-success-bg"),
style: successPercentStyle
}) : null;
progress = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-outer")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-inner")
}, /*#__PURE__*/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 = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-inner"),
style: circleStyle
}, /*#__PURE__*/React.createElement(Circle, {
percent: validProgress(percent),
strokeWidth: circleWidth,
trailWidth: circleWidth,
trailColor: trailColor,
strokeColor: strokeColor,
prefixCls: prefixCls,
gapDegree: gapDeg,
gapPosition: gapPos
}), progressCenter, progressInfo);
} else if (type === ProgressType.loading) {
progress = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-inner")
}, /*#__PURE__*/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 /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
className: classString
}), progress);
}
}], [{
key: "contextType",
get: function get() {
return ConfigContext;
}
}]);
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"]
};
//# sourceMappingURL=progress.js.map