@ozen-ui/kit
Version:
React component library
38 lines (37 loc) • 2.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressBar = exports.cnProgressBar = void 0;
var tslib_1 = require("tslib");
require("./ProgressBar.css");
var react_1 = tslib_1.__importDefault(require("react"));
var useThemeTokens_1 = require("../../hooks/useThemeTokens");
var classname_1 = require("../../utils/classname");
var css_1 = require("../../utils/css");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var constants_1 = require("./constants");
exports.cnProgressBar = (0, classname_1.cn)('ProgressBar');
exports.ProgressBar = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
var _b;
var className = _a.className, _c = _a.as, Tag = _c === void 0 ? constants_1.PROGRESSBAR_DEFAULT_TAG : _c, value = _a.value, _d = _a.strokeColor, strokeColor = _d === void 0 ? constants_1.PROGRESSBAR_DEFAULT_STROKE_COLOR : _d, _e = _a.trailColor, trailColor = _e === void 0 ? constants_1.PROGRESSBAR_DEFAULT_TRAIL_COLOR : _e, style = _a.style, other = tslib_1.__rest(_a, ["className", "as", "value", "strokeColor", "trailColor", "style"]);
var colorToken = (0, useThemeTokens_1.useThemeTokens)().color;
var isValueSet = value || value === 0;
var isFilled = value === 100;
var setProgressLineStyles = function () {
if (!isValueSet)
return undefined;
var translateX = Math.max(-100, Math.min(0, (value || 0) - 100));
return {
'--progressbar-translate-x': "translateX(".concat(translateX, "%)"),
};
};
return (react_1.default.createElement(Tag, tslib_1.__assign({}, (isValueSet && {
'aria-valuemin': 0,
'aria-valuemax': 100,
'aria-valuenow': value,
}), { className: (0, exports.cnProgressBar)({ filled: isFilled, indefinite: !isValueSet }, [className]), role: "progressbar" }, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), (0, css_1.generateCSSVariables)((_b = {},
_b[constants_1.PROGRESSBAR_CSS_VARIABLE.TRAIL_COLOR] = "var(".concat(colorToken.toCSSProperty(trailColor), ")"),
_b[constants_1.PROGRESSBAR_CSS_VARIABLE.STROKE_COLOR] = "var(".concat(colorToken.toCSSProperty(strokeColor), ")"),
_b))), ref: ref }),
react_1.default.createElement("span", { className: (0, exports.cnProgressBar)('ProgressLine'), style: setProgressLineStyles() })));
});
exports.ProgressBar.displayName = 'ProgressBar';