React Dialog box closed issue - reactjs

I want to use a dialog box of material UI. I am navigating that dialog box from the right side menu(sidebars -> user registration), using another component. I just want to open that dialog box on the current page home or about us. It is a user registration dialog. Can you help on that?
When I tried to open the user registration dialog, I am unable to open the dialog box in the current page, that's why I have created a separate component for the dialog box component.
I want to open that dialog when I select the side menu option. The dialog box should be open in the current page.
This is the code sandbox link. https://codesandbox.io/s/immutable-sound-ggj4w
App js
import React from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./home";
import About from "./about";
import Dialog from "./dialog";
import SideMenu from "./sidemu";
export default function App() {
return (
<div className="App">
<BrowserRouter>
<SideMenu />
{/* <Switch> */}
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/sidemenu" component={SideMenu} />
<Route exact path="/dialog" component={Dialog} />
{/* </Switch> */}
</BrowserRouter>
{/* <h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2> */}
</div>
);
}
home js
import React, { Component } from "react";
class Home extends Component {
render() {
return (
<div>
<div>Home</div>
</div>
);
}
}
export default Home;
about us
import React, { Component } from "react";
class Home extends Component {
render() {
return (
<div>
<div>about us</div>
</div>
);
}
}
export default Home;
dialog js
import React from 'react';
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={true}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
sidemenu js
import React from 'react';
import './styles.css';
import { Link } from 'react-router-dom';
import { makeStyles } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
import { List, ListItemIcon, ListItem, ListItemText } from '#material-ui/core';
import MenuRoundedIcon from '#material-ui/icons/MenuRounded';
import HomeRoundedIcon from '#material-ui/icons/HomeRounded';
import MenuBookRoundedIcon from '#material-ui/icons/MenuBookRounded';
const useStyles = makeStyles({
list: {
width: 250,
},
fullList: {
width: 'auto',
},
});
export default function TemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer = (side, open) => event => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
<Link className="right-menu-data" to="/">
<ListItem button>
<ListItemIcon>
<HomeRoundedIcon />
</ListItemIcon>
<ListItemText>Home</ListItemText>
</ListItem>
</Link>
<Link className="right-menu-data" to="/about"><ListItem button>
<ListItemIcon>
<MenuBookRoundedIcon />
</ListItemIcon>
<ListItemText>About us</ListItemText>
</ListItem>
</Link>
<Link className="right-menu-data" to="/dialog"><ListItem button>
<ListItemIcon>
<MenuBookRoundedIcon />
</ListItemIcon>
<ListItemText>User Registration</ListItemText>
</ListItem>
</Link>
</List>
</div>
);
return (
<div>
<MenuRoundedIcon className="careerpedia-menu-bars" onClick={toggleDrawer('right', true)} />
<Drawer anchor="right" open={state.right} onClose={toggleDrawer('right', false)}>
{sideList('right')}
</Drawer>
</div>
);
}

