@helpscout/hsds-react/components/Alert/Alert.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.Alert = exports.cx = exports.classNameSpace = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Badge = _interopRequireDefault(require("../Badge"));

var _Animate = _interopRequireDefault(require("../Animate"));

var _Collapsible = _interopRequireDefault(require("../Collapsible"));

var _CloseButton = _interopRequireDefault(require("../CloseButton"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Alert = require("./Alert.css");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var classNameSpace = 'c-Alert';
exports.classNameSpace = classNameSpace;
var cx = {
  main: classNameSpace,
  actionRight: classNameSpace + "__actionRight",
  badge: classNameSpace + "__badge",
  block: classNameSpace + "__block",
  closeButton: classNameSpace + "__closeButton",
  content: classNameSpace + "__content",
  icon: classNameSpace + "__icon"
};
exports.cx = cx;

var Alert = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Alert, _React$PureComponent);

  function Alert() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      dismissed: false
    };

    _this.handleOnDismiss = function () {
      _this.setState({
        dismissed: true
      });

      _this.props.onDismiss();
    };

    _this.getLeftContentMarkup = function () {
      var _this$props = _this.props,
          badge = _this$props.badge,
          icon = _this$props.icon,
          status = _this$props.status;
      var leftContentMarkup = badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.BadgeWrapperUI, {
        className: cx.badge,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
          status: status,
          children: badge
        })
      }) : icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.IconWrapperUI, {
        className: cx.icon,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: "alert-small",
          size: "24"
        })
      }) : null;
      return leftContentMarkup;
    };

    _this.getContentMarkup = function () {
      var _this$props2 = _this.props,
          actionRight = _this$props2.actionRight,
          dismissible = _this$props2.dismissible,
          children = _this$props2.children;
      var actionRightMarkup = actionRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.ActionRightUI, {
        className: cx.actionRight,
        children: actionRight
      });
      var closeButtonMarkup = dismissible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.CloseWrapperUI, {
        className: cx.closeButton,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.default, {
          onClick: _this.handleOnDismiss,
          seamless: true,
          size: "sm"
        })
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.ContentUI, {
        className: cx.content,
        children: [_this.getLeftContentMarkup(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.BlockUI, {
          className: cx.block,
          children: children
        }), actionRightMarkup, closeButtonMarkup]
      });
    };

    return _this;
  }

  var _proto = Alert.prototype;

  _proto.render = function render() {
    var _this$props3 = this.props,
        actionRight = _this$props3.actionRight,
        badge = _this$props3.badge,
        dismissible = _this$props3.dismissible,
        children = _this$props3.children,
        className = _this$props3.className,
        icon = _this$props3.icon,
        onDismiss = _this$props3.onDismiss,
        noMargin = _this$props3.noMargin,
        status = _this$props3.status,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["actionRight", "badge", "dismissible", "children", "className", "icon", "onDismiss", "noMargin", "status"]);
    var dismissed = this.state.dismissed;
    var componentClassName = (0, _classnames.default)(cx.main, actionRight && 'has-actionRight', badge && 'has-badge', dismissible && 'is-dismissible', icon && 'has-icon', noMargin && 'is-noMargin', status && "is-" + status, className);
    var componentMarkup = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertUI, (0, _extends2.default)({
      role: "alert"
    }, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: this.getContentMarkup()
    }));
    return dismissible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapsible.default, {
      duration: 200,
      isOpen: !dismissed,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
        in: !dismissed,
        sequence: ['fade'],
        duration: 100,
        children: componentMarkup
      })
    }) : componentMarkup;
  };

  return Alert;
}(_react.default.PureComponent);

exports.Alert = Alert;
Alert.defaultProps = {
  'data-cy': 'Alert',
  dismissible: false,
  icon: false,
  noMargin: false,
  onDismiss: noop,
  status: 'warning'
};
Alert.propTypes = {
  /** Renders an action-based element on the right side of the content. Typically Buttons. */
  actionRight: _propTypes.default.any,

  /** Renders a Badge component. */
  badge: _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Allows this component to be dismissed by clicking a CloseButton. */
  dismissible: _propTypes.default.bool,

  /** Renders an alert Icon. */
  icon: _propTypes.default.bool,

  /** Removes margin from the bottom of the component. */
  noMargin: _propTypes.default.bool,

  /** Callback function when this component is dismissed. */
  onDismiss: _propTypes.default.func,

  /** Changes the color of the component to the corresponding status. */
  status: _propTypes.default.oneOf(['error', 'info', 'success', 'warning'])
};
var _default = Alert;
exports.default = _default;