diff --git a/src/App/App.js b/src/App/App.js index 86ef2b1c2..fb8ad8217 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -2,7 +2,7 @@ const React = require('react'); const { Router } = require('stremio-router'); const { KeyboardNavigation, ServicesProvider } = require('stremio/services'); const routerViewsConfig = require('./routerViewsConfig'); -const styles = require('./styles'); +require('./styles'); const App = () => { const onPathNotMatch = React.useCallback(() => { @@ -18,7 +18,6 @@ const App = () => { { }, []); return ReactDOM.createPortal( -
{children}
+
{children}
, modalsContainer ); diff --git a/src/router/ModalsContainerContext/ModalsContainerProvider.js b/src/router/ModalsContainerContext/ModalsContainerProvider.js index fca8b47f4..00e9c6928 100644 --- a/src/router/ModalsContainerContext/ModalsContainerProvider.js +++ b/src/router/ModalsContainerContext/ModalsContainerProvider.js @@ -2,18 +2,17 @@ const React = require('react'); const PropTypes = require('prop-types'); const ModalsContainerContext = require('./ModalsContainerContext'); -const ModalsContainerProvider = ({ containerClassName, children }) => { +const ModalsContainerProvider = ({ children }) => { const [container, setContainer] = React.useState(null); return ( {container instanceof HTMLElement ? children : null} -
+
); }; ModalsContainerProvider.propTypes = { - containerClassName: PropTypes.string, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node diff --git a/src/router/Router/Route.js b/src/router/Router/Route.js index 12fe85bf9..5156b113c 100644 --- a/src/router/Router/Route.js +++ b/src/router/Router/Route.js @@ -2,7 +2,6 @@ const React = require('react'); const PropTypes = require('prop-types'); const { FocusableProvider } = require('../FocusableContext'); const { ModalsContainerProvider } = require('../ModalsContainerContext'); -const styles = require('./styles'); const Route = ({ children }) => { const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => { @@ -12,10 +11,10 @@ const Route = ({ children }) => { return modalsContainer.childElementCount === 0; }, []); return ( -
- +
+ -
{children}
+
{children}
diff --git a/src/router/Router/Router.js b/src/router/Router/Router.js index 45f96a771..c12fd80b9 100644 --- a/src/router/Router/Router.js +++ b/src/router/Router/Router.js @@ -1,12 +1,10 @@ const React = require('react'); const PropTypes = require('prop-types'); -const classnames = require('classnames'); const UrlUtils = require('url'); const { RoutesContainerProvider } = require('../RoutesContainerContext'); const Route = require('./Route'); -const styles = require('./styles'); -const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => { +const Router = ({ homePath, viewsConfig, onPathNotMatch }) => { const [views, setViews] = React.useState(() => { return Array(viewsConfig.length).fill({ routeConfig: null, @@ -92,7 +90,7 @@ const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => { }; }, []); return ( - + { views .filter(({ routeConfig }) => routeConfig !== null) @@ -107,7 +105,6 @@ const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => { }; Router.propTypes = { - className: PropTypes.string, homePath: PropTypes.string, onPathNotMatch: PropTypes.func, viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({ diff --git a/src/router/Router/styles.less b/src/router/Router/styles.less deleted file mode 100644 index c161c73fd..000000000 --- a/src/router/Router/styles.less +++ /dev/null @@ -1,42 +0,0 @@ -.router-container { - position: relative; - z-index: 0; - - .route-container { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 0; - - &:not(:last-child) { - display: none; - } - - .route-content { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 0; - overflow: hidden; - } - - .modals-container { - width: 0; - height: 0; - - >* { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - overflow: hidden; - } - } - } -} \ No newline at end of file diff --git a/src/router/RoutesContainerContext/RoutesContainerProvider.js b/src/router/RoutesContainerContext/RoutesContainerProvider.js index 0359b0645..7a9c689c4 100644 --- a/src/router/RoutesContainerContext/RoutesContainerProvider.js +++ b/src/router/RoutesContainerContext/RoutesContainerProvider.js @@ -2,11 +2,11 @@ const React = require('react'); const PropTypes = require('prop-types'); const RoutesContainerContext = require('./RoutesContainerContext'); -const RoutesContainerProvider = ({ containerClassName, children }) => { +const RoutesContainerProvider = ({ children }) => { const [container, setContainer] = React.useState(null); return ( -
+
{container instanceof HTMLElement ? children : null}
@@ -14,7 +14,6 @@ const RoutesContainerProvider = ({ containerClassName, children }) => { }; RoutesContainerProvider.propTypes = { - containerClassName: PropTypes.string, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node diff --git a/src/router/styles.css b/src/router/styles.css new file mode 100644 index 000000000..50818ae0e --- /dev/null +++ b/src/router/styles.css @@ -0,0 +1,42 @@ +.router-container { + position: relative; + z-index: 0; +} + +.router-container .route-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 0; +} + +.router-container .route-container:not(:last-child) { + display: none; +} + +.router-container .route-container .route-content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 0; + overflow: hidden; +} + +.router-container .route-container .modals-container { + width: 0; + height: 0; +} + +.router-container .route-container .modals-container .modal-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + overflow: hidden; +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 5f5229746..7bb799fa4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -44,7 +44,8 @@ module.exports = { importLoaders: 2, modules: { getLocalIdent: (context, localIdentName, localName, options) => { - if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes'))) { + if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes')) || + context.resourcePath.startsWith(path.resolve(__dirname, 'src/App'))) { localIdentName = '[local]'; } else { localIdentName = '[local]-[hash:base64:5]';