Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'master' of github.com:Stremio/stremio-web

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-29 19:23:38 +03:00
commit 2cfe9071d4
6 changed files with 24 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/router/FocusableContext/FocusableProvider.js
View file

@ -4,32 +4,35 @@ const { useRoutesContainer } = require('../RoutesContainerContext');
const { useModalsContainer } = require('../ModalsContainerContext');
const FocusableContext = require('./FocusableContext');
const FocusableProvider = ({ children, onRoutesContainerChildrenChange, onModalsContainerChildrenChange }) => {
const FocusableProvider = ({ children, onRoutesContainerDomTreeChange, onModalsContainerDomTreeChange }) => {
const routesContainer = useRoutesContainer();
const modalsContainer = useModalsContainer();
const contentContainerRef = React.useRef(null);
const [focusable, setFocusable] = React.useState(true);
const [focusable, setFocusable] = React.useState(false);
React.useEffect(() => {
const onContainersChildrenChange = () => {
setFocusable(
onRoutesContainerChildrenChange({
const onDomTreeChange = () => {
const focusable =
onRoutesContainerDomTreeChange({
routesContainer: routesContainer,
contentContainer: contentContainerRef.current
})
&&
onModalsContainerChildrenChange({
onModalsContainerDomTreeChange({
modalsContainer: modalsContainer,
contentContainer: contentContainerRef.current
})
);
});
setFocusable(focusable);
};
routesContainer.addEventListener('childrenchange', onContainersChildrenChange);
modalsContainer.addEventListener('childrenchange', onContainersChildrenChange);
const routesContainerDomTreeObserver = new MutationObserver(onDomTreeChange);
const modalsContainerDomTreeObserver = new MutationObserver(onDomTreeChange);
routesContainerDomTreeObserver.observe(routesContainer, { childList: true });
modalsContainerDomTreeObserver.observe(modalsContainer, { childList: true });
onDomTreeChange();
return () => {
routesContainer.removeEventListener('childrenchange', onContainersChildrenChange);
modalsContainer.removeEventListener('childrenchange', onContainersChildrenChange);
routesContainerDomTreeObserver.disconnect();
modalsContainerDomTreeObserver.disconnect();
};
}, [routesContainer, modalsContainer, onRoutesContainerChildrenChange, onModalsContainerChildrenChange]);
}, [routesContainer, modalsContainer, onRoutesContainerDomTreeChange, onModalsContainerDomTreeChange]);
React.useEffect(() => {
if (focusable && !contentContainerRef.current.contains(document.activeElement)) {
contentContainerRef.current.focus();
@ -47,8 +50,8 @@ const FocusableProvider = ({ children, onRoutesContainerChildrenChange, onModals
FocusableProvider.propTypes = {
children: PropTypes.node.isRequired,
onModalsContainerChildrenChange: PropTypes.func.isRequired,
onRoutesContainerChildrenChange: PropTypes.func.isRequired
onModalsContainerDomTreeChange: PropTypes.func.isRequired,
onRoutesContainerDomTreeChange: PropTypes.func.isRequired
};
module.exports = FocusableProvider;

6
src/router/Modal/Modal.js
View file

@ -7,14 +7,14 @@ const { useModalsContainer } = require('../ModalsContainerContext');
const Modal = ({ className, children }) => {
const modalsContainer = useModalsContainer();
const onRoutesContainerChildrenChange = React.useCallback(({ routesContainer, contentContainer }) => {
const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
return routesContainer.lastElementChild === contentContainer.parentElement.parentElement;
}, []);
const onModalsContainerChildrenChange = React.useCallback(({ modalsContainer, contentContainer }) => {
const onModalsContainerDomTreeChange = React.useCallback(({ modalsContainer, contentContainer }) => {
return modalsContainer.lastElementChild === contentContainer;
}, []);
return ReactDOM.createPortal(
<FocusableProvider onRoutesContainerChildrenChange={onRoutesContainerChildrenChange} onModalsContainerChildrenChange={onModalsContainerChildrenChange}>
<FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
<div className={classnames(className, 'modal-container')}>{children}</div>
</FocusableProvider>,
modalsContainer

2
src/router/ModalsContainerContext/ModalsContainerProvider.js
View file

@ -1,11 +1,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const useChildrenChangeEffect = require('../useChildrenChangeEffect');
const ModalsContainerContext = require('./ModalsContainerContext');
const ModalsContainerProvider = ({ children }) => {
const [container, setContainer] = React.useState(null);
useChildrenChangeEffect(container, children);
return (
<ModalsContainerContext.Provider value={container}>
{container instanceof HTMLElement ? children : null}

6
src/router/Router/Route.js
View file

@ -4,16 +4,16 @@ const { FocusableProvider } = require('../FocusableContext');
const { ModalsContainerProvider } = require('../ModalsContainerContext');
const Route = ({ children }) => {
const onRoutesContainerChildrenChange = React.useCallback(({ routesContainer, contentContainer }) => {
const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
return routesContainer.lastElementChild === contentContainer.parentElement;
}, []);
const onModalsContainerChildrenChange = React.useCallback(({ modalsContainer }) => {
const onModalsContainerDomTreeChange = React.useCallback(({ modalsContainer }) => {
return modalsContainer.childElementCount === 0;
}, []);
return (
<div className={'route-container'}>
<ModalsContainerProvider>
<FocusableProvider onRoutesContainerChildrenChange={onRoutesContainerChildrenChange} onModalsContainerChildrenChange={onModalsContainerChildrenChange}>
<FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
<div className={'route-content'}>{children}</div>
</FocusableProvider>
</ModalsContainerProvider>

2
src/router/RoutesContainerContext/RoutesContainerProvider.js
View file

@ -1,11 +1,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const useChildrenChangeEffect = require('../useChildrenChangeEffect');
const RoutesContainerContext = require('./RoutesContainerContext');
const RoutesContainerProvider = ({ children }) => {
const [container, setContainer] = React.useState(null);
useChildrenChangeEffect(container, children);
return (
<RoutesContainerContext.Provider value={container}>
<div ref={setContainer} className={'routes-container'}>

14
src/router/useChildrenChangeEffect.js
View file

@ -1,14 +0,0 @@
const React = require('react');
const useChildrenChangeEffect = (parent, children) => {
React.useEffect(() => {
if (parent instanceof HTMLElement) {
parent.dispatchEvent(new CustomEvent('childrenchange', {
bubbles: false,
cancelable: false
}));
}
}, [parent, children]);
};
module.exports = useChildrenChangeEffect;