feat: isNotificationVisible, hideById, isVisibleById, shakeById, updateById methods

Author: seniv

CHANGELOG.md

@@ -20,6 +20,8 @@
 - New `idStrategy` parameter, which defines how a default ID is generated if none is provided.
 - New `updateNotification` method that updates a _currently visible_ notification.
 - New `shakeNotification` method that shakes a _currently visible_ notification to attract the user's attention and optionally resets the `duration` timer.
+- New `isNotificationVisible` method: Returns a boolean indicating if any notification is currently visible.
+- New methods: `updateById`, `shakeById`, `isVisibleById`, and `hideById`. These methods only affect a notification if the provided ID matches the one of the currently visible notification.
 - Calling `showNotification` returns `update`, `hide`, `shake`, and `isVisible` functions for manipulating the notification.
 - You can mount multiple instances of `NotifierWrapper`/`NotifierRoot` and still control them using global `Notifier.*` methods. The most recently mounted instance is controlled first; if it unmounts, control reverts to the previously mounted instance.
 - It's possible to broadcast commands to all mounted instances of Notifier via `Notifier.broadcast.*`. This can be used, for example, to hide all notifications or clear the queue and hide them using `Notifier.broadcast.hideNotification()`.

src/components/Notifier.tsx

@@ -106,23 +106,40 @@ const broadcast = (fn: (ref: NotifierInterface) => void) => {
 
 export const Notifier: GlobalNotifierInterface = {
   showNotification: (params) => getLastRef()?.showNotification(params),
-  updateNotification: (params) => getLastRef()?.updateNotification(params),
+  updateNotification: (params) =>
+    getLastRef()?.updateNotification(params) ?? false,
   shakeNotification: (resetTimer) =>
     getLastRef()?.shakeNotification(resetTimer),
+  isNotificationVisible: () => getLastRef()?.isNotificationVisible() ?? false,
   hideNotification: (onHidden) => getLastRef()?.hideNotification(onHidden),
   clearQueue: (hideDisplayedNotification) =>
     getLastRef()?.clearQueue(hideDisplayedNotification),
+
+  hideById: (id, onHidden) => getLastRef()?.hideById(id, onHidden),
+  isVisibleById: (id) => getLastRef()?.isVisibleById(id) ?? false,
+  shakeById: (id, resetTimer) => getLastRef()?.shakeById(id, resetTimer),
+  updateById: (id, params) => getLastRef()?.updateById(id, params) ?? false,
+
   broadcast: {
     showNotification: (params) =>
       broadcast((ref) => ref.showNotification(params)),
     updateNotification: (params) =>
-      broadcast((ref) => ref.updateNotification(params)),
+      refs.some((ref) => ref.current?.updateNotification(params)),
     shakeNotification: (resetTimer) =>
       broadcast((ref) => ref.shakeNotification(resetTimer)),
+    isNotificationVisible: () =>
+      refs.some((ref) => ref.current?.isNotificationVisible()),
     hideNotification: (onHidden) =>
       broadcast((ref) => ref.hideNotification(onHidden)),
     clearQueue: (hideDisplayedNotification) =>
       broadcast((ref) => ref.clearQueue(hideDisplayedNotification)),
+
+    hideById: (id, onHidden) => broadcast((ref) => ref.hideById(id, onHidden)),
+    isVisibleById: (id) => refs.some((ref) => ref.current?.isVisibleById(id)),
+    shakeById: (id, resetTimer) =>
+      broadcast((ref) => ref.shakeById(id, resetTimer)),
+    updateById: (id, params) =>
+      refs.some((ref) => ref.current?.updateById(id, params)),
   },
 };
 

src/components/NotifierManager.tsx

@@ -29,7 +29,7 @@ interface NotifierManagerProps {
 /** Component manages queue and exports methods to display/hide notification, and clear the queue
  * Responsibilities:
  * - manages queue and handle duplicates
- * - export methods "showNotification", "updateNotification", "shakeNotification", "hideNotification", "clearQueue" via reference
+ * - export methods "showNotification", "updateNotification", "shakeNotification", "isNotificationVisible", "hideNotification", "clearQueue", "updateById", "shakeById", "isVisibleById", "hideById", via reference
  * - set currentNotification state and use default parameters passed via props
  * - mount NotifierRenderer when call "showNotification", and unmount it when NotifierRenderer calls onHidden.
  */
@@ -83,32 +83,55 @@ const NotifierManagerComponent = React.forwardRef<
     []
   );
 
+  const isNotificationVisible = useCallback(
+    () => !!currentNotificationId.current,
+    []
+  );
+
+  const hideById = useCallback(
+    (id: string | number, callback?: Animated.EndCallback) => {
+      if (id !== currentNotificationId.current) return;
+      return hideNotification(callback);
+    },
+    [hideNotification]
+  );
+
+  const updateById = useCallback(
+    (id: string | number, params: UpdateNotificationParams<any>) => {
+      if (id !== currentNotificationId.current) {
+        const callStackItem = callStack.current.find((item) => item.id === id);
+        if (callStackItem) {
+          Object.assign(callStackItem, params);
+        }
+        return !!callStackItem;
+      }
+      return updateNotification(params);
+    },
+    [updateNotification]
+  );
+
+  const shakeById = useCallback(
+    (id: string | number, resetTimerParam?: boolean) => {
+      if (id !== currentNotificationId.current) return;
+      return shakeNotification(resetTimerParam);
+    },
+    [shakeNotification]
+  );
+
+  const isVisibleById = useCallback(
+    (id: string | number) => id === currentNotificationId.current,
+    []
+  );
+
   const getNotificationMethodsForId = useCallback(
     (id: string | number): ShowNotificationReturnType<any> => ({
-      hide: (callback?: Animated.EndCallback) => {
-        if (id !== currentNotificationId.current) return;
-        return hideNotification(callback);
-      },
-      update: (params: UpdateNotificationParams<any>) => {
-        if (id !== currentNotificationId.current) {
-          const callStackItem = callStack.current.find(
-            (item) => item.id === id
-          );
-          if (callStackItem) {
-            Object.assign(callStackItem, params);
-          }
-          return !!callStackItem;
-        }
-        return updateNotification(params);
-      },
-      shake: (resetTimerParam?: boolean) => {
-        if (id !== currentNotificationId.current) return;
-        return shakeNotification(resetTimerParam);
-      },
-      isVisible: () => id === currentNotificationId.current,
+      hide: (callback?: Animated.EndCallback) => hideById(id, callback),
+      update: (params: UpdateNotificationParams<any>) => updateById(id, params),
+      shake: (resetTimerParam?: boolean) => shakeById(id, resetTimerParam),
+      isVisible: () => isVisibleById(id),
       id,
     }),
-    [hideNotification, shakeNotification, updateNotification]
+    [hideById, isVisibleById, shakeById, updateById]
   );
 
   const showNotification = useCallback(
@@ -188,15 +211,25 @@ const NotifierManagerComponent = React.forwardRef<
       showNotification,
       updateNotification,
       shakeNotification,
+      isNotificationVisible,
       hideNotification,
       clearQueue,
+      updateById,
+      shakeById,
+      isVisibleById,
+      hideById,
     }),
     [
       showNotification,
       updateNotification,
       shakeNotification,
+      isNotificationVisible,
       hideNotification,
       clearQueue,
+      updateById,
+      shakeById,
+      isVisibleById,
+      hideById,
     ]
   );
 

