design-react-kit
Version:
Componenti React per Bootstrap 5
32 lines • 1.98 kB
JavaScript
import classNames from 'classnames';
import isNumber from 'is-number';
import React from 'react';
import { logError } from '../utils';
export const Progress = ({ wrapperClassName, className, tag = 'div', value, label, indeterminate = false, color, testId, ...attributes }) => {
const Tag = tag;
if (!isNumber(value) && !indeterminate) {
logError(`The passed "value" is not a valid number. You passed "${value}"`);
}
const numericValue = Number(value);
const wrapperClasses = classNames('progress-bar-wrapper');
const secondaryWrapperClasses = classNames(wrapperClassName === true ? className : wrapperClassName, 'progress', {
'progress-indeterminate': indeterminate,
'progress-color': color
});
const classes = classNames(className, 'progress-bar', {
[`bg-${color}`]: color
});
if (label && numericValue) {
return (React.createElement(Tag, { className: wrapperClasses, "data-testid": testId },
React.createElement("div", { className: 'progress-bar-label' },
React.createElement("span", { className: 'visually-hidden' }, label),
numericValue + '%'),
React.createElement(Tag, { className: secondaryWrapperClasses },
React.createElement("div", { ...attributes, className: classes, role: 'progressbar', style: { width: numericValue + '%' }, "aria-valuenow": numericValue, "aria-valuemin": 0, "aria-valuemax": 100 }))));
}
return (React.createElement(Tag, { className: secondaryWrapperClasses, "data-testid": testId },
React.createElement("div", { className: 'progress-bar-label' },
React.createElement("span", { className: 'visually-hidden' }, label)),
React.createElement("div", { ...attributes, className: classes, role: 'progressbar', style: { width: numericValue + '%' }, "aria-valuenow": numericValue, "aria-valuemin": 0, "aria-valuemax": 100 })));
};
//# sourceMappingURL=Progress.js.map