@bubbles-ui/notifications/es/NotificationProvider/NotificationContainer.js

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

import React, { useEffect, useRef } from 'react';
import { Notification } from '../Notification';
import { getAutoClose } from './helpers';
const NotificationContainer = _ref => {
  let {
    className,
    sx,
    notification,
    autoClose,
    onHide,
    type
  } = _ref;
  const autoCloseTimeout = getAutoClose(autoClose, notification);
  const hideTimeout = useRef();
  const handleHide = () => {
    onHide(notification.id);
    window.clearTimeout(hideTimeout.current);
  };
  const cancelDelayedHide = () => {
    clearTimeout(hideTimeout.current);
  };
  const handleDelayedHide = () => {
    if (typeof autoCloseTimeout === 'number') {
      hideTimeout.current = window.setTimeout(handleHide, autoCloseTimeout);
    }
  };
  useEffect(() => {
    if (typeof notification.onOpen === 'function') {
      notification.onOpen(notification);
    }
  }, []);
  useEffect(() => {
    handleDelayedHide();
    return cancelDelayedHide;
  }, [autoClose, notification.autoClose]);
  function empty() {}
  return /*#__PURE__*/React.createElement(Notification, {
    sx: sx,
    type: type,
    className: className,
    title: notification.title,
    onClose: handleHide,
    severity: notification.severity,
    avatar: notification.avatar,
    leftSide: notification.leftSide,
    loading: notification.loading,
    disallowClose: notification.disallowClose,
    onMouseEnter: cancelDelayedHide,
    onMouseLeave: handleDelayedHide,
    onClick: e => notification.onClick ? notification.onClick(e, notification) : empty
  }, notification.message);
};
export { NotificationContainer };