implement not animated page + no navbar page

FreakDev · Oct 26, 2017 · 09d9587 · 09d9587
1 parent a8db803
commit 09d9587
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/src/NavigationBar.js b/src/NavigationBar.js
@@ -11,7 +11,7 @@ export default ({ pages, position, ...props }) => {
                 props.render(pages) :
                 (
                 <ul>{
-                    pages.map((page, k) => {
+                    Array.isArray(pages) && pages.map((page, k) => {
                         return (
                             <li key={k}>
                                 <Link to={ page.path }>{

diff --git a/src/PageManager.js b/src/PageManager.js
@@ -37,18 +37,12 @@ export class PageManager extends Component {
 		const { children, location } = this.props
 		const currentKey = location.pathname.split("/")[1] || "/";
 		const timeout = { enter: 500, exit: 500 };
-		let pages = []
-		const routes = children.filter( child => {
-			if (child.type === Page) {
-				pages.push({ name: child.props.name, path: child.props.path })
-				return child
-			} else {
-				return null
-			}
-		})
-		const navbars = children.filter(child => {
-			return child.type === NavigationBar
-		})
+		const routes = children.filter( c => c.type === Page )
+		const animatedPages = children.filter( r => !r.props.noAnim )
+		const notAnimatedPages = children.filter( r => r.props.noAnim )
+		const pages = routes.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
+		const navbars = children.filter(child => child.type === NavigationBar)
+
 		return (
 			<TransitionGroup component="div" className={"page-container " + (this.state.direction >= 0 ? "right" : "left")}>
 				<CSSTransition
@@ -60,17 +54,29 @@ export class PageManager extends Component {
 					<section className={"page-inner"}>
 						<Switch location={location}>
 						{
-							React.Children.map(routes, route => {
-								const { exact, path, ...props } = route.props
+							animatedPages.map(page => {
+								const { exact, path, ...props } = page.props
 								return (
-									<Route exact={exact} path={path} render={() => React.cloneElement(route, { ...props })} />											
+									<Route exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
 								)
 							})
 						}
 						</Switch>
 					</section>
 				</CSSTransition>
-				{ React.Children.map(navbars, (navbar) => {
+				<section className={"page-inner"}>
+					<Switch location={location}>
+					{
+						notAnimatedPages.map(page => {
+							const { exact, path, ...props } = page.props
+							return (
+								<Route exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
+							)
+						})
+					}
+					</Switch>
+				</section>
+				{ navbars.map((navbar) => {
 					return React.cloneElement(navbar, { pages })
 				}) }
 			</TransitionGroup>								
@@ -80,8 +86,9 @@ export class PageManager extends Component {
 
 const PageManagerWithRouter = withRouter(PageManager)
 
-export default props => (
+export default props => {
+	return (
 	<Router>
 		<PageManagerWithRouter { ...props } />
 	</Router>
-);
+)};
diff --git a/src/index.js b/src/index.js
@@ -9,10 +9,19 @@ import NavigationBar from './NavigationBar';
 
 ReactDOM.render(
 <div>
-    <PageManager>
-        <Page style={{ background: 'red' }} name="home" exact path="/" />
-        <Page style={{ background: 'green' }} name="page 2" exact path="/two" />
-        <Page style={{ background: 'blue' }} name="page 3" exact path="/three" />
+    <PageManager noRouter>
+        <Page style={{ background: 'yellow' }} name="splash" exact path="/splash" noAnim noNavbar >
+            <h1>Splash</h1>
+        </Page>
+        <Page style={{ background: 'red' }} name="home" exact path="/">
+            <h1>Home</h1>
+        </Page>
+        <Page 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>
         <NavigationBar position="bottom" />
     </PageManager>
 </div>