-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
460 additions
and
230 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import type { ReactNode } from "react"; | ||
| import { create } from "zustand"; | ||
| import { immer } from "zustand/middleware/immer"; | ||
| import { ToastStyle, type ToastProps } from "./toast"; | ||
|
|
||
| const TRANSITION_INTERVAL = 150; | ||
| let currentToastId = 0; | ||
|
|
||
| export interface ToastOptions { | ||
| id: number; | ||
| message: ReactNode; | ||
| className?: string; | ||
| removing?: boolean; | ||
| style?: ToastStyle; | ||
| duration?: number | null; | ||
| onConfirm?: () => void; | ||
| onCancel?: () => void; | ||
| onClose?: () => void; | ||
| } | ||
|
|
||
| type State = { | ||
| items: ToastProps[]; | ||
| }; | ||
|
|
||
| const useToastStore = create<State>()( | ||
| immer((set) => ({ | ||
| items: [], | ||
| })), | ||
| ); | ||
|
|
||
| export const removeToast = (id: number) => { | ||
| let hasToast: boolean | undefined; | ||
| useToastStore.setState((draft) => { | ||
| const toast = draft.items.find((toast) => toast.id === id); | ||
| if (toast) { | ||
| if (toast.removing) return; | ||
| toast.removing = true; | ||
| hasToast = true; | ||
| } | ||
| }); | ||
|
|
||
| if (hasToast) { | ||
| setTimeout(() => { | ||
| useToastStore.setState((draft) => { | ||
| draft.items = draft.items.filter((item) => item.id !== id); | ||
| }); | ||
| }, TRANSITION_INTERVAL); | ||
| } | ||
| }; | ||
|
|
||
| export const createToast = (options: Omit<ToastOptions, "id" | "removing">) => { | ||
| if (typeof window === "undefined") return; | ||
| const id = currentToastId++; | ||
| const hasButtons = !!(options.onConfirm || options.onCancel); | ||
| const timer: NodeJS.Timeout | undefined = undefined; | ||
| const onRemove = () => { | ||
| if (timer) clearTimeout(timer); | ||
| removeToast(id); | ||
| if (options.onClose) { | ||
| options.onClose(); | ||
| } | ||
| }; | ||
|
|
||
| const duration = | ||
| options.duration === null ? options.duration : options.duration || (hasButtons ? 10000 : 5000); | ||
| const expiresAt = duration === null ? null : Date.now() + duration; | ||
| const toast: ToastProps = { | ||
| ...options, | ||
| id: id, | ||
| removing: false, | ||
| expiresAt: expiresAt, | ||
| createdAt: Date.now(), | ||
| onRemove, | ||
| }; | ||
|
|
||
| useToastStore.setState((draft) => { | ||
| const existingToast = draft.items.find((toast) => toast.message === options.message); | ||
| if (existingToast) { | ||
| console.debug( | ||
| `Toast with message "${options.message}" already exists, refreshing time on existing toast.`, | ||
| ); | ||
| existingToast.expiresAt = expiresAt; | ||
| existingToast.createdAt = Date.now(); | ||
| return; | ||
| } | ||
|
|
||
| draft.items.push(toast); | ||
| }); | ||
|
|
||
| return toast; | ||
| }; | ||
|
|
||
| export const updateToast = (id: number, options: Partial<ToastProps>) => { | ||
| useToastStore.setState((draft) => { | ||
| const toast = draft.items.find((toast) => toast.id === id); | ||
| if (toast) { | ||
| Object.assign(toast, options); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| export const useToasts = () => { | ||
| return useToastStore((store) => store.items); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,20 @@ | ||
| import { nanoid } from 'nanoid'; | ||
| import type { FC, ReactNode } from 'react'; | ||
| import { useCallback, useState } from 'preact/hooks'; | ||
| import { Fragment } from 'preact'; | ||
| import { ToastContext } from './context'; | ||
| import type { ToastProps } from './toast'; | ||
| import { TRANSITION_DURATION, Toast } from './toast'; | ||
| import { memo, useState } from "react"; | ||
| import { useToasts } from "./store"; | ||
| import { Toast } from "./toast"; | ||
|
|
||
| // spread operators on arrays are to fix this | ||
| // https://stackoverflow.com/questions/56266575/why-is-usestate-not-triggering-re-render | ||
|
|
||
| export const ToastProvider: FC<{ children: ReactNode }> = (props) => { | ||
| const [toasts, setToasts] = useState<(ToastProps & { id: string; timer: NodeJS.Timeout })[]>([]); | ||
| const createToast = useCallback( | ||
| (toast: ToastProps) => { | ||
| if (toasts.some((existing) => existing.text === toast.text)) { | ||
| // skip duplicate cards | ||
| return; | ||
| } | ||
|
|
||
| const timeout = toast.timeout ?? 5000; | ||
| const id = nanoid(); | ||
| const timer = setTimeout(() => { | ||
| // set removing on toast starting the transition | ||
| setToasts((toasts) => { | ||
| for (const toast of toasts) { | ||
| if (toast.id !== id) continue; | ||
| toast.removing = true; | ||
| } | ||
|
|
||
| return [...toasts]; | ||
| }); | ||
|
|
||
| setTimeout(() => { | ||
| // remove toast once transition is complete | ||
| setToasts((toasts) => toasts.filter((toast) => toast.id !== id)); | ||
| }, TRANSITION_DURATION); | ||
| }, timeout - TRANSITION_DURATION); | ||
|
|
||
| // create toast | ||
| setToasts((toasts) => { | ||
| const data = Object.assign(toast, { id, timer }); | ||
| return [...toasts, data]; | ||
| }); | ||
| }, | ||
| [toasts, setToasts], | ||
| ); | ||
| export const ToastProvider = memo(() => { | ||
| const toasts = useToasts(); | ||
| const [hovered, setHovered] = useState(false); | ||
|
|
||
| return ( | ||
| <ToastContext.Provider value={createToast}> | ||
| <Fragment>{props.children}</Fragment> | ||
| <div className="fixed flex justify-end bottom-5 right-5 left-5"> | ||
| {toasts.map((toast) => ( | ||
| <Toast key={toast.id} removing={toast.removing} {...toast} /> | ||
| ))} | ||
| </div> | ||
| </ToastContext.Provider> | ||
| <div | ||
| className="fixed top-4 right-4 left-4 sm:left-auto sm:ml-4 min-w-[20em] space-y-2 z-50" | ||
| onMouseEnter={() => setHovered(true)} | ||
| onMouseLeave={() => setHovered(false)} | ||
| > | ||
| {toasts.map((toast) => ( | ||
| <Toast key={toast.id} {...toast} paused={hovered} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
| }); |
Oops, something went wrong.