@wix/design-system
Version:
@wix/design-system
51 lines • 3.04 kB
JavaScript
import React, { useMemo } from 'react';
import { FormFieldError, FormFieldErrorSmall, ToggleOn, CircleLoaderCheck, CircleLoaderCheckSmall, } from '@wix/wix-ui-icons-common/system';
import Arc from './components/Arc';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import { SIZES_TO_PIXELS_MAP, SIZE_TO_STROKE_WIDTH_MAP, SIZE_TO_ARC_ANGLE_MAP, } from './Loader.constants';
import { st, classes } from './Loader.st.css.js';
const FULL_CIRCLE_ANGLE = 359;
const sizeToSuccessIconMap = {
tiny: React.createElement(ToggleOn, null),
small: React.createElement(CircleLoaderCheckSmall, null),
medium: React.createElement(CircleLoaderCheck, null),
large: React.createElement(CircleLoaderCheck, null),
};
const sizeToErrorIconMap = {
tiny: React.createElement(FormFieldError, null),
small: React.createElement(FormFieldErrorSmall, null),
medium: React.createElement(FormFieldError, null),
large: React.createElement(FormFieldError, null),
};
const Loader = ({ size = 'medium', color = 'blue', text, status = 'loading', statusMessage, dataHook, }) => {
const loader = useMemo(() => {
const successIcon = sizeToSuccessIconMap[size];
const errorIcon = sizeToErrorIconMap[size];
const strokeWidth = SIZE_TO_STROKE_WIDTH_MAP[size];
const sizeInPx = SIZES_TO_PIXELS_MAP[size];
const isTerminalStatus = status === 'success' || status === 'error';
const lightArcAngle = isTerminalStatus
? FULL_CIRCLE_ANGLE
: SIZE_TO_ARC_ANGLE_MAP[size].light;
const darkArcAngle = isTerminalStatus
? FULL_CIRCLE_ANGLE
: SIZE_TO_ARC_ANGLE_MAP[size].dark;
return (React.createElement("div", { className: classes.arcsContainer, style: {
width: `${sizeInPx}px`,
height: `${sizeInPx}px`,
} },
React.createElement(Arc, { angle: lightArcAngle, className: classes.lightArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
React.createElement(Arc, { angle: darkArcAngle, className: classes.darkArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
isTerminalStatus && (React.createElement("div", { className: classes.statusIndicator, "data-hook": "loader-status-indicator" },
status === 'success' && successIcon,
status === 'error' && errorIcon))));
}, [status, size]);
return (React.createElement("div", { className: st(classes.root, { size, color, status }), "data-hook": dataHook, "data-size": size, "data-color": color, "data-status": status },
statusMessage ? (React.createElement(Tooltip, { content: statusMessage, appendTo: "window", dataHook: "loader-tooltip" }, loader)) : (loader),
size !== 'tiny' && text && (React.createElement("div", { className: classes.text },
React.createElement(Heading, { size: "extraTiny", dataHook: "loader-text" }, text)))));
};
Loader.displayName = 'Loader';
export default Loader;
//# sourceMappingURL=Loader.js.map