wix-style-react/src/StatusIndicator/StatusIndicator.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import { st, classes } from './StatusIndicator.st.css';
import Tooltip from '../Tooltip';
import FormFieldWarningFilled from 'wix-ui-icons-common/system/FormFieldWarningFilled';
import FormFieldErrorFilled from 'wix-ui-icons-common/system/FormFieldErrorFilled';
import Loader from '../Loader';
import { dataHooks, STATUS } from './constants';

/** StatusIndicator */
class StatusIndicator extends React.PureComponent {
  _renderStatus = () => {
    switch (this.props.status) {
      case STATUS.WARNING:
        return <FormFieldWarningFilled />;
      case STATUS.LOADING:
        return <Loader size="tiny" />;
      case STATUS.ERROR:
      default:
        return <FormFieldErrorFilled />;
    }
  };

  render() {
    const { dataHook, status, message, tooltipPlacement, className } =
      this.props;

    return (
      <div
        className={st(classes.root, { status }, className)}
        data-hook={dataHook}
        data-status={status}
      >
        {message ? (
          <Tooltip
            dataHook={dataHooks.tooltip}
            appendTo="window"
            placement={tooltipPlacement}
            exitDelay={100}
            content={message}
            maxWidth={250}
          >
            {this._renderStatus()}
          </Tooltip>
        ) : (
          this._renderStatus()
        )}
      </div>
    );
  }
}

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.string,

  /** 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;