[@mantine/notifications] Add static methods to Notifications (mantine…

…dev#3689) Co-authored-by: Ilya Krasov <krasov@addamant.ru>
milhamm · Mar 8, 2023 · 10b6648 · 10b6648
1 parent eaf1202
commit 10b6648
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/mantine-notifications/src/Notifications/Notifications.tsx b/src/mantine-notifications/src/Notifications/Notifications.tsx
@@ -3,7 +3,11 @@ import { Transition, TransitionGroup } from 'react-transition-group';
 import { DefaultProps, Portal, getDefaultZIndex, Box, PortalProps, rem } from '@mantine/core';
 import { useReducedMotion, useForceUpdate, useDidUpdate } from '@mantine/hooks';
 import { NotificationsPositioning } from '../types';
-import { useNotificationsEvents } from '../events';
+import {
+  notifications as GlobalNotifications,
+  NotificationsEvents,
+  useNotificationsEvents,
+} from '../events';
 import getPositionStyles from './get-position-styles/get-position-styles';
 import getNotificationStateStyles from './get-notification-state-styles/get-notification-state-styles';
 import NotificationContainer from '../NotificationContainer/NotificationContainer';
@@ -19,6 +23,8 @@ const POSITIONS = [
   'bottom-center',
 ] as const;
 
+type NotificationsStaticMethods = NotificationsEvents;
+
 export interface NotificationsProps
   extends Omit<DefaultProps, 'style'>,
     React.ComponentPropsWithoutRef<'div'> {
@@ -53,7 +59,7 @@ export interface NotificationsProps
   target?: PortalProps['target'];
 }
 
-export function Notifications({
+export const Notifications: React.FC<NotificationsProps> & NotificationsStaticMethods = ({
   className,
   position = 'bottom-right',
   autoClose = 4000,
@@ -66,7 +72,7 @@ export function Notifications({
   children,
   target,
   ...others
-}: NotificationsProps) {
+}) => {
   const forceUpdate = useForceUpdate();
   const refs = useRef<Record<string, HTMLDivElement>>({});
   const previousLength = useRef<number>(0);
@@ -149,6 +155,11 @@ export function Notifications({
       </Box>
     </Portal>
   );
-}
+};
 
 Notifications.displayName = '@mantine/notifications/Notifications';
+Notifications.show = GlobalNotifications.show;
+Notifications.hide = GlobalNotifications.hide;
+Notifications.update = GlobalNotifications.update;
+Notifications.clean = GlobalNotifications.clean;
+Notifications.cleanQueue = GlobalNotifications.cleanQueue;
diff --git a/src/mantine-notifications/src/events.ts b/src/mantine-notifications/src/events.ts
@@ -18,7 +18,7 @@ export const cleanNotifications = createEvent('clean');
 export const cleanNotificationsQueue = createEvent('cleanQueue');
 export const updateNotification = createEvent('update');
 
-export const notifications = {
+export const notifications: NotificationsEvents = {
   show: showNotification,
   hide: hideNotification,
   clean: cleanNotifications,