minutemailer / react-popup

React popup component
http://minutemailer.github.io/react-popup/
MIT License
208 stars 71 forks source link

How to wipe the queue #16

Closed MalinnaLeach closed 7 years ago

MalinnaLeach commented 7 years ago

I hope this isn't a silly question, but I'm creating an app with lots of clickable elements that are layered on a page, that can each fire up their own popup. The problem I have is that when a click is on an item with other items underneath it, the correct menu pops up first, but then there are multiple menus queued behind it that we don't need.

Is there any way that we can clear the queue when we hit OK? Or just change it so that popups are not queued? Thanks,

Malinna

tbleckert commented 7 years ago

I'm not sure that I understand the actual problem. We made this to mimic the behavior of the built in javascript alerts. So when you close one popup, the next one in the queue pops up. Without the queue handler, the current visible popup would just be replaced if a new popup is triggered. The only other option is to allow multiple popups to be open at the same time, but that would require draggable windows. Seems a bit messy.

At this point we do not have a way to clear the queue but that would actually be a good feature.

I'm sorry if this is not so helpful. If you could give me a bit more information I can give it another try.

jwalker14 commented 7 years ago

I have maybe a similar issue. I'm using react-router and I'm using the popup as a calendar popup. The user can click to view more of the event that has popped up. When the page transitions to the single event page the popup is still there. I think I'm wondering if there is also a way to wipe the queue or close all popups or something.

Thanks! J

tbleckert commented 7 years ago

@jwalker14 You should call Popup.close() when the page is transitioning. But yeah, if you have more popups in the queue a new one will be displayed when you call close. I will extend the API with functionality to wipe the queue.

tbleckert commented 7 years ago

clearQueue function has been added in 0.6.0. You still need to close the currently visible popup if any. For example:

import Popup from 'react-popup';

Popup.clearQueue();
Popup.close();

Remember to clear the queue before you call close, otherwise a new popup might be displayed if the queue isn't empty already.