rename page into screen

FreakDev · Oct 26, 2017 · 2f0e78f · 2f0e78f
1 parent b774be2
commit 2f0e78f
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 64 deletions.
diff --git a/src/ForbiddenPage.js → src/ForbiddenScreen.js b/src/ForbiddenPage.js → src/ForbiddenScreen.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default ({ children, ...props }) => (
-    <div style={ props.style } className="page forbidden">
+    <div style={ props.style } className="screen forbidden">
         { children }
     </div>
 )
diff --git a/src/Page.js → src/Screen.js b/src/Page.js → 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 (
-            <div style={ props.style } className="page">
+            <div style={ props.style } className="screen">
                 { props.children }
             </div>
         )
     }
 }
 
-export default Page;
+export default Screen;
diff --git a/src/PageManager.css → src/ScreenManager.css b/src/PageManager.css → src/ScreenManager.css
@@ -1,4 +1,4 @@
-.page-container {
+.screen-container {
   position: absolute;
   top: 0;
   left: 0;
@@ -7,15 +7,15 @@
   overflow: hidden;
 }
 
-.page-container .page-inner {
+.screen-container .screen-inner {
   position: absolute;
   top: 0;
   left: 0;  
   height: 100%;
   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%);
 }
diff --git a/src/PageManager.js → src/ScreenManager.js b/src/PageManager.js → 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,57 +63,57 @@ 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 (
 				<Route key={i} exact={exact} path={path} render={() => {
 					if (!this.props.authCheck || (!page.props.protected || this.props.authCheck()))
 						return React.cloneElement(page, { ...props })
 					else
-						return forbiddenPage || null
+						return forbiddenScreen || null
 				} } />
 			)
 		})
 
 		return (
-			<div className="page-container">
-				<section className={"page-inner"}>
+			<div className="screen-container">
+				<section className={"screen-inner"}>
 					<Switch location={location}>
 					{
-						renderPages(notAnimatedPages)
+						renderScreens(notAnimatedScreens)
 					}
 					</Switch>
 				</section>
 				<TransitionGroup component="div" className={(this.state.direction >= 0 ? "right" : "left")}>
 					<CSSTransition
 						key={currentKey}
 						timeout={timeout}
-						classNames="page"
+						classNames="screen"
 						appear
 					>
-						<section className={"page-inner"}>
+						<section className={"screen-inner"}>
 							<Switch location={location}>
 							{
-								renderPages(animatedPages)
+								renderScreens(animatedScreens)
 							}
 							</Switch>	
 						</section>
 					</CSSTransition>
 				</TransitionGroup>
 				{ 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 ? (
 				<CSSTransition
@@ -129,11 +129,11 @@ export class PageManager extends Component {
 	}
 }
 
-const PageManagerWithRouter = withRouter(PageManager)
+const ScreenManagerWithRouter = withRouter(ScreenManager)
 
 export default props => {
 	return (
 	<Router>
-		<PageManagerWithRouter { ...props } />
+		<ScreenManagerWithRouter { ...props } />
 	</Router>
 )};
diff --git a/src/SplashScreen.js b/src/SplashScreen.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default ({ children, ...props }) => (
-    <div style={ props.style } className="page splash">
+    <div style={ props.style } className="screen splash">
         { children }
     </div>
 )
diff --git 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(
 <div>
-    <PageManager 
+    <ScreenManager 
         authCheck={() => {
             // return auth status
             return true
         }}
     >
         <SplashScreen style={{ background: 'black' }}  />
-        <Page style={{ background: 'yellow' }} name="splash" exact path="/" noAnim noNavbar hideNavbar >
+        <Screen style={{ background: 'yellow' }} name="splash" exact path="/" noAnim noNavbar hideNavbar >
+            <h1>Login</h1>
+        </Screen>
+        <Screen style={{ background: 'yellow' }} name="splash" exact path="/prehome" noAnim noNavbar hideNavbar >
             <h1>Splash</h1>
-        </Page>
-        <Page style={{ background: 'cyan' }} name="home" exact path="/home">
+        </Screen>
+        <Screen protected style={{ background: 'cyan' }} name="home" exact path="/home">
             <h1>Home</h1>
-        </Page>
-        <Page protected style={{ background: 'green' }} name="page 2" exact path="/two">
-            <h1>page 2</h1>
-        </Page>
-        <Page style={{ background: 'blue' }} name="page 3" exact path="/three">
-            <h1>Page 3</h1>
-        </Page>
-        <ForbiddenPage style={{ background: 'red' }} name="forbidden" exact path="/forbidden">
+        </Screen>
+        <Screen protected style={{ background: 'green' }} name="Screen 2" exact path="/chat">
+            <h1>Screen 2</h1>
+        </Screen>
+        <Screen protected style={{ background: 'blue' }} name="Screen 3" exact path="/settings">
+            <h1>Screen 3</h1>
+        </Screen>
+        <ForbiddenScreen style={{ background: 'red' }} name="forbidden" exact path="/forbidden">
             <Redirect to={{ pathname:"/" }} />
-        </ForbiddenPage>        
+        </ForbiddenScreen>        
         <NavigationBar position="bottom" />
-    </PageManager>
+    </ScreenManager>
 </div>
 , document.getElementById('root'));