wix-style-react
Version:
wix-style-react
77 lines • 3.86 kB
JavaScript
import * as React from 'react';
import { st, classes } from './CircularProgressBarCore.st.css';
import { Arc } from './Arc';
import { dataHooks } from './constants';
import { filterDataProps } from '../../utils/propsUtils';
import { ProgressLabel } from './ProgressLabel';
const FULL_PROGRESS = 100;
const NO_PROGRESS = 0;
const VIEWBOX_SIZE = 54;
const resolveIndicationElement = (props) => {
const wrapped = (dataHook, children) => (React.createElement("div", { "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)) {
return wrapped(props.label ? dataHooks.label : dataHooks.progressIndicator, React.createElement(ProgressLabel, { ...props }));
}
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)}%`;
};
const renderArcs = (props) => {
const { value, size } = props;
const normalizedSize = normalizeSize(size || VIEWBOX_SIZE);
const normalizedValue = normalizeValue(value || NO_PROGRESS);
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: 4, size: normalizedSize }),
React.createElement(Arc, { "data-hook": dataHooks.progressArcForeground, value: normalizedValue, className: classes.foreArc, strokeWidth: 4, 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 success = _props.value === FULL_PROGRESS;
const displayValue = error && _props.errorLabel
? _props.errorLabel
: convertToPercentageString(_props.value);
const shouldShowProgressIndication = Boolean(showProgressIndication && !label);
return (React.createElement("div", { className: st(classes.root, { error, success }, _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