@engie-group/fluid-design-system-react/lib/components/progress/NJProgress.js

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { Utils } from '../../utils/util.js';

const getFormattedValue = (value, min, max) => {
    if (value > max) {
        return max;
    }
    else if (value < min) {
        return min;
    }
    return value;
};
const getFormattedPercentage = (value, min, max, decimalPrecision) => {
    if (value < min) {
        return '0';
    }
    else if (value > max) {
        return '100';
    }
    return Number(((getFormattedValue(value, min, max) - min) / (max - min)) * 100).toFixed(decimalPrecision);
};
const NJProgress = React__default.forwardRef(({ value = 0, min = 0, max = 100, descriptionPosition = 'none', hasTransition, decimalPrecision = 0, className, ['aria-label']: ariaLabel, ...htmlProps }, forwardedRef) => {
    const progressClass = Utils.classNames('nj-progress', {
        ['nj-progress--has-transition']: hasTransition,
        ['nj-progress--has-right-description']: descriptionPosition === 'right'
    }, className);
    const percentValue = `${getFormattedPercentage(value, min, max, decimalPrecision)}%`;
    return (jsxs("div", { className: progressClass, ref: forwardedRef, ...htmlProps, role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-label": ariaLabel, "aria-valuetext": percentValue, children: [jsx("div", { className: "nj-progress__bar", children: jsx("div", { className: "nj-progress__indicator", style: {
                        width: percentValue
                    } }) }), descriptionPosition !== 'none' && (jsx("div", { "aria-hidden": "true", className: "nj-progress__description", children: percentValue }))] }));
});
NJProgress.displayName = 'NJProgress';

export { NJProgress };