forked from mui/material-ui
/
FullScreenDialog.js
86 lines (77 loc) · 2.33 KB
/
FullScreenDialog.js
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
/* eslint-disable flowtype/require-valid-file-annotation */
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import Dialog from 'material-ui/Dialog';
import List, { ListItem, ListItemText } from 'material-ui/List';
import Divider from 'material-ui/Divider';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import CloseIcon from 'material-ui-icons/Close';
import Slide from 'material-ui/transitions/Slide';
const styles = {
appBar: {
position: 'relative',
},
flex: {
flex: 1,
},
};
function Transition(props) {
return <Slide direction="up" {...props} />;
}
class FullScreenDialog extends React.Component {
state = {
open: false,
};
handleClickOpen = () => {
this.setState({ open: true });
};
handleRequestClose = () => {
this.setState({ open: false });
};
render() {
const { classes } = this.props;
return (
<div>
<Button onClick={this.handleClickOpen}>Open full-screen dialog</Button>
<Dialog
fullScreen
open={this.state.open}
onRequestClose={this.handleRequestClose}
transition={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton color="contrast" onClick={this.handleRequestClose} aria-label="Close">
<CloseIcon />
</IconButton>
<Typography type="title" color="inherit" className={classes.flex}>
Sound
</Typography>
<Button color="contrast" onClick={this.handleRequestClose}>
save
</Button>
</Toolbar>
</AppBar>
<List>
<ListItem button>
<ListItemText primary="Phone ringtone" secondary="Titania" />
</ListItem>
<Divider />
<ListItem button>
<ListItemText primary="Default notification ringtone" secondary="Tethys" />
</ListItem>
</List>
</Dialog>
</div>
);
}
}
FullScreenDialog.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(FullScreenDialog);