import import React, {Component, PropTypes} from 'react'
// With material-ui
// be sure to have <MuiTreeList /> inside <MuiThemeProvider />
import {MuiTreeList} from 'react-treeview-mui'
// Without material-ui styling
import {TreeList} from 'react-treeview-mui'

// UI state (e.g., expanded list items) is tracked locally
const listItems = [...,{title: 'List Item'},...]
class MyComponent extends Component {
	render() {
		<MuiTreeList
			listItems={listItems}
			contentKey={'title'} />
	}
}

// UI state is tracked outside of <MuiTreeList />
// Maybe through Redux
class MySecondComponent extends Component {
	render() {
		<MuiTreeList 
			listItems={listItems}
			contentKey={'title'}
			useFolderIcons={true}
			haveSearchbar={true}
			listItemIsEnabled={this.props.listItemIsEnabled}
			expandedListItems={this.props.expandedListItems}
			activeListItem={this.props.activeListItem}
			handleTouchTap={this.props.handleTouchTap}
			handleTouchTapInSearchMode={this.props.handleTouchTapInSearchMode}
			handleSearch={this.props.handleSearch}
			searchTerm={this.props.searchTerm} />
	}
}

const listItems = [
{
    // Each list item is tracked by its index in the master array
    depth: 0, // Used to style the list item. Items with 0 depth will not be rendered and act as the root parent
    children: [1, 3, 10] // Indexes for child list items. If undefined, list item will be treated as leaf
}   
...,
{
    depth: 1,
    children: [12,16],
    parentIndex: 0, // Index of parent list item
    disabled: false // false by default, disables click event listeners for disabled list items
},{
    depth: 2,
    children: [13,14,15],
    parentIndex: 11,
    disabled: false
},
...
]