diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx index d2dfff1..5c7f42b 100644 --- a/site/pages/docs/toast.mdx +++ b/site/pages/docs/toast.mdx @@ -123,6 +123,38 @@ toast.promise( ); ``` +#### Advanced (with dismiss button) + +If the `success` and `error` properties are functions, the result is passed to the [`toast.success`](/docs/toast#success) and [`toast.error`](/docs/toast#error) methods. That may then _also_ be a function, accepting a `Toast` object and returning your custom content. + +```js +toast.promise( + myPromise, + { + loading: "Loading", + success: (data) => (t) => + ( +
+ Successfully saved ${data.name} + +
+ ), + error: (err) => `This just happened: ${err.toString()}`, + }, + { + style: { + minWidth: "250px", + }, + success: { + duration: 5000, + icon: "🔥", + }, + } +); +``` + ## Default durations Every type has its own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [``](/docs/toaster). diff --git a/src/core/toast.ts b/src/core/toast.ts index ec04865..c18e524 100644 --- a/src/core/toast.ts +++ b/src/core/toast.ts @@ -6,6 +6,7 @@ import { DefaultToastOptions, ValueOrFunction, resolveValue, + ValueFunction, } from './types'; import { genId } from './utils'; import { dispatch, ActionType } from './store'; @@ -14,6 +15,14 @@ type Message = ValueOrFunction; type ToastHandler = (message: Message, options?: ToastOptions) => string; +type PromiseToastMessages = { + loading: Message; + success: PromiseToastMessageHandler; + error: PromiseToastMessageHandler; +} + +type PromiseToastMessageHandler = Renderable | ValueFunction; + const createToast = ( message: Message, type: ToastType = 'blank', @@ -59,13 +68,9 @@ toast.dismiss = (toastId?: string) => { toast.remove = (toastId?: string) => dispatch({ type: ActionType.REMOVE_TOAST, toastId }); -toast.promise = ( - promise: Promise, - msgs: { - loading: Renderable; - success: ValueOrFunction; - error: ValueOrFunction; - }, +toast.promise = ( + promise: Promise, + msgs: PromiseToastMessages, opts?: DefaultToastOptions ) => { const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });