Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/37.d3637f61.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[37],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return T}));var o=t(118),a=t(1100),i=t(1109),l=t(1090),r=t(1117),s=t(1119),c=t(5),m=t(0),d=t(1024),u=t(551),p=t(1087),h=t(1099),g=t(11),b=t(370),j=t(371),f=t(1131),x=t.n(f),O=t(1);const C=Object(d.a)({productionPrefix:"iframe-"});class y extends m.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(b.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(j.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(O.jsxs)(O.Fragment,{children:[Object(O.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(O.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(O.jsx)(x.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(p.b,{jss:this.state.jss,generateClassName:C,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:t,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var D=Object(g.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function v(e){const[n,t]=Object(m.useState)(e.currentTabIndex),{component:d,raw:u,iframe:p,className:h}=e;return Object(O.jsxs)(i.a,{className:Object(c.a)(h,"shadow"),children:[Object(O.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[d&&Object(O.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(l.a,{children:"remove_red_eye"})}),u&&Object(O.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(l.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:d&&(p?Object(O.jsx)(D,{children:Object(O.jsx)(d,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(d,{})}))}),Object(O.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:u&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:u.default})})})]})]})}v.defaultProps={currentTabIndex:0};var T=v},1912:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return v}));var o=t(0),a=t.n(o),i=t(1072),l=t(1098),r=t(1124),s=t(1033),c=t(1034),m=t(1343),d=t(1103),u=t(1247),p=t(1085),h=t(1913),g=t.n(h),b=t(1174),j=t.n(b),f=t(194),x=t(148),O=t(1);const C=["username@gmail.com","user02@gmail.com"],y=Object(i.a)({avatar:{backgroundColor:x.a[100],color:x.a[600]}});function D(e){const n=y(),{onClose:t,selectedValue:o,open:a}=e,i=e=>{t(e)};return Object(O.jsxs)(p.a,{onClose:()=>{t(o)},"aria-labelledby":"simple-dialog-title",open:a,children:[Object(O.jsx)(u.a,{id:"simple-dialog-title",children:"Set backup account"}),Object(O.jsxs)(s.a,{children:[C.map((e=>Object(O.jsxs)(c.a,{button:!0,onClick:()=>i(e),children:[Object(O.jsx)(m.a,{children:Object(O.jsx)(r.a,{className:n.avatar,children:Object(O.jsx)(g.a,{})})}),Object(O.jsx)(d.a,{primary:e})]},e))),Object(O.jsxs)(c.a,{autoFocus:!0,button:!0,onClick:()=>i("addAccount"),children:[Object(O.jsx)(m.a,{children:Object(O.jsx)(r.a,{children:Object(O.jsx)(j.a,{})})}),Object(O.jsx)(d.a,{primary:"Add account"})]})]})]})}function v(){const[e,n]=a.a.useState(!1),[t,o]=a.a.useState(C[1]);return Object(O.jsxs)("div",{children:[Object(O.jsxs)(f.a,{variant:"subtitle1",children:["Selected: ",t]}),Object(O.jsx)("br",{}),Object(O.jsx)(l.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Open simple dialog"}),Object(O.jsx)(D,{selectedValue:t,open:e,onClose:e=>{n(!1),o(e)}})]})}},1914:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Avatar from '@material-ui/core/Avatar';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Dialog from '@material-ui/core/Dialog';\nimport PersonIcon from '@material-ui/icons/Person';\nimport AddIcon from '@material-ui/icons/Add';\nimport Typography from '@material-ui/core/Typography';\nimport { blue } from '@material-ui/core/colors';\n\nconst emails = ['username@gmail.com', 'user02@gmail.com'];\nconst useStyles = makeStyles({\n avatar: {\n backgroundColor: blue[100],\n color: blue[600],\n },\n});\n\nfunction SimpleDialog(props) {\n const classes = useStyles();\n const { onClose, selectedValue, open } = props;\n\n const handleClose = () => {\n onClose(selectedValue);\n };\n\n const handleListItemClick = (value) => {\n onClose(value);\n };\n\n return (\n <Dialog onClose={handleClose} aria-labelledby=\"simple-dialog-title\" open={open}>\n <DialogTitle id=\"simple-dialog-title\">Set backup account</DialogTitle>\n <List>\n {emails.map((email) => (\n <ListItem button onClick={() => handleListItemClick(email)} key={email}>\n <ListItemAvatar>\n <Avatar className={classes.avatar}>\n <PersonIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary={email} />\n </ListItem>\n ))}\n\n <ListItem autoFocus button onClick={() => handleListItemClick('addAccount')}>\n <ListItemAvatar>\n <Avatar>\n <AddIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Add account\" />\n </ListItem>\n </List>\n </Dialog>\n );\n}\n\nSimpleDialog.propTypes = {\n onClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n selectedValue: PropTypes.string.isRequired,\n};\n\nexport default function SimpleDialogDemo() {\n const [open, setOpen] = React.useState(false);\n const [selectedValue, setSelectedValue] = React.useState(emails[1]);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = (value) => {\n setOpen(false);\n setSelectedValue(value);\n };\n\n return (\n <div>\n <Typography variant=\"subtitle1\">Selected: {selectedValue}</Typography>\n <br />\n <Button variant=\"outlined\" color=\"primary\" onClick={handleClickOpen}>\n Open simple dialog\n </Button>\n <SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />\n </div>\n );\n}\n"},1915:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));var o=t(0),a=t.n(o),i=t(1098),l=t(1085),r=t(1196),s=t(1194),c=t(1290),m=t(1247),d=t(1);function u(){const[e,n]=a.a.useState(!1),t=()=>{n(!1)};return Object(d.jsxs)("div",{children:[Object(d.jsx)(i.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Open alert dialog"}),Object(d.jsxs)(l.a,{open:e,onClose:t,"aria-labelledby":"alert-dialog-title","aria-describedby":"alert-dialog-description",children:[Object(d.jsx)(m.a,{id:"alert-dialog-title",children:"Use Google's location service?"}),Object(d.jsx)(s.a,{children:Object(d.jsx)(c.a,{id:"alert-dialog-description",children:"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."})}),Object(d.jsxs)(r.a,{children:[Object(d.jsx)(i.a,{onClick:t,color:"primary",children:"Disagree"}),Object(d.jsx)(i.a,{onClick:t,color:"primary",autoFocus:!0,children:"Agree"})]})]})]})}},1916:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport Button from \'@material-ui/core/Button\';\nimport Dialog from \'@material-ui/core/Dialog\';\nimport DialogActions from \'@material-ui/core/DialogActions\';\nimport DialogContent from \'@material-ui/core/DialogContent\';\nimport DialogContentText from \'@material-ui/core/DialogContentText\';\nimport DialogTitle from \'@material-ui/core/DialogTitle\';\n\nexport default function AlertDialog() {\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant="outlined" color="primary" onClick={handleClickOpen}>\n Open alert dialog\n </Button>\n <Dialog\n open={open}\n onClose={handleClose}\n aria-labelledby="alert-dialog-title"\n aria-describedby="alert-dialog-description"\n >\n <DialogTitle id="alert-dialog-title">{"Use Google\'s location service?"}</DialogTitle>\n <DialogContent>\n <DialogContentText id="alert-dialog-description">\n Let Google help apps determine location. This means sending anonymous location data to\n Google, even when no apps are running.\n </DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color="primary">\n Disagree\n </Button>\n <Button onClick={handleClose} color="primary" autoFocus>\n Agree\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n'},1917:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return h}));var o=t(0),a=t.n(o),i=t(1098),l=t(1085),r=t(1196),s=t(1194),c=t(1290),m=t(1247),d=t(1040),u=t(1);const p=a.a.forwardRef((function(e,n){return Object(u.jsx)(d.a,{direction:"up",ref:n,...e})}));function h(){const[e,n]=a.a.useState(!1),t=()=>{n(!1)};return Object(u.jsxs)("div",{children:[Object(u.jsx)(i.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Slide in alert dialog"}),Object(u.jsxs)(l.a,{open:e,TransitionComponent:p,keepMounted:!0,onClose:t,"aria-labelledby":"alert-dialog-slide-title","aria-describedby":"alert-dialog-slide-description",children:[Object(u.jsx)(m.a,{id:"alert-dialog-slide-title",children:"Use Google's location service?"}),Object(u.jsx)(s.a,{children:Object(u.jsx)(c.a,{id:"alert-dialog-slide-description",children:"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."})}),Object(u.jsxs)(r.a,{children:[Object(u.jsx)(i.a,{onClick:t,color:"primary",children:"Disagree"}),Object(u.jsx)(i.a,{onClick:t,color:"primary",children:"Agree"})]})]})]})}},1918:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport Button from \'@material-ui/core/Button\';\nimport Dialog from \'@material-ui/core/Dialog\';\nimport DialogActions from \'@material-ui/core/DialogActions\';\nimport DialogContent from \'@material-ui/core/DialogContent\';\nimport DialogContentText from \'@material-ui/core/DialogContentText\';\nimport DialogTitle from \'@material-ui/core/DialogTitle\';\nimport Slide from \'@material-ui/core/Slide\';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return <Slide direction="up" ref={ref} {...props} />;\n});\n\nexport default function AlertDialogSlide() {\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant="outlined" color="primary" onClick={handleClickOpen}>\n Slide in alert dialog\n </Button>\n <Dialog\n open={open}\n TransitionComponent={Transition}\n keepMounted\n onClose={handleClose}\n aria-labelledby="alert-dialog-slide-title"\n aria-describedby="alert-dialog-slide-description"\n >\n <DialogTitle id="alert-dialog-slide-title">{"Use Google\'s location service?"}</DialogTitle>\n <DialogContent>\n <DialogContentText id="alert-dialog-slide-description">\n Let Google help apps determine location. This means sending anonymous location data to\n Google, even when no apps are running.\n </DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color="primary">\n Disagree\n </Button>\n <Button onClick={handleClose} color="primary">\n Agree\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n'},1919:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var o=t(0),a=t.n(o),i=t(1098),l=t(1096),r=t(1085),s=t(1196),c=t(1194),m=t(1290),d=t(1247),u=t(1);function p(){const[e,n]=a.a.useState(!1),t=()=>{n(!1)};return Object(u.jsxs)("div",{children:[Object(u.jsx)(i.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Open form dialog"}),Object(u.jsxs)(r.a,{open:e,onClose:t,"aria-labelledby":"form-dialog-title",children:[Object(u.jsx)(d.a,{id:"form-dialog-title",children:"Subscribe"}),Object(u.jsxs)(c.a,{children:[Object(u.jsx)(m.a,{children:"To subscribe to this website, please enter your email address here. We will send updates occasionally."}),Object(u.jsx)(l.a,{autoFocus:!0,margin:"dense",id:"name",label:"Email Address",type:"email",fullWidth:!0})]}),Object(u.jsxs)(s.a,{children:[Object(u.jsx)(i.a,{onClick:t,color:"primary",children:"Cancel"}),Object(u.jsx)(i.a,{onClick:t,color:"primary",children:"Subscribe"})]})]})]})}},1920:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport Button from \'@material-ui/core/Button\';\nimport TextField from \'@material-ui/core/TextField\';\nimport Dialog from \'@material-ui/core/Dialog\';\nimport DialogActions from \'@material-ui/core/DialogActions\';\nimport DialogContent from \'@material-ui/core/DialogContent\';\nimport DialogContentText from \'@material-ui/core/DialogContentText\';\nimport DialogTitle from \'@material-ui/core/DialogTitle\';\n\nexport default function FormDialog() {\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant="outlined" color="primary" onClick={handleClickOpen}>\n Open form dialog\n </Button>\n <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">\n <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>\n <DialogContent>\n <DialogContentText>\n To subscribe to this website, please enter your email address here. We will send updates\n occasionally.\n </DialogContentText>\n <TextField\n autoFocus\n margin="dense"\n id="name"\n label="Email Address"\n type="email"\n fullWidth\n />\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color="primary">\n Cancel\n </Button>\n <Button onClick={handleClose} color="primary">\n Subscribe\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n'},1921:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return x}));var o=t(0),a=t.n(o),i=t(11),l=t(1098),r=t(1085),s=t(1247),c=t(1194),m=t(1196),d=t(1028),u=t(1185),p=t.n(u),h=t(194),g=t(1);const b=Object(i.a)((e=>({root:{margin:0,padding:e.spacing(2)},closeButton:{position:"absolute",right:e.spacing(1),top:e.spacing(1),color:e.palette.grey[500]}})))((e=>{const{children:n,classes:t,onClose:o,...a}=e;return Object(g.jsxs)(s.a,{disableTypography:!0,className:t.root,...a,children:[Object(g.jsx)(h.a,{variant:"h6",children:n}),o?Object(g.jsx)(d.a,{"aria-label":"close",className:t.closeButton,onClick:o,children:Object(g.jsx)(p.a,{})}):null]})})),j=Object(i.a)((e=>({root:{padding:e.spacing(2)}})))(c.a),f=Object(i.a)((e=>({root:{margin:0,padding:e.spacing(1)}})))(m.a);function x(){const[e,n]=a.a.useState(!1),t=()=>{n(!1)};return Object(g.jsxs)("div",{children:[Object(g.jsx)(l.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Open dialog"}),Object(g.jsxs)(r.a,{onClose:t,"aria-labelledby":"customized-dialog-title",open:e,children:[Object(g.jsx)(b,{id:"customized-dialog-title",onClose:t,children:"Modal title"}),Object(g.jsxs)(j,{dividers:!0,children:[Object(g.jsx)(h.a,{gutterBottom:!0,children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),Object(g.jsx)(h.a,{gutterBottom:!0,children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),Object(g.jsx)(h.a,{gutterBottom:!0,children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."})]}),Object(g.jsx)(f,{children:Object(g.jsx)(l.a,{autoFocus:!0,onClick:t,color:"primary",children:"Save changes"})})]})]})}},1922:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport MuiDialogTitle from '@material-ui/core/DialogTitle';\nimport MuiDialogContent from '@material-ui/core/DialogContent';\nimport MuiDialogActions from '@material-ui/core/DialogActions';\nimport IconButton from '@material-ui/core/IconButton';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Typography from '@material-ui/core/Typography';\n\nconst styles = (theme) => ({\n root: {\n margin: 0,\n padding: theme.spacing(2),\n },\n closeButton: {\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1),\n color: theme.palette.grey[500],\n },\n});\n\nconst DialogTitle = withStyles(styles)((props) => {\n const { children, classes, onClose, ...other } = props;\n return (\n <MuiDialogTitle disableTypography className={classes.root} {...other}>\n <Typography variant=\"h6\">{children}</Typography>\n {onClose ? (\n <IconButton aria-label=\"close\" className={classes.closeButton} onClick={onClose}>\n <CloseIcon />\n </IconButton>\n ) : null}\n </MuiDialogTitle>\n );\n});\n\nconst DialogContent = withStyles((theme) => ({\n root: {\n padding: theme.spacing(2),\n },\n}))(MuiDialogContent);\n\nconst DialogActions = withStyles((theme) => ({\n root: {\n margin: 0,\n padding: theme.spacing(1),\n },\n}))(MuiDialogActions);\n\nexport default function CustomizedDialogs() {\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant=\"outlined\" color=\"primary\" onClick={handleClickOpen}>\n Open dialog\n </Button>\n <Dialog onClose={handleClose} aria-labelledby=\"customized-dialog-title\" open={open}>\n <DialogTitle id=\"customized-dialog-title\" onClose={handleClose}>\n Modal title\n </DialogTitle>\n <DialogContent dividers>\n <Typography gutterBottom>\n Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis\n in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\n </Typography>\n <Typography gutterBottom>\n Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis\n lacus vel augue laoreet rutrum faucibus dolor auctor.\n </Typography>\n <Typography gutterBottom>\n Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel\n scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus\n auctor fringilla.\n </Typography>\n </DialogContent>\n <DialogActions>\n <Button autoFocus onClick={handleClose} color=\"primary\">\n Save changes\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n"},1923:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return y}));var o=t(0),a=t.n(o),i=t(1072),l=t(1098),r=t(1085),s=t(1103),c=t(1034),m=t(1033),d=t(1108),u=t(1100),p=t(1101),h=t(1028),g=t(194),b=t(1185),j=t.n(b),f=t(1040),x=t(1);const O=Object(i.a)((e=>({appBar:{position:"relative"},title:{marginLeft:e.spacing(2),flex:1}}))),C=a.a.forwardRef((function(e,n){return Object(x.jsx)(f.a,{direction:"up",ref:n,...e})}));function y(){const e=O(),[n,t]=a.a.useState(!1),o=()=>{t(!1)};return Object(x.jsxs)("div",{children:[Object(x.jsx)(l.a,{variant:"outlined",color:"primary",onClick:()=>{t(!0)},children:"Open full-screen dialog"}),Object(x.jsxs)(r.a,{fullScreen:!0,open:n,onClose:o,TransitionComponent:C,children:[Object(x.jsx)(u.a,{className:e.appBar,children:Object(x.jsxs)(p.a,{children:[Object(x.jsx)(h.a,{edge:"start",color:"inherit",onClick:o,"aria-label":"close",children:Object(x.jsx)(j.a,{})}),Object(x.jsx)(g.a,{variant:"h6",className:e.title,children:"Sound"}),Object(x.jsx)(l.a,{autoFocus:!0,color:"inherit",onClick:o,children:"save"})]})}),Object(x.jsxs)(m.a,{children:[Object(x.jsx)(c.a,{button:!0,children:Object(x.jsx)(s.a,{primary:"Phone ringtone",secondary:"Titania"})}),Object(x.jsx)(d.a,{}),Object(x.jsx)(c.a,{button:!0,children:Object(x.jsx)(s.a,{primary:"Default notification ringtone",secondary:"Tethys"})})]})]})]})}},1924:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItem from '@material-ui/core/ListItem';\nimport List from '@material-ui/core/List';\nimport Divider from '@material-ui/core/Divider';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Slide from '@material-ui/core/Slide';\n\nconst useStyles = makeStyles((theme) => ({\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n}));\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return <Slide direction=\"up\" ref={ref} {...props} />;\n});\n\nexport default function FullScreenDialog() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant=\"outlined\" color=\"primary\" onClick={handleClickOpen}>\n Open full-screen dialog\n </Button>\n <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>\n <AppBar className={classes.appBar}>\n <Toolbar>\n <IconButton edge=\"start\" color=\"inherit\" onClick={handleClose} aria-label=\"close\">\n <CloseIcon />\n </IconButton>\n <Typography variant=\"h6\" className={classes.title}>\n Sound\n </Typography>\n <Button autoFocus color=\"inherit\" onClick={handleClose}>\n save\n </Button>\n </Toolbar>\n </AppBar>\n <List>\n <ListItem button>\n <ListItemText primary=\"Phone ringtone\" secondary=\"Titania\" />\n </ListItem>\n <Divider />\n <ListItem button>\n <ListItemText primary=\"Default notification ringtone\" secondary=\"Tethys\" />\n </ListItem>\n </List>\n </Dialog>\n </div>\n );\n}\n"},1925:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return O}));var o=t(0),a=t.n(o),i=t(1072),l=t(1098),r=t(1085),s=t(1196),c=t(1194),m=t(1290),d=t(1247),u=t(1035),p=t(1094),h=t(1038),g=t(1092),b=t(1044),j=t(1095),f=t(1);const x=Object(i.a)((e=>({form:{display:"flex",flexDirection:"column",margin:"auto",width:"fit-content"},formControl:{marginTop:e.spacing(2),minWidth:120},formControlLabel:{marginTop:e.spacing(1)}})));function O(){const e=x(),[n,t]=a.a.useState(!1),[o,i]=a.a.useState(!0),[O,C]=a.a.useState("sm"),y=()=>{t(!1)};return Object(f.jsxs)(a.a.Fragment,{children:[Object(f.jsx)(l.a,{variant:"outlined",color:"primary",onClick:()=>{t(!0)},children:"Open max-width dialog"}),Object(f.jsxs)(r.a,{fullWidth:o,maxWidth:O,open:n,onClose:y,"aria-labelledby":"max-width-dialog-title",children:[Object(f.jsx)(d.a,{id:"max-width-dialog-title",children:"Optional sizes"}),Object(f.jsxs)(c.a,{children:[Object(f.jsx)(m.a,{children:"You can set my maximum width and whether to adapt or not."}),Object(f.jsxs)("form",{className:e.form,noValidate:!0,children:[Object(f.jsxs)(u.a,{className:e.formControl,children:[Object(f.jsx)(h.a,{htmlFor:"max-width",children:"maxWidth"}),Object(f.jsxs)(b.a,{autoFocus:!0,value:O,onChange:e=>{C(e.target.value)},inputProps:{name:"max-width",id:"max-width"},children:[Object(f.jsx)(g.a,{value:!1,children:"false"}),Object(f.jsx)(g.a,{value:"xs",children:"xs"}),Object(f.jsx)(g.a,{value:"sm",children:"sm"}),Object(f.jsx)(g.a,{value:"md",children:"md"}),Object(f.jsx)(g.a,{value:"lg",children:"lg"}),Object(f.jsx)(g.a,{value:"xl",children:"xl"})]})]}),Object(f.jsx)(p.a,{className:e.formControlLabel,control:Object(f.jsx)(j.a,{checked:o,onChange:e=>{i(e.target.checked)}}),label:"Full width"})]})]}),Object(f.jsx)(s.a,{children:Object(f.jsx)(l.a,{onClick:y,color:"primary",children:"Close"})})]})]})}},1926:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport Switch from '@material-ui/core/Switch';\n\nconst useStyles = makeStyles((theme) => ({\n form: {\n display: 'flex',\n flexDirection: 'column',\n margin: 'auto',\n width: 'fit-content',\n },\n formControl: {\n marginTop: theme.spacing(2),\n minWidth: 120,\n },\n formControlLabel: {\n marginTop: theme.spacing(1),\n },\n}));\n\nexport default function MaxWidthDialog() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n const [fullWidth, setFullWidth] = React.useState(true);\n const [maxWidth, setMaxWidth] = React.useState('sm');\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleMaxWidthChange = (event) => {\n setMaxWidth(event.target.value);\n };\n\n const handleFullWidthChange = (event) => {\n setFullWidth(event.target.checked);\n };\n\n return (\n <React.Fragment>\n <Button variant=\"outlined\" color=\"primary\" onClick={handleClickOpen}>\n Open max-width dialog\n </Button>\n <Dialog\n fullWidth={fullWidth}\n maxWidth={maxWidth}\n open={open}\n onClose={handleClose}\n aria-labelledby=\"max-width-dialog-title\"\n >\n <DialogTitle id=\"max-width-dialog-title\">Optional sizes</DialogTitle>\n <DialogContent>\n <DialogContentText>\n You can set my maximum width and whether to adapt or not.\n </DialogContentText>\n <form className={classes.form} noValidate>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor=\"max-width\">maxWidth</InputLabel>\n <Select\n autoFocus\n value={maxWidth}\n onChange={handleMaxWidthChange}\n inputProps={{\n name: 'max-width',\n id: 'max-width',\n }}\n >\n <MenuItem value={false}>false</MenuItem>\n <MenuItem value=\"xs\">xs</MenuItem>\n <MenuItem value=\"sm\">sm</MenuItem>\n <MenuItem value=\"md\">md</MenuItem>\n <MenuItem value=\"lg\">lg</MenuItem>\n <MenuItem value=\"xl\">xl</MenuItem>\n </Select>\n </FormControl>\n <FormControlLabel\n className={classes.formControlLabel}\n control={<Switch checked={fullWidth} onChange={handleFullWidthChange} />}\n label=\"Full width\"\n />\n </form>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color=\"primary\">\n Close\n </Button>\n </DialogActions>\n </Dialog>\n </React.Fragment>\n );\n}\n"},1927:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return h}));var o=t(0),a=t.n(o),i=t(1098),l=t(1085),r=t(1196),s=t(1194),c=t(1290),m=t(1247),d=t(1042),u=t(43),p=t(1);function h(){const[e,n]=a.a.useState(!1),t=Object(u.a)(),o=Object(d.a)(t.breakpoints.down("sm")),h=()=>{n(!1)};return Object(p.jsxs)("div",{children:[Object(p.jsx)(i.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Open responsive dialog"}),Object(p.jsxs)(l.a,{fullScreen:o,open:e,onClose:h,"aria-labelledby":"responsive-dialog-title",children:[Object(p.jsx)(m.a,{id:"responsive-dialog-title",children:"Use Google's location service?"}),Object(p.jsx)(s.a,{children:Object(p.jsx)(c.a,{children:"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."})}),Object(p.jsxs)(r.a,{children:[Object(p.jsx)(i.a,{autoFocus:!0,onClick:h,color:"primary",children:"Disagree"}),Object(p.jsx)(i.a,{onClick:h,color:"primary",autoFocus:!0,children:"Agree"})]})]})]})}},1928:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { useTheme } from '@material-ui/core/styles';\n\nexport default function ResponsiveDialog() {\n const [open, setOpen] = React.useState(false);\n const theme = useTheme();\n const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant=\"outlined\" color=\"primary\" onClick={handleClickOpen}>\n Open responsive dialog\n </Button>\n <Dialog\n fullScreen={fullScreen}\n open={open}\n onClose={handleClose}\n aria-labelledby=\"responsive-dialog-title\"\n >\n <DialogTitle id=\"responsive-dialog-title\">{\"Use Google's location service?\"}</DialogTitle>\n <DialogContent>\n <DialogContentText>\n Let Google help apps determine location. This means sending anonymous location data to\n Google, even when no apps are running.\n </DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button autoFocus onClick={handleClose} color=\"primary\">\n Disagree\n </Button>\n <Button onClick={handleClose} color=\"primary\" autoFocus>\n Agree\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n"},1929:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return C}));var o=t(0),a=t.n(o),i=t(1072),l=t(1098),r=t(1033),s=t(1034),c=t(1103),m=t(1247),d=t(1194),u=t(1196),p=t(1085),h=t(1093),g=t(1120),b=t(1094),j=t(1);const f=["None","Atria","Callisto","Dione","Ganymede","Hangouts Call","Luna","Oberon","Phobos","Pyxis","Sedna","Titania","Triton","Umbriel"];function x(e){const{onClose:n,value:t,open:o,...i}=e,[r,s]=a.a.useState(t),c=a.a.useRef(null);a.a.useEffect((()=>{o||s(t)}),[t,o]);return Object(j.jsxs)(p.a,{maxWidth:"xs",onEntering:()=>{null!=c.current&&c.current.focus()},"aria-labelledby":"confirmation-dialog-title",open:o,...i,children:[Object(j.jsx)(m.a,{id:"confirmation-dialog-title",children:"Phone Ringtone"}),Object(j.jsx)(d.a,{dividers:!0,children:Object(j.jsx)(h.a,{ref:c,"aria-label":"ringtone",name:"ringtone",value:r,onChange:e=>{s(e.target.value)},children:f.map((e=>Object(j.jsx)(b.a,{value:e,control:Object(j.jsx)(g.a,{}),label:e},e)))})}),Object(j.jsxs)(u.a,{children:[Object(j.jsx)(l.a,{autoFocus:!0,onClick:()=>{n()},color:"primary",children:"Cancel"}),Object(j.jsx)(l.a,{onClick:()=>{n(r)},color:"primary",children:"Ok"})]})]})}const O=Object(i.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper},paper:{width:"80%",maxHeight:435}})));function C(){const e=O(),[n,t]=a.a.useState(!1),[o,i]=a.a.useState("Dione");return Object(j.jsx)("div",{className:e.root,children:Object(j.jsxs)(r.a,{component:"div",role:"list",children:[Object(j.jsx)(s.a,{button:!0,divider:!0,disabled:!0,role:"listitem",children:Object(j.jsx)(c.a,{primary:"Interruptions"})}),Object(j.jsx)(s.a,{button:!0,divider:!0,"aria-haspopup":"true","aria-controls":"ringtone-menu","aria-label":"phone ringtone",onClick:()=>{t(!0)},role:"listitem",children:Object(j.jsx)(c.a,{primary:"Phone ringtone",secondary:o})}),Object(j.jsx)(s.a,{button:!0,divider:!0,disabled:!0,role:"listitem",children:Object(j.jsx)(c.a,{primary:"Default notification ringtone",secondary:"Tethys"})}),Object(j.jsx)(x,{classes:{paper:e.paper},id:"ringtone-menu",keepMounted:!0,open:n,onClose:e=>{t(!1),e&&i(e)},value:o})]})})}},1930:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport Dialog from '@material-ui/core/Dialog';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport Radio from '@material-ui/core/Radio';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\n\nconst options = [\n 'None',\n 'Atria',\n 'Callisto',\n 'Dione',\n 'Ganymede',\n 'Hangouts Call',\n 'Luna',\n 'Oberon',\n 'Phobos',\n 'Pyxis',\n 'Sedna',\n 'Titania',\n 'Triton',\n 'Umbriel',\n];\n\nfunction ConfirmationDialogRaw(props) {\n const { onClose, value: valueProp, open, ...other } = props;\n const [value, setValue] = React.useState(valueProp);\n const radioGroupRef = React.useRef(null);\n\n React.useEffect(() => {\n if (!open) {\n setValue(valueProp);\n }\n }, [valueProp, open]);\n\n const handleEntering = () => {\n if (radioGroupRef.current != null) {\n radioGroupRef.current.focus();\n }\n };\n\n const handleCancel = () => {\n onClose();\n };\n\n const handleOk = () => {\n onClose(value);\n };\n\n const handleChange = (event) => {\n setValue(event.target.value);\n };\n\n return (\n <Dialog\n maxWidth=\"xs\"\n onEntering={handleEntering}\n aria-labelledby=\"confirmation-dialog-title\"\n open={open}\n {...other}\n >\n <DialogTitle id=\"confirmation-dialog-title\">Phone Ringtone</DialogTitle>\n <DialogContent dividers>\n <RadioGroup\n ref={radioGroupRef}\n aria-label=\"ringtone\"\n name=\"ringtone\"\n value={value}\n onChange={handleChange}\n >\n {options.map((option) => (\n <FormControlLabel value={option} key={option} control={<Radio />} label={option} />\n ))}\n </RadioGroup>\n </DialogContent>\n <DialogActions>\n <Button autoFocus onClick={handleCancel} color=\"primary\">\n Cancel\n </Button>\n <Button onClick={handleOk} color=\"primary\">\n Ok\n </Button>\n </DialogActions>\n </Dialog>\n );\n}\n\nConfirmationDialogRaw.propTypes = {\n onClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n value: PropTypes.string.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n paper: {\n width: '80%',\n maxHeight: 435,\n },\n}));\n\nexport default function ConfirmationDialog() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n const [value, setValue] = React.useState('Dione');\n\n const handleClickListItem = () => {\n setOpen(true);\n };\n\n const handleClose = (newValue) => {\n setOpen(false);\n\n if (newValue) {\n setValue(newValue);\n }\n };\n\n return (\n <div className={classes.root}>\n <List component=\"div\" role=\"list\">\n <ListItem button divider disabled role=\"listitem\">\n <ListItemText primary=\"Interruptions\" />\n </ListItem>\n <ListItem\n button\n divider\n aria-haspopup=\"true\"\n aria-controls=\"ringtone-menu\"\n aria-label=\"phone ringtone\"\n onClick={handleClickListItem}\n role=\"listitem\"\n >\n <ListItemText primary=\"Phone ringtone\" secondary={value} />\n </ListItem>\n <ListItem button divider disabled role=\"listitem\">\n <ListItemText primary=\"Default notification ringtone\" secondary=\"Tethys\" />\n </ListItem>\n <ConfirmationDialogRaw\n classes={{\n paper: classes.paper,\n }}\n id=\"ringtone-menu\"\n keepMounted\n open={open}\n onClose={handleClose}\n value={value}\n />\n </List>\n </div>\n );\n}\n"},1931:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return b}));var o=t(0),a=t.n(o),i=t(1098),l=t(1085),r=t(1196),s=t(1194),c=t(1290),m=t(1247),d=t(193),u=t(1932),p=t.n(u),h=t(1);function g(e){return Object(h.jsx)(p.a,{handle:"#draggable-dialog-title",cancel:'[class*="MuiDialogContent-root"]',children:Object(h.jsx)(d.a,{...e})})}function b(){const[e,n]=a.a.useState(!1),t=()=>{n(!1)};return Object(h.jsxs)("div",{children:[Object(h.jsx)(i.a,{variant:"outlined",color:"primary",onClick:()=>{n(!0)},children:"Open form dialog"}),Object(h.jsxs)(l.a,{open:e,onClose:t,PaperComponent:g,"aria-labelledby":"draggable-dialog-title",children:[Object(h.jsx)(m.a,{style:{cursor:"move"},id:"draggable-dialog-title",children:"Subscribe"}),Object(h.jsx)(s.a,{children:Object(h.jsx)(c.a,{children:"To subscribe to this website, please enter your email address here. We will send updates occasionally."})}),Object(h.jsxs)(r.a,{children:[Object(h.jsx)(i.a,{autoFocus:!0,onClick:t,color:"primary",children:"Cancel"}),Object(h.jsx)(i.a,{onClick:t,color:"primary",children:"Subscribe"})]})]})]})}},1939:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Paper from '@material-ui/core/Paper';\nimport Draggable from 'react-draggable';\n\nfunction PaperComponent(props) {\n return (\n <Draggable handle=\"#draggable-dialog-title\" cancel={'[class*=\"MuiDialogContent-root\"]'}>\n <Paper {...props} />\n </Draggable>\n );\n}\n\nexport default function DraggableDialog() {\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button variant=\"outlined\" color=\"primary\" onClick={handleClickOpen}>\n Open form dialog\n </Button>\n <Dialog\n open={open}\n onClose={handleClose}\n PaperComponent={PaperComponent}\n aria-labelledby=\"draggable-dialog-title\"\n >\n <DialogTitle style={{ cursor: 'move' }} id=\"draggable-dialog-title\">\n Subscribe\n </DialogTitle>\n <DialogContent>\n <DialogContentText>\n To subscribe to this website, please enter your email address here. We will send updates\n occasionally.\n </DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button autoFocus onClick={handleClose} color=\"primary\">\n Cancel\n </Button>\n <Button onClick={handleClose} color=\"primary\">\n Subscribe\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n"},1940:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));var o=t(0),a=t.n(o),i=t(1098),l=t(1085),r=t(1196),s=t(1194),c=t(1290),m=t(1247),d=t(1);function u(){const[e,n]=a.a.useState(!1),[t,o]=a.a.useState("paper"),u=e=>()=>{n(!0),o(e)},p=()=>{n(!1)},h=a.a.useRef(null);return a.a.useEffect((()=>{if(e){const{current:e}=h;null!==e&&e.focus()}}),[e]),Object(d.jsxs)("div",{children:[Object(d.jsx)(i.a,{onClick:u("paper"),children:"scroll=paper"}),Object(d.jsx)(i.a,{onClick:u("body"),children:"scroll=body"}),Object(d.jsxs)(l.a,{open:e,onClose:p,scroll:t,"aria-labelledby":"scroll-dialog-title","aria-describedby":"scroll-dialog-description",children:[Object(d.jsx)(m.a,{id:"scroll-dialog-title",children:"Subscribe"}),Object(d.jsx)(s.a,{dividers:"paper"===t,children:Object(d.jsx)(c.a,{id:"scroll-dialog-description",ref:h,tabIndex:-1,children:[...new Array(50)].map((()=>"Cras mattis consectetur purus sit amet fermentum.\nCras justo odio, dapibus ac facilisis in, egestas eget quam.\nMorbi leo risus, porta ac consectetur ac, vestibulum at eros.\nPraesent commodo cursus magna, vel scelerisque nisl consectetur et.")).join("\n")})}),Object(d.jsxs)(r.a,{children:[Object(d.jsx)(i.a,{onClick:p,color:"primary",children:"Cancel"}),Object(d.jsx)(i.a,{onClick:p,color:"primary",children:"Subscribe"})]})]})]})}},1941:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nexport default function ScrollDialog() {\n const [open, setOpen] = React.useState(false);\n const [scroll, setScroll] = React.useState('paper');\n\n const handleClickOpen = (scrollType) => () => {\n setOpen(true);\n setScroll(scrollType);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const descriptionElementRef = React.useRef(null);\n React.useEffect(() => {\n if (open) {\n const { current: descriptionElement } = descriptionElementRef;\n if (descriptionElement !== null) {\n descriptionElement.focus();\n }\n }\n }, [open]);\n\n return (\n <div>\n <Button onClick={handleClickOpen('paper')}>scroll=paper</Button>\n <Button onClick={handleClickOpen('body')}>scroll=body</Button>\n <Dialog\n open={open}\n onClose={handleClose}\n scroll={scroll}\n aria-labelledby=\"scroll-dialog-title\"\n aria-describedby=\"scroll-dialog-description\"\n >\n <DialogTitle id=\"scroll-dialog-title\">Subscribe</DialogTitle>\n <DialogContent dividers={scroll === 'paper'}>\n <DialogContentText\n id=\"scroll-dialog-description\"\n ref={descriptionElementRef}\n tabIndex={-1}\n >\n {[...new Array(50)]\n .map(\n () => `Cras mattis consectetur purus sit amet fermentum.\nCras justo odio, dapibus ac facilisis in, egestas eget quam.\nMorbi leo risus, porta ac consectetur ac, vestibulum at eros.\nPraesent commodo cursus magna, vel scelerisque nisl consectetur et.`,\n )\n .join('\\n')}\n </DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color=\"primary\">\n Cancel\n </Button>\n <Button onClick={handleClose} color=\"primary\">\n Subscribe\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n"},2579:function(e,n,t){"use strict";t.r(n);var o=t(1130),a=t(118),i=t(1098),l=t(1090),r=t(194),s=t(1072),c=t(1);const m=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return m(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/dialogs",target:"_blank",role:"button",children:[Object(c.jsx)(l.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(r.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Dialog"}),Object(c.jsx)(r.a,{className:"description",children:"Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks."}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["A ",Object(c.jsx)("a",{href:"https://material.io/design/components/dialogs.html",children:"Dialog"})," is a type of"," ",Object(c.jsx)("a",{href:"/components/modal/",children:"modal"})," window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Dialogs are purposefully interruptive, so they should be used sparingly."}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Dialogs"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account)."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Touch mechanics:"}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{children:"Choosing an option immediately commits the option and closes the menu"}),Object(c.jsx)("li",{children:"Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog"})]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1912).default,raw:t(1914)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Alerts"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Most alerts don't need titles. They summarize a decision in a sentence or two by either:"}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{children:'Asking a question (e.g. "Delete this conversation?")'}),Object(c.jsx)("li",{children:"Making a statement related to the action buttons"})]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"If a title is required:"}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{children:'Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?".'}),Object(c.jsx)("li",{children:"Avoid apologies, ambiguity, or questions, such as \u201cWarning!\u201d or \u201cAre you sure?\u201d"})]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1915).default,raw:t(1916)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Transitions"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can also swap out the transition, the next example uses ",Object(c.jsx)("code",{children:"Slide"}),"."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1917).default,raw:t(1918)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Form dialogs"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1919).default,raw:t(1920)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized dialogs"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(c.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"The dialog has a close button added to aide usability."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1921).default,raw:t(1922)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Full-screen dialogs"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1923).default,raw:t(1924)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Optional sizes"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can set a dialog maximum width by using the ",Object(c.jsx)("code",{children:"maxWidth"})," enumerable in combination with the ",Object(c.jsx)("code",{children:"fullWidth"})," boolean. When the ",Object(c.jsx)("code",{children:"fullWidth"})," ","property is true, the dialog will adapt based on the ",Object(c.jsx)("code",{children:"maxWidth"})," value."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1925).default,raw:t(1926)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Responsive full-screen"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["You may make a dialog responsively full screen using"," ",Object(c.jsx)("a",{href:"/components/use-media-query/#usemediaquery",children:Object(c.jsx)("code",{children:"useMediaQuery"})}),"."]}),Object(c.jsx)(a.a,{component:"pre",className:"language-jsx",children:" \nimport useMediaQuery from '@material-ui/core/useMediaQuery';\n\nfunction MyComponent() {\n const theme = useTheme();\n const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));\n\n return <Dialog fullScreen={fullScreen} />\n}\n"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1927).default,raw:t(1928)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Confirmation dialogs"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching \u201cOK\u201d."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Touching \u201cCancel\u201d in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1929).default,raw:t(1930)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Draggable dialog"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["You can create a draggable dialog by using"," ",Object(c.jsx)("a",{href:"https://github.com/mzabriskie/react-draggable",children:"react-draggable"}),". To do so, you can pass the the imported ",Object(c.jsx)("code",{children:"Draggable"})," component as the"," ",Object(c.jsx)("code",{children:"PaperComponent"})," of the ",Object(c.jsx)("code",{children:"Dialog"})," component. This will make the entire dialog draggable."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1931).default,raw:t(1939)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Scrolling long content"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"When dialogs become too long for the user\u2019s viewport or device, they scroll."}),Object(c.jsxs)("ul",{children:[Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"scroll=paper"})," the content of the dialog scrolls within the paper element."]}),Object(c.jsxs)("li",{children:[Object(c.jsx)("code",{children:"scroll=body"})," the content of the dialog scrolls within the body element."]})]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Try the demo below to see what we mean:"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(o.a,{className:"my-24",iframe:!1,component:t(1940).default,raw:t(1941)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Limitations"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Follow the ",Object(c.jsx)("a",{href:"/components/modal/#limitations",children:"Modal limitations section"}),"."]}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Follow the ",Object(c.jsx)("a",{href:"/components/modal/#accessibility",children:"Modal accessibility section"}),"."]})]})}}}]);
Mini Shell