wix-style-react
Version:
wix-style-react
47 lines • 2.23 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './StatusIndicator.st.css';
import Tooltip from '../Tooltip';
import { FormFieldWarningFilled, FormFieldErrorFilled, } from '@wix/wix-ui-icons-common/system';
import Loader from '../Loader';
import { dataHooks, STATUS } from './constants';
/** StatusIndicator */
class StatusIndicator extends React.PureComponent {
constructor() {
super(...arguments);
this._renderStatus = () => {
switch (this.props.status) {
case STATUS.WARNING:
return React.createElement(FormFieldWarningFilled, null);
case STATUS.LOADING:
return React.createElement(Loader, { size: "tiny" });
case STATUS.ERROR:
default:
return React.createElement(FormFieldErrorFilled, null);
}
};
}
render() {
const { dataHook, status, message, tooltipPlacement, className } = this.props;
return (React.createElement("div", { className: st(classes.root, { status }, className), "data-hook": dataHook, "data-status": status }, message ? (React.createElement(Tooltip, { dataHook: dataHooks.tooltip, appendTo: "window", placement: tooltipPlacement, exitDelay: 100, content: message, maxWidth: 250 }, this._renderStatus())) : (this._renderStatus())));
}
}
StatusIndicator.displayName = 'StatusIndicator';
StatusIndicator.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests. */
dataHook: PropTypes.string,
/** Allows you to apply a CSS class to the component’s root element. */
className: PropTypes.string,
/** Sets the indication type. */
status: PropTypes.oneOf(['error', 'warning', 'loading']),
/** Sets the message that’s displayed in a tooltip. If not set, the tooltip won’t appear. */
message: PropTypes.node,
/** Defines which side the tooltip will be placed on. */
tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
};
StatusIndicator.defaultProps = {
status: 'error',
tooltipPlacement: 'top',
};
export default StatusIndicator;
//# sourceMappingURL=StatusIndicator.js.map