83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import Dialog from '@mui/material/Dialog';
|
||
|
|
import ListItemText from '@mui/material/ListItemText';
|
||
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
||
|
|
import List from '@mui/material/List';
|
||
|
|
import Divider from '@mui/material/Divider';
|
||
|
|
import AppBar from '@mui/material/AppBar';
|
||
|
|
import Toolbar from '@mui/material/Toolbar';
|
||
|
|
import IconButton from '@mui/material/IconButton';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
import CloseIcon from '@mui/icons-material/Close';
|
||
|
|
import Slide from '@mui/material/Slide';
|
||
|
|
import { TransitionProps } from '@mui/material/transitions';
|
||
|
|
|
||
|
|
const Transition = React.forwardRef(function Transition(
|
||
|
|
props: TransitionProps & {
|
||
|
|
children: React.ReactElement<unknown>;
|
||
|
|
},
|
||
|
|
ref: React.Ref<unknown>,
|
||
|
|
) {
|
||
|
|
return <Slide direction="up" ref={ref} {...props} />;
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function FullScreenDialog() {
|
||
|
|
const [open, setOpen] = React.useState(false);
|
||
|
|
|
||
|
|
const handleClickOpen = () => {
|
||
|
|
setOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
setOpen(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Button variant="outlined" onClick={handleClickOpen}>
|
||
|
|
Open full-screen dialog
|
||
|
|
</Button>
|
||
|
|
<Dialog
|
||
|
|
fullScreen
|
||
|
|
open={open}
|
||
|
|
onClose={handleClose}
|
||
|
|
slots={{
|
||
|
|
transition: Transition,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<AppBar sx={{ position: 'relative' }}>
|
||
|
|
<Toolbar>
|
||
|
|
<IconButton
|
||
|
|
edge="start"
|
||
|
|
color="inherit"
|
||
|
|
onClick={handleClose}
|
||
|
|
aria-label="close"
|
||
|
|
>
|
||
|
|
<CloseIcon />
|
||
|
|
</IconButton>
|
||
|
|
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||
|
|
Sound
|
||
|
|
</Typography>
|
||
|
|
<Button autoFocus color="inherit" onClick={handleClose}>
|
||
|
|
save
|
||
|
|
</Button>
|
||
|
|
</Toolbar>
|
||
|
|
</AppBar>
|
||
|
|
<List>
|
||
|
|
<ListItemButton>
|
||
|
|
<ListItemText primary="Phone ringtone" secondary="Titania" />
|
||
|
|
</ListItemButton>
|
||
|
|
<Divider />
|
||
|
|
<ListItemButton>
|
||
|
|
<ListItemText
|
||
|
|
primary="Default notification ringtone"
|
||
|
|
secondary="Tethys"
|
||
|
|
/>
|
||
|
|
</ListItemButton>
|
||
|
|
</List>
|
||
|
|
</Dialog>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|