[List] nestedItems support in @next

@oliviertassinari is the nestedItems prop removed from the new ListItem component or is it about to be ported sooner or later?

Thanks for your work!

[damianobarbati]

Long story made short: wrap ListItem in a div and an adjacent Collapse container with nested ListItems and pad it when nesting. Credits to @oliviertassinari (I think Fade component is not working flawlessly as Collapse!).

My solution for reference:

import React from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import { connect } from 'react-redux';
import { startCase, map } from 'lodash-es';

import classNames from 'classnames';

import { withStyles, createStyleSheet } from 'material-ui/styles';

import Paper from 'material-ui/Paper';
import List, { ListItem, ListItemSubheader, ListItemIcon, ListItemText, ListItemSecondaryAction } from 'material-ui/List';
import Badge from 'material-ui/Badge';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import Switch from 'material-ui/Switch';
import Collapse from 'material-ui/transitions/Collapse';

import {
    NavigationExpandMore as ExpandMoreIcon,
    NavigationExpandLess as ExpandLessIcon,
} from '@damianobarbati/mdi';

const styleSheet = createStyleSheet('Nav', theme => ({
    root: {
    },
    subList: {
        paddingLeft: '18px',
    },
}));

@connect((state, props) => ({
}))
@withStyles(styleSheet)
export default class Nav extends React.Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        classes: PropTypes.object,
        entries: PropTypes.array.isRequired,
        secondaryEntries: PropTypes.array,
    }

    componentWillMount () {
        this.setState({});
    }

    render () {
        const { classes, entries, secondaryEntries = [] } = this.props;

        const renderListItem = ({ name, caption, icon, secondaryIcon, notificationsCount, action, secondaryAction, entries = [] }, nested = false) => {
            const expanded = !!this.state[name];
            const expand = () => this.setState({ [name]: !expanded });

            return (
                <div key={name} className={classNames({ [classes.subList]: nested })} >
                    <ListItem dense={false} disableGutters={false} button={true}>

                        { icon && notificationsCount &&
                        <ListItemIcon onClick={action}>
                            <Badge badgeContent={notificationsCount || ''}>{icon}</Badge>
                        </ListItemIcon>
                        }
                        { icon && !notificationsCount &&
                        <ListItemIcon className={entries.length ? classes.listItemIconWithNested : ''} onClick={action}>
                            {icon}
                        </ListItemIcon>
                        }
                        <ListItemText primary={name} secondary={caption} onClick={action} className={entries.length ? classes.listItemTextWithNested : ''} />
                        { (secondaryIcon || !!entries.length) &&
                        <ListItemSecondaryAction onClick={entries.length ? expand : secondaryAction} className={entries.length ? classes.listItemSecondaryActionWithNested : ''}>
                            <IconButton onClick={entries.length ? expand : secondaryAction}>{entries.length ? (!expanded ? <ExpandMoreIcon /> : <ExpandLessIcon />) : secondaryIcon}</IconButton>
                        </ListItemSecondaryAction>
                        }
                    </ListItem>
                    { !!entries.length &&
                    <Collapse  in={expanded} transitionDuration={'auto'} unmountOnExit>
                        { entries.map(entry => renderListItem(entry, true)) }
                    </Collapse>
                    }
                </div>
            );
        };

        return (
            <Paper className={classes.root}>
                <List>
                    { entries.map(entry => renderListItem(entry)) }
                </List>

                <Divider />

                <List>
                    { secondaryEntries.map(entry => renderListItem(entry)) }
                </List>
            </Paper>
        );
    }
}

[damianobarbati]

@oliviertassinari honestly the only scenario I can see for nesting/using children here is to render nested list items just like the old nestedItems used to do: every other case can be handled with the left/middle/right content/icon. That’s why I don’t think we should abstract here but rather provide the specific and most used case without having the devs taking care of this everytime.

This is my personal opinion though: I agree with keeping everything as clean as possible and let devs extends functionalities when needed! 😃