Add value param in `onClose` listener about close action

[cmaycumber]

Thanks again for your support adding in the onClose listener.

Would it be possible to send an ENUM or something similar about the action that triggered the close. E.i allCloseModals, closeModal, a click on the overlay, etc. I noticed the animation listener returns the animated value, so it seems inline with the API.

We are currently using Next JS on web and handling some dynamic routes with this library. We're currently trying to close the modal via the back button by calling closeModal but this triggers are onClose method on that modal, which tries to navigate the user back when they click on the overlay to change URL; this results in two navigations when hitting back in the browser.

I understand this use case especially is pretty niche, let me know what you think.

[cmaycumber]

If it helps. I also don't mind opening a PR for it with some of your input.

[CharlesMangwa]

Hey @cmaycumber! I'd need some time to think about how to approach this one.

As you probably already know, it's possible to open and close modals from a variety of different sources (Hooks, HOC, even from outside React). That implies that all of these sources will have to be routed properly to be available here in StackItem.

This means for instance that the info of calling modalfy().closeModal() from outside React, will have to be available inside React in the current modal StackItem clean up function. Nothing impossible of course, might just require a bit of work to add that to Modalfy's custom state management. Will try to keep you posted!

In the meantime, I don't know if exploiting the current modal/route name and/or triggering events could help address that double callbacks situation.

[CharlesMangwa]

Hi @cmaycumber! I managed to come up with something a bit less complicated than what I was initially thinking of.

TLDR: starting from v3.2.0 you can now write the following in a modal component:

const handleClose: ModalOnCloseEventCallback = useCallback(
  closingAction => {
    console.log(`👋 Modal closed by: ${closingAction.type} • ${closingAction.origin}`)
  },
  [],
)

Where you'd have the following types:

type ModalOnCloseEventCallback = (closingAction: {
  type: ModalClosingActionName
  origin: ModalClosingActionOrigin
}) => void

type ModalClosingActionName = 'closeModal' | 'closeModals' | 'closeAllModals'

type ModalClosingActionOrigin = 'default' | 'fling' | 'backdrop'

Small detail to notice: onClose is triggered after the closing animation but before the modal is unmounted. For now, I didn't want to have multiple events there (ie: onCloseStart & onCloseEnd). So I went for the latter by default as there, we know for sure the animation is done and the modal is still mounted but not displayed anymore.

[cmaycumber]

Hi @cmaycumber! I managed to come up with something a bit less complicated than what I was initially thinking of.

TLDR: starting from v3.2.0 you can now write the following in a modal component:

const handleClose: ModalOnCloseEventCallback = useCallback(
  closingAction => {
    console.log(`👋 Modal closed by: ${closingAction.type} • ${closingAction.origin}`)
  },
  [],
)

Where you'd have the following types:

type ModalOnCloseEventCallback = (closingAction: {
  type: ModalClosingActionName
  origin: ModalClosingActionOrigin
}) => void

type ModalClosingActionName = 'closeModal' | 'closeModals' | 'closeAllModals'

type ModalClosingActionOrigin = 'default' | 'fling' | 'backdrop'

Small detail to notice: onClose is triggered after the closing animation but before the modal is unmounted. For now, I didn't want to have multiple events there (ie: onCloseStart & onCloseEnd). So I went for the latter by default as there, we know for sure the animation is done and the modal is still mounted but not displayed anymore.

This is awesome! Thanks so much