Merge pull request #61 from OrigenStudio/develop

new release

package.json

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

src/components/Layout/Layout.jsx

@@ -16,6 +16,9 @@ import LayoutActions from './LayoutActions';
 // FIXME remove once material-ui drawer style is fixed
 const isDocked = type => type === 'permanent' || type === 'persistent';
 
+// TODO refactor all smallScreen logic
+// TODO smallScreen logic should be named xSmallScreen logic
+
 class Layout extends React.PureComponent {
   static propTypes = {
     classes: PropTypes.shape({}),
@@ -171,11 +174,15 @@ class Layout extends React.PureComponent {
     const leftDrawerContentWithProps = leftDrawerContent
       ? React.cloneElement(leftDrawerContent, {
           closeDrawer: this.handleLeftDrawerClose,
+          closeDrawerOnClick: smallScreen || leftDrawerType === 'temporary',
+          ...leftDrawerContent.props, // This feels a bit of an antipattern, investigate
         })
       : leftDrawerContent;
     const rightDrawerContentWithProps = rightDrawerContent
       ? React.cloneElement(rightDrawerContent, {
           closeDrawer: this.handleRightDrawerClose,
+          closeDrawerOnClick: smallScreen || rightDrawerType === 'temporary',
+          ...rightDrawerContent.props, // This feels a bit of an antipattern, investigate
         })
       : rightDrawerContent;
 

src/templates/Drawer/BasicDrawer/BasicDrawer.jsx

@@ -12,10 +12,19 @@ class BasicDrawer extends React.PureComponent {
     classes: PropTypes.shape({}),
   };
   render() {
-    const { links, classes } = this.props;
+    const {
+      links,
+      classes,
+      closeDrawer,
+      closeDrawerOnClick = false,
+    } = this.props;
     return (
       <div className={classes.wrapper}>
-        <DrawerItemsList items={links} />
+        <DrawerItemsList
+          items={links}
+          closeDrawer={closeDrawer}
+          closeDrawerOnClick={closeDrawerOnClick}
+        />
       </div>
     );
   }

src/templates/Drawer/DrawerItemsList/DrawerItem.jsx

@@ -0,0 +1,42 @@
+// @flow
+
+import React, { PureComponent } from 'react';
+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';
+
+type P = {};
+
+class DrawerItem extends PureComponent<P> {
+  handleClick = () => {
+    this.props.item.onClick();
+    this.props.closeDrawer();
+  };
+
+  renderIcon = item => {
+    if (item.icon) {
+      return <item.icon />;
+    } else if (item.iconName) {
+      return <Icon>{item.iconName}</Icon>;
+    }
+    return <Icon>arrow_right</Icon>;
+  };
+
+  render() {
+    const { item } = this.props;
+    return (
+      <ListItem
+        button
+        onClick={item.onClick ? this.handleClick : null}
+        href={item.href || null}
+        component={item.href ? 'a' : undefined}
+      >
+        <ListItemIcon>{this.renderIcon(item)}</ListItemIcon>
+        <ListItemText primary={item.label} />
+      </ListItem>
+    );
+  }
+}
+
+export default DrawerItem;

src/templates/Drawer/DrawerItemsList/DrawerItemsList.jsx

@@ -3,10 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 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 DrawerItem from './DrawerItem';
 
 import styles from './styles';
 
@@ -16,30 +14,16 @@ class DrawerItemsList extends React.PureComponent {
     classes: PropTypes.shape({}),
   };
 
-  renderIcon = item => {
-    if (item.icon) {
-      return <item.icon />;
-    } else if (item.iconName) {
-      return <Icon>{item.iconName}</Icon>;
-    }
-    return <Icon>arrow_right</Icon>;
-  };
-
   render() {
-    const { items, classes } = this.props;
+    const { items, classes, closeDrawer, closeDrawerOnClick } = this.props;
     return (
       <List className={classes.list}>
         {map(items, item => (
-          <ListItem
-            button
+          <DrawerItem
             key={`item-${item.label}`}
-            onClick={item.onClick || null}
-            href={item.href || null}
-            component={item.href ? 'a' : undefined}
-          >
-            <ListItemIcon>{this.renderIcon(item)}</ListItemIcon>
-            <ListItemText primary={item.label} />
-          </ListItem>
+            item={item}
+            closeDrawer={closeDrawerOnClick ? closeDrawer : () => {}}
+          />
         ))}
       </List>
     );