fastlion-amis
Version:
一种MIS页面生成工具
130 lines (129 loc) • 6.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Progress = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var rc_progress_1 = require("rc-progress");
var theme_1 = require("../theme");
var Progress = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Progress, _super);
function Progress() {
return _super !== null && _super.apply(this, arguments) || this;
}
Progress.prototype.getCurrentColor = function () {
var color = this.props.map;
if (!color || !color.length) {
return 'bg-primary';
}
if (typeof color === 'string') {
return color;
}
else {
return this.getLevelColor(color);
}
};
Progress.prototype.getLevelColor = function (color) {
var value = this.props.value;
var colorArray = this.getColorArray(color).sort(function (a, b) { return a.value - b.value; });
for (var i = 0; i < colorArray.length; i++) {
if (colorArray[i].value >= value) {
return colorArray[i].color;
}
}
return colorArray[colorArray.length - 1].color;
};
Progress.prototype.getColorArray = function (color) {
var span = 100 / color.length;
return color.map(function (item, index) {
if (typeof item === 'string') {
return {
color: item,
value: (index + 1) * span
};
}
return item;
});
};
Progress.prototype.getLabel = function (prefixCls) {
var _a = this.props, value = _a.value, format = _a.format, showLabel = _a.showLabel, cx = _a.classnames;
if (!showLabel) {
return null;
}
var textFormatter = format || (function (value) { return value + "%"; });
var content = textFormatter(value);
return (react_1.default.createElement("span", { className: cx(prefixCls + "-text"), key: "value" }, content));
};
Progress.prototype.render = function () {
var _a, _b, _c, _d, _e;
var _f = this.props, classNames = _f.classNames, progressClassName = _f.progressClassName, progressBarClassName = _f.progressBarClassName, type = _f.type, value = _f.value, placeholder = _f.placeholder, stripe = _f.stripe, animate = _f.animate, showLabel = _f.showLabel, gapDegree = _f.gapDegree, gapPosition = _f.gapPosition, strokeWidth = _f.strokeWidth, threshold = _f.threshold, showThresholdText = _f.showThresholdText, cx = _f.classnames;
var isLineType = type === 'line';
var prefixCls = isLineType ? 'Progress-line' : 'Progress-circle';
var bgColor = this.getCurrentColor();
var isColorClass = /bg-/.test(bgColor);
var viewValue = (react_1.default.createElement("span", { className: "text-muted" }, placeholder));
if (type === 'line') {
var barStyle = {
width: value + "%"
};
barStyle.height = strokeWidth || 8;
!isColorClass && (barStyle.backgroundColor = bgColor);
var thresholdDom = null;
if (threshold) {
var temp_1 = function (text, color) { return (react_1.default.createElement("div", { style: {
left: text,
borderColor: color || 'var(--text-color)'
}, className: cx(prefixCls + "-threshold"), key: text }, showThresholdText ? (react_1.default.createElement("span", { className: cx(prefixCls + "-threshold-text") }, text)) : null)); };
if (Array.isArray(threshold)) {
thresholdDom = threshold.map(function (item) {
var text = parseFloat(item.value) + '%';
return temp_1(text, item.color);
});
}
else {
var text = parseFloat(threshold.value) + '%';
thresholdDom = temp_1(text, threshold.color);
}
}
viewValue = [
react_1.default.createElement("div", { key: "progress", className: cx(prefixCls, progressClassName, (_a = {},
_a[prefixCls + "-no-label"] = !showLabel,
_a)) },
thresholdDom,
react_1.default.createElement("div", { className: cx(prefixCls + "-inter") },
react_1.default.createElement("div", { className: cx(prefixCls + "-bar", (_b = {}, _b[bgColor] = isColorClass, _b), (_c = {}, _c[prefixCls + "-bar--stripe"] = stripe, _c), (_d = {}, _d[prefixCls + "-bar--animate"] = animate && !stripe, _d), (_e = {}, _e[prefixCls + "-bar--stripe-animate"] = animate && stripe, _e)), title: value + "%", style: barStyle }))),
this.getLabel(prefixCls)
];
}
else if (type === 'circle' || type === 'dashboard') {
var circleWidth = strokeWidth || 6;
var gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
var getGapDegree = function () {
if (gapDegree || gapDegree === 0) {
return gapDegree;
}
if (type === 'dashboard') {
return 75;
}
return undefined;
};
viewValue = [
react_1.default.createElement("div", { className: cx(prefixCls), key: "circle" },
react_1.default.createElement(rc_progress_1.Circle, { percent: value, strokeColor: "", strokeWidth: circleWidth, trailWidth: circleWidth, prefixCls: isColorClass ? bgColor : '', gapDegree: getGapDegree(), gapPosition: gapPos }),
this.getLabel(prefixCls))
];
}
return react_1.default.createElement("div", { className: cx('Progress', classNames, type === 'line' && 'line-mode'), style: { padding: (type == 'line' && showThresholdText) ? '10px 0' : undefined } }, viewValue);
};
Progress.defaultProps = {
type: 'line',
placeholder: '-',
progressClassName: '',
progressBarClassName: '',
map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
showLabel: true
};
return Progress;
}(react_1.default.Component));
exports.Progress = Progress;
exports.default = (0, theme_1.themeable)(Progress);
//# sourceMappingURL=./components/Progress.js.map