[list-item] Added rightToggle prop

Author: hai-cea

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

@@ -2,6 +2,7 @@ var React = require('react');
 var mui = require('mui');
 var Avatar = mui.Avatar;
 var Checkbox = mui.Checkbox;
+var Toggle = mui.Toggle;
 var Colors = mui.Styles.Colors;
 var List = mui.List;
 var ListDivider = mui.ListDivider;
@@ -53,7 +54,8 @@ class ListsPage extends React.Component {
           secondaryText={
             <p>
               <span style={{color: Colors.darkBlack}}>Brunch this weekend?</span><br/>
-              I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
+              I&apos;ll be in your neighborhood doing errands this weekend.
+              Do you want to grab brunch?
             </p>
           }
           secondaryTextLines={2}>
@@ -145,7 +147,7 @@ class ListsPage extends React.Component {
             name: 'disableTouchTap',
             type: 'bool',
             header: 'default: false',
-            desc: 'If true, the list-item will not be clickable and will not display hover affects. This is automatically disabled if leftCheckbox is set.'
+            desc: 'If true, the list-item will not be clickable and will not display hover affects. This is automatically disabled if leftCheckbox or rightToggle is set.'
           },
           {
             name: 'insetChildren',
@@ -157,7 +159,13 @@ class ListsPage extends React.Component {
             name: 'leftAvatar',
             type: 'element',
             header: 'optional',
-            desc: 'This is the avatar element to be displayed on the left side.'
+            desc: 'This is the Avatar element to be displayed on the left side.'
+          },
+          {
+            name: 'leftCheckbox',
+            type: 'element',
+            header: 'optional',
+            desc: 'This is the Checkbox element to be displayed on the left side.'
           },
           {
             name: 'leftIcon',
@@ -177,6 +185,12 @@ class ListsPage extends React.Component {
             header: 'optional',
             desc: 'This is the SvgIcon or FontIcon to be displayed on the right side.'
           },
+          {
+            name: 'rightToggle',
+            type: 'element',
+            header: 'optional',
+            desc: 'This is the Toggle element to display on the right side.'
+          },
           {
             name: 'secondaryText',
             type: 'node',
@@ -373,6 +387,27 @@ class ListsPage extends React.Component {
           </List>
         </MobileTearSheet>
 
+        <MobileTearSheet>
+          <List>
+            <ListItem
+              secondaryText="Always interrupt">
+              When calls and notifications arrive
+            </ListItem>
+          </List>
+          <ListDivider />
+          <List subheader="Priority interruptions">
+            <ListItem rightToggle={<Toggle />}>
+              Events and reminders
+            </ListItem>
+            <ListItem rightToggle={<Toggle />}>
+              Calls
+            </ListItem>
+            <ListItem rightToggle={<Toggle />}>
+              Messages
+            </ListItem>
+          </List>
+        </MobileTearSheet>
+
         <MobileTearSheet>
           <List>
             <ListItem

src/lists/list-item.jsx

@@ -24,6 +24,7 @@ var ListItem = React.createClass({
     onMouseOver: React.PropTypes.func,
     rightAvatar: React.PropTypes.element,
     rightIcon: React.PropTypes.element,
+    rightToggle: React.PropTypes.element,
     secondaryText: React.PropTypes.node,
     secondaryTextLines: React.PropTypes.oneOf([1, 2])
   },
@@ -52,6 +53,7 @@ var ListItem = React.createClass({
       onMouseOver,
       rightAvatar,
       rightIcon,
+      rightToggle,
       secondaryText,
       secondaryTextLines,
       style,
@@ -64,7 +66,7 @@ var ListItem = React.createClass({
     var singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar);
     var twoLine = secondaryText && secondaryTextLines === 1;
     var threeLine = secondaryText && secondaryTextLines > 1;
-    var hasCheckbox = leftCheckbox;
+    var hasCheckbox = leftCheckbox || rightToggle;
 
     var styles = {
       root: {
@@ -81,7 +83,7 @@ var ListItem = React.createClass({
       //This inner div is need so that ripples will span the entire container
       innerDiv: {
         paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16,
-        paddingRight: rightIcon || rightAvatar ? 56 : 16,
+        paddingRight: rightIcon || rightAvatar ? 56 : rightToggle ? 72 : 16,
         paddingBottom: singleAvatar ? 20 : 16,
         paddingTop: singleNoAvatar || threeLine ? 16 : 20
       },
@@ -124,6 +126,18 @@ var ListItem = React.createClass({
         right: 16
       },
 
+      leftCheckbox: {
+        left: 4
+      },
+
+      rightToggle: {
+        position: 'absolute',
+        display: 'block',
+        width: 54,
+        top: twoLine ? 25 : singleAvatar ? 17 : 13,
+        right: 8
+      },
+
       secondaryText: {
         fontSize: 14,
         lineHeight: threeLine ? '18px' : '16px',
@@ -156,7 +170,8 @@ var ListItem = React.createClass({
     this._pushElement(contentChildren, rightIcon, this.mergeStyles(styles.icons, styles.rightIcon));
     this._pushElement(contentChildren, leftAvatar, this.mergeStyles(styles.avatars, styles.leftAvatar));
     this._pushElement(contentChildren, rightAvatar, this.mergeStyles(styles.avatars, styles.rightAvatar));
-    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.icons, styles.leftIcon));
+    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.icons, styles.leftCheckbox));
+    this._pushElement(contentChildren, rightToggle, this.mergeStyles(styles.rightToggle));
 
     if (this.props.children) contentChildren.push(this.props.children);
     if (secondaryText) contentChildren.push(