Merge pull request #34 from Zetoff/feature/improving-drawers

added a new standard drawer

Author: PolGuixe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-layout",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Layout components for material-ui",
   "main": "./lib/index.js",
   "scripts": {
@@ -43,8 +43,8 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "lodash": "^4.17.4",
-    "material-ui": "^1.0.0-beta.12",
-    "material-ui-icons": "^1.0.0-beta.5",
+    "material-ui": "1.0.0-beta.13",
+    "material-ui-icons": "1.0.0-beta.10",
     "prop-types": "^15.5.10",
     "react": "^15.6.1 || ^16.0.0",
     "react-controllables": "^0.6.0",

src/index.js

@@ -8,5 +8,6 @@ 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';
+export { default as StandardDrawer } from './templates/Drawer/StandardDrawer';
 
 export default Layout;

src/templates/Drawer/BasicDrawer/BasicDrawer.jsx

@@ -1,9 +1,8 @@
-import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
-import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
-import Icon from 'material-ui/Icon';
+
+import DrawerItemsList from '../DrawerItemsList';
 
 import styles from './styles';
 
@@ -16,16 +15,7 @@ class BasicDrawer extends React.PureComponent {
     const { links, classes } = this.props;
     return (
       <div className={classes.wrapper}>
-        <List className={classes.list}>
-          {_.map(links, link => (
-            <ListItem button onClick={link.onClick} key={`link-${link.label}`}>
-              <ListItemIcon>
-                {link.icon ? <Icon>{link.icon}</Icon> : <Icon>arrow_right</Icon>}
-              </ListItemIcon>
-              <ListItemText primary={link.label} />
-            </ListItem>
-          ))}
-        </List>
+        <DrawerItemsList items={links} />
       </div>
     );
   }

src/templates/Drawer/BasicDrawer/styles.js

@@ -2,7 +2,4 @@ export default {
   wrapper: {
     width: '100%',
   },
-  list: {
-    flex: 'initial',
-  },
 };

src/templates/Drawer/DrawerItemsList/DrawerItemsList.jsx

@@ -0,0 +1,40 @@
+import map from 'lodash/map';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
+import Icon from 'material-ui/Icon';
+
+import styles from './styles';
+
+class DrawerItemsList extends React.PureComponent {
+  static propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+    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;
+    return (
+      <List className={classes.list}>
+        {map(items, item => (
+          <ListItem button onClick={item.onClick} key={`item-${item.label}`}>
+            <ListItemIcon>{this.renderIcon(item)}</ListItemIcon>
+            <ListItemText primary={item.label} />
+          </ListItem>
+        ))}
+      </List>
+    );
+  }
+}
+
+export default withStyles(styles)(DrawerItemsList);

src/templates/Drawer/DrawerItemsList/index.js

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

src/templates/Drawer/DrawerItemsList/styles.js

@@ -0,0 +1,5 @@
+export default {
+  list: {
+    flex: 'initial',
+  },
+};

src/templates/Drawer/StandardDrawer/StandardDrawer.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Divider from 'material-ui/Divider';
+
+import DrawerItemsList from '../DrawerItemsList';
+
+import styles from './styles';
+
+class StandardDrawer extends React.PureComponent {
+  static propTypes = {
+    secondList: PropTypes.arrayOf(PropTypes.shape({})),
+    firstList: PropTypes.arrayOf(PropTypes.shape({})),
+    classes: PropTypes.shape({}),
+  };
+
+  static defaultProps = {
+    firstList: null,
+    secondList: null,
+  };
+  render() {
+    const { firstList, secondList, classes } = this.props;
+    return (
+      <div className={classes.wrapper}>
+        {firstList ? <DrawerItemsList items={firstList} /> : null}
+        {firstList && secondList ? <Divider /> : null}
+        {secondList ? <DrawerItemsList items={secondList} /> : null}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(StandardDrawer);

src/templates/Drawer/StandardDrawer/index.js

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

src/templates/Drawer/StandardDrawer/styles.js

@@ -0,0 +1,5 @@
+export default {
+  wrapper: {
+    width: '100%',
+  },
+};