Merge pull request #49 from OrigenStudio/develop

new release candidate - v.0.1.0-rc.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-layout",
-  "version": "0.1.0-rc.0",
+  "version": "0.1.0-rc.1",
   "description": "Layout components for material-ui",
   "main": "./lib/index.js",
   "scripts": {

src/components/Footer/Footer.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import capitalize from 'lodash/capitalize';
 
 import styles from './styles';
 
@@ -11,12 +13,15 @@ class Footer extends React.PureComponent {
   };
 
   render() {
-    const { classes, children } = this.props;
-    return (
-      <div className={classes.footer}>
-        {children}
-      </div>
+    const { classes, color, className: classNameProp, children } = this.props;
+    const className = classNames(
+      classes.footer,
+      {
+        [classes[`color${capitalize(color)}`]]: color !== 'inherit',
+      },
+      classNameProp
     );
+    return <div className={className}>{children}</div>;
   }
 }
 

src/components/Footer/styles.js

@@ -1,19 +1,25 @@
-const styles = theme => ({
-  footer: {
-    backgroundColor: theme.palette.background.appBar,
-    color: theme.palette.getContrastText(theme.palette.background.appBar),
-    padding: '20px 10px',
-  },
-  message: {
-    textAlign: 'center',
-    marginBottom: '30px',
-  },
-  logoImage: {
-    maxHeight: '50px',
-    maxWidth: '300px',
-    margin: '0',
-    padding: '0',
-  },
-});
+const styles = theme => {
+  const backgroundColorDefault =
+    theme.palette.type === 'light'
+      ? theme.palette.grey[100]
+      : theme.palette.grey[900];
+  return {
+    footer: {
+      padding: '20px 10px', // TODO use units and spacing
+    },
+    colorDefault: {
+      backgroundColor: backgroundColorDefault,
+      color: theme.palette.getContrastText(backgroundColorDefault),
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+    colorSecondary: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
+    },
+  };
+};
 
 export default styles;

src/components/Layout/Layout.jsx

@@ -11,6 +11,7 @@ import styles from './styles';
 
 import AppBar from '../AppBar';
 import Footer from '../Footer';
+import LayoutActions from './LayoutActions';
 
 // FIXME remove once material-ui drawer style is fixed
 const isDocked = type => type === 'permanent' || type === 'persistent';
@@ -222,7 +223,16 @@ class Layout extends React.PureComponent {
             {rightDrawerContentWithProps}
           </Drawer>
         ) : null}
-        <main className={mainClassnames}>{children}</main>
+        <LayoutActions.Provider
+          value={{
+            toggleLeftDrawer: this.toggleLeftDrawer,
+            toggleRightDrawer: this.toggleRightDrawer,
+            handleLeftDrawerClose: this.handleLeftDrawerClose,
+            handleRightDrawerClose: this.handleRightDrawerClose,
+          }}
+        >
+          <main className={mainClassnames}>{children}</main>
+        </LayoutActions.Provider>
         {footerContent ? (
           <Footer {...footerProps}>{footerContent}</Footer>
         ) : null}

src/components/Layout/LayoutActions.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const LayoutActions = React.createContext({
+  toggleLeftDrawer: () => {},
+  toggleRightDrawer: () => {},
+  handleRightDrawerClose: () => {},
+  handleLeftDrawerClose: () => {},
+});
+
+export default LayoutActions;

src/components/Layout/index.js

@@ -1,3 +1,5 @@
 import Layout from './Layout';
+import LayoutActions from './LayoutActions';
 
+export { LayoutActions };
 export default Layout;

src/index.js

@@ -1,9 +1,9 @@
-import Layout from './components/Layout';
+import Layout, { LayoutActions } from './components/Layout';
 
+export { LayoutActions };
 export { default as AppBar } from './components/AppBar';
 export { default as Footer } from './components/Footer';
 
-
 export { default as BasicAppBar } from './templates/AppBar/BasicAppBar';
 export { default as TwoRowsAppBar } from './templates/AppBar/TwoRowsAppBar';
 export { default as BasicFooter } from './templates/Footer/BasicFooter';

src/templates/Drawer/DrawerItemsList/DrawerItemsList.jsx

@@ -2,7 +2,10 @@ import map from 'lodash/map';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import List, { ListItem, ListItemIcon, ListItemText } from '@material-ui/core/List';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 import Icon from '@material-ui/core/Icon';
 
 import styles from './styles';
@@ -13,7 +16,7 @@ class DrawerItemsList extends React.PureComponent {
     classes: PropTypes.shape({}),
   };
 
-  renderIcon = (item) => {
+  renderIcon = item => {
     if (item.icon) {
       return <item.icon />;
     } else if (item.iconName) {