@up-group-ui/react-controls
Version:
Up shared react controls
103 lines • 7.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var typestyle_1 = require("typestyle");
var theming_1 = (0, tslib_1.__importStar)(require("../../../Common/theming/"));
var Currency_1 = (0, tslib_1.__importDefault)(require("../Currency"));
var Tooltip_1 = (0, tslib_1.__importDefault)(require("../Tooltip"));
var styles_1 = require("./styles");
var Shadow = ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", (0, tslib_1.__assign)({ id: "dropshadow", x: "-40%", y: "-40%", width: "200%", height: "200%", filterUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "3" }, void 0), (0, jsx_runtime_1.jsx)("feOffset", { dx: "-2", dy: "6", result: "offsetblur" }, void 0), (0, jsx_runtime_1.jsx)("feFlood", { floodColor: theming_1.UpThemeColorMap.gray2, floodOpacity: "0.50" }, void 0), (0, jsx_runtime_1.jsx)("feComposite", { in2: "offsetblur", operator: "in" }, void 0), (0, jsx_runtime_1.jsxs)("feMerge", { children: [(0, jsx_runtime_1.jsx)("feMergeNode", {}, void 0), (0, jsx_runtime_1.jsx)("feMergeNode", { in: "SourceGraphic" }, void 0)] }, void 0)] }), void 0) }, void 0));
var DisplayValue = function (_a) {
var value = _a.value, max = _a.max, modeDisplayValue = _a.modeDisplayValue, valueLabelStyle = _a.valueLabelStyle;
switch (modeDisplayValue) {
case 'none':
return null;
case 'fraction':
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, typestyle_1.style)(valueLabelStyle) }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'up-progress-value' }, { children: (0, jsx_runtime_1.jsx)(Currency_1.default, { value: value }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: 'up-progress-value-max' }, { children: [' ', "/ ", (0, jsx_runtime_1.jsx)(Currency_1.default, { value: max }, void 0)] }), void 0)] }), void 0));
case 'percentage':
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, typestyle_1.style)(valueLabelStyle) }, { children: (0, jsx_runtime_1.jsx)("span", { children: Math.ceil((value / max) * 100) }, void 0) }), void 0));
}
return null;
};
var DisplayUnite = function (_a) {
var uniteLabel = _a.uniteLabel, uniteStyle = _a.uniteStyle;
return uniteLabel ? (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, typestyle_1.style)(uniteStyle) }, { children: uniteLabel }), void 0) : null;
};
var getCompletedOffset = function (value, maxValue, size, clockWise) {
var r = size;
var c = Math.PI * (r * 2);
var v = value;
if (value < 0) {
v = 0;
}
if (value > maxValue) {
v = maxValue;
}
var offsetValue = ((maxValue - value) / maxValue) * c;
return clockWise ? -offsetValue : offsetValue;
};
var getRadius = function (size) {
return Math.abs(size / 2 - 10);
};
var ProgressCircle = (function (_super) {
(0, tslib_1.__extends)(ProgressCircle, _super);
function ProgressCircle(props) {
var _this = _super.call(this, props) || this;
_this.state = {
completedDashOffset: getCompletedOffset(0, props.max, getRadius(props.size), props.clockWise),
};
return _this;
}
ProgressCircle.getDerivedStateFromProps = function (props, state) {
return {
completedDashOffset: getCompletedOffset(props.value, props.max, getRadius(props.size), props.clockWise),
};
};
ProgressCircle.prototype.componentDidMount = function () {
var _this = this;
var _a = this.props, value = _a.value, max = _a.max, clockWise = _a.clockWise, size = _a.size;
var r = getRadius(size);
this.completedDashOffset = setTimeout(function () {
return _this.setState({
completedDashOffset: getCompletedOffset(value, max, r, clockWise),
});
}, 300);
};
ProgressCircle.prototype.componentWillUnmount = function () {
clearTimeout(this.completedDashOffset);
};
ProgressCircle.prototype.render = function () {
var _this = this;
var _a = this.props, completedColor = _a.completedColor, uncompletedColor = _a.uncompletedColor, thickness = _a.thickness, value = _a.value, size = _a.size, backgroundColor = _a.backgroundColor, shadow = _a.shadow, max = _a.max, modeDisplayValue = _a.modeDisplayValue, uniteStyle = _a.uniteStyle, uniteLabel = _a.uniteLabel, valueLabelStyle = _a.valueLabelStyle;
var r = getRadius(size);
var fullDashOffset = Math.PI * 2 * r;
var unCompletedDashOffset = 0;
var renderValue = ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, styles_1.LabelCircularProgressStyle)(this.props) }, { children: [(0, jsx_runtime_1.jsx)(DisplayValue, { value: value, max: max, modeDisplayValue: this.props.size < 80 ? 'percentage' : modeDisplayValue, valueLabelStyle: valueLabelStyle || (0, styles_1.DefaultValueLabelStyle)(this.props) }, void 0), (0, jsx_runtime_1.jsx)(DisplayUnite, { uniteLabel: uniteLabel, uniteStyle: uniteStyle || (0, styles_1.DefaultUniteStyle)(this.props) }, void 0)] }), void 0));
var renderTooltip = ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, styles_1.TooltipCircularProgressStyle)(this.props) }, { children: [(0, jsx_runtime_1.jsx)(DisplayValue, { value: value, max: max, modeDisplayValue: modeDisplayValue, valueLabelStyle: valueLabelStyle }, void 0), (0, jsx_runtime_1.jsx)(DisplayUnite, { uniteLabel: uniteLabel, uniteStyle: uniteStyle || (0, styles_1.DefaultUniteStyle)(this.props) }, void 0)] }), void 0));
return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({ content: this.props.size <= 60 ? renderTooltip : null }, { children: function (props) { return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ "data-tip": "tooltip", "data-for": props.id, className: styles_1.WrapperCircularProgressStyle }, { children: [(0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: size + 20, height: size + 20, version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, { children: [Shadow, (0, jsx_runtime_1.jsx)("circle", { x: 10, y: 10, style: shadow
? {
filter: 'url(#dropshadow)',
}
: {}, strokeWidth: thickness, stroke: uncompletedColor, r: r, cx: size / 2, cy: size / 2, fill: backgroundColor, strokeDasharray: fullDashOffset, strokeDashoffset: unCompletedDashOffset }, void 0), (0, jsx_runtime_1.jsx)("circle", { x: 10, y: 10, strokeWidth: thickness, stroke: completedColor, r: r, cx: size / 2, cy: size / 2, fill: "transparent", strokeDasharray: fullDashOffset, strokeDashoffset: _this.state.completedDashOffset }, void 0)] }), void 0), _this.props.size > 60 && renderValue] }), void 0)); } }), void 0));
};
ProgressCircle.defaultProps = {
min: 0,
max: 100,
size: 120,
thickness: 5,
value: 0,
completedColor: theming_1.UpThemeColorMap.primary,
uncompletedColor: theming_1.UpThemeColorMap.disabledBg,
backgroundColor: theming_1.UpThemeColorMap.white,
shadow: false,
uniteLabel: '',
modeDisplayValue: 'fraction',
clockWise: true,
theme: theming_1.default,
};
return ProgressCircle;
}(react_1.default.PureComponent));
exports.default = ProgressCircle;
//# sourceMappingURL=UpProgressCircle.js.map