@wix/design-system
Version:
@wix/design-system
59 lines • 3.29 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
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 shouldShowFullCircle = status !== 'loading';
const lightArcAngle = shouldShowFullCircle
? FULL_CIRCLE_ANGLE
: SIZE_TO_ARC_ANGLE_MAP[size].light;
const darkArcAngle = shouldShowFullCircle
? 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 }),
status !== 'loading' && (React.createElement("div", { className: classes.statusIndicator },
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.propTypes = {
dataHook: PropTypes.string,
size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
color: PropTypes.oneOf(['blue', 'white']),
text: PropTypes.node,
status: PropTypes.oneOf(['loading', 'success', 'error']),
statusMessage: PropTypes.string,
};
export default Loader;
//# sourceMappingURL=Loader.js.map