refactored from NavBar to AppBar

Author: PolGuixe

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

@@ -3,26 +3,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
-import AppBar from 'material-ui/AppBar';
+import MaterialUIAppBar 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,
+    position: PropTypes.string,
     color: PropTypes.string,
   };
 
   render() {
-    const { children, navbarPostion, classes, color, ...other } = this.props;
+    const { children, position, classes, color, ...other } = this.props;
     return (
-      <AppBar position={navbarPostion} color={color}>
+      <MaterialUIAppBar position={position} color={color}>
         {React.cloneElement(children, { ...other })}
-      </AppBar>
+      </MaterialUIAppBar>
     );
   }
 }
 
-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,7 +7,7 @@ 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
@@ -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,15 +68,14 @@ 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}>
-        <NavBar {...appBarProps} onIconClick={this.toggleDrawer}>
+        <AppBar {...appBarProps} position={appBarPosition} onIconClick={this.toggleDrawer}>
           {appBarContent}
-        </NavBar>
+        </AppBar>
         {drawerContent ? (
           <Drawer {...drawerProps} open={drawerOpen} onRequestClose={this.handleDrawerClose}>
             {drawerContent}

src/components/Layout/Layout.jsx

@@ -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/components/Layout/styles.js

@@ -1,9 +1,8 @@
 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/AppBar/BasicAppBar';
 export { default as TwoRowsAppBar } from './templates/AppBar/TwoRowsAppBar';
 export { default as BasicFooter } from './templates/Footer/BasicFooter';