Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-14 13:10:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Popup closes only when not clicked/scrolled from within

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-12 19:25:29 +03:00
parent f2eb4535af
commit ee9bbc4ef4
1 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/common/Popup/Popup.js
View file

@ -7,27 +7,27 @@ const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
const labelContainerRef = React.useRef(null);
const menuContainerRef = React.useRef(null);
const menuContentContainerRef = React.useRef(null);
const popupOnClick = React.useCallback((event) => {
const attachPopupLabels = React.useCallback((event) => {
event.nativeEvent.popupLabels = [
...(event.nativeEvent.popupLabels || []),
labelContainerRef.current
];
}, []);
React.useEffect(() => {
const windowOnClick = (event) => {
const checkPopupLabels = (event) => {
if (!Array.isArray(event.popupLabels) || !event.popupLabels.includes(labelContainerRef.current)) {
onCloseRequest(event);
}
};
if (open) {
window.addEventListener('click', windowOnClick);
window.addEventListener('click', checkPopupLabels);
window.addEventListener('scroll', checkPopupLabels);
window.addEventListener('resize', onCloseRequest);
window.addEventListener('scroll', onCloseRequest, true);
}
return () => {
window.removeEventListener('click', windowOnClick);
window.removeEventListener('click', checkPopupLabels);
window.removeEventListener('scroll', checkPopupLabels);
window.removeEventListener('resize', onCloseRequest);
window.removeEventListener('scroll', onCloseRequest, true);
};
}, [open, onCloseRequest]);
React.useEffect(() => {
@ -95,16 +95,15 @@ const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
<React.Fragment>
{renderLabel({
ref: labelContainerRef,
onClick: popupOnClick
onClick: attachPopupLabels
})}
{
open ?
<Modal className={styles['popup-modal-container']}>
<div ref={menuContainerRef} className={styles['menu-container']}>
<div ref={menuContainerRef} className={styles['menu-container']} onScroll={attachPopupLabels} onClick={attachPopupLabels}>
{renderMenu({
ref: menuContentContainerRef,
className: styles['menu-content-container'],
onClick: popupOnClick
className: styles['menu-content-container']
})}
</div>
</Modal>