One way to achieving this is to factor the logic to open/close the modal out of the dialog component to a "central" location, preferably in the app, but outside the router. This allows the dialog to be opened/closed from a single location by callbacks that can be passed around the app, and not be coupled to any specific route your app is on.
A quick refactoring of your code:
dialog.js
const AlertDialog = ({ open, onAgree, onClose, onDisagree }) => (
<Dialog
open={open}
onClose={onClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onDisagree} color="primary">
Disagree
</Button>
<Button onClick={onAgree} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
);
App.js
export default function App() {
const [open, setOpen] = useState(false);
const openDialog = () => setOpen(true);
const closeDialog = () => setOpen(false);
const onAgreeHandler = () => {
closeDialog();
alert("AGREED");
};
const onDisgreeHandler = () => {
closeDialog();
alert("DISAGREED");
};
const onCloseHandler = (event, reason) => {
closeDialog();
alert(`Dialog closed. Reason: ${reason}`);
};
return (
<div className="App">
<BrowserRouter>
<SideMenu openDialog={openDialog} /> // Pass dialog open callback to sidemenu
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/dialog" component={Dialog} />
</BrowserRouter>
<Button variant="outlined" color="primary" onClick={openDialog}>
Open alert dialog test
</Button>
<Dialog
open={open}
onAgree={onAgreeHandler}
onClose={onCloseHandler}
onDisagree={onDisgreeHandler}
/>
</div>
);
}
sidemu.js
export default function TemporaryDrawer({ openDialog }) { // Accept openDialog callback
...
{ /* Add new menu list item (not in a Link!) */ }
<ListItem button onClick={openDialog}> // Set onClick handler to openDialog callback
<ListItemIcon>
<MenuBookRoundedIcon />
</ListItemIcon>
<ListItemText>Trigger dialog?</ListItemText>
</ListItem>
NOTE: As your app grows in size/complexity this pattern may become a little unwieldy (if you need to open a dialog by any further descendants) and you'll likely want to switch to using a react context provider/consumer specifically for the dialog, or use a state management system like Redux so you can dispatch simple actions to open/close it.

Related

How to make a react global state re-render component?

I have tried using two different libraries to handle this issue and both time I get the same behavior.
Libraries tried: OvermindJS, Hookstate
When I click the button I can see the state change is beeing logged in the console but the component will only re-render on the second click
If I change page:
click Home
click Page1
click No Funds
Then it will show 1$
If I click straightway the No Funds button without changing page (first action on page) then the button will not re-render until it is clicked twice.
App.tsx
import * as React from "react"
import {
ChakraProvider,
Box,
Text,
Grid,
theme,
} from "#chakra-ui/react"
import { Switch, Route } from "wouter"
import { Appbar } from "./common/AppBar"
export const App = () => (
<ChakraProvider theme={theme}>
<Appbar />
<Box textAlign="center" fontSize="xl">
<Grid minH="100vh" p={3}>
<Switch>
<Route path="/">
<Text mt={100}>Home</Text>
</Route>
<Route path="/home">
<Text mt={100}>Home</Text>
</Route>
<Route path="/page1">
<Text mt={100}>Page 1</Text>
</Route>
</Switch>
</Grid>
</Box>
</ChakraProvider>
)
AppBar.tsx
import React, { ReactNode } from "react";
import {
Box,
Flex,
HStack,
Link,
IconButton,
Button,
Icon,
useDisclosure,
useColorModeValue,
Stack,
} from '#chakra-ui/react';
import { HamburgerIcon, CloseIcon } from '#chakra-ui/icons';
import { MdAccountBalanceWallet } from 'react-icons/md'
import { useLocation } from 'wouter';
import { actionIncrementFunds, globalState } from "../hookState/state";
import { useState } from "#hookstate/core";
const Links = ['Home', 'Page1'];
const NavLink: React.FC<any> = ({ children, handleClick }: { children: ReactNode, handleClick: any }) => (
<Link
px={2}
py={1}
rounded={'md'}
_hover={{
textDecoration: 'none',
bg: useColorModeValue('red.200', 'red.300'),
}}
onClick={() => handleClick(children)}>
{children}
</Link>
);
export const Appbar: React.FC = () => {
const state = useState(globalState);
const { isOpen, onOpen, onClose } = useDisclosure();
const [location, setLocation] = useLocation();
const handleClick = (path: string) => {
setLocation(`/${path.toLowerCase()}`)
}
const hasFunds = () => {
return state.currentFunds.get() > 0
}
const handleConnectWallet = () => {
actionIncrementFunds()
}
return (
<>
<Box zIndex={900} position={"fixed"} top={0} left={0} width="100%" bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
<Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
<IconButton
size={'md'}
icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
aria-label={'Open Menu'}
display={{ md: 'none' }}
onClick={isOpen ? onClose : onOpen}
/>
<HStack height={"100%"} spacing={8} alignItems={'center'}>
<HStack
as={'nav'}
spacing={4}
display={{ base: 'none', md: 'flex' }}>
{Links.map((link) => (
<NavLink handleClick={handleClick} key={link}>{link}</NavLink>
))}
</HStack>
</HStack>
<Flex alignItems={'center'}>
{hasFunds()
? <Button
variant={'solid'}
colorScheme={'red'}
size={'md'}
onClick={handleConnectWallet}
mr={4}>
{state.currentFunds.get()} $
</Button>
: <Button
variant={'solid'}
colorScheme={'red'}
size={'md'}
mr={4}
onClick={handleConnectWallet}
leftIcon={<Icon as={MdAccountBalanceWallet} />}>
No Funds
</Button>
}
</Flex>
</Flex>
{
isOpen ? (
<Box pb={4} display={{ md: 'none' }}>
<Stack as={'nav'} spacing={4}>
{Links.map((link) => (
<NavLink handleClick={handleClick} key={link}>{link}</NavLink>
))}
</Stack>
</Box>
) : null
}
</Box >
</>
);
}
Behavior example:
Repo with example for Hookstate:
https://github.com/crimson-med/state-issue
Repo with example for OvermindJS:
https://github.com/crimson-med/state-issue/tree/overmind
How can I get the button on change on the first click?

React Class Component not working properly for me

I have a component of "Drawer", I am opening and closing this drawer with component state and passing this state down to the Drawer Component and Also passing a callback function that can help me to close the drawer,
Now the issue is that when ever I am trying to open that drawer, the whole ui is disappearing. Need help
here is the code
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import Drawer from '../Drawer';
import Header from '../Header';
export default class LandingPage extends Component {
constructor() {
super();
this.state = {
openDrawer: false,
};
}
handleDrawer = (state) => {
this.setState({
openDrawer: state,
});
};
render() {
return (
<div className='landing-page-container'>
<div className='menu-btn'>
<IconButton
edge='start'
color='inherit'
aria-label='menu'
onClick={() => this.handleDrawer(true)}
>
<MenuIcon />
</IconButton>
</div>
<Drawer
handleDrawer={this.handleDrawer}
openDrawer={this.state.openDrawer}
/>
</div>
);
}
}
Here is Drawer
import React, { Component } from 'react';
import {
Drawer,
IconButton,
Divider,
List,
ListItem,
ListItemIcon,
Button,
ListItemText,
makeStyles,
} from '#material-ui/core';
import { withStyles } from '#material-ui/core/styles';
import {
ChevronLeft,
NoteAdd,
Person,
PersonAdd,
AttachMoney,
Build,
Settings,
} from '#material-ui/icons';
const styles = makeStyles((theme) => ({
root: {
display: 'flex',
},
drawerPaper: {
backgroundColor: theme.primary,
},
}));
export class DrawerMenu extends Component {
render() {
const { classes, openDrawer, handleDrawer } = this.props;
return (
<div className='drawer-container'>
<Drawer
variant='persistent'
anchor='left'
open={false}
classes={{
paper: classes.drawerPaper,
}}
backgroundColor='primary'
>
<div className='logo-icon'>
<div className='logo'>Logo</div>
<div className='collapse-icon'>
<IconButton onClick={() => handleDrawer(false)}>
<ChevronLeft />
</IconButton>
</div>
</div>
<Divider />
<div className='drawer-menu-container'>
<div className='drawer-menu'>
<List>
{[
'Booking',
'Positions',
'User Management',
'Trading',
'Instruments',
].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index === 0 && <NoteAdd />}
{index === 1 && <Person />}
{index === 2 && <PersonAdd />}
{index === 3 && <AttachMoney />}
{index === 4 && <Build />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
</div>
<div className='drawer-action-button'>
<div className='setting-logout'>
<div className='setting'>
<Settings />
</div>
<div className='logout'>
<Button variant='contained' color='primary'>
Logout
</Button>
</div>
</div>
</div>
</div>
</Drawer>
</div>
);
}
}
export default withStyles(styles, { withTheme: true })(DrawerMenu);
Your problem could be related to the fact that your Drawer is not on a Fragment. Try to modify your Drawer component code like:
import React, { Component, Fragment } from 'react'; //<-- import Fragment
...
export class DrawerMenu extends Component {
render() {
<div className='drawer-container'>
<Fragment>
<Drawer
variant='persistent'
anchor='left'
open={false}
classes={{
paper: classes.drawerPaper,
}}
backgroundColor='primary'
>
...
</Drawer>
</Fragment>
</div>
};
}
This should solve your problem.

Idiomatic way to handle Message Alerts state in React and Material-UI

I basically am building a web application using react and material UI. I have a registration form.
When this registration form successfully submits, it should display a success message at the top of the page.
Now, I have cordoned off the top of every page to show the MyAlert component. I have done this to make my site more consistent. Basically whenever there is a message to show to the user, it will render there.
Now, the issue is once the message is shown, if I navigate around my site, there is no way to turn it off.
Could someone please help explain what the best way to show a message once, then hide it would be? Basically once the user registers successfully, show a success message. Once the user navigates to a new page, hide the message at the top until a new message needs to be shown.
I imagine this is a very common design pattern, so I must be missing something in terms of React knowledge. Even best practice design patterns, or links to how it can be handled would be appreciated.
My toy app looks as follows:
App.jsx
import * as React from 'react'
import { useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
import { Alert } from '#material-ui/lab'
import MenuIcon from '#material-ui/icons/Menu'
import {
Button,
AppBar,
Toolbar,
IconButton,
Typography,
makeStyles,
Container,
} from '#material-ui/core'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}))
const Navbar = (props) => {
const classes = useStyles()
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
<Button color="inherit" component={Link} to={'/'}>
My App
</Button>
</Typography>
<Button color="inherit" component={Link} to={'/register'}>
Register
</Button>
</Toolbar>
</AppBar>
</div>
)
}
const Register = (props) => {
const classes = useStyles()
const { setShowAlert, setAlertMessage, setAlertSeverity } = props
useEffect(() => {
console.log('use effected')
}, [])
const handleRegistration = () => {
setAlertMessage(
'You have succesfully registered! Please check your email for a verification link.'
)
setAlertSeverity('success')
setShowAlert(true)
}
return (
<Container maxWidth="sm" align="center" className={classes.root}>
This is some kind of form. I have redacted all input fields to
illustrate the issue more clearly.<br></br>
<Button
variant="contained"
color="primary"
onClick={handleRegistration}
>
Register
</Button>
</Container>
)
}
const MyAlert = (props) => {
const { severity, message } = props
return <Alert severity={severity}>{message}</Alert>
}
const App = () => {
const [alertSeverity, setAlertSeverity] = useState('')
const [alertMessage, setAlertMessage] = useState('')
const [showAlert, setShowAlert] = useState(false)
return (
<BrowserRouter>
<div className="app">
<Navbar />
<div>{showAlert ? 'true' : 'false'}</div>
{showAlert ? (
<MyAlert severity={alertSeverity} message={alertMessage} />
) : (
''
)}
<Switch>
<Route
path="/register"
render={(props) => (
<Register
{...props}
setShowAlert={setShowAlert}
setAlertMessage={setAlertMessage}
setAlertSeverity={setAlertSeverity}
/>
)}
/>
</Switch>
</div>
</BrowserRouter>
)
}
export default App
index.jsx
import * as React from "react"
import { render } from "react-dom"
import App from './App';
render(<App />, document.getElementById("app"))
Wouldn't that just be the case of using a setTimeout? When MyAlert is rendered, show it for 5 seconds and then dismiss.
First, pass it as a prop to your component (I also proposed a slightly different conditional render):
<BrowserRouter>
<div className="app">
<Navbar />
<div>{showAlert ? 'true' : 'false'}</div>
{showAlert &&
<MyAlert severity={alertSeverity} message={alertMessage} setShowAlert = {setShowAlert}/> }
<Switch>
<Route
path="/register"
render={(props) => (
<Register
{...props}
setShowAlert={setShowAlert}
setAlertMessage={setAlertMessage}
setAlertSeverity={setAlertSeverity}
/>
)}
/>
</Switch>
</div>
</BrowserRouter>
Then in your MyAlert component, use useEffect to trigger a timeout:
const MyAlert = (props) => {
useEffect(() => {
const timeout = setTimeout(() => {
props.setShowAlert(false); // Disable your alert after 5 seconds
}, 5000);
return () => {
clearTimeout(timeout); // Clears timer in case you close your alert somewhere else.
}
}, [])
}

