@bubbles-ui/notifications/lib/NotificationProvider/NotificationProvider.js

The Bubbles Design System is Leemonade's open-source design system for products and experiences.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NotificationProvider = exports.NOTIFICATION_PROVIDER_DEFAULT_PROPS = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactTransitionGroup = require("react-transition-group");
var _core = require("@mantine/core");
var _hooks = require("@mantine/hooks");
var _context = require("./context");
var _helpers = require("./helpers");
var _hooks2 = require("./hooks");
var _NotificationContainer = require("./NotificationContainer");
var _NotificationProvider = require("./NotificationProvider.styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const NOTIFICATION_PROVIDER_PROP_TYPES = {
  /** Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by showNotification function */
  autoClose: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.bool]),
  /** Notification transitions duration, 0 to turn transitions off */
  transitionDuration: _propTypes.default.number,
  /** Notification width in px, cannot exceed 100% */
  containerWidth: _propTypes.default.number,
  /** Notification max-height in px, used for transitions */
  notificationMaxHeight: _propTypes.default.number,
  /** Maximum amount of notifications displayed at a time, other new notifications will be added to queue */
  limit: _propTypes.default.number,
  /** Notifications container z-index */
  zIndex: _propTypes.default.number,
  /** Notification position left offset */
  leftOffset: _propTypes.default.number,
  /** Notification position X offset */
  xOffset: _propTypes.default.number,
  /** Notification type */
  type: _propTypes.default.string
};
const NOTIFICATION_PROVIDER_DEFAULT_PROPS = {
  autoClose: 4000,
  transitionDuration: 250,
  containerWidth: 440,
  notificationMaxHeight: 200,
  limit: 5,
  zIndex: 999,
  leftOffset: 0,
  xOffset: 0,
  type: _context.CONTEXT_TYPES.DEFAULT
};
exports.NOTIFICATION_PROVIDER_DEFAULT_PROPS = NOTIFICATION_PROVIDER_DEFAULT_PROPS;
const NotificationProvider = _ref => {
  let {
    className,
    position: positionProp,
    autoClose,
    transitionDuration,
    containerWidth,
    notificationMaxHeight,
    limit,
    zIndex: zIndexProp,
    style,
    children,
    leftOffset,
    xOffset,
    type,
    ...props
  } = _ref;
  const {
    notifications,
    queue,
    showNotification,
    updateNotification,
    hideNotification,
    clean,
    cleanQueue
  } = (0, _hooks2.useNotificationsState)({
    limit
  });
  const reduceMotion = (0, _hooks.useReducedMotion)();
  const duration = reduceMotion ? 1 : transitionDuration;
  const {
    classes,
    cx,
    theme
  } = (0, _NotificationProvider.NotificationProviderStyles)({}, {
    name: `NotificationProvider_${type}`
  });
  let positioning = 'bottom-left'.split('-');
  let zIndex = Math.min(zIndexProp, (0, _core.getDefaultZIndex)('overlay'));
  let Provider = _context.NotificationsContext.Provider;
  if (type === _context.CONTEXT_TYPES.CHAT) {
    positioning = 'bottom-right'.split('-');
    zIndex += 1;
    Provider = _context.ChatContext.Provider;
  }
  const items = notifications.map(notification => /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
    key: notification.id,
    timeout: duration,
    unmountOnExit: true,
    mountOnEnter: true,
    onEnter: node => node.offsetHeight
  }, state => /*#__PURE__*/_react.default.createElement(_NotificationContainer.NotificationContainer, {
    notification: notification,
    onHide: hideNotification,
    className: classes.notification,
    autoClose: autoClose,
    type: type,
    sx: {
      ...(0, _helpers.getNotificationStateStyles)({
        state,
        positioning,
        transitionDuration: duration,
        maxHeight: notificationMaxHeight
      })
    }
  })));
  return /*#__PURE__*/_react.default.createElement(Provider, {
    value: {
      notifications,
      queue,
      showNotification,
      hideNotification,
      updateNotification,
      clean,
      cleanQueue
    }
  }, /*#__PURE__*/_react.default.createElement(_core.Portal, {
    zIndex: zIndex
  }, /*#__PURE__*/_react.default.createElement(_core.Box, _extends({}, props, {
    className: cx(classes.notifications, className),
    style: style,
    sx: {
      maxWidth: containerWidth,
      ...(0, _helpers.getPositionStyles)(positioning, containerWidth, theme.spacing.md, Math.max(leftOffset, xOffset))
    }
  }), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, items))), children);
};
exports.NotificationProvider = NotificationProvider;
NotificationProvider.propTypes = NOTIFICATION_PROVIDER_PROP_TYPES;
NotificationProvider.defaultProps = NOTIFICATION_PROVIDER_DEFAULT_PROPS;