norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
41 lines • 2.73 kB
JavaScript
import { __assign, __makeTemplateObject, __rest } from "tslib";
import React from 'react';
import styled from 'styled-components';
import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
var ProgressBarStyled = styled(MuiProgressBar)(function (_a) {
var _b;
var colorCustom = _a.colorCustom, $h = _a.$h;
return (_b = {
width: '100%',
height: $h ? "".concat($h, "px") : '10px',
borderRadius: '10px',
position: 'relative',
backgroundColor: colorCustom ? colorCustom.root : undefined
},
_b["&.".concat(linearProgressClasses.determinate)] = {
backgroundColor: colorCustom ? colorCustom.root : undefined,
},
_b["& .".concat(linearProgressClasses.bar)] = {
backgroundColor: colorCustom ? colorCustom.bar : undefined,
},
_b);
});
var ProgressBarLabelStyled = styled(Typography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n position: relative;\n text-align: left;\n font-size: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n position: relative;\n text-align: left;\n font-size: ", ";\n"])), function (_a) {
var $fSize = _a.$fSize;
return $fSize || '1rem';
});
export var ProgressBar = function (_a) {
var _b = _a.value, value = _b === void 0 ? 0 : _b, label = _a.label, _c = _a.variant, variant = _c === void 0 ? 'determinate' : _c, total = _a.total, className = _a.className, localeString = _a.localeString, colorCustom = _a.colorCustom, _d = _a.color, color = _d === void 0 ? 'primary' : _d, htmlLabel = _a.htmlLabel, props = __rest(_a, ["value", "label", "variant", "total", "className", "localeString", "colorCustom", "color", "htmlLabel"]);
var percentage = value && total ? (value / total) * 100 : 0;
return (React.createElement("div", { className: className, style: { minWidth: '100px' } },
label ? (React.createElement(ProgressBarLabelStyled, { "$fSize": props.fSize, className: "ProgressBarLabel" },
label,
!props.hideValue && (React.createElement("span", { style: { right: 0 } },
localeString ? value.toLocaleString() : value,
" (",
percentage.toFixed(2),
"%)")))) : (htmlLabel),
React.createElement(ProgressBarStyled, __assign({ value: percentage, variant: variant, colorCustom: colorCustom, "$h": props.h, color: colorCustom ? undefined : color }, props))));
};
var templateObject_1;
//# sourceMappingURL=ProgressBar.js.map