WIP: list-item: basic implementation

docs/src/app/app-routes.jsx

@@ -12,8 +12,8 @@ var GetStarted = require('./components/pages/get-started.jsx');
 
 var Customization = require('./components/pages/customization.jsx');
 var Colors = require('./components/pages/customization/colors.jsx');
-var Themes = require('./components/pages/customization/themes.jsx'); 
-var InlineStyles = require('./components/pages/customization/inline-styles.jsx'); 
+var Themes = require('./components/pages/customization/themes.jsx');
+var InlineStyles = require('./components/pages/customization/inline-styles.jsx');
 
 var Components = require('./components/pages/components.jsx');
 var AppBar = require('./components/pages/components/app-bar.jsx');
@@ -34,14 +34,14 @@ var Tabs = require('./components/pages/components/tabs.jsx');
 var TextFields = require('./components/pages/components/text-fields.jsx');
 var TimePicker = require('./components/pages/components/time-picker.jsx');
 var Toolbars = require('./components/pages/components/toolbars.jsx');
-
+var Lists = require('./components/pages/components/lists.jsx');
 
 /** Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md
-  * 
+  *
   * Routes are used to declare your view hierarchy.
   *
   * Say you go to http://material-ui.com/#/components/paper
-  * The react router will search for a route named 'paper' and will recursively render its 
+  * The react router will search for a route named 'paper' and will recursively render its
   * handler and its parent handler like so: Paper > Components > Master
   */
 
@@ -75,6 +75,7 @@ var AppRoutes = (
       <Route name="text-fields" handler={TextFields} />
       <Route name="time-picker" handler={TimePicker} />
       <Route name="toolbars" handler={Toolbars} />
+      <Route name="lists" handler={Lists} />
       <Redirect from="/components" to="appbar" />
     </Route>
 

docs/src/app/components/pages/components.jsx

@@ -23,6 +23,7 @@ class Components extends React.Component {
       { route: 'text-fields', text: 'Text Fields'},
       { route: 'time-picker', text: 'Time Picker'},
       { route: 'toolbars', text: 'Toolbars'},
+      { route: 'lists', text: 'Lists'},
     ];
 
     return (

docs/src/app/components/pages/components/lists.jsx

@@ -0,0 +1,89 @@
+var React = require('react');
+var mui = require('mui');
+var ComponentDoc = require('../../component-doc.jsx');
+
+var {ListItem} = mui;
+
+class ListsPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.code =
+      '<ListItem showIconButton={true}>Apple</ListItem>\n' +
+      '<ListItem showIconButton={true}>Orange</ListItem>\n' +
+      '<ListItem showIconButton={true}>Ananas</ListItem>';
+
+    this.desc = 'List items are used to create list. ';
+
+    this.componentInfo = [
+      {
+        name: 'Props',
+        infoArray: [
+          {
+            name: 'iconClassName',
+            type: 'string',
+            header: 'optional',
+            desc: 'The classname of the icon on the left of the list item. If you ' +
+                  'are using a stylesheet for your icons, enter the class name ' +
+                  'for the icon to be used here.'
+          },
+          {
+            name: 'iconElement',
+            type: 'element',
+            header: 'optional',
+            desc: 'The custom element to be displayed on the left side of the ' +
+                  'list item such as an SvgIcon.'
+          },
+          {
+            name: 'iconStyle',
+            type: 'string',
+            header: 'optional',
+            desc: 'Override the inline-styles of the element displayed on the right side of the list item.'
+          },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the app bars\'s root element.'
+          },
+          {
+            name: 'showIconButton',
+            type: 'boolean',
+            header: 'default: true',
+            desc: 'Determines whether or not to display the icon next to ' +
+                  'the title. Setting this prop to false will hide the icon.'
+          },
+        ]
+      },
+      {
+        name: 'Events',
+        infoArray: [
+          {
+            name: 'onIconButtonTouchTap',
+            header: 'ListItem.onIconButtonTouchTap(e)',
+            desc: 'Callback function for when the left icon is selected via ' +
+                  'a touch tap.'
+          },
+        ]
+      }
+    ];
+  }
+
+  render() {
+    return (
+      <ComponentDoc
+        name="Lists"
+        code={this.code}
+        desc={this.desc}
+        componentInfo={this.componentInfo}>
+          <ListItem showIconButton={true}>Apple</ListItem>
+          <ListItem showIconButton={true}>Orange</ListItem>
+          <ListItem showIconButton={true}>Ananas</ListItem>
+      </ComponentDoc>
+    );
+  }
+
+}
+
+module.exports = ListsPage;

src/index.js

@@ -65,5 +65,6 @@ module.exports = {
     ColorManipulator: require('./utils/color-manipulator'),
     Extend: require('./utils/extend'),
     UniqueId: require('./utils/unique-id')
-  }
+  },
+  ListItem: require('./list/list-item')
 };

src/list/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ListItem: require('./list-item'),
+  //ListHeader: require('./list-header'),
+};

src/list/list-item.jsx

@@ -0,0 +1,87 @@
+var React = require('react');
+var StylePropable = require('../mixins/style-propable');
+var NavigationChevronRight = require('../svg-icons/navigation-chevron-right');
+var IconButton = require('../icon-button');
+
+var ListItem = React.createClass({
+  mixins: [StylePropable],
+
+  propTypes: {
+    showIconButton: React.PropTypes.bool,
+    iconClassname: React.PropTypes.string,
+    iconElement: React.PropTypes.element,
+    iconOnTouchTap: React.PropTypes.func,
+  },
+
+  getStyles: function() {
+    return {
+      root: {
+        paddingLeft: 10,
+        position: 'relative',
+        borderBottom: '1px solid lightgrey'
+      },
+
+      innerStyle: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        padding: '10px 10px 10px 0px'
+      },
+      iconButton: {
+        style: {
+        },
+        iconStyle: {
+          fontSize: 16,
+          height: '100%',
+          top: 0,
+          right: 15,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center'
+        },
+      },
+    };
+  },
+
+  _onIconButtonTouchTap: function(e) {
+    if (this.props.onIconTouchTap)
+      this.props.onIconTouchTap(e);
+  },
+
+  render: function() {
+    var styles = this.getStyles();
+
+    var element;
+    if (this.props.showIconButton) {
+      if (this.props.iconElement) {
+        element = (
+          <div style={styles.iconButton.iconStyle}>
+            {this.props.iconElement}
+          </div>
+        );
+      } else {
+        var child = (this.props.iconClassName) ? '' : <NavigationChevronRight style={this.mergeAndPrefix(styles.iconStyle)}/>;
+        element = (
+            <IconButton
+              style={this.mergeAndPrefix(styles.iconButton.iconStyle)}
+              iconStyle={this.mergeAndPrefix(styles.iconButton.style)}
+              iconClassName={this.props.iconClassName}
+              onTouchTap={this._onIconButtonTouchTap}>
+                {child}
+          </IconButton>
+        );
+      }
+    }
+
+    return (
+      <div style={styles.root}>
+        <div style={styles.innerStyle}>
+          {this.props.children}
+        </div>
+        {element}
+      </div>
+    );
+  },
+});
+
+module.exports = ListItem;