Merge pull request #2390 from subjectix/list-item-primary-toggles-nes…

…ted-list-prop [ListItem] Add option to Toggle Nested List Items on Primary Action
mui · Dec 6, 2015 · 96ba689 · 96ba689
2 parents 28a309f + c60ec88
commit 96ba689
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
@@ -215,6 +215,12 @@ This is automatically disabled if leftCheckbox or rightToggle is set.`,
             desc: 'This is the block element that contains the primary text. If a string is passed in, a div ' +
               'tag will be rendered.',
           },
+          {
+            name: 'primaryTogglesNestedList',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If provided, tapping on the primary text of the item toggles the nested list.',
+          },
           {
             name: 'rightAvatar',
             type: 'element',
@@ -481,6 +487,7 @@ import ListItem from 'material-ui/lib/lists/list-item';
                 primaryText="Inbox"
                 leftIcon={<ContentInbox />}
                 initiallyOpen={true}
+                primaryTogglesNestedList={true}
                 nestedItems={[
                   <ListItem primaryText="Starred" leftIcon={<ActionGrade />} />,
                   <ListItem

diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx
@@ -46,6 +46,7 @@ const ListItem = React.createClass({
     onTouchStart: React.PropTypes.func,
     onTouchTap: React.PropTypes.func,
     primaryText: React.PropTypes.node,
+    primaryTogglesNestedList: React.PropTypes.bool,
     rightAvatar: React.PropTypes.element,
     rightIcon: React.PropTypes.element,
     rightIconButton: React.PropTypes.element,
@@ -77,6 +78,7 @@ const ListItem = React.createClass({
       onMouseLeave: () => {},
       onNestedListToggle: () => {},
       onTouchStart: () => {},
+      primaryTogglesNestedList: false,
       secondaryTextLines: 1,
     };
   },
@@ -123,6 +125,7 @@ const ListItem = React.createClass({
       rightIconButton,
       rightToggle,
       primaryText,
+      primaryTogglesNestedList,
       secondaryText,
       secondaryTextLines,
       style,
@@ -360,7 +363,7 @@ const ListItem = React.createClass({
           onMouseLeave={this._handleMouseLeave}
           onMouseEnter={this._handleMouseEnter}
           onTouchStart={this._handleTouchStart}
-          onTouchTap={onTouchTap}
+          onTouchTap={primaryTogglesNestedList ? this._handleNestedListToggle : onTouchTap}
           ref="enhancedButton"
           style={this.mergeStyles(styles.root, style)}>
           <div style={this.prepareStyles(styles.innerDiv, innerDivStyle)}>