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

syntetic events dispatched from Popup

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-11 15:39:45 +03:00
parent 2aabefb8ff
commit c996d521de
1 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,47 +2,53 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const FocusLock = require('react-focus-lock').default; const FocusLock = require('react-focus-lock').default;
const useDataset = require('stremio/common/useDataset');
const styles = require('./styles'); const styles = require('./styles');
const Popup = ({ open, direction, renderLabel, renderMenu, onCloseRequest }) => { const Popup = ({ open, direction, renderLabel, renderMenu, onCloseRequest, ...props }) => {
direction = ['top', 'bottom'].includes(direction) ? direction : null;
const dataset = useDataset(props);
const labelRef = React.useRef(null); const labelRef = React.useRef(null);
const [autoDirection, setAutoDirection] = React.useState(null); const [autoDirection, setAutoDirection] = React.useState(null);
const menuOnMouseDown = React.useCallback((event) => { const menuOnMouseDown = React.useCallback((event) => {
event.nativeEvent.closePopupPrevented = true; event.nativeEvent.closePopupPrevented = true;
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
const checkCloseEvent = (event) => { const onCloseEvent = (event) => {
if (typeof onCloseRequest === 'function') { if (!event.closePopupPrevented && typeof onCloseRequest === 'function') {
const closeEvent = {
type: 'close',
nativeEvent: event,
dataset: dataset
};
switch (event.type) { switch (event.type) {
case 'resize': case 'resize':
onCloseRequest(event); onCloseRequest(closeEvent);
break; break;
case 'keydown': case 'keydown':
if (event.key === 'Escape') { if (event.key === 'Escape') {
onCloseRequest(event); onCloseRequest(closeEvent);
} }
break; break;
case 'mousedown': case 'mousedown':
if (event.target !== document.documentElement && if (event.target !== document.documentElement && !labelRef.current.contains(event.target)) {
!labelRef.current.contains(event.target) && onCloseRequest(closeEvent);
!event.closePopupPrevented) {
onCloseRequest(event);
} }
break; break;
} }
} }
}; };
if (open) { if (open) {
window.addEventListener('resize', checkCloseEvent); window.addEventListener('resize', onCloseEvent);
window.addEventListener('keydown', checkCloseEvent); window.addEventListener('keydown', onCloseEvent);
window.addEventListener('mousedown', checkCloseEvent); window.addEventListener('mousedown', onCloseEvent);
} }
return () => { return () => {
window.removeEventListener('resize', checkCloseEvent); window.removeEventListener('resize', onCloseEvent);
window.removeEventListener('keydown', checkCloseEvent); window.removeEventListener('keydown', onCloseEvent);
window.removeEventListener('mousedown', checkCloseEvent); window.removeEventListener('mousedown', onCloseEvent);
}; };
}, [open, onCloseRequest]); }, [open, onCloseRequest, dataset]);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
if (open) { if (open) {
const documentRect = document.documentElement.getBoundingClientRect(); const documentRect = document.documentElement.getBoundingClientRect();