Material-ui: [List] Show nested example

[diogoweb2]

Problem description

I couldn't find any example of "Nested list" on the new documentation.
Does anyone has a simple example similar to the v0.19 documentation?

import React from 'react';
import MobileTearSheet from '../../../MobileTearSheet';
import {List, ListItem} from 'material-ui/List';
import ActionGrade from 'material-ui/svg-icons/action/grade';
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';

export default class ListExampleNested extends React.Component {

  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>
    );
  }
}

[medz]

Yeah, that's what my current project needs, but it's not yet available.
Hope to be available as soon as possible.

[apalanki]

I am attempting to add this to the documentation and I wanted to get your feedback before attempting to solve it. The ListItem API does not support nestedItems prop anymore. So the only way to solve this is using nesting of List?

[leedstyh]

This is how I do it, if it helps:

    state = { open: false }

    toggle = () => this.setState({open:!this.state.open})

    render() {
        return [
            <ListItem ... onClick={this.toggle} />,
            <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
                <ListItem ... />
                <ListItem ... />
                <ListItem ... />
            </Collapse>,
        ]
    }