Embrace DOM-like structure

[piranha]

Right now subcomponents are passed as a list of special objects to some specific prop, like there:

menuItems = [
  { route: 'get-started', text: 'Get Started' },
  { route: 'css-framework', text: 'CSS Framework' },
  { route: 'components', text: 'Components' },
  { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
  { 
     type: MenuItem.Types.LINK, 
     payload: 'https://github.com/callemall/material-ui', 
     text: 'GitHub' 
  },
];

//Docked Left Nav
<LeftNav menuItems={menuItems} />

I'd argue it would be much more composable and extensible to reworking API to have something like this:

<LeftNav>
  <MenuItem><Route to="get-started">Get Started</Route></MenuItem>
  <Subheader>Resources</Subheader>
  <MenuItem><a href="...">GitHub</a></MenuItem>
</LeftNav>

The same for all menus.

[grechut]

👍

[felixakiragreen]

👍

[mcwhittemore]

+1

[hai-cea]

Yes, I think we'd definitely like to go in this direction. We'll work this into the next release or 2.

[Farhan77]

H

[kylefinley]

Maybe you could keep both. For menus and navigation, where the structure is well known, I think it makes sense to make it more of a configuration. If I want to quickly implement a menu I don't want to import/remember all of the sub menu components.

Wouldn't a simple if statement allow for overrides, though. Something like:

if (this.props.children) {
 return this.props.children;
} else {
  // Build it using the config
}

[mcwhittemore]

@kylefinley are you looking to have the config so you don't have to recreate the same jsx over and over again? If so, how are you doing this with the config? Can you just replace that with JSX dom structures?

[kylefinley]

@mcwhittemore,

Yes, I see your point.

I'm new to React, so perhaps my suggestion is not idiomatic. But the thing I like about the current implementation, and React for that matter, is that it feels more like JavaScript than HTML. Instead of using JSX, or even nested React functions; Material-UI simply uses JavaScript data structure (Objects and Arrays) to define the structure, E.g. Menus

At the end of the day it's just personal preference. I just though that the use of Objects and Arrays to define the structure was novel. Obviously it only works if you are able to optimize for the 95% usecase and allow overriding with JSX dom for the remaining 5%.

[mcwhittemore]

@kylefinley I feel you. One of the things that using react also does though is let your templates and your js merge so that your typical html/css devs work on end product and not just mocks.

[arianvp]

Has there be any updates in this regard? I'm very interested in this.

[eliquious]

+1

[yongxu]

#1319
I made this that does exactly what you are expecting!