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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ArrowBack from '@material-ui/icons/ArrowBack';
import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
import Add from '@material-ui/icons/Add';
import { AppBar, Toolbar, Typography, Button, IconButton } from '@material-ui/core';
import styles from './contact-jss';
class ContactHeader extends React.Component {
render() {
const {
classes,
addContact,
total,
hideDetail,
showMobileDetail
} = this.props;
return (
<AppBar
position="absolute"
className={classes.appBar}
>
<Toolbar>
{showMobileDetail && (
<IconButton
color="inherit"
aria-label="open drawer"
onClick={() => hideDetail()}
className={classes.navIconHide}
>
<ArrowBack />
</IconButton>
)}
<Typography variant="subtitle1" className={classes.title} color="inherit" noWrap>
<PermContactCalendar />
{' '}
Contacts (
{total}
)
</Typography>
<Button onClick={() => addContact()} variant="outlined" color="inherit" className={classes.button}>
<Add />
{' '}
Add New
</Button>
</Toolbar>
</AppBar>
);
}
}
ContactHeader.propTypes = {
classes: PropTypes.object.isRequired,
showMobileDetail: PropTypes.bool.isRequired,
addContact: PropTypes.func.isRequired,
hideDetail: PropTypes.func.isRequired,
total: PropTypes.number.isRequired,
};
export default withStyles(styles)(ContactHeader);
|