src/types.ts

@@ -440,31 +440,45 @@ export interface NotifierInterface {
   /** Shakes currently visible notification to attract the user's attention. If pass true as the first parameter, the `duration` timer will reset(prolong) */
   shakeNotification(resetTimer?: boolean): void;
 
+  /** Is any notification currently visible. */
+  isNotificationVisible(): boolean;
+
   /** Hide currently visible notification and run callback function when notification completely hidden. */
   hideNotification(onHidden?: Animated.EndCallback): void;
 
   /** Clear [notifications queue](#queue-mode) and optionally hide currently displayed notification.
    *
    * Might be useful to run after logout, after which queued notifications should not be displayed. */
   clearQueue(hideDisplayedNotification?: boolean): void;
+
+  /** Update notification by ID, if visible - will be updated immediately,
+   * if it waits in the queue - it will be updated in the queue and will be displayed with updated parameters.
+   *
+   * Returns true if notification was updated */
+  updateById<ComponentType extends ElementType = typeof NotificationComponent>(
+    id: string | number,
+    params: UpdateNotificationParams<ComponentType>
+  ): boolean;
+
+  /** Shakes notification by ID to attract the user's attention. If pass true as the second parameter, the `duration` timer will reset(prolong) */
+  shakeById(id: string | number, resetTimer?: boolean): void;
+
+  /** Is notification with provided ID currently visible */
+  isVisibleById(id: string | number): boolean;
+
+  /** Hide notification by ID */
+  hideById(id: string | number, onHidden?: Animated.EndCallback): void;
 }
 
 export interface GlobalNotifierInterface
-  extends Omit<NotifierInterface, 'showNotification' | 'updateNotification'> {
+  extends Omit<NotifierInterface, 'showNotification'> {
   /** Show notification with params. Returns `update`, `hide`, `shake`, `isVisible` functions and `id` field if at least one Notifier is mounted. */
   showNotification<
     ComponentType extends ElementType = typeof NotificationComponent,
   >(
     params: ShowNotificationParams<ComponentType>
   ): ShowNotificationReturnType<ComponentType> | undefined;
 
-  /** Update currently visible notification. Returns true if notification was updated */
-  updateNotification<
-    ComponentType extends ElementType = typeof NotificationComponent,
-  >(
-    params: UpdateNotificationParams<ComponentType>
-  ): boolean | undefined;
-
   /** Broadcasts the command to all currently mounted instances of Notifier, not only to the last one.
    *
    * Useful to hide all currently visible notifications via `Notifier.broadcast.hideNotification()` or clear queue.*/