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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import PersonIcon from '@material-ui/icons/Person';
import AddIcon from '@material-ui/icons/Add';
import { blue } from '@material-ui/core/colors';
import {
Button,
Avatar,
List,
ListItem,
ListItemText,
ListItemAvatar,
Dialog,
DialogTitle,
Typography,
Grid,
} from '@material-ui/core';
const emails = ['username@mail.com', 'user02@mail.com'];
const styles = ({
avatar: {
backgroundColor: blue[100],
color: blue[600],
},
});
const SimpleDialog = props => {
const {
classes,
onClose,
selectedValue,
...other
} = props;
function handleClose() {
props.onClose(this.props.selectedValue);
}
function handleListItemClick(value) {
props.onClose(value);
}
return (
<Dialog onClose={() => handleClose()} aria-labelledby="simple-dialog-title" {...other}>
<DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
<div>
<List>
{emails.map(email => (
<ListItem button onClick={() => handleListItemClick(email)} key={email}>
<ListItemAvatar>
<Avatar className={classes.avatar}>
<PersonIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={email} />
</ListItem>
))}
<ListItem button onClick={() => handleListItemClick('addAccount')}>
<ListItemAvatar>
<Avatar>
<AddIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="add account" />
</ListItem>
</List>
</div>
</Dialog>
);
};
SimpleDialog.propTypes = {
classes: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
selectedValue: PropTypes.string.isRequired,
};
const SimpleDialogWrapped = withStyles(styles)(SimpleDialog);
class SelectDialog extends React.Component {
state = {
open: false,
selectedValue: emails[1],
};
handleClickOpen = () => {
this.setState({
open: true,
});
};
handleClose = value => {
this.setState({ selectedValue: value, open: false });
};
render() {
return (
<div>
<Grid container justify="center" direction="column">
<Typography variant="subtitle1">
Selected:
<strong>{this.state.selectedValue}</strong>
</Typography>
<br />
<Button variant="contained" color="primary" onClick={this.handleClickOpen}>Open simple dialog</Button>
<SimpleDialogWrapped
selectedValue={this.state.selectedValue}
open={this.state.open}
onClose={this.handleClose}
/>
</Grid>
</div>
);
}
}
export default SelectDialog;
|
