Feature that updates toast

[MisileLab]

Kobalte can update toast with simple function. https://kobalte.dev/docs/core/components/toast#toaster

[sek-consulting]

solid-ui has a showToast() function: https://www.solid-ui.com/docs/components/toast#showtoast

what do you want to do that is currently missing?

[MisileLab]

solid-ui has a showToast() function: solid-ui.com/docs/components/toast#showtoast

what do you want to do that is currently missing?

showToast makes new toast, not update it. I want to update toast, not making new toast.

[sek-consulting]

Thanks for the input! :) Since I'm currently updating the docs anyway I'll add it all the functions. Should be done by the end of the week.

[sek-consulting]

I added the showToastPromise() function to the toast component.

https://github.com/sek-consulting/solid-ui/blob/main/apps/docs/src/registry/ui/toast.tsx#L116

function showToastPromise<T, U>(
  promise: Promise<T> | (() => Promise<T>),
  options: {
    loading?: JSX.Element
    success?: (data: T) => JSX.Element
    error?: (error: U) => JSX.Element
    duration?: number
  }
) {
  const variant: { [key in ToastPrimitive.ToastPromiseState]: ToastVariant } = {
    pending: "default",
    fulfilled: "success",
    rejected: "error"
  }
  return toaster.promise<T, U>(promise, (props) => (
    <Toast toastId={props.toastId} variant={variant[props.state]} duration={options.duration}>
      <Switch>
        <Match when={props.state === "pending"}>{options.loading}</Match>
        <Match when={props.state === "fulfilled"}>{options.success?.(props.data!)}</Match>
        <Match when={props.state === "rejected"}>{options.error?.(props.error!)}</Match>
      </Switch>
    </Toast>
  ))
}