Merge pull request #11 from Zetoff/feature/making-layout-more-flexible

- improved API
- added templates

Author: PolGuixe

src/components/NavBar/NavBar.jsx renamed to src/components/AppBar/AppBar.jsx

@@ -3,26 +3,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
-import AppBar from 'material-ui/AppBar';
+import DefaultAppBar from 'material-ui/AppBar';
 
 import styles from './styles';
 
-class NavBar extends React.PureComponent {
+class AppBar extends React.PureComponent {
   static propTypes = {
-    classes: PropTypes.shape({}),
     children: PropTypes.element,
     navbarPostion: PropTypes.string,
     color: PropTypes.string,
   };
 
   render() {
-    const { children, navbarPostion, classes, color, ...other } = this.props;
+    const { children, navbarPostion, color, ...other } = this.props;
     return (
-      <AppBar position={navbarPostion} color={color}>
+      <DefaultAppBar position={navbarPostion} color={color}>
         {React.cloneElement(children, { ...other })}
-      </AppBar>
+      </DefaultAppBar>
     );
   }
 }
 
-export default withStyles(styles)(NavBar);
+export default withStyles(styles)(AppBar);

src/components/AppBar/index.js

@@ -0,0 +1,3 @@
+import AppBar from './AppBar';
+
+export default AppBar;

src/components/NavBar/styles.js renamed to src/components/AppBar/styles.js

@@ -7,23 +7,24 @@ import controllable from 'react-controllables';
 
 import styles from './styles';
 
-import NavBar from '../NavBar';
+import AppBar from '../AppBar';
 import Footer from '../Footer';
 
 // TODO create Layout Library
 
 class Layout extends React.PureComponent {
   static propTypes = {
     classes: PropTypes.shape({}),
+    overrideClasses: PropTypes.shape({}),
     children: PropTypes.element.isRequired,
     navbarPostion: PropTypes.string,
     stickyFooter: PropTypes.bool,
     footerContent: PropTypes.element,
-    navBarContent: PropTypes.element,
+    appBarContent: PropTypes.element,
     drawerOpen: PropTypes.bool.isRequired,
     onDrawerOpenChange: PropTypes.func,
     drawerContent: PropTypes.element,
-    navBarProps: PropTypes.shape({}),
+    appBarProps: PropTypes.shape({}),
     drawerProps: PropTypes.shape({}),
     footerProps: PropTypes.shape({}),
   };
@@ -49,19 +50,22 @@ class Layout extends React.PureComponent {
 
   render() {
     const {
-      classes,
+      classes: defaultClasses,
+      overrideClasses,
       children,
       navbarPostion,
       stickyFooter,
       footerContent,
-      navBarContent,
+      appBarContent,
       drawerContent,
       drawerOpen,
-      navBarProps,
+      appBarProps,
       drawerProps,
       footerProps,
     } = this.props;
 
+    const classes = { ...defaultClasses, ...overrideClasses };
+
     const mainClassnames = classNames(
       classes.main,
       { [`${classes.mainFixedNavbar}`]: navbarPostion === 'fixed' },
@@ -70,9 +74,9 @@ class Layout extends React.PureComponent {
 
     return (
       <div className={classes.layout}>
-        <NavBar {...navBarProps} onIconClick={this.toggleDrawer}>
-          {navBarContent}
-        </NavBar>
+        <AppBar {...appBarProps} onIconClick={this.toggleDrawer}>
+          {appBarContent}
+        </AppBar>
         {drawerContent ? (
           <Drawer {...drawerProps} open={drawerOpen} onRequestClose={this.handleDrawerClose}>
             {drawerContent}

src/components/Layout/Layout.jsx

@@ -1,10 +1,10 @@
 import Layout from './components/Layout';
 
-export { default as AppBar } from './components/NavBar';
+export { default as AppBar } from './components/AppBar';
 export { default as Footer } from './components/Footer';
 
-// I am changing the name from NavBar to AppBar
-export { default as BasicAppBar } from './templates/NavBar/BasicNavBar';
+export { default as BasicAppBar } from './templates/AppBar/BasicNavBar';
+export { default as TwoRowsAppBar } from './templates/AppBar/TwoRowsAppBar';
 export { default as BasicFooter } from './templates/Footer/BasicFooter';
 export { default as BasicDrawer } from './templates/Drawer/BasicDrawer';
 

src/components/NavBar/index.js

@@ -0,0 +1,71 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Toolbar from 'material-ui/Toolbar';
+import Grid from 'material-ui/Grid';
+import { withStyles } from 'material-ui/styles';
+
+import styles from './styles';
+
+class TwoRowsAppBar extends PureComponent {
+  static propTypes = {
+    classes: PropTypes.shape({}),
+    topLeftContent: PropTypes.oneOf(PropTypes.element, PropTypes.arrayOf(PropTypes.element)),
+    topCenterContent: PropTypes.oneOf(PropTypes.element, PropTypes.arrayOf(PropTypes.element)),
+    topRightContent: PropTypes.oneOf(PropTypes.element, PropTypes.arrayOf(PropTypes.element)),
+    bottomLeftContent: PropTypes.oneOf(PropTypes.element, PropTypes.arrayOf(PropTypes.element)),
+    bottomCenterContent: PropTypes.oneOf(PropTypes.element, PropTypes.arrayOf(PropTypes.element)),
+    bottomRightContent: PropTypes.oneOf(PropTypes.element, PropTypes.arrayOf(PropTypes.element)),
+  };
+
+  static defaultProps = {
+    classes: {},
+    topLeftContent: null,
+    topCenterContent: null,
+    topRightContent: null,
+    bottomLeftContent: null,
+    bottomCenterContent: null,
+    bottomRightContent: null,
+  }
+
+  render() {
+    const {
+      classes,
+      topLeftContent,
+      topCenterContent,
+      topRightContent,
+      bottomLeftContent,
+      bottomCenterContent,
+      bottomRightContent,
+    } = this.props;
+    return (
+      <Toolbar>
+        <Grid container direction="column" className={classes.wrapper}>
+          <Grid container className={classes.topRow} justify={'space-between'}>
+            <Grid item xs={2} className={classes.left}>
+              {topLeftContent}
+            </Grid>
+            <Grid item xs={8} className={classes.topCenter}>
+              {topCenterContent}
+            </Grid>
+            <Grid item xs={2} className={classes.right}>
+              {topRightContent}
+            </Grid>
+          </Grid>
+          <Grid container className={classes.bottomRow} justify={'space-between'}>
+            <Grid item xs={2} className={classes.left}>
+              {bottomLeftContent}
+            </Grid>
+            <Grid item xs={8} className={classes.bottomCenter}>
+              {bottomCenterContent}
+            </Grid>
+            <Grid item xs={2} className={classes.right}>
+              {bottomRightContent}
+            </Grid>
+          </Grid>
+        </Grid>
+      </Toolbar>
+    );
+  }
+}
+
+export default withStyles(styles)(TwoRowsAppBar);

src/index.js

@@ -0,0 +1,3 @@
+import TwoRowsAppBar from './TwoRowsAppBar';
+
+export default TwoRowsAppBar;

src/templates/NavBar/BasicNavBar/BasicNavBar.jsx renamed to src/templates/AppBar/BasicNavBar/BasicNavBar.jsx

@@ -0,0 +1,36 @@
+export default {
+  wrapper: {
+    marginTop: '0',
+    marginBottom: '0',
+  },
+  topRow: {
+    height: '64px',
+    marginTop: '0',
+    marginBottom: '0',
+  },
+  bottomRow: {
+    height: '56px',
+    marginTop: '0',
+    marginBottom: '0',
+  },
+  topCenter:{
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomCenter:{
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  right:{
+    justifyContent: 'flex-end',
+    display: 'flex',
+  },
+  left:{
+    justifyContent: 'flex-start',
+    display: 'flex',
+  }
+};