@swan-io/shared-business 10.0.0 → 11.0.0

package/src/state/toasts.d.ts

@@ -0,0 +1,31 @@
+declare const createProgress: ({ duration, onEnd }: {
+    duration: number;
+    onEnd: () => void;
+}) => {
+    clear: () => void;
+    reset: () => void;
+    subscribe: (callback: (value: number) => void) => () => void;
+};
+export type ToastProgress = ReturnType<typeof createProgress>;
+export type ToastVariant = "success" | "info" | "warning" | "error";
+type ToastContent = {
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    error?: unknown;
+    autoClose?: boolean;
+};
+type Toast = {
+    uid: string;
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    error?: unknown;
+    progress?: ToastProgress;
+};
+export declare const useToasts: () => Toast[];
+export declare const hideToast: (uid: string) => void;
+export declare const registerErrorToRequestId: (value: WeakMap<WeakKey, string>) => void;
+export declare const getErrorToRequestId: () => WeakMap<WeakKey, string>;
+export declare const showToast: ({ variant, title, description, error, autoClose }: ToastContent) => string;
+export {};

package/src/state/toasts.js

@@ -0,0 +1,88 @@
+import { atom, useAtom } from "react-atomic-state";
+// based on https://gist.github.com/ncou/3a0a1f89c8e22416d0d607f621a948a9
+const createProgress = ({ duration, onEnd }) => {
+    const callbacks = new Set();
+    let endDate = 0;
+    let timerId = 0;
+    const step = () => {
+        const value = (endDate - Date.now()) / duration;
+        callbacks.forEach(callback => callback(value));
+        animationRequest = window.requestAnimationFrame(step);
+    };
+    let animationRequest = window.requestAnimationFrame(step);
+    const start = () => {
+        endDate = Date.now() + duration;
+        timerId = window.setTimeout(() => {
+            clear();
+            onEnd();
+        }, duration);
+    };
+    const reset = () => {
+        window.clearTimeout(timerId);
+        start();
+    };
+    const subscribe = (callback) => {
+        callbacks.add(callback);
+        return () => {
+            callbacks.delete(callback);
+        };
+    };
+    const clear = () => {
+        document.removeEventListener("visibilitychange", onDocumentVisible);
+        window.clearTimeout(timerId);
+        window.cancelAnimationFrame(animationRequest);
+    };
+    const onDocumentVisible = () => {
+        document.removeEventListener("visibilitychange", onDocumentVisible);
+        reset();
+    };
+    if (document.hidden) {
+        document.addEventListener("visibilitychange", onDocumentVisible);
+    }
+    else {
+        reset();
+    }
+    return {
+        clear,
+        reset,
+        subscribe,
+    };
+};
+const toasts = atom([]);
+export const useToasts = () => useAtom(toasts);
+export const hideToast = (uid) => {
+    var _a;
+    const toast = toasts.get().find(toast => toast.uid === uid);
+    if (toast != null) {
+        (_a = toast.progress) === null || _a === void 0 ? void 0 : _a.clear();
+        toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
+    }
+};
+let errorToRequestId = new WeakMap();
+export const registerErrorToRequestId = (value) => {
+    errorToRequestId = value;
+};
+export const getErrorToRequestId = () => {
+    return errorToRequestId;
+};
+export const showToast = ({ variant, title, description, error, autoClose }) => {
+    var _a;
+    const uid = `${variant} - ${title} - ${description !== null && description !== void 0 ? description : ""}`;
+    const toast = toasts.get().find(toast => toast.uid === uid);
+    if (toast != null) {
+        (_a = toast.progress) === null || _a === void 0 ? void 0 : _a.reset();
+        return uid;
+    }
+    // by default, only info and success toasts are auto-closing
+    const shouldAutoClose = autoClose !== null && autoClose !== void 0 ? autoClose : (variant === "info" || variant === "success");
+    const progress = shouldAutoClose
+        ? createProgress({
+            duration: 10000,
+            onEnd: () => {
+                hideToast(uid);
+            },
+        })
+        : undefined;
+    toasts.set(toasts => [{ uid, variant, title, description, error, progress }, ...toasts]);
+    return uid;
+};