refactored out the basic drawer and added a new DrawerItemsList componen

Author: PolGuixe

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,8 @@ 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>
+        hello
+        <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,32 @@
+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({}),
+  };
+  render() {
+    const { items, classes } = this.props;
+    return (
+      <List className={classes.list}>
+        {map(items, item => (
+          <ListItem button onClick={item.onClick} key={`item-${item.label}`}>
+            <ListItemIcon>
+              {item.icon ? <Icon>{item.icon}</Icon> : <Icon>arrow_right</Icon>}
+            </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',
+  },
+};