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

support for nested Popups implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-09 23:45:16 +03:00
parent 10f5d31e44
commit f8fa18f51c
1 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,24 +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) => {
event.nativeEvent.popupLabels = [
...(event.nativeEvent.popupLabels || []),
labelContainerRef.current
];
}, []);
React.useEffect(() => {
const windowOnClick = (event) => {
if ((labelContainerRef.current !== null && labelContainerRef.current.contains(event.target)) ||
(menuContainerRef.current !== null && menuContainerRef.current.contains(event.target))) {
return;
if (!Array.isArray(event.popupLabels) || !event.popupLabels.includes(labelContainerRef.current)) {
onCloseRequest(event);
}
onCloseRequest(event);
};
if (open) {
window.addEventListener('click', windowOnClick, true);
window.addEventListener('click', windowOnClick);
window.addEventListener('resize', onCloseRequest);
window.addEventListener('scroll', onCloseRequest, true);
window.addEventListener('resize', onCloseRequest, true);
}
return () => {
window.removeEventListener('click', windowOnClick, true);
window.removeEventListener('click', windowOnClick);
window.removeEventListener('resize', onCloseRequest);
window.removeEventListener('scroll', onCloseRequest, true);
window.removeEventListener('resize', onCloseRequest, true);
};
}, [open, onCloseRequest]);
React.useEffect(() => {
@ -90,14 +93,18 @@ const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
}, [open]);
return (
<React.Fragment>
{renderLabel({ ref: labelContainerRef })}
{renderLabel({
ref: labelContainerRef,
onClick: popupOnClick
})}
{
open ?
<Modal className={styles['popup-modal-container']}>
<div ref={menuContainerRef} className={styles['menu-container']}>
{renderMenu({
ref: menuContentContainerRef,
className: styles['menu-content-container']
className: styles['menu-content-container'],
onClick: popupOnClick
})}
</div>
</Modal>