Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: multiple actions support and api improvements #2

Merged
merged 7 commits into from
May 30, 2024

Conversation

anwarulislam
Copy link
Member

@anwarulislam anwarulislam commented May 22, 2024

This PR adds support for multiple actions.

Example:

 toast.message('Event has been created', {
  action: [
    {
      label: 'Cancel',
      onClick: (e, toast) => toast.deleteToast(200)
    },
    {
      label: 'Confirm',
      onClick: () => console.log('Confirm')
    }
  ],
  duration: 10000000
})

Added new callback parameter in onClick function which through we can now pass the deleteToast function. And call it if it's needed. The function accepts delay as parameter to delete the toast.

Copy link
Member

@jamesgeorge007 jamesgeorge007 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, left a few comments. Also, we could rename the deleteToast method as part of the toast instance received in the onClick callback to dismiss to be consistent with the existing API.

packages/Toast.vue Outdated Show resolved Hide resolved
src/components/Others.vue Outdated Show resolved Hide resolved
src/components/Others.vue Outdated Show resolved Hide resolved
src/components/Types.vue Outdated Show resolved Hide resolved
packages/types.ts Show resolved Hide resolved
Copy link
Member

@jamesgeorge007 jamesgeorge007 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, left a few minor comments, not blockers per se, can be revisited separately.

packages/Toast.vue Show resolved Hide resolved
Comment on lines +294 to +296
setTimeout(() => {
emit('removeToast', props.toast)
}, TIME_BEFORE_UNMOUNT)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'll be good to obtain a reference to the timeout ID returned by the inner setTimeout call and clear it during the unmount phase.

setTimeout(() => {
emit('removeToast', props.toast)
}, TIME_BEFORE_UNMOUNT)
return timeoutId
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need not return the timeoutID since it's available in the global scope and consumed in the unmount life cycle hook.

Comment on lines +211 to +216
action: {
label: 'Confirm',
onClick: () => {
toast.dismiss()
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Referring to the toast instance from the onClick callback here can prevent closing other toasts.

@AndrewBastin AndrewBastin merged commit 79bb083 into main May 30, 2024
@AndrewBastin AndrewBastin deleted the feat/actions branch May 30, 2024 15:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants