mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-10 04:22:27 +10:00
186 lines
3.7 KiB
TypeScript
186 lines
3.7 KiB
TypeScript
import { createId } from "@paralleldrive/cuid2";
|
|
import type { ToastActionElement, ToastProps } from "@reactive-resume/ui";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const TOAST_LIMIT = 1;
|
|
const TOAST_REMOVE_DELAY = 5000;
|
|
|
|
type ToasterToast = ToastProps & {
|
|
id: string;
|
|
icon?: React.ReactNode;
|
|
title?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
action?: ToastActionElement;
|
|
};
|
|
|
|
export const actionTypes = {
|
|
ADD_TOAST: "ADD_TOAST",
|
|
UPDATE_TOAST: "UPDATE_TOAST",
|
|
DISMISS_TOAST: "DISMISS_TOAST",
|
|
REMOVE_TOAST: "REMOVE_TOAST",
|
|
} as const;
|
|
|
|
type ActionType = typeof actionTypes;
|
|
|
|
type Action =
|
|
| {
|
|
type: ActionType["ADD_TOAST"];
|
|
toast: ToasterToast;
|
|
}
|
|
| {
|
|
type: ActionType["UPDATE_TOAST"];
|
|
toast: Partial<ToasterToast>;
|
|
}
|
|
| {
|
|
type: ActionType["DISMISS_TOAST"];
|
|
toastId?: ToasterToast["id"];
|
|
}
|
|
| {
|
|
type: ActionType["REMOVE_TOAST"];
|
|
toastId?: ToasterToast["id"];
|
|
};
|
|
|
|
type State = {
|
|
toasts: ToasterToast[];
|
|
};
|
|
|
|
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
|
|
|
|
const addToRemoveQueue = (toastId: string) => {
|
|
if (toastTimeouts.has(toastId)) {
|
|
return;
|
|
}
|
|
|
|
const timeout = setTimeout(() => {
|
|
toastTimeouts.delete(toastId);
|
|
dispatch({
|
|
type: "REMOVE_TOAST",
|
|
toastId: toastId,
|
|
});
|
|
}, TOAST_REMOVE_DELAY);
|
|
|
|
toastTimeouts.set(toastId, timeout);
|
|
};
|
|
|
|
export const reducer = (state: State, action: Action): State => {
|
|
switch (action.type) {
|
|
case "ADD_TOAST": {
|
|
return {
|
|
...state,
|
|
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
|
};
|
|
}
|
|
|
|
case "UPDATE_TOAST": {
|
|
return {
|
|
...state,
|
|
toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
|
|
};
|
|
}
|
|
|
|
case "DISMISS_TOAST": {
|
|
const { toastId } = action;
|
|
|
|
if (toastId) {
|
|
addToRemoveQueue(toastId);
|
|
} else {
|
|
for (const toast of state.toasts) {
|
|
addToRemoveQueue(toast.id);
|
|
}
|
|
}
|
|
|
|
return {
|
|
...state,
|
|
toasts: state.toasts.map((t) =>
|
|
t.id === toastId || toastId === undefined
|
|
? {
|
|
...t,
|
|
open: false,
|
|
}
|
|
: t,
|
|
),
|
|
};
|
|
}
|
|
case "REMOVE_TOAST": {
|
|
if (action.toastId === undefined) {
|
|
return {
|
|
...state,
|
|
toasts: [],
|
|
};
|
|
}
|
|
return {
|
|
...state,
|
|
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
|
};
|
|
}
|
|
}
|
|
};
|
|
|
|
const listeners: ((state: State) => void)[] = [];
|
|
|
|
let memoryState: State = { toasts: [] };
|
|
|
|
function dispatch(action: Action) {
|
|
memoryState = reducer(memoryState, action);
|
|
for (const listener of listeners) {
|
|
listener(memoryState);
|
|
}
|
|
}
|
|
|
|
type Toast = Omit<ToasterToast, "id">;
|
|
|
|
function toast({ ...props }: Toast) {
|
|
const id = createId();
|
|
|
|
const update = (props: ToasterToast) => {
|
|
dispatch({
|
|
type: "UPDATE_TOAST",
|
|
toast: { ...props, id },
|
|
});
|
|
};
|
|
const dismiss = () => {
|
|
dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
};
|
|
|
|
dispatch({
|
|
type: "ADD_TOAST",
|
|
toast: {
|
|
...props,
|
|
id,
|
|
open: true,
|
|
onOpenChange: (open) => {
|
|
if (!open) dismiss();
|
|
},
|
|
},
|
|
});
|
|
|
|
return {
|
|
id: id,
|
|
dismiss,
|
|
update,
|
|
};
|
|
}
|
|
|
|
function useToast() {
|
|
const [state, setState] = useState<State>(memoryState);
|
|
|
|
useEffect(() => {
|
|
listeners.push(setState);
|
|
return () => {
|
|
const index = listeners.indexOf(setState);
|
|
|
|
if (index > -1) listeners.splice(index, 1);
|
|
};
|
|
}, [state]);
|
|
|
|
return {
|
|
...state,
|
|
toast,
|
|
dismiss: (toastId?: string) => {
|
|
dispatch({ type: "DISMISS_TOAST", toastId });
|
|
},
|
|
};
|
|
}
|
|
|
|
export { toast, useToast };
|