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
|
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import SearchIcon from '@material-ui/icons/Search';
import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
import Star from '@material-ui/icons/Star';
import {
Drawer,
Divider,
List,
ListItem,
ListItemText,
ListItemAvatar,
Avatar,
BottomNavigation,
BottomNavigationAction,
} from '@material-ui/core';
import styles from './contact-jss';
class ContactList extends React.Component {
state = {
filter: 'all',
};
handleChange = (event, value) => {
this.setState({ filter: value });
};
render() {
const {
classes,
dataContact,
itemSelected,
showDetail,
search,
keyword,
clippedRight
} = this.props;
const { filter } = this.state;
const favoriteData = dataContact.filter(item => item.get('favorited') === true);
const getItem = dataArray => dataArray.map(data => {
const index = dataContact.indexOf(data);
if (data.get('name').toLowerCase().indexOf(keyword) === -1) {
return false;
}
return (
<ListItem
button
key={data.get('id')}
className={index === itemSelected ? classes.selected : ''}
onClick={() => showDetail(data)}
>
<ListItemAvatar>
<Avatar alt={data.get('name')} src={data.get('avatar')} className={classes.avatar} />
</ListItemAvatar>
<ListItemText primary={data.get('name')} secondary={data.get('title')} />
</ListItem>
);
});
return (
<Fragment>
<Drawer
variant="permanent"
anchor="left"
open
classes={{
paper: classes.drawerPaper,
}}
>
<div>
<div className={classNames(classes.toolbar, clippedRight && classes.clippedRight)}>
<div className={classes.flex}>
<div className={classes.searchWrapper}>
<div className={classes.search}>
<SearchIcon />
</div>
<input className={classes.input} onChange={(event) => search(event)} placeholder="Search Contact" />
</div>
</div>
</div>
<Divider />
<List>
{filter === 'all' ? getItem(dataContact) : getItem(favoriteData)}
</List>
</div>
</Drawer>
<BottomNavigation value={filter} onChange={this.handleChange} className={classes.bottomFilter}>
<BottomNavigationAction label="All" value="all" icon={<PermContactCalendar />} />
<BottomNavigationAction label="Favorites" value="favorites" icon={<Star />} />
</BottomNavigation>
</Fragment>
);
}
}
ContactList.propTypes = {
classes: PropTypes.object.isRequired,
dataContact: PropTypes.object.isRequired,
keyword: PropTypes.string.isRequired,
itemSelected: PropTypes.number.isRequired,
showDetail: PropTypes.func.isRequired,
search: PropTypes.func.isRequired,
clippedRight: PropTypes.bool,
};
ContactList.defaultProps = {
clippedRight: false
};
export default withStyles(styles)(ContactList);
|
