react-toolbox/spec/ts/list.tsx

import * as 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<any, any> {
  state: any = {
    checkbox1: false,
    checkbox2: true,
    checkbox3: true,
  };

  handleCheckboxChange = (field: any) => {
    const newState: any = {};
    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;