154 lines
4.2 KiB
TypeScript
154 lines
4.2 KiB
TypeScript
import { createContext, useContext, type ParentProps, Show } from "solid-js"
|
|
import { createStore } from "solid-js/store"
|
|
import { useTheme } from "../context/ThemeContext"
|
|
import { useTerminalDimensions } from "@opentui/solid"
|
|
import { TextAttributes } from "@opentui/core"
|
|
import { emit } from "../utils/event-bus"
|
|
|
|
export type ToastVariant = "info" | "success" | "warning" | "error"
|
|
|
|
export type ToastOptions = {
|
|
title?: string
|
|
message: string
|
|
variant: ToastVariant
|
|
duration?: number
|
|
}
|
|
|
|
const DEFAULT_DURATION = 5000
|
|
|
|
/**
|
|
* Toast component that displays at the top-right of the screen.
|
|
* NOTE: This component must be rendered INSIDE ThemeProvider since it uses useTheme().
|
|
* The ToastProvider itself can be placed outside ThemeProvider if needed.
|
|
*/
|
|
export function Toast() {
|
|
const toast = useToast()
|
|
const { theme } = useTheme()
|
|
const dimensions = useTerminalDimensions()
|
|
|
|
const getVariantColor = (variant: ToastVariant) => {
|
|
switch (variant) {
|
|
case "success":
|
|
return theme.success
|
|
case "warning":
|
|
return theme.warning
|
|
case "error":
|
|
return theme.error
|
|
case "info":
|
|
default:
|
|
return theme.info
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Show when={toast.currentToast}>
|
|
{(current) => (
|
|
<box
|
|
position="absolute"
|
|
justifyContent="center"
|
|
alignItems="flex-start"
|
|
top={2}
|
|
right={2}
|
|
maxWidth={Math.min(60, dimensions().width - 6)}
|
|
paddingLeft={2}
|
|
paddingRight={2}
|
|
paddingTop={1}
|
|
paddingBottom={1}
|
|
backgroundColor={theme.backgroundPanel}
|
|
borderColor={getVariantColor(current().variant)}
|
|
border={["left", "right"]}
|
|
>
|
|
<box flexDirection="column">
|
|
<Show when={current().title}>
|
|
<text attributes={TextAttributes.BOLD} style={{ marginBottom: 1 }} fg={theme.text}>
|
|
{current().title}
|
|
</text>
|
|
</Show>
|
|
<text fg={theme.text} wrapMode="word" width="100%">
|
|
{current().message}
|
|
</text>
|
|
</box>
|
|
</box>
|
|
)}
|
|
</Show>
|
|
)
|
|
}
|
|
|
|
function init() {
|
|
const [store, setStore] = createStore({
|
|
currentToast: null as ToastOptions | null,
|
|
})
|
|
|
|
let timeoutHandle: NodeJS.Timeout | null = null
|
|
|
|
const toast = {
|
|
show(options: ToastOptions) {
|
|
const duration = options.duration ?? DEFAULT_DURATION
|
|
setStore("currentToast", {
|
|
title: options.title,
|
|
message: options.message,
|
|
variant: options.variant,
|
|
})
|
|
|
|
// Emit event for other listeners
|
|
emit("toast.show", options)
|
|
|
|
if (timeoutHandle) clearTimeout(timeoutHandle)
|
|
timeoutHandle = setTimeout(() => {
|
|
setStore("currentToast", null)
|
|
}, duration)
|
|
},
|
|
error: (err: unknown) => {
|
|
if (err instanceof Error) {
|
|
return toast.show({
|
|
variant: "error",
|
|
message: err.message,
|
|
})
|
|
}
|
|
toast.show({
|
|
variant: "error",
|
|
message: "An unknown error has occurred",
|
|
})
|
|
},
|
|
info: (message: string, title?: string) => {
|
|
toast.show({ variant: "info", message, title })
|
|
},
|
|
success: (message: string, title?: string) => {
|
|
toast.show({ variant: "success", message, title })
|
|
},
|
|
warning: (message: string, title?: string) => {
|
|
toast.show({ variant: "warning", message, title })
|
|
},
|
|
clear: () => {
|
|
if (timeoutHandle) clearTimeout(timeoutHandle)
|
|
setStore("currentToast", null)
|
|
},
|
|
get currentToast(): ToastOptions | null {
|
|
return store.currentToast
|
|
},
|
|
}
|
|
return toast
|
|
}
|
|
|
|
export type ToastContext = ReturnType<typeof init>
|
|
|
|
const ctx = createContext<ToastContext>()
|
|
|
|
/**
|
|
* ToastProvider provides toast functionality.
|
|
* NOTE: The Toast UI component is NOT rendered here - you must render <Toast />
|
|
* separately inside your component tree, after ThemeProvider.
|
|
*/
|
|
export function ToastProvider(props: ParentProps) {
|
|
const value = init()
|
|
return <ctx.Provider value={value}>{props.children}</ctx.Provider>
|
|
}
|
|
|
|
export function useToast() {
|
|
const value = useContext(ctx)
|
|
if (!value) {
|
|
throw new Error("useToast must be used within a ToastProvider")
|
|
}
|
|
return value
|
|
}
|