[ListItem] how to support SubItem

[cgestes]

Follow up of the discussion here: https://github.com/callemall/material-ui/pull/1096/files#r34335985

How can we distinguish between SubItem and child in ListItem?

The current issue is the following:

var FooItem = React.createComponent({
  render(): { return <ListItem.../>; }
}

<ListItem>
  <FooItem>
</ListItem>

How can we know that FooItem is a subitem?

I see multiples solutions:

• Use NestedItem:

<ListItem>
  <Whatever child>
  <NestedItem>
    whatever nested items
  </NestedItem>
</ListItem>

• Consider all childs as subitem and always use primaryText for ListItem content
• Use deep child traversal to find deep nested ListItem
  I see special case where ones would want a child with a List.
• Use a property on the parent ListItem to specify it has subitems

What do you think?

[cgestes]

Or we can simply use context to give the nested level to childrens.

It seems cleaner but it has the drawback that context are going to change in React, but I guess we will be able to adapt so it should not be an issue.

[brennanreese]

Does this break nested ListItem's ? I am trying to use the basic example from the docs page and am getting this error:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.1.1:1

I'm not even adding anything special to it. Just the straight up example from the docs. What am I missing here?

[hai-cea]

It looks like ListItem is generating a ListNested here - https://github.com/callemall/material-ui/blob/master/src/lists/list-item.jsx#L270

The down side to this is that it's having to traverse all of the children and pick out ListItems as you've mentioned @cgestes. Also, this a performance problem since it will have to look at all children in order to know if there are any nested list items.

I propose that we create a new prop called nestedList and also rename ListNested to NestedList. Here's how it would work:

<List subheader="Nested List Items">
  <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
  <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
  <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} open={true} nestedList={
    <NestedList>
      <ListItem primaryText="Starred" leftIcon={<ActionGrade />} />
      <ListItem primaryText="Sent Mail" leftIcon={<ContentSend />} nestedList={
        <NestedList>
          <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
        </NestedList>
      }/>
    </NestedList>
  }/>
</List>

What do you guys think? @oliviertassinari @jkruder @cgestes

[jkruder]

@hai-cea This was how the initial nested list items was done, passed as props. We could use a property to indicate that it has children and then we can wrap all children in a ListNested component. Note that this would still require searching all children but we would only be doing that if the LiatItem has property indicating it has children.

[hai-cea]

@cgestes @jkruder I made PR to address this issue - #1438. Please let me know what you think.

[cgestes]

Sorry on hollidays.

What do you think about using context instead of nestedItem to propagate
nested level and stick to a component hierarchy like in html?

On Tue, Aug 18, 2015, 00:54 Hai Nguyen notifications@github.com wrote:

@cgestes https://github.com/cgestes @jkruder
https://github.com/jkruder I made PR to address this issue - #1438
#1438. Please let me know
what you think.

—
Reply to this email directly or view it on GitHub
#1105 (comment)
.