Use List/ListItem components from mui

app/components/List.jsx

@@ -4,8 +4,9 @@ import React from 'react';
 import ListItem from './ListItem';
 import ReactCSSTransitionGroup from './TimeoutTransitionGroup';
 import { mergeAndPrefix } from '../utils/stylePropable';
+import List from 'material-ui/lib/lists/list';
 
-class List extends React.Component {
+class SideList extends React.Component {
   _getStyles() {
     return {
       root: {
@@ -40,7 +41,7 @@ class List extends React.Component {
     let styles = this._getStyles();
 
     return (
-      <ul style={mergeAndPrefix(styles.root, this.props.style)}>
+      <List style={mergeAndPrefix(styles.root, this.props.style)}>
         <ReactCSSTransitionGroup
           enterTimeout={1000}
           leaveTimeout={0}
@@ -53,24 +54,24 @@ class List extends React.Component {
                 icon={obj.user.profile_picture}
                 key={obj.id}
                 onClick={this.props.onClick ? this.props.onClick.bind(null, obj) : undefined}
-                title={obj.user.full_name.trim() || '-'}
+                primaryText={obj.user.full_name.trim() || '-'}
               />
             );
           })}
         </ReactCSSTransitionGroup>
-      </ul>
+      </List>
     );
   }
 }
 
-List.propTypes = {
+SideList.propTypes = {
   itemData: React.PropTypes.array,
   onClick: React.PropTypes.func,
   style: React.PropTypes.object,
 };
 
-List.defaultProps = {
+SideList.defaultProps = {
   style: {},
 };
 
-export default List;
+export default SideList;

app/components/ListItem.jsx

@@ -1,141 +1,87 @@
 'use strict';
 
 import React from 'react';
-import Paper from 'material-ui/lib/paper';
-import transitions from 'material-ui/lib/styles/transitions';
 import typography from 'material-ui/lib/styles/typography';
+import { ListDivider, ListItem } from 'material-ui/lib/lists';
+import ListItemAvatar from './ListItemAvatar';
 import { mergeAndPrefix } from '../utils/stylePropable';
 
-class ListItem extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {hovered: false};
-  }
-
+class SideListItem extends React.Component {
   _getStyles() {
     const theme = this.context.muiTheme.component.listItem;
 
-    let backgroundColor = theme.color;
-    if (this.state.hovered) {
-      backgroundColor = this.props.hoverColor || theme.hoverColor;
-    }
-
     return {
-      root: {
-        backgroundColor,
-        cursor: 'pointer',
-        height: '72px',
-        transition: transitions.easeOut(),
+      rippleColor: theme.rippleColor,
+      primaryText: {
+        fontSize: '0.8em',
+        fontWeight: typography.fontWeightMedium,
+        color: theme.color,
       },
-      icon: {
-        root: {
-          position: 'absolute',
-          marginLeft: '16px',
-          marginTop: '19px',
-        },
-        paper: {
-          overflow: 'hidden',
-          height: '40px',
-        },
-        image: {
-          width: '40px',
-        },
+      description: {
+        marginTop: '-4px',
+        fontSize: '0.75em',
+        color: theme.color,
       },
-      content: {
-        root: {
-          paddingLeft: '72px',
-          paddingRight: '16px',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-        },
-        title: {
-          paddingTop: '20px',
-          fontSize: '1.2em',
-          fontWeight: typography.fontWeightMedium,
-        },
-        description: {
-          marginTop: '-4px',
-          fontSize: '0.75em',
-        },
+      divider: {
+        backgroundColor: theme.borderColor,
+        paddingTop: '0.1px',
       },
-      borderBottom: {
-        position: 'absolute',
-        marginTop: '16px',
-        right: '0',
-        left: '72px',
-        borderBottom: `1px solid ${theme.borderColor}`,
+      overflow: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        width: '190px',
+        display: 'inline-block',
+        whiteSpace: 'nowrap',
       },
     };
   }
 
-  _handleMouseOver(e) {
-    this.setState({hovered: true});
-    if (this.props.onMouseOver) {
-      this.props.onMouseOver(e);
-    }
-  }
-
-  _handleMouseOut(e) {
-    this.setState({hovered: false});
-    if (this.props.onMouseOut) {
-      this.props.onMouseOut(e);
-    }
-  }
-
   render() {
     const styles = this._getStyles();
     /* eslint-disable */
     const {
       description,
       icon,
-      onMouseOut,
-      onMouseOver,
-      title,
+      primaryText,
+      onClick,
       ...other
     } = this.props;
     /* eslint-enable */
 
     return (
-      <li
-        {...other}
-        onMouseOut={this._handleMouseOut.bind(this)}
-        onMouseOver={this._handleMouseOver.bind(this)}
-        style={mergeAndPrefix(styles.root)}
-      >
-        <div className='icon' style={styles.icon.root}>
-          <Paper circle={true} style={styles.icon.paper} zDepth={0} >
-            <img src={icon} style={styles.icon.image} />
-          </Paper>
-        </div>
-        <div className='content' style={styles.content.root}>
-          <div dangerouslySetInnerHTML={{__html: title}} style={styles.content.title} ></div>
-          <div dangerouslySetInnerHTML={{__html: description}} style={styles.content.description} ></div>
-        </div>
-        <div className='border-bottom' style={styles.borderBottom} />
-      </li>
+      <div onClick={onClick}>
+        <ListItem
+          {...other}
+          focusRippleColor={styles.rippleColor}
+          leftAvatar={<ListItemAvatar className='icon' src={icon} />}
+          primaryText={
+            <div dangerouslySetInnerHTML={{__html: primaryText}} style={mergeAndPrefix(styles.overflow, styles.primaryText)}></div>
+          }
+          secondaryText={
+            <div className='content' dangerouslySetInnerHTML={{__html: description}} style={mergeAndPrefix(styles.overflow, styles.description)} ></div>
+          }
+          touchRippleColor={styles.rippleColor}
+        />
+        <ListDivider className='border-bottom' inset={true} style={styles.divider} />
+      </div>
     );
   }
 }
 
-ListItem.contextTypes = {
+SideListItem.contextTypes = {
   muiTheme: React.PropTypes.object,
 };
 
-ListItem.propTypes = {
+SideListItem.propTypes = {
   description: React.PropTypes.string,
-  hoverColor: React.PropTypes.string,
   icon: React.PropTypes.string,
   onClick: React.PropTypes.func,
-  onMouseOut: React.PropTypes.func,
-  onMouseOver: React.PropTypes.func,
-  title: React.PropTypes.string,
+  primaryText: React.PropTypes.string,
 };
 
-ListItem.defaultProps = {
+SideListItem.defaultProps = {
   description: '',
-  title: '',
+  primaryText: '',
 };
 
-export default ListItem;
+export default SideListItem;

app/components/ListItemAvatar.jsx

@@ -0,0 +1,38 @@
+'use strict';
+
+import React from 'react';
+import Avatar from 'material-ui/lib/avatar';
+
+class ListItemAvatar extends React.Component {
+  _getStyles() {
+    return {
+      border: 'none',
+      position: 'absolute',
+      top: '16px',
+      left: '16px',
+      width: '38px',
+      height: '38px',
+    };
+  }
+
+  render() {
+    const style = this._getStyles();
+
+    return (
+      <Avatar
+        {...this.props}
+        style={style}
+      />
+    );
+  }
+}
+
+ListItemAvatar.contextTypes = {
+  muiTheme: React.PropTypes.object,
+};
+
+ListItemAvatar.propTypes = {
+  src: React.PropTypes.string,
+};
+
+export default ListItemAvatar;

app/components/Title.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import transitions from 'material-ui/lib/styles/transitions';
-import { ToolbarTitle } from 'material-ui/lib/toolbar';
+import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
 
 class Title extends React.Component {
   constructor(props) {

app/style/themes/default-theme.js

@@ -37,9 +37,9 @@ export default {
         hoverColor: colors.red300,
       },
       listItem: {
-        borderColor: '#EBEBEB',
-        color: colorManipulator.fade('rgba(0, 0, 0, .035)', 0),
-        hoverColor: 'rgba(0, 0, 0, .035)',
+        borderColor: colorManipulator.fade(palette.borderColor, 0.3),
+        color: colors.fullBlack,
+        rippleColor: colorManipulator.fade(palette.textColor, 0.5),
       },
     };
 

package.json

@@ -11,6 +11,7 @@
     "dev-server": "webpack --config config/webpack/prerender.config.js & webpack-dev-server --config config/webpack/devServer.config.js --progress --colors --hot --inline",
     "dev": "babel-node --ignore 'node_modules','build','app' config/serverDev",
     "lint": "eslint --ext .js,.jsx app/ config/ lib/ test/ server.js",
+    "postinstall": "babel --stage 1 ./node_modules/material-ui/src --out-dir ./node_modules/material-ui/lib",
     "prod": "babel-node --ignore 'node_modules','build','app' config/serverProd",
     "test": "npm run lint && npm run test-jsx && npm run test-js",
     "test-js": "mocha ./test/lib ./test/app/actions ./test/app/stores --compilers js:babel/register",
@@ -46,7 +47,7 @@
     "leaflet.markercluster": "Leaflet/Leaflet.markercluster#v0.4.0-hotfix.1",
     "less": "^2.5.1",
     "less-loader": "^2.2.0",
-    "material-ui": "0.9.0",
+    "material-ui": "ababol/material-ui.git",
     "react": "^0.13.3",
     "react-hot-loader": "^1.2.7",
     "react-leaflet": "^0.6.2",