feat(toast) Callback on Toast expiration #4210
Conversation
commit: |
| /** | ||
| * Optional callback function that is called when the toast is closed/dismissed. | ||
| */ | ||
| callback?: (...args: unknown[]) => unknown |
There was a problem hiding this comment.
Maybe it would be cleaner if the Toast component emitted an event which would call the callback within Toaster component? Or rather it called the callback within Toaster's onUpdateOpen function which is already called when the toast is closed.
It could also be useful to have more options here such as close (immediate) and closed (after transitions are over and the toast truly disappears from the screen) callbacks.
Disclaimer: take my opinion just as a note, I'm not the author nor a member of NuxtUI
There was a problem hiding this comment.
Seems like a decent idea to put the call of the callback function in onUpdateOpen - though I don't quite see how different it is compared to just calling it in the useToast#remove function.
As for the timing of the invocation - could be useful to offer different options.
This was just an attempt to provide a simple implementation of the previous callback behavior 😅
If there's anyone on the Nuxt UI team that could give some guidance on this, I'd be happy to discuss!
There was a problem hiding this comment.
Actually you can already achieve that using the onUpdate:open function:
useToast().add({
title: 'Toast',
description: 'This is the toast',
'onUpdate:open'(open) {
console.log(open)
}
})
🔗 Linked issue
Resolves #4206
❓ Type of change
📚 Description
I also remember that there used to be a callback functionality in v2 of Nuxt UI. So here is a simple implementation of that previous behavior. You can provide a callback (Function) as a prop for toasts again. They are executed after the timer expires or the user clicks on the close button manually. NextTick is used to make sure the callback executes after the closing of the Toast (onClose).
This is my first time trying to contribute to an open source project. Please inform me about any mistakes I made.
📝 Checklist