Fix #1597 Add option to Toggle Nested List Items on Primary Action

mui · Sep 15, 2015 · 7c1e635 · 7c1e635
1 parent 0138ce9
commit 7c1e635
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
@@ -362,6 +362,7 @@ class ListsPage extends React.Component {
                 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
@@ -36,6 +36,7 @@ const ListItem = React.createClass({
     onKeyboardFocus: React.PropTypes.func,
     onMouseEnter: React.PropTypes.func,
     onMouseLeave: React.PropTypes.func,
+    primaryTogglesNestedList: React.PropTypes.bool,
     onNestedListToggle: React.PropTypes.func,
     onTouchStart: React.PropTypes.func,
     rightAvatar: React.PropTypes.element,
@@ -98,6 +99,7 @@ const ListItem = React.createClass({
       secondaryText,
       secondaryTextLines,
       style,
+      primaryTogglesNestedList,
       ...other,
     } = this.props;
 
@@ -321,6 +323,11 @@ const ListItem = React.createClass({
       </NestedList>
     ) : undefined;
 
+    let extraAttributes = {};
+    if (primaryTogglesNestedList) {
+      extraAttributes.onTouchTap = this._handleNestedListToggle;
+    }
+
     return hasCheckbox ? this._createLabelElement(styles, contentChildren) :
       disabled ? this._createDisabledElement(styles, contentChildren) : (
       <div>
@@ -334,7 +341,8 @@ const ListItem = React.createClass({
           onMouseEnter={this._handleMouseEnter}
           onTouchStart={this._handleTouchStart}
           ref="enhancedButton"
-          style={this.mergeAndPrefix(styles.root, style)}>
+          style={this.mergeAndPrefix(styles.root, style)}
+          {...extraAttributes}>
           <div style={this.mergeAndPrefix(styles.innerDiv, innerDivStyle)}>
             {contentChildren}
           </div>