wix-style-react
Version:
wix-style-react
102 lines • 4.13 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { FormFieldError, FormFieldErrorSmall, ToggleOn, CircleLoaderCheck, CircleLoaderCheckSmall, } from '@wix/wix-ui-icons-common/system';
import Arc from './Arc';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import { st, classes } from './Loader.st.css';
const arcsAngles = {
tiny: {
light: 216,
dark: 144,
},
small: {
light: 216,
dark: 144,
},
medium: {
light: 108,
dark: 108,
},
large: {
light: 180,
dark: 180,
},
};
const strokeWidths = {
tiny: 3,
small: 4,
medium: 4,
large: 4,
};
const sizesInPx = {
tiny: 18,
small: 30,
medium: 54,
large: 102,
};
const FULL_CIRCLE_ANGLE = 359;
const sizeToSuccessIcon = {
tiny: React.createElement(ToggleOn, null),
small: React.createElement(CircleLoaderCheckSmall, null),
medium: React.createElement(CircleLoaderCheck, null),
large: React.createElement(CircleLoaderCheck, null),
};
const sizeToErrorIcon = {
tiny: React.createElement(FormFieldError, null),
small: React.createElement(FormFieldErrorSmall, null),
medium: React.createElement(FormFieldError, null),
large: React.createElement(FormFieldError, null),
};
class Loader extends React.PureComponent {
render() {
const { dataHook, size, color, text, status, statusMessage } = this.props;
const sizeInPx = sizesInPx[size];
const shouldShowFullCircle = status !== 'loading';
const lightArcAngle = !shouldShowFullCircle
? arcsAngles[size].light
: FULL_CIRCLE_ANGLE;
const darkArcAngle = !shouldShowFullCircle
? arcsAngles[size].dark
: FULL_CIRCLE_ANGLE;
const shouldShowText = size !== 'tiny';
const successIcon = sizeToSuccessIcon[size];
const errorIcon = sizeToErrorIcon[size];
const strokeWidth = strokeWidths[size];
const loader = (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))));
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),
shouldShowText && text && (React.createElement("div", { className: classes.text },
React.createElement(Heading, { size: "extraTiny", dataHook: "loader-text" }, this.props.text)))));
}
}
Loader.displayName = 'Loader';
Loader.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Controls the size of the loader */
size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
/** Controls the skin of the loader */
color: PropTypes.oneOf(['blue', 'white']),
/** Defines a text message to show below the loader */
text: PropTypes.node,
/** Specifies the status of a loader */
status: PropTypes.oneOf(['loading', 'success', 'error']),
/** Defines the message that explains the current status of the loader. Message will be displayed on loader hover. If not given or empty there will be no tooltip. */
statusMessage: PropTypes.string,
};
Loader.defaultProps = {
size: 'medium',
color: 'blue',
status: 'loading',
};
export default Loader;
//# sourceMappingURL=Loader.js.map