choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
270 lines (224 loc) • 11.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _icon = _interopRequireDefault(require("../icon"));
var _progress = require("../rc-components/progress");
var _Loading = _interopRequireDefault(require("./Loading"));
var _enum = require("../_util/enum");
var _enum2 = require("./enum");
var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
var _excluded = ["prefixCls", "className", "percent", "status", "format", "trailColor", "size", "successPercent", "type", "strokeWidth", "strokeColor", "width", "showInfo", "gapDegree", "gapPosition", "showPointer"];
var validProgress = function validProgress(progress) {
if (!progress || progress < 0) {
return 0;
}
if (progress > 100) {
return 100;
}
return progress;
};
var Progress = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Progress, _Component);
var _super = (0, _createSuper2["default"])(Progress);
function Progress() {
var _this;
(0, _classCallCheck2["default"])(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) ? _enum2.ProgressStatus.success : status || _enum2.ProgressStatus.normal;
return /*#__PURE__*/_react["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "38",
height: "32",
viewBox: "0 0 38 32"
}, /*#__PURE__*/_react["default"].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;
}
(0, _createClass2["default"])(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 = (0, _objectWithoutProperties2["default"])(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) ? _enum2.ProgressStatus.success : status || _enum2.ProgressStatus.normal;
var progressInfo;
var progressCenter;
var progress;
var textFormatter = format || function (percentNumber) {
return "".concat(percentNumber, "%");
};
if (showInfo) {
var text;
var circleType = type === _enum2.ProgressType.circle || type === _enum2.ProgressType.dashboard;
if (format || progressStatus !== _enum2.ProgressStatus.exception && progressStatus !== _enum2.ProgressStatus.success) {
text = textFormatter(validProgress(percent), validProgress(successPercent));
} else if (progressStatus === _enum2.ProgressStatus.exception) {
text = /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: circleType ? 'close' : 'cancel'
});
} else if (progressStatus === _enum2.ProgressStatus.success) {
text = /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: circleType ? 'check' : 'check_circle'
});
}
progressInfo = /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefixCls, "-text")
}, text);
if (showPointer) {
progressCenter = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-pointer"),
style: this.getPointerDeg()
}, this.renderPointer());
progressInfo = /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefixCls, "-text-bottom")
}, text);
}
}
if (type === _enum2.ProgressType.line) {
var percentStyle = {
width: "".concat(validProgress(percent), "%"),
height: strokeWidth || (size === _enum.Size.small ? 6 : 8),
background: strokeColor
};
var successPercentStyle = {
width: "".concat(validProgress(successPercent), "%"),
height: strokeWidth || (size === _enum.Size.small ? 6 : 8)
};
var successSegment = successPercent !== undefined ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-success-bg"),
style: successPercentStyle
}) : null;
progress = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-outer")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-inner")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-bg"),
style: percentStyle
}), successSegment)), progressInfo);
} else if (type === _enum2.ProgressType.circle || type === _enum2.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 === _enum2.ProgressType.dashboard && _enum2.ProgressPosition.bottom || _enum2.ProgressPosition.top;
var gapDeg = gapDegree || type === _enum2.ProgressType.dashboard && 75;
progress = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-inner"),
style: circleStyle
}, /*#__PURE__*/_react["default"].createElement(_progress.Circle, {
percent: validProgress(percent),
strokeWidth: circleWidth,
trailWidth: circleWidth,
trailColor: trailColor,
strokeColor: strokeColor,
prefixCls: prefixCls,
gapDegree: gapDeg,
gapPosition: gapPos
}), progressCenter, progressInfo);
} else if (type === _enum2.ProgressType.loading) {
progress = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-inner")
}, /*#__PURE__*/_react["default"].createElement(_Loading["default"], null));
}
var classString = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(type === _enum2.ProgressType.dashboard && _enum2.ProgressType.circle || type), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-status-").concat(progressStatus), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-show-info"), showInfo), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(size), size), _classNames), className);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, restProps, {
className: classString
}), progress);
}
}], [{
key: "contextType",
get: function get() {
return _ConfigContext["default"];
}
}]);
return Progress;
}(_react.Component);
exports["default"] = Progress;
Progress.displayName = 'Progress';
Progress.defaultProps = {
type: _enum2.ProgressType.line,
percent: 0,
showInfo: true,
showPointer: false,
trailColor: '#f3f3f3',
size: _enum.Size["default"]
};
//# sourceMappingURL=progress.js.map