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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _StatusIndicatorSt = require("./StatusIndicator.st.css");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _system = require("@wix/wix-ui-icons-common/system");
var _Loader = _interopRequireDefault(require("../Loader"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/StatusIndicator/StatusIndicator.js";
/** StatusIndicator */
class StatusIndicator extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._renderStatus = () => {
      switch (this.props.status) {
        case _constants.STATUS.WARNING:
          return /*#__PURE__*/_react.default.createElement(_system.FormFieldWarningFilled, {
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 19,
              columnNumber: 16
            }
          });
        case _constants.STATUS.LOADING:
          return /*#__PURE__*/_react.default.createElement(_Loader.default, {
            size: "tiny",
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 21,
              columnNumber: 16
            }
          });
        case _constants.STATUS.ERROR:
        default:
          return /*#__PURE__*/_react.default.createElement(_system.FormFieldErrorFilled, {
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 24,
              columnNumber: 16
            }
          });
      }
    };
  }
  render() {
    var {
      dataHook,
      status,
      message,
      tooltipPlacement,
      className
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _StatusIndicatorSt.st)(_StatusIndicatorSt.classes.root, {
        status
      }, className),
      "data-hook": dataHook,
      "data-status": status,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 33,
        columnNumber: 7
      }
    }, message ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      dataHook: _constants.dataHooks.tooltip,
      appendTo: "window",
      placement: tooltipPlacement,
      exitDelay: 100,
      content: message,
      maxWidth: 250,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 39,
        columnNumber: 11
      }
    }, this._renderStatus()) : this._renderStatus());
  }
}
StatusIndicator.displayName = 'StatusIndicator';
StatusIndicator.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in tests. */
  dataHook: _propTypes.default.string,
  /** Allows you to apply a CSS class to the component’s root element. */
  className: _propTypes.default.string,
  /** Sets the indication type. */
  status: _propTypes.default.oneOf(['error', 'warning', 'loading']),
  /** Sets the message that’s displayed in a tooltip. If not set, the tooltip won’t appear. */
  message: _propTypes.default.node,
  /** Defines which side the tooltip will be placed on. */
  tooltipPlacement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left'])
};
StatusIndicator.defaultProps = {
  status: 'error',
  tooltipPlacement: 'top'
};
var _default = exports.default = StatusIndicator;
//# sourceMappingURL=StatusIndicator.js.map