@ftrack/react-toolbox
Version:
A set of React components implementing Google's Material Design specification with the power of CSS Modules.
191 lines (180 loc) • 7.36 kB
JavaScript
import React from 'react';
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from '../../components/list';
import { Button } from '../../components/button';
import Avatar from '../../components/avatar';
import FontIcon from '../../components/font_icon';
const listStyle = {
border: '1px solid #EEE',
display: 'inline-block',
minWidth: 340
};
class ListTest extends React.Component {
state = {
checkbox1: false,
checkbox2: true,
checkbox3: true
};
handleCheckboxChange = (field) => {
const newState = {};
newState[field] = !this.state[field];
this.setState(newState);
};
render () {
return (
<section>
<h5>With simple text and icons</h5>
<p>This list can be used inside a Drawer for a list of options or as navigation.</p>
<div style={listStyle}>
<List selectable ripple>
<ListSubHeader caption='Contacts' />
<ListItem caption='Inbox' leftIcon='inbox' />
<ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
<ListItem caption='Trash' leftIcon='delete' />
<ListItem caption='Spam' leftIcon='report' />
</List>
</div>
<h5>Two text lines, avatar and right icon</h5>
<p>Useful for a list of contacts or similar.</p>
<div style={listStyle}>
<List selectable ripple>
<ListSubHeader caption='Contacts' />
<ListItem
avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
caption='Alfonso Rocha'
legend='Product Manager at Fon'
rightIcon='star'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
caption='Javi Velasco'
legend='Frontend engineer at Audiense'
rightIcon='star'
/>
<ListItem
avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
caption='Javi Jiménez'
legend='Frontend engineer at MediaSmart'
rightIcon='star'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/755797598565531649/Whsf9259.jpg'
caption='Tobias Van Schneider'
legend='Designer at Spotify'
rightIcon='star'
/>
</List>
</div>
<h5>Two line options and checkbox items</h5>
<p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
<div style={listStyle}>
<List>
<ListSubHeader caption='General' />
<ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
<ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
</List>
<ListDivider />
<List>
<ListSubHeader caption='Hangout notifications' />
<ListCheckbox
caption='Notifications'
checked={this.state.checkbox1}
legend='Allow notifications'
onChange={this.handleCheckboxChange.bind(this, 'checkbox1')}
/>
<ListCheckbox
caption='Sound'
checked={this.state.checkbox2}
legend='Hangouts message'
onChange={this.handleCheckboxChange.bind(this, 'checkbox2')}
/>
<ListCheckbox
caption='Video sounds'
checked
disabled
legend='Hangouts video call'
/>
</List>
</div>
<h5>Avatar, single text and icon</h5>
<p>Similar to a previous one but only with one text line</p>
<div style={listStyle}>
<List>
<ListItem
avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
caption='Alfonso Rocha'
rightIcon='mail'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
caption='Javi Velasco'
rightIcon='mail'
/>
<ListItem
avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
caption='Javi Jiménez'
rightIcon='mail'
/>
<ListItem
avatar='https://pbs.twimg.com/profile_images/755797598565531649/Whsf9259.jpg'
caption='Tobias Van Schneider'
rightIcon='mail'
/>
</List>
</div>
<h5>Simple with just one text line</h5>
<p>The most simple list.</p>
<div style={listStyle}>
<List>
<ListItem caption='Alfonso Rocha' />
<ListItem caption='Javi Velasco' />
<ListItem caption='Javi Jiménez' />
<ListItem caption='Tobias Van Schneider' />
<ListDivider />
<ListItem caption='Other people' />
</List>
</div>
<h5> List with custom components </h5>
<p> Using custom components in list item </p>
<div style={listStyle}>
<List ripple selectable>
<ListItem leftIcon='send' rightIcon='done' caption='Reference item'/>
<ListItem rightIcon='done' caption='Item with custom left icons'>
<FontIcon value='send' />
<Avatar image='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'/>
</ListItem>
<ListItem leftIcon='send'>
<ListItemContent caption='custom right icons' legend='ListItemContent acts as a divider'/>
<FontIcon value='done' />
<FontIcon value='undo' />
</ListItem>
<ListItem leftIcon='mail' rightIcon='create'>
<ListItemContent>
<ListItemText primary> Custom Caption </ListItemText>
</ListItemContent>
</ListItem>
<ListItem leftIcon='save' rightIcon='delete'>
<ListItemContent>
<ListItemText primary onClick={() => {console.log('clicked caption');}}>
Custom caption with events
</ListItemText>
<ListItemText> Custom legend with correct height </ListItemText>
</ListItemContent>
</ListItem>
<ListItem caption='Item with a button'>
<Button icon='save' label='save' onClick={() => console.log('clicked button')}/>
</ListItem>
<ListItem caption='Item with overlayed click events' onClick={() => console.log('clicked row')}>
<FontIcon value='send' onClick={() => console.log('clicked icon')}/>
<Avatar
image='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
onMouseDown={() => console.log('avatar mouse down, should see ripple')}
onClick={() => console.log('clicked avatar')}
/>
</ListItem>
</List>
</div>
</section>
);
}
}
export default ListTest;