wix-style-react/dist/es/src/LinearProgressBar/LinearProgressBarCore/LinearProgressBarCore.js

wix-style-react

import * as React from 'react';
import { st, classes } from './LinearProgressBarCore.st.css';
import { ProgressBarDataHooks, ProgressBarDataKeys, ProgressBarAriaKeys, } from './DataHooks';
import { filterDataProps } from './utils/filter-data-props';
const FULL_PROGRESS = 100;
const NO_PROGRESS = 0;
const resolveIndicationElement = (props) => {
    const wrapped = (dataHook, children) => (React.createElement("div", { "data-hook": dataHook, className: classes.indicationContainer }, children));
    if (props.error && props.errorIcon) {
        return wrapped(ProgressBarDataHooks.errorIcon, props.errorIcon);
    }
    if (props.value === FULL_PROGRESS && props.successIcon) {
        return wrapped(ProgressBarDataHooks.successIcon, props.successIcon);
    }
    if (props.customSuffixIndicationText) {
        return wrapped(ProgressBarDataHooks.suffixIndicator, React.createElement("span", { className: classes.suffixIndication }, props.customSuffixIndicationText));
    }
    return wrapped(ProgressBarDataHooks.progressPercentage, React.createElement("span", { className: classes.progressPercentage }, `${props.value}%`));
};
const renderBarSection = (value, isButton = false, ariaLabel) => {
    const progressWidth = { width: `${value}%` };
    const Component = isButton ? 'button' : 'div';
    return (React.createElement(Component, { "data-hook": ProgressBarDataHooks.container, className: classes.barContainer, "aria-label": ariaLabel },
        React.createElement("div", { "data-hook": ProgressBarDataHooks.background, className: classes.barBackground }),
        React.createElement("div", { "data-hook": ProgressBarDataHooks.foreground, style: progressWidth, className: classes.barForeground })));
};
const getRelativeValue = (props) => {
    const { value = 0, min = 0, max = 100, precision } = props;
    const relativeValue = +(((Number(value) - min) / (max - min)) * 100).toFixed(precision || 1);
    return precision ? relativeValue : parseInt(relativeValue, 10);
};
const normalizeProps = (props) => {
    const { value, min, max } = props;
    if (value !== undefined && max !== undefined && +value >= max) {
        return { ...props, value: FULL_PROGRESS };
    }
    if ([undefined, null, ''].includes(value) ||
        (value !== undefined && min !== undefined && +value < min)) {
        return { ...props, value: NO_PROGRESS };
    }
    return { ...props, value: getRelativeValue(props) };
};
const getDataAttributes = (props) => {
    const { value, min, max } = props;
    return {
        [ProgressBarDataKeys.value]: value,
        [ProgressBarDataKeys.min]: min,
        [ProgressBarDataKeys.max]: max,
    };
};
const getAriaAttributes = (props) => {
    return {
        [ProgressBarAriaKeys.valuenow]: props.value !== undefined ? +props.value : NO_PROGRESS,
        [ProgressBarAriaKeys.valuemin]: props.min !== undefined ? +props.min : props.min,
        [ProgressBarAriaKeys.valuemax]: props.max !== undefined ? +props.max : props.max,
        [ProgressBarAriaKeys.valuetext]: props[ProgressBarAriaKeys.valuetext],
    };
};
const LinearProgressBarCore = ({ min = NO_PROGRESS, max = FULL_PROGRESS, role = 'progressbar', ...propsWithNoDefaults }) => {
    const { error, showProgressIndication, prefixIndication, className, onClick, } = propsWithNoDefaults;
    const allProps = {
        min,
        max,
        role,
        ...propsWithNoDefaults,
    };
    const _props = normalizeProps({
        min,
        max,
        role,
        ...propsWithNoDefaults,
    });
    const success = _props.value === FULL_PROGRESS;
    return (React.createElement("div", { ...getDataAttributes(_props), ...(role === 'progressbar' ? getAriaAttributes(allProps) : {}), "data-min": _props.min, "data-error": error, ...(role ? { role } : {}), className: st(classes.root, { error, success }, className), ...filterDataProps(allProps), onClick: onClick },
        prefixIndication && (React.createElement("div", { "data-hook": ProgressBarDataHooks.prefixIndicator, className: classes.prefixIndicationContainer, "aria-hidden": allProps['aria-hide-affixes'] }, prefixIndication)),
        renderBarSection(_props.value, !!onClick, allProps['aria-label']),
        showProgressIndication && (React.createElement("div", { "data-hook": ProgressBarDataHooks.progressIndicator, className: classes.progressIndicationSection, "aria-hidden": allProps['aria-hide-affixes'] }, resolveIndicationElement(_props)))));
};
LinearProgressBarCore.displayName = 'LinearProgressBar';
export default LinearProgressBarCore;
//# sourceMappingURL=LinearProgressBarCore.js.map