)
\ 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'));