wix-style-react
Version:
wix-style-react
67 lines • 3.43 kB
JavaScript
import React from 'react';
import { CircleLoaderCheck, CircleLoaderCheckSmall, FormFieldError, FormFieldErrorSmall, } from '@wix/wix-ui-icons-common/system';
import Tooltip from '../Tooltip';
import { ThemeProviderConsumerBackwardCompatible } from '../ThemeProvider/ThemeProviderConsumerBackwardCompatible';
import { st, classes } from './CircularProgressBar.st.css';
import PropTypes from 'prop-types';
import { dataHooks, Size, sizesMap } from './constants';
import { CircularProgressBarCore } from './CircularProgressBarCore';
const sizeToSuccessIcon = {
[Size.small]: CircleLoaderCheckSmall,
[Size.medium]: CircleLoaderCheck,
[Size.large]: CircleLoaderCheck,
};
const sizeToErrorIcon = {
[Size.small]: React.createElement(FormFieldErrorSmall, null),
[Size.medium]: React.createElement(FormFieldError, null),
[Size.large]: React.createElement(FormFieldError, null),
};
class CircularProgressBar extends React.PureComponent {
_renderSuccessIcon(size) {
return (React.createElement(ThemeProviderConsumerBackwardCompatible, { defaultIcons: {
CircularProgressBar: sizeToSuccessIcon,
} }, ({ icons }) => {
const IconToRender = icons.CircularProgressBar[size];
return React.createElement(IconToRender, null);
}));
}
_renderProgressBar() {
const { light, size, skin, label, labelPlacement, className, ...otherProps } = this.props;
return (React.createElement(CircularProgressBarCore, { className: st(classes.progressBar, { light, size, skin }), ...otherProps, label: label, labelPlacement: labelPlacement, "data-hook": dataHooks.circularProgressBar, size: sizesMap[size], "data-size": size, "data-skin": skin, successIcon: this._renderSuccessIcon(size), errorIcon: sizeToErrorIcon[size] }));
}
render() {
const { dataHook, error, errorMessage, className } = this.props;
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, className) }, error && errorMessage ? (React.createElement(Tooltip, { className: classes.tooltip, content: errorMessage, dataHook: dataHooks.tooltip }, this._renderProgressBar())) : (this._renderProgressBar())));
}
}
CircularProgressBar.displayName = 'CircularProgressBar';
CircularProgressBar.defaultProps = {
size: 'medium',
skin: 'standard',
labelPlacement: 'bottom',
};
CircularProgressBar.propTypes = {
/** Should be true if had failure during the progress */
error: PropTypes.bool,
/** Label to display when an error happens */
errorLabel: PropTypes.string,
/** Message to display when an error happens */
errorMessage: PropTypes.string,
/** Use light theme instead of dark theme */
light: PropTypes.bool,
/** Use to display a percentage progress */
showProgressIndication: PropTypes.bool,
/** Use to display custom text in the progress bar */
label: PropTypes.string,
/** Placement of the label in the progress bar */
labelPlacement: PropTypes.oneOf(['bottom', 'center']),
/** Size of the bar */
size: PropTypes.string,
/** Skin of the bar */
skin: PropTypes.oneOf(['standard', 'premium', 'success']),
/** The number of the percentage progress */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
dataHook: PropTypes.string,
};
export default CircularProgressBar;
//# sourceMappingURL=CircularProgressBar.js.map