Merge pull request #14 from Zetoff/fix/fixing-previous-version

fixed issues

Author: PolGuixe

src/components/AppBar/AppBar.jsx

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

src/components/Layout/Layout.jsx

@@ -17,7 +17,7 @@ class Layout extends React.PureComponent {
     classes: PropTypes.shape({}),
     overrideClasses: PropTypes.shape({}),
     children: PropTypes.element.isRequired,
-    navbarPostion: PropTypes.string,
+    appBarPosition: PropTypes.string,
     stickyFooter: PropTypes.bool,
     footerContent: PropTypes.element,
     appBarContent: PropTypes.element,
@@ -31,7 +31,7 @@ class Layout extends React.PureComponent {
 
   static defaultProps = {
     title: '',
-    navbarPostion: 'default',
+    appBarPosition: 'default',
     stickyFooter: false,
     drawerOpen: false,
   };
@@ -53,7 +53,7 @@ class Layout extends React.PureComponent {
       classes: defaultClasses,
       overrideClasses,
       children,
-      navbarPostion,
+      appBarPosition,
       stickyFooter,
       footerContent,
       appBarContent,
@@ -68,13 +68,12 @@ class Layout extends React.PureComponent {
 
     const mainClassnames = classNames(
       classes.main,
-      { [`${classes.mainFixedNavbar}`]: navbarPostion === 'fixed' },
+      { [`${classes.mainFixedAppBar}`]: appBarPosition === 'fixed' },
       { [`${classes.mainStickyFooter}`]: stickyFooter },
     );
-
     return (
       <div className={classes.layout}>
-        <AppBar {...appBarProps} onIconClick={this.toggleDrawer}>
+        <AppBar {...appBarProps} position={appBarPosition} onIconClick={this.toggleDrawer}>
           {appBarContent}
         </AppBar>
         {drawerContent ? (

src/components/Layout/styles.js

@@ -8,14 +8,14 @@ const styles = {
     paddingTop: '0px',
     display: 'flex',
   },
-  mainFixedNavbar: {
+  mainFixedAppBar: {
     marginTop: '64px',
   },
   mainStickyFooter: {
     flex: 1,
   },
   '@media (max-width: 599px)': {
-    mainFixedNavbar: {
+    mainFixedAppBar: {
       marginTop: '56px',
     },
   },

src/index.js

@@ -3,7 +3,8 @@ import Layout from './components/Layout';
 export { default as AppBar } from './components/AppBar';
 export { default as Footer } from './components/Footer';
 
-export { default as BasicAppBar } from './templates/AppBar/BasicNavBar';
+
+export { default as BasicAppBar } from './templates/AppBar/BasicAppBar';
 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/templates/AppBar/BasicAppBar/BasicAppBar.jsx

@@ -0,0 +1,69 @@
+import _ from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from 'material-ui/IconButton';
+import Button from 'material-ui/Button';
+import Toolbar from 'material-ui/Toolbar';
+import Typography from 'material-ui/Typography';
+import MenuIcon from 'material-ui-icons/Menu';
+import Hidden from 'material-ui/Hidden';
+import { withStyles } from 'material-ui/styles';
+import withWidth from 'material-ui/utils/withWidth';
+import compose from 'recompose/compose';
+
+import styles from './styles';
+
+class BasicAppBar extends React.PureComponent {
+  static propTypes = {
+    links: PropTypes.arrayOf(PropTypes.shape({})),
+    classes: PropTypes.shape({}),
+    title: PropTypes.string,
+    logo: PropTypes.string,
+    onIconClick: PropTypes.func,
+  };
+
+  handleIconClick = () => {
+    this.props.onIconClick();
+  }
+
+  renderLogo = () => {
+    const { classes, title, logo } = this.props;
+    if (logo) {
+      return (
+        <div className={classes.logo}>
+          <img src={logo} alt={title} className={classes.image} />
+        </div>
+      );
+    }
+    return (
+      <Typography type="title" color="inherit" className={classes.flex}>
+        {title}
+      </Typography>
+    );
+  };
+
+  render() {
+    const { links } = this.props;
+    return (
+      <Toolbar>
+        <Hidden smUp>
+          <IconButton color="inherit" aria-label="Menu" onClick={this.handleIconClick}>
+            <MenuIcon />
+          </IconButton>
+        </Hidden>
+        {this.renderLogo()}
+        <Hidden xsDown>
+          <div>
+            {_.map(links, link => (
+              <Button href={link.href} color="inherit" key={link.label}>
+                {link.label}
+              </Button>
+            ))}
+          </div>
+        </Hidden>
+      </Toolbar>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withWidth())(BasicAppBar);

src/templates/AppBar/BasicAppBar/index.js

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

src/templates/AppBar/BasicAppBar/styles.js

@@ -0,0 +1,18 @@
+const styles = {
+  flex: {
+    flex: 1,
+  },
+  logo: {
+    flex: 1,
+    cursor: 'pointer',
+    height: '45px',
+    minWidth: '160px',
+  },
+  image: {
+    height: '100%',
+    margin: '0',
+    padding: '0',
+  },
+};
+
+export default styles;

src/templates/AppBar/TwoRowsAppBar/TwoRowsAppBar.jsx

@@ -6,15 +6,17 @@ import { withStyles } from 'material-ui/styles';
 
 import styles from './styles';
 
+const contentPropType = PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]);
+
 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)),
+    topLeftContent: contentPropType,
+    topCenterContent: contentPropType,
+    topRightContent: contentPropType,
+    bottomLeftContent: contentPropType,
+    bottomCenterContent: contentPropType,
+    bottomRightContent: contentPropType,
   };
 
   static defaultProps = {
@@ -25,7 +27,8 @@ class TwoRowsAppBar extends PureComponent {
     bottomLeftContent: null,
     bottomCenterContent: null,
     bottomRightContent: null,
-  }
+  };
+
 
   render() {
     const {

src/templates/AppBar/TwoRowsAppBar/styles.js

@@ -13,24 +13,24 @@ export default {
     marginTop: '0',
     marginBottom: '0',
   },
-  topCenter:{
+  topCenter: {
     textAlign: 'center',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  bottomCenter:{
+  bottomCenter: {
     textAlign: 'center',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  right:{
+  right: {
     justifyContent: 'flex-end',
     display: 'flex',
   },
-  left:{
+  left: {
     justifyContent: 'flex-start',
     display: 'flex',
-  }
+  },
 };