Im trying to use a Selectable list of items in my Drawer Component. Im using the sample code define in the Material-ui documentation (Material-UI List Documentation), but things are not working as expected. Can anyone here helps me with a basic sample code using Selectable list or point me any good documentation or tutorial.
import React from 'react';
import Component from 'react';
import PropTypes from 'react';
import MobileTearSheet from '../../../MobileTearSheet';
import {List, ListItem, MakeSelectable} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import Subheader from 'material-ui/Subheader';
let SelectableList = MakeSelectable(List);
function wrapState(ComposedComponent) {
return class SelectableList extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
defaultValue: PropTypes.number.isRequired,
};
componentWillMount() {
this.setState({
selectedIndex: this.props.defaultValue,
});
}
handleRequestChange = (event, index) => {
this.setState({
selectedIndex: index,
});
};
render() {
return (
<ComposedComponent value={this.state.selectedIndex} onChange={this.handleRequestChange}>
{this.props.children}
</ComposedComponent>
);
}
};
}
SelectableList = wrapState(SelectableList);
const ListExampleSelectable = () => (
<MobileTearSheet>
<SelectableList defaultValue={3}>
<Subheader>Selectable Contacts</Subheader>
<ListItem
value={1}
primaryText="Brendan Lim"
leftAvatar={<Avatar src="/images/obenbasic.png" />}
nestedItems={[
<ListItem
value={2}
primaryText="Grace Ng"
leftAvatar={<Avatar src="/images/obenbasic.png" />}
/>,
]}
/>
<ListItem
value={3}
primaryText="Kerem Suer"
leftAvatar={<Avatar src="/images/obenbasic.png" />}
/>
<ListItem
value={4}
primaryText="Eric Hoffman"
leftAvatar={<Avatar src="/images/obenbasic.png" />}
/>
<ListItem
value={5}
primaryText="Raquel Parrado"
leftAvatar={<Avatar src="/images/obenbasic.png" />}
/>
</SelectableList>
</MobileTearSheet>
);
export default ListExampleSelectable;and I use the Selectable List like this:
<Drawer open={false} width="180px" >
<MenuItem primaryText="MENU ITEM" />
<ListExampleSelectable />
</Drawer>
I hope this will give you an idea of what i'm doing...
