@helpscout/hsds-react/components/NotificationStack/NotificationStack.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.NotificationStack = 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 _NotificationStack = require("./NotificationStack.css");

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

function noop() {}

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

  function NotificationStack(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.firstNotificationId = null;

    _this.handleOnMouseEnter = function (event) {
      var _this$props = _this.props,
          autoDismiss = _this$props.autoDismiss,
          onMouseEnter = _this$props.onMouseEnter;

      if (autoDismiss) {
        _this.setState({
          isDismissable: false
        });
      }

      onMouseEnter(event);
    };

    _this.handleOnMouseLeave = function (event) {
      var _this$props2 = _this.props,
          autoDismiss = _this$props2.autoDismiss,
          onMouseLeave = _this$props2.onMouseLeave;

      if (autoDismiss) {
        _this.setState({
          isDismissable: true
        });
      }

      onMouseLeave(event);
    };

    _this.handleOnNotificationClick = function () {
      var onClick = _this.props.onClick;
      _this.firstNotificationId = null;
      onClick.apply(void 0, arguments);
    };

    _this.state = {
      isDismissable: props.autoDismiss
    };
    return _this;
  }

  var _proto = NotificationStack.prototype;

  _proto.setFirstNotificationId = function setFirstNotificationId(id) {
    if (!this.firstNotificationId) {
      this.firstNotificationId = id;
    }
  };

  _proto.renderChildren = function renderChildren() {
    var _this2 = this;

    var _this$props3 = this.props,
        children = _this$props3.children,
        limit = _this$props3.limit;
    var isDismissable = this.state.isDismissable;
    return _react.default.Children.map(children, function (child, index) {
      var count = _react.default.Children.count(children) - index;
      var isActive = count < limit + 1;
      var _child$props = child.props,
          fromProp = _child$props.from,
          id = _child$props.id;

      _this2.setFirstNotificationId(id);

      var from = id === _this2.firstNotificationId ? fromProp : null;
      return /*#__PURE__*/_react.default.cloneElement(child, {
        from: from,
        isActive: isActive,
        isDismissable: isDismissable,
        onClick: _this2.handleOnNotificationClick
      });
    });
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        className = _this$props4.className,
        theme = _this$props4.theme,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["className", "theme"]);
    var componentClassName = (0, _classnames.default)('c-NotificationStack', theme && "is-theme-" + theme, className);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationStack.NotificationStackUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      onMouseEnter: this.handleOnMouseEnter,
      onMouseLeave: this.handleOnMouseLeave,
      children: this.renderChildren()
    }));
  };

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

exports.NotificationStack = NotificationStack;
NotificationStack.defaultProps = {
  autoDismiss: false,
  'data-cy': 'NotificationStack',
  limit: 5,
  onClick: noop,
  onMouseEnter: noop,
  onMouseLeave: noop,
  theme: 'chat'
};
NotificationStack.propTypes = {
  className: _propTypes.default.string,

  /** Enables the auto-dismissal timers for [Notification](../Notification) components. Default `false`. */
  autoDismiss: _propTypes.default.bool,

  /** Callback when a child Notification is clicked. */
  onClick: _propTypes.default.func,

  /** Maximum number of Notifications to display. Default `5`. */
  limit: _propTypes.default.number,

  /** Theme of notifications. Default `chat`. */
  theme: _propTypes.default.string,

  /** Callback on mouse enter. */
  onMouseEnter: _propTypes.default.func,

  /** Callback on mouse leave. */
  onMouseLeave: _propTypes.default.func,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = NotificationStack;
exports.default = _default;