diff --git a/src/ForbiddenPage.js b/src/ForbiddenScreen.js similarity index 63% rename from src/ForbiddenPage.js rename to src/ForbiddenScreen.js index d6877e0..82c597d 100644 --- a/src/ForbiddenPage.js +++ b/src/ForbiddenScreen.js @@ -1,7 +1,7 @@ import React from 'react' export default ({ children, ...props }) => ( -
+
{ children }
) \ No newline at end of file diff --git a/src/Page.js b/src/Screen.js similarity index 59% rename from src/Page.js rename to src/Screen.js index ca6e80e..6cb9875 100644 --- a/src/Page.js +++ b/src/Screen.js @@ -1,14 +1,14 @@ import React, { Component } from 'react'; -export class Page extends Component { +export class Screen extends Component { render() { const props = this.props return ( -
+
{ props.children }
) } } -export default Page; +export default Screen; diff --git a/src/PageManager.css b/src/ScreenManager.css similarity index 66% rename from src/PageManager.css rename to src/ScreenManager.css index 6d16435..c088490 100644 --- a/src/PageManager.css +++ b/src/ScreenManager.css @@ -1,4 +1,4 @@ -.page-container { +.screen-container { position: absolute; top: 0; left: 0; @@ -7,7 +7,7 @@ overflow: hidden; } -.page-container .page-inner { +.screen-container .screen-inner { position: absolute; top: 0; left: 0; @@ -15,7 +15,7 @@ width: 100%; } -.page { +.screen { position: relative; top: 0; left: 0; @@ -44,55 +44,55 @@ -.page-appear-active, -.page-enter-active { +.screen-appear-active, +.screen-enter-active { transition: transform 0.5s; } -.page-exit { +.screen-exit { transition: transform 0.5s; transform: translate3d(0, 0, 0); } -.left .page-appear, -.left .page-enter { +.left .screen-appear, +.left .screen-enter { transform: translate3d(-100%, 0, 0); } -.left .page-appear-active, -.left .page-enter-active { +.left .screen-appear-active, +.left .screen-enter-active { transform: translate3d(0, 0, 0) } -.left .page-exit, -.left .page-exit { +.left .screen-exit, +.left .screen-exit { transform: translate3d(0, 0, 0) } -.left .page-exit-active { +.left .screen-exit-active { transform: translate3d(100%, 0, 0); } -.right .page-appear, -.right .page-enter { +.right .screen-appear, +.right .screen-enter { transform: translateX(100%); } -.right .page-appear-active, -.right .page-enter-active { +.right .screen-appear-active, +.right .screen-enter-active { transform: translateX(0); } -.right .page-exit { +.right .screen-exit { transform: translateX(0); } -.right .page-exit-active { +.right .screen-exit-active { transform: translateX(-100%); } \ No newline at end of file diff --git a/src/PageManager.js b/src/ScreenManager.js similarity index 68% rename from src/PageManager.js rename to src/ScreenManager.js index d1f2652..fc42559 100644 --- a/src/PageManager.js +++ b/src/ScreenManager.js @@ -5,16 +5,16 @@ import { BrowserRouter as Router, Route } from 'react-router-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group' -import Page from './Page' +import Screen from './Screen' import NavigationBar from './NavigationBar' -import ForbiddenPage from './ForbiddenPage' +import ForbiddenScreen from './ForbiddenScreen' import SplashScreen from './SplashScreen' -import './PageManager.css'; +import './ScreenManager.css'; const timeout = { enter: 500, exit: 500 }; -export class PageManager extends Component { +export class ScreenManager extends Component { constructor(props) { super(props) @@ -42,16 +42,16 @@ export class PageManager extends Component { } componentWillReceiveProps(nextProps) { - const findPage = (ref, elem) => { + const findScreen = (ref, elem) => { return elem.indexOf(ref) === 0; }; const pageOrder = React.Children.map(this.props.children, (child) => child.props.path) let indexCurrent = pageOrder.findIndex( - findPage.bind(this, this.props.location.pathname) + findScreen.bind(this, this.props.location.pathname) ); let indexNext = pageOrder.findIndex( - findPage.bind(this, nextProps.location.pathname) + findScreen.bind(this, nextProps.location.pathname) ); this.setState({ @@ -63,36 +63,36 @@ export class PageManager extends Component { const { children, location } = this.props const currentKey = location.pathname.split("/")[1] || "/"; - const pages = children.filter( c => c.type === Page ) + const pages = children.filter( c => c.type === Screen ) const navbars = children.filter(child => child.type === NavigationBar ) - const forbiddenPage = children.find( c => c.type === ForbiddenPage ) + const forbiddenScreen = children.find( c => c.type === ForbiddenScreen ) const splashScreen = children.find( c => c.type === SplashScreen ) - const animatedPages = pages.filter( r => !r.props.noAnim ) - const notAnimatedPages = pages.filter( r => r.props.noAnim ) + const animatedScreens = pages.filter( r => !r.props.noAnim ) + const notAnimatedScreens = pages.filter( r => r.props.noAnim ) const hideNavbarPath = pages.filter( r => r.props.hideNavbar ).map(r => r.props.path) - const navbarPageInfos = pages.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path })) + const navbarScreenInfos = pages.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path })) - const renderPages = (pages) => pages.map((page, i) => { + const renderScreens = (pages) => pages.map((page, i) => { const { exact, path, ...props } = page.props return ( { if (!this.props.authCheck || (!page.props.protected || this.props.authCheck())) return React.cloneElement(page, { ...props }) else - return forbiddenPage || null + return forbiddenScreen || null } } /> ) }) return ( -
-
+
+
{ - renderPages(notAnimatedPages) + renderScreens(notAnimatedScreens) }
@@ -100,20 +100,20 @@ export class PageManager extends Component { -
+
{ - renderPages(animatedPages) + renderScreens(animatedScreens) }
{ hideNavbarPath.indexOf(location.pathname) === -1 && navbars.map((navbar, k) => { - return React.cloneElement(navbar, { pages: navbarPageInfos, key: k }) + return React.cloneElement(navbar, { pages: navbarScreenInfos, key: k }) }) } { this.state.renderSplash ? ( { return ( - + )}; diff --git a/src/SplashScreen.js b/src/SplashScreen.js index 2fbfb49..d911b24 100644 --- a/src/SplashScreen.js +++ b/src/SplashScreen.js @@ -1,7 +1,7 @@ import React from 'react' export default ({ children, ...props }) => ( -
+
{ children }
) \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4c62112..66fc969 100644 --- a/src/index.js +++ b/src/index.js @@ -5,37 +5,40 @@ import { Redirect } from 'react-router-dom'; import './index.css' -import PageManager from './PageManager' -import Page from './Page' +import ScreenManager from './ScreenManager' +import Screen from './Screen' import NavigationBar from './NavigationBar' -import ForbiddenPage from './ForbiddenPage' +import ForbiddenScreen from './ForbiddenScreen' import SplashScreen from './SplashScreen' ReactDOM.render(
- { // return auth status return true }} > - + +

Login

+
+

Splash

-
- + +

Home

-
- -

page 2

-
- -

Page 3

-
- + + +

Screen 2

+
+ +

Screen 3

+
+ -
+ -
+
, document.getElementById('root'));