@bubbles-ui/notifications/es/NotificationProvider/hooks/index.js

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

import { useContext } from 'react';
import { useQueue, randomId } from '@mantine/hooks';
import { NotificationsContext, ChatContext, CONTEXT_TYPES } from '../context';
export function useNotifications() {
  let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CONTEXT_TYPES.DEFAULT;
  const context = useContext(type === CONTEXT_TYPES.DEFAULT ? NotificationsContext : ChatContext);
  if (!context) {
    throw new Error('NotificationsProvider was not found in tree');
  }
  return context;
}
export function useNotificationsState(_ref) {
  let {
    limit
  } = _ref;
  const {
    state,
    queue,
    update,
    cleanQueue
  } = useQueue({
    initialValues: [],
    limit
  });
  const showNotification = notification => {
    const id = notification.id || randomId();
    update(notifications => {
      if (notification.id && notifications.some(n => n.id === notification.id)) {
        return notifications;
      }
      return [...notifications, {
        ...notification,
        id
      }];
    });
    return id;
  };
  const updateNotification = (id, notification) => update(notifications => {
    const index = notifications.findIndex(n => n.id === id);
    if (index === -1) {
      return notifications;
    }
    const newNotifications = [...notifications];
    newNotifications[index] = notification;
    return newNotifications;
  });
  const hideNotification = id => update(notifications => notifications.filter(notification => {
    if (notification.id === id) {
      typeof notification.onClose === 'function' && notification.onClose(notification);
      return false;
    }
    return true;
  }));
  const clean = () => update(() => []);
  return {
    notifications: state,
    queue,
    showNotification,
    updateNotification,
    hideNotification,
    cleanQueue,
    clean
  };
}