Use List/ListItem components from mui

app/components/List.jsx

@@ -4,8 +4,19 @@ import React from 'react';
 import ListItem from './ListItem';
 import ReactCSSTransitionGroup from './TimeoutTransitionGroup';
 import { mergeAndPrefix } from '../utils/stylePropable';
+import { List } from 'material-ui';
+
+export default class extends React.Component {
+  static propTypes = {
+    itemData: React.PropTypes.array,
+    onClick: React.PropTypes.func,
+    style: React.PropTypes.object,
+  };
+
+  static defaultProps = {
+    style: {},
+  };
 
-class List extends React.Component {
   _getStyles() {
     return {
       root: {
@@ -40,7 +51,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}
@@ -58,19 +69,7 @@ class List extends React.Component {
             );
           })}
         </ReactCSSTransitionGroup>
-      </ul>
+      </List>
     );
   }
 }
-
-List.propTypes = {
-  itemData: React.PropTypes.array,
-  onClick: React.PropTypes.func,
-  style: React.PropTypes.object,
-};
-
-List.defaultProps = {
-  style: {},
-};
-
-export default List;

app/components/ListItem.jsx

@@ -1,89 +1,65 @@
 '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';
+import ListItemAvatar from './ListItemAvatar';
 import { mergeAndPrefix } from '../utils/stylePropable';
 
-class ListItem extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends React.Component {
+  static contextTypes = {
+    muiTheme: React.PropTypes.object,
+  };
 
-    this.state = {hovered: false};
-  }
+  static propTypes = {
+    description: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    onClick: React.PropTypes.func,
+    title: React.PropTypes.string,
+  };
+
+  static defaultProps = {
+    description: '',
+    title: '',
+  };
 
   _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(),
+      title: {
+        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',
-        },
+      innerDiv: {
+        paddingLeft: '72px',
+        paddingRight: '16px',
+        paddingBottom: '6px',
+        paddingTop: '8px',
       },
-      borderBottom: {
-        position: 'absolute',
-        marginTop: '16px',
-        right: '0',
-        left: '72px',
-        borderBottom: `1px solid ${theme.borderColor}`,
+      divider: {
+        backgroundColor: theme.borderColor,
+        paddingTop: '0.1px',
+      },
+      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 */
@@ -98,44 +74,18 @@ class ListItem extends React.Component {
     /* 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>
+        <ListItem
+          {...other}
+          leftAvatar={<ListItemAvatar src={icon} />}
+          secondaryText={
+            <div dangerouslySetInnerHTML={{__html: description}} style={mergeAndPrefix(styles.overflow, styles.description)} ></div>
+          }
+        >
+          <span dangerouslySetInnerHTML={{__html: title}} style={mergeAndPrefix(styles.overflow, styles.title)}></span>
+        </ListItem>
+        <ListDivider className='border-bottom' inset={true} style={styles.divider} />
+      </div>
     );
   }
 }
-
-ListItem.contextTypes = {
-  muiTheme: React.PropTypes.object,
-};
-
-ListItem.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,
-};
-
-ListItem.defaultProps = {
-  description: '',
-  title: '',
-};
-
-export default ListItem;

app/components/ListItemAvatar.jsx

@@ -0,0 +1,38 @@
+'use strict';
+
+import React from 'react';
+import { Avatar } from 'material-ui';
+
+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/style/themes/default-theme.js

@@ -37,9 +37,8 @@ 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,
       },
     };
 

config/webpack/makeConfig.js

@@ -14,7 +14,7 @@ module.exports = function (options) {
   var entry = path.join(__dirname, '..', '..', 'app', options.prerender ? 'utils/prerender' : 'app');
 
   var loaders = {
-    jsx: options.hotComponents ? ['react-hot-loader', 'babel-loader?stage=1'] : 'babel-loader?stage=1',
+    jsx: options.hotComponents ? ['react-hot-loader', 'babel-loader?stage=0'] : 'babel-loader?stage=0',
     png: 'url-loader?limit=10000',
     html: 'html-loader'
   };

package.json

@@ -11,10 +11,11 @@
     "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",
-    "test-jsx": "mochify node_modules/babel/polyfill ./test/app/components/* --reporter spec --transform [ babelify --stage 1 --ignore 'node_modules'] --extension .jsx"
+    "test-jsx": "mochify node_modules/babel/polyfill ./test/app/components/* --reporter spec --transform [ babelify --stage 0 --ignore 'node_modules'] --extension .jsx"
   },
   "repository": {
     "type": "git",
@@ -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",