react-toolbox/spec/components/list.jsx at site · PavelCSS/react-toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React from 'react';
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';

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' 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/459485216499720192/ufS4YGOY_400x400.png'
              caption='Javi Velasco'
              legend='Frontend engineer at Socialbro'
              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/477103691506282499/bsIaPEiM_400x400.jpeg'
              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, sinle 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/459485216499720192/ufS4YGOY_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/477103691506282499/bsIaPEiM_400x400.jpeg'
              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>
      </section>
    );
  }
}

export default ListTest;