@ozen-ui/kit
Version:
React component library
35 lines (34 loc) • 2.21 kB
JavaScript
import { __assign, __rest } from "tslib";
import './ProgressBar.css';
import React from 'react';
import { useThemeTokens } from '../../hooks/useThemeTokens';
import { cn } from '../../utils/classname';
import { generateCSSVariables } from '../../utils/css';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { PROGRESSBAR_CSS_VARIABLE, PROGRESSBAR_DEFAULT_STROKE_COLOR, PROGRESSBAR_DEFAULT_TAG, PROGRESSBAR_DEFAULT_TRAIL_COLOR, } from './constants';
export var cnProgressBar = cn('ProgressBar');
export var ProgressBar = polymorphicComponentWithRef(function (_a, ref) {
var _b;
var className = _a.className, _c = _a.as, Tag = _c === void 0 ? PROGRESSBAR_DEFAULT_TAG : _c, value = _a.value, _d = _a.strokeColor, strokeColor = _d === void 0 ? PROGRESSBAR_DEFAULT_STROKE_COLOR : _d, _e = _a.trailColor, trailColor = _e === void 0 ? PROGRESSBAR_DEFAULT_TRAIL_COLOR : _e, style = _a.style, other = __rest(_a, ["className", "as", "value", "strokeColor", "trailColor", "style"]);
var colorToken = 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.createElement(Tag, __assign({}, (isValueSet && {
'aria-valuemin': 0,
'aria-valuemax': 100,
'aria-valuenow': value,
}), { className: cnProgressBar({ filled: isFilled, indefinite: !isValueSet }, [className]), role: "progressbar" }, other, { style: __assign(__assign({}, style), generateCSSVariables((_b = {},
_b[PROGRESSBAR_CSS_VARIABLE.TRAIL_COLOR] = "var(".concat(colorToken.toCSSProperty(trailColor), ")"),
_b[PROGRESSBAR_CSS_VARIABLE.STROKE_COLOR] = "var(".concat(colorToken.toCSSProperty(strokeColor), ")"),
_b))), ref: ref }),
React.createElement("span", { className: cnProgressBar('ProgressLine'), style: setProgressLineStyles() })));
});
ProgressBar.displayName = 'ProgressBar';