@wix/design-system/dist/esm/CircularProgressBar/CircularProgressBarCore/CircularProgressBarCore.js

@wix/design-system

import * as React from 'react';
import { classes } from '../CircularProgressBar.classes';
import { Arc } from './Arc';
import { dataHooks } from './constants';
import { filterDataProps } from '../../utils/propsUtils';
import { sizesMap } from '../constants';
const FULL_PROGRESS = 100;
const NO_PROGRESS = 0;
const VIEWBOX_SIZE = 54;
const resolveIndicationElement = (props) => {
    const wrapped = (dataHook, children) => (React.createElement("div", { key: dataHook, "data-hook": dataHook, className: classes.statusIndicator() }, children));
    if (props.error && props.errorIcon) {
        return wrapped(dataHooks.errorIcon, props.errorIcon);
    }
    if (props.value === FULL_PROGRESS && props.successIcon) {
        return wrapped(dataHooks.successIcon, props.successIcon);
    }
    if (props.labelPlacement === 'center' &&
        (props.shouldShowProgressIndication || props.label) &&
        props.renderProgressLabel) {
        return wrapped(props.label ? dataHooks.label : dataHooks.progressIndicator, props.renderProgressLabel());
    }
    return null;
};
const normalizeValue = (value) => {
    return typeof value === 'number'
        ? value
        : parseInt(value, 10)
            ? parseInt(value, 10)
            : NO_PROGRESS;
};
const normalizeSize = (size) => {
    const intSize = typeof size === 'number' ? size : parseInt(size, 10);
    return intSize && intSize > 0 ? intSize : VIEWBOX_SIZE;
};
export const convertToPercentageString = (value) => {
    return `${Math.floor(value)}%`;
};
export const isFullProgress = (value = NO_PROGRESS) => normalizeValue(value) >= FULL_PROGRESS;
const renderArcs = (props) => {
    const { value, size } = props;
    const normalizedSize = normalizeSize(size || VIEWBOX_SIZE);
    const normalizedValue = normalizeValue(value || NO_PROGRESS);
    const strokeWidth = size === sizesMap.tiny ? 3 : 4;
    return (React.createElement("div", { className: classes.arcsContainer(), style: { width: `${normalizedSize}px`, height: `${normalizedSize}px` } },
        resolveIndicationElement(props),
        React.createElement(Arc, { "data-hook": dataHooks.progressArcBackground, value: FULL_PROGRESS, className: classes.backArc(), strokeWidth: strokeWidth, size: normalizedSize }),
        React.createElement(Arc, { "data-hook": dataHooks.progressArcForeground, value: normalizedValue, className: classes.foreArc(), strokeWidth: strokeWidth, size: normalizedSize })));
};
const normalizeProps = (props) => {
    const value = normalizeValue(props.value || NO_PROGRESS);
    if (value >= FULL_PROGRESS) {
        return { ...props, value: FULL_PROGRESS };
    }
    if (value < NO_PROGRESS) {
        return { ...props, value: NO_PROGRESS };
    }
    return { ...props, value };
};
export const CircularProgressBarCore = ({ value = NO_PROGRESS, size = VIEWBOX_SIZE, labelPlacement = 'bottom', ...propsWithNoDefaults }) => {
    const props = {
        value,
        size,
        labelPlacement,
        ...propsWithNoDefaults,
    };
    const { label, error, showProgressIndication } = props;
    const _props = normalizeProps(props);
    const displayValue = error && _props.errorLabel
        ? _props.errorLabel
        : convertToPercentageString(_props.value);
    const shouldShowProgressIndication = Boolean(showProgressIndication && !label);
    return (React.createElement("div", { className: classes.progressBar({}, _props.className), "data-error": error, ...filterDataProps(props) },
        renderArcs({ ..._props, shouldShowProgressIndication }),
        label && labelPlacement === 'bottom' && (React.createElement("div", { "data-hook": dataHooks.label, className: classes.label() }, label)),
        shouldShowProgressIndication && labelPlacement === 'bottom' && (React.createElement("div", { "data-hook": dataHooks.progressIndicator, className: classes.progressIndicator() }, displayValue))));
};
CircularProgressBarCore.displayName = 'CircularProgressBarCore';
//# sourceMappingURL=CircularProgressBarCore.js.map