[WIP] feat: play pause toast

src/core/containerObserver.ts

@@ -75,6 +75,12 @@ export function createContainerObserver({
     return containerMismatch || isDuplicate;
   };
 
+  const toggle = (v: boolean, id?: Id) => {
+    toasts.forEach(t => {
+      if (id == null || id === t.props.toastId) isFn(t.toggle) && t.toggle(v);
+    });
+  };
+
   const removeToast = (id?: Id) => {
     activeToasts = id == null ? [] : activeToasts.filter(v => v !== id);
     notify();
@@ -210,10 +216,13 @@ export function createContainerObserver({
     id,
     props,
     observe,
+    toggle,
     removeToast,
     toasts,
     clearQueue,
     buildToast,
+    setToggle: (id: Id, fn: (v: boolean) => void) =>
+      (toasts.get(id)!.toggle = fn),
     isToastActive: (id: Id) => activeToasts.some(v => v === id),
     getSnapshot: () => (props.newestOnTop ? snapshot.reverse() : snapshot)
   };

src/core/store.ts

@@ -91,6 +91,30 @@ export function pushToast<TData>(
   });
 }
 
+interface ToggleToastParams {
+  id?: Id;
+  containerId?: Id;
+}
+
+type P = {
+  id: Id;
+  containerId?: Id;
+  fn: (v: boolean) => void;
+};
+export function registerToggle(p: P) {
+  containers.get(p.containerId || Default.CONTAINER_ID)?.setToggle(p.id, p.fn);
+}
+
+export function toggleToast(v: boolean, opt?: ToggleToastParams) {
+  containers.forEach(c => {
+    if (opt == null || !opt?.containerId) {
+      c.toggle(v, opt?.id);
+    } else if (opt?.containerId === c.id) {
+      c.toggle(v, opt?.id);
+    }
+  });
+}
+
 export function registerContainer(props: ToastContainerProps) {
   const id = props.containerId || Default.CONTAINER_ID;
   return {

src/core/toast.ts

@@ -1,5 +1,6 @@
 import {
   Id,
+  IdOpts,
   NotValidatedToastProps,
   ToastContent,
   ToastOptions,
@@ -15,7 +16,8 @@ import {
   isToastActive,
   onChange,
   pushToast,
-  removeToast
+  removeToast,
+  toggleToast
 } from './store';
 
 /**
@@ -258,4 +260,7 @@ toast.done = (id: Id) => {
  */
 toast.onChange = onChange;
 
+toast.play = (opts?: IdOpts) => toggleToast(true, opts);
+toast.pause = (opts?: IdOpts) => toggleToast(false, opts);
+
 export { toast };

src/hooks/useToast.ts

@@ -2,6 +2,7 @@ import { DOMAttributes, useEffect, useRef, useState } from 'react';
 
 import { ToastProps } from '../types';
 import { Default, Direction } from '../utils';
+import { registerToggle } from '../core/store';
 
 interface Draggable {
   start: number;
@@ -46,6 +47,12 @@ export function useToast(props: ToastProps) {
   }).current;
   const { autoClose, pauseOnHover, closeToast, onClick, closeOnClick } = props;
 
+  registerToggle({
+    id: props.toastId,
+    containerId: props.containerId,
+    fn: setIsRunning
+  });
+
   useEffect(() => {
     props.pauseOnFocusLoss && bindFocusEvents();
     return () => {

src/types.ts

@@ -330,6 +330,7 @@ export interface NotValidatedToastProps extends Partial<ToastProps> {
 export interface Toast {
   content: ToastContent;
   props: ToastProps;
+  toggle?: (v: boolean) => void;
 }
 
 export type ToastItemStatus = 'added' | 'removed' | 'updated';
@@ -347,3 +348,8 @@ export interface ToastItem<Data = {}> {
 }
 
 export type OnChangeCallback = (toast: ToastItem) => void;
+
+export type IdOpts = {
+  id?: Id;
+  containerId?: Id;
+};