ReactJS Modal with Material UI

I'm trying to make a reusable confirmation modal with Material UI but when I press CANCEL or OK the modal does not close.
The code is here:
https://codesandbox.io/s/lucid-hoover-sput6?file=/src/App.js
I can't figure it out why the pop don't dissapear.
LE: added the code here so it remains
ConfirmModal.js
import React from "react";
import { Button } from "#material-ui/core";
import Dialog from "#material-ui/core/Dialog";
import DialogActions from "#material-ui/core/DialogActions";
import DialogContent from "#material-ui/core/DialogContent";
import DialogContentText from "#material-ui/core/DialogContentText";
const ConfirmModal = (props) => {
const { content, open, setOpen, onConfirm } = props;
return (
<Dialog
open={open}
onClose={() => setOpen(false)}
aria-labelledby="dialog-title"
>
<DialogContent>
<DialogContentText>{content}</DialogContentText>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={() => setOpen(false)} color="primary">
Cancel
</Button>
<Button
onClick={() => {
setOpen(false);
onConfirm();
}}
color="primary"
>
OK
</Button>
</DialogActions>
</Dialog>
// </div>
);
};
export default ConfirmModal;
App.js
import React, { useState } from "react";
import { IconButton } from "#material-ui/core";
import { Input as InputIcon } from "#material-ui/icons";
import ConfirmModal from "./ConfirmModal";
export default function App() {
const [confirmOpen, setConfirmOpen] = useState(false);
const handleLogout = () => {
console.log("this hould logout the user");
};
return (
<div className="App">
<h2>Press the button below so the confirmation modal appears </h2>
<IconButton color="inherit" onClick={() => setConfirmOpen(true)}>
<InputIcon />
<ConfirmModal
content="Are you sure you want to leeeave us ?"
open={confirmOpen}
setOpen={setConfirmOpen}
onConfirm={handleLogout}
/>
</IconButton>
</div>
);
}
Move the modal out of the button. The Modal's cancel/confirm/backdrop click events are propagating (bubbling) up to the open button (IconButton) and its onClick handler is just reopening the modal by setting confirmOpen state true.
export default function App() {
const [confirmOpen, setConfirmOpen] = useState(false);
const handleLogout = () => {
console.log("this hould logout the user");
};
return (
<div className="App">
<h2>Press the button below so the confirmation modal appears </h2>
<IconButton color="inherit" onClick={() => setConfirmOpen(true)}>
<InputIcon />
</IconButton>
<ConfirmModal
content="Are you sure you want to leeeave us ?"
open={confirmOpen}
setOpen={setConfirmOpen}
onConfirm={handleLogout}
/>
</div>
);
}

React passing down a function that modifies a third component

I have been trying to create a component per function in my app, but I am facing the following issue.
I have the component DisplayAllData that sends the data and an actionable button to DisplayDataWithButton, the issue is that when someone clicks on the Button send in the props, the function modifies the state of the parent component, which is also sent as a parameter to FullScreenDialog, and that throws a Warning: Cannot update a component while rendering a different component.
I designed the components in this particular way because:
DisplayAllData is the only function that has the data to render and the actionable button. (Model)
DisplayDataWithButton only renders the data and displays the actionable components for that particular data, in this case a button that opens a Dialog in screen. (Viewer)
You can find a running example here: https://codesandbox.io/s/material-demo-forked-8oyef
import React from "react";
import Button from "#material-ui/core/Button";
import DisplayDataWithButton from "./DisplayDataWithButton";
import FullScreenDialog from "./fullscreendialog";
export default function App(props) {
const [openFullScreen, setopenFullScreen] = React.useState(false);
var items = ["John", "Melinda"];
var dataDisplayFunction = (data) => {
return data.map((item) => {
return [
item,
<Button
color="success"
size="small"
className="px-2"
variant="contained"
onClick={setopenFullScreen()}
>
Show Dialog
</Button>
];
});
};
return (
<>
<DisplayDataWithButton
shapeDataFunction={dataDisplayFunction}
data={items}
/>
<FullScreenDialog open={openFullScreen} />
</>
);
}
DisplayDataWithButton.js
export default function DisplayDataWithButton(props) {
return props.shapeDataFunction(props.data);
}
I suspect that there is another way to implement this model, any suggestion, or ideas on how to fix this one.
Thanks
A couple of things: "I have been trying to create a component per function in my app". Forget that - the pattern you have opted for here is called render props but I don't see how it is necessary. Keep it simple. If a big component is simpler to understand than a small component I always opt for the bigger component. Splitting your components will not magically make them easier to understand.
All of the warnings have been dealt with. Most of them were simple mistakes, for example: onClick={setopenFullScreen()} should be onClick={setopenFullScreen}. You can compare your sandbox with my sandbox for all of the changes.
import React from "react";
import ReactDOM from "react-dom";
import Button from "#material-ui/core/Button";
import FullScreenDialog from "./fullscreendialog";
export default function App() {
const [openFullScreen, setopenFullScreen] = React.useState(false);
const items = ["John", "Melinda"];
return (
<>
{items.map((item) => [
item,
<Button
key={item}
color="primary"
size="small"
className="px-2"
variant="contained"
onClick={() => setopenFullScreen((prev) => !prev)}
>
Show Dialog
</Button>
])}
<FullScreenDialog open={openFullScreen} />
</>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
import React from "react";
import { makeStyles } from "#material-ui/core";
import Button from "#material-ui/core/Button";
import Dialog from "#material-ui/core/Dialog";
import ListItemText from "#material-ui/core/ListItemText";
import ListItem from "#material-ui/core/ListItem";
import List from "#material-ui/core/List";
import Divider from "#material-ui/core/Divider";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import IconButton from "#material-ui/core/IconButton";
import Typography from "#material-ui/core/Typography";
import CloseIcon from "#material-ui/icons/Close";
import Slide from "#material-ui/core/Slide";
const useStyles = makeStyles((theme) => ({
appBar: {
position: "relative"
},
title: {
marginLeft: theme.spacing(2),
flex: 1
}
}));
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
export default function FullScreenDialog(props) {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Dialog
fullScreen
open={props.open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Sound
</Typography>
<Button autoFocus color="inherit" onClick={handleClose}>
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>
);
}

Resources