Merge pull request mui#4850 from davincho/list-item-prog-open

[ListItem] New property open to toggle nested list

Author: oliviertassinari

docs/src/app/components/pages/components/List/ExampleNested.js

@@ -6,37 +6,76 @@ import ContentInbox from 'material-ui/svg-icons/content/inbox';
 import ContentDrafts from 'material-ui/svg-icons/content/drafts';
 import ContentSend from 'material-ui/svg-icons/content/send';
 import Subheader from 'material-ui/Subheader';
+import Toggle from 'material-ui/Toggle';
 
-const ListExampleNested = () => (
-  <MobileTearSheet>
-    <List>
-      <Subheader>Nested List Items</Subheader>
-      <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
-      <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
-      <ListItem
-        primaryText="Inbox"
-        leftIcon={<ContentInbox />}
-        initiallyOpen={true}
-        primaryTogglesNestedList={true}
-        nestedItems={[
-          <ListItem
-            key={1}
-            primaryText="Starred"
-            leftIcon={<ActionGrade />}
-          />,
-          <ListItem
-            key={2}
-            primaryText="Sent Mail"
-            leftIcon={<ContentSend />}
-            disabled={true}
-            nestedItems={[
-              <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
-            ]}
-          />,
-        ]}
-      />
-    </List>
-  </MobileTearSheet>
-);
+export default class ListExampleNested extends React.Component {
 
-export default ListExampleNested;
+  state = {
+    open: false,
+  };
+
+  handleToggle = () => {
+    this.setState({
+      open: !this.state.open,
+    });
+  };
+
+  handleNestedListToggle = (item) => {
+    this.setState({
+      open: item.state.open,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <Toggle
+          toggled={this.state.open}
+          onToggle={this.handleToggle}
+          labelPosition="right"
+          label="This toggle controls the expanded state of the submenu item."
+        />
+        <br />
+        <MobileTearSheet>
+          <List>
+            <Subheader>Nested List Items</Subheader>
+            <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
+            <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
+            <ListItem
+              primaryText="Inbox"
+              leftIcon={<ContentInbox />}
+              initiallyOpen={true}
+              primaryTogglesNestedList={true}
+              nestedItems={[
+                <ListItem
+                  key={1}
+                  primaryText="Starred"
+                  leftIcon={<ActionGrade />}
+                />,
+                <ListItem
+                  key={2}
+                  primaryText="Sent Mail"
+                  leftIcon={<ContentSend />}
+                  disabled={true}
+                  nestedItems={[
+                    <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
+                  ]}
+                />,
+                <ListItem
+                  key={3}
+                  primaryText="Inbox"
+                  leftIcon={<ContentInbox />}
+                  open={this.state.open}
+                  onNestedListToggle={this.handleNestedListToggle}
+                  nestedItems={[
+                    <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
+                  ]}
+                />,
+              ]}
+            />
+          </List>
+        </MobileTearSheet>
+      </div>
+    );
+  }
+}

src/List/ListItem.js

@@ -223,6 +223,10 @@ class ListItem extends Component {
     onTouchStart: PropTypes.func,
     /** @ignore */
     onTouchTap: PropTypes.func,
+    /**
+     * Control toggle state of nested list.
+     */
+    open: PropTypes.bool,
     /**
      * This is the block element that contains the primary text.
      * If a string is passed in, a div tag will be rendered.
@@ -282,6 +286,7 @@ class ListItem extends Component {
     onMouseLeave: () => {},
     onNestedListToggle: () => {},
     onTouchStart: () => {},
+    open: null,
     primaryTogglesNestedList: false,
     secondaryTextLines: 1,
   };
@@ -300,9 +305,15 @@ class ListItem extends Component {
   };
 
   componentWillMount() {
-    if (this.props.initiallyOpen) {
-      this.setState({open: true});
-    }
+    this.setState({
+      open: this.props.open === null ? this.props.initiallyOpen === true : this.props.open,
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // update the state when the component is controlled.
+    if (nextProps.open !== null)
+      this.setState({open: nextProps.open});
   }
 
   shouldComponentUpdate(nextProps, nextState, nextContext) {

src/List/ListItem.spec.js

@@ -73,4 +73,43 @@ describe('<ListItem />', () => {
     assert.ok(wrapper.find('.test-checkbox').length);
     assert.strictEqual(wrapper.find(`.${testClass}`).length, 1, 'should have a div with the test class');
   });
+
+  it('should initially open nested list', () => {
+    const testClass = 'test-class';
+    const wrapper = shallowWithContext(
+      <ListItem
+        className={testClass}
+        initiallyOpen={true}
+        nestedItems={[
+          <ListItem
+            key={1}
+          />,
+        ]}
+      />
+    );
+
+    assert.ok(wrapper.find('NestedList').length);
+    assert.ok(wrapper.find('.test-class').parent().children().nodes[1].props.open === true);
+  });
+
+  it('should toggle nested list', () => {
+    const testClass = 'test-class';
+    const wrapper = shallowWithContext(
+      <ListItem
+        className={testClass}
+        open={false}
+        nestedItems={[
+          <ListItem
+            key={1}
+          />,
+        ]}
+      />
+    );
+
+    assert.ok(wrapper.find('.test-class').parent().children().nodes[1].props.open === false);
+    wrapper.setProps({
+      open: true,
+    });
+    assert.ok(wrapper.find('.test-class').parent().children().nodes[1].props.open === true);
+  });
 });