Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/48.6f728f09.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[48],{1130:function(n,e,t){"use strict";t.d(e,"a",(function(){return y}));var a=t(118),o=t(1100),s=t(1109),c=t(1090),i=t(1117),r=t(1119),l=t(5),m=t(0),u=t(1024),d=t(551),h=t(1087),p=t(1099),b=t(11),j=t(370),f=t(371),k=t(1131),x=t.n(k),O=t(1);const g=Object(u.a)({productionPrefix:"iframe-"});class v extends m.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=n=>{this.contentDocument=n?n.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(j.a)({...Object(d.a)(),plugins:[...Object(d.a)().plugins,Object(f.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:n,classes:e,theme:t}=this.props;return Object(O.jsx)(x.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(e.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(h.b,{jss:this.state.jss,generateClassName:g,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(p.a,{theme:t,children:Object(m.cloneElement)(n,{container:this.state.container})})}):null})}}var C=Object(b.a)((n=>({root:{backgroundColor:n.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(v);function S(n){const[e,t]=Object(m.useState)(n.currentTabIndex),{component:u,raw:d,iframe:h,className:p}=n;return Object(O.jsxs)(s.a,{className:Object(l.a)(p,"shadow"),children:[Object(O.jsx)(o.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(r.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:e,onChange:function(n,e){t(e)},children:[u&&Object(O.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(c.a,{children:"remove_red_eye"})}),d&&Object(O.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(c.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===e?"flex flex-1 max-w-full":"hidden",children:u&&(h?Object(O.jsx)(C,{children:Object(O.jsx)(u,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(u,{})}))}),Object(O.jsx)("div",{className:1===e?"flex flex-1":"hidden",children:d&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}S.defaultProps={currentTabIndex:0};var y=S},2216:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return u}));var a=t(0),o=t.n(a),s=t(1098),c=t(1089),i=t(1028),r=t(1185),l=t.n(r),m=t(1);function u(){const[n,e]=o.a.useState(!1),t=(n,t)=>{"clickaway"!==t&&e(!1)};return Object(m.jsxs)("div",{children:[Object(m.jsx)(s.a,{onClick:()=>{e(!0)},children:"Open simple snackbar"}),Object(m.jsx)(c.a,{anchorOrigin:{vertical:"bottom",horizontal:"left"},open:n,autoHideDuration:6e3,onClose:t,message:"Note archived",action:Object(m.jsxs)(o.a.Fragment,{children:[Object(m.jsx)(s.a,{color:"secondary",size:"small",onClick:t,children:"UNDO"}),Object(m.jsx)(i.a,{size:"small","aria-label":"close",color:"inherit",onClick:t,children:Object(m.jsx)(l.a,{fontSize:"small"})})]})})]})}},2217:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport CloseIcon from '@material-ui/icons/Close';\n\nexport default function SimpleSnackbar() {\n const [open, setOpen] = React.useState(false);\n\n const handleClick = () => {\n setOpen(true);\n };\n\n const handleClose = (event, reason) => {\n if (reason === 'clickaway') {\n return;\n }\n\n setOpen(false);\n };\n\n return (\n <div>\n <Button onClick={handleClick}>Open simple snackbar</Button>\n <Snackbar\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n open={open}\n autoHideDuration={6000}\n onClose={handleClose}\n message=\"Note archived\"\n action={\n <React.Fragment>\n <Button color=\"secondary\" size=\"small\" onClick={handleClose}>\n UNDO\n </Button>\n <IconButton size=\"small\" aria-label=\"close\" color=\"inherit\" onClick={handleClose}>\n <CloseIcon fontSize=\"small\" />\n </IconButton>\n </React.Fragment>\n }\n />\n </div>\n );\n}\n"},2218:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return d}));var a=t(0),o=t.n(a),s=t(1098),c=t(1089),i=t(2504),r=t(1072),l=t(1);function m(n){return Object(l.jsx)(i.a,{elevation:6,variant:"filled",...n})}const u=Object(r.a)((n=>({root:{width:"100%","& > * + *":{marginTop:n.spacing(2)}}})));function d(){const n=u(),[e,t]=o.a.useState(!1),a=(n,e)=>{"clickaway"!==e&&t(!1)};return Object(l.jsxs)("div",{className:n.root,children:[Object(l.jsx)(s.a,{variant:"outlined",onClick:()=>{t(!0)},children:"Open success snackbar"}),Object(l.jsx)(c.a,{open:e,autoHideDuration:6e3,onClose:a,children:Object(l.jsx)(m,{onClose:a,severity:"success",children:"This is a success message!"})}),Object(l.jsx)(m,{severity:"error",children:"This is an error message!"}),Object(l.jsx)(m,{severity:"warning",children:"This is a warning message!"}),Object(l.jsx)(m,{severity:"info",children:"This is an information message!"}),Object(l.jsx)(m,{severity:"success",children:"This is a success message!"})]})}},2219:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport MuiAlert from '@material-ui/lab/Alert';\nimport { makeStyles } from '@material-ui/core/styles';\n\nfunction Alert(props) {\n return <MuiAlert elevation={6} variant=\"filled\" {...props} />;\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function CustomizedSnackbars() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleClick = () => {\n setOpen(true);\n };\n\n const handleClose = (event, reason) => {\n if (reason === 'clickaway') {\n return;\n }\n\n setOpen(false);\n };\n\n return (\n <div className={classes.root}>\n <Button variant=\"outlined\" onClick={handleClick}>\n Open success snackbar\n </Button>\n <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>\n <Alert onClose={handleClose} severity=\"success\">\n This is a success message!\n </Alert>\n </Snackbar>\n <Alert severity=\"error\">This is an error message!</Alert>\n <Alert severity=\"warning\">This is a warning message!</Alert>\n <Alert severity=\"info\">This is an information message!</Alert>\n <Alert severity=\"success\">This is a success message!</Alert>\n </div>\n );\n}\n"},2220:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return r}));var a=t(0),o=t.n(a),s=t(1098),c=t(1089),i=t(1);function r(){const[n,e]=o.a.useState({open:!1,vertical:"top",horizontal:"center"}),{vertical:t,horizontal:a,open:r}=n,l=n=>()=>{e({open:!0,...n})},m=Object(i.jsxs)(o.a.Fragment,{children:[Object(i.jsx)(s.a,{onClick:l({vertical:"top",horizontal:"center"}),children:"Top-Center"}),Object(i.jsx)(s.a,{onClick:l({vertical:"top",horizontal:"right"}),children:"Top-Right"}),Object(i.jsx)(s.a,{onClick:l({vertical:"bottom",horizontal:"right"}),children:"Bottom-Right"}),Object(i.jsx)(s.a,{onClick:l({vertical:"bottom",horizontal:"center"}),children:"Bottom-Center"}),Object(i.jsx)(s.a,{onClick:l({vertical:"bottom",horizontal:"left"}),children:"Bottom-Left"}),Object(i.jsx)(s.a,{onClick:l({vertical:"top",horizontal:"left"}),children:"Top-Left"})]});return Object(i.jsxs)("div",{children:[m,Object(i.jsx)(c.a,{anchorOrigin:{vertical:t,horizontal:a},open:r,onClose:()=>{e({...n,open:!1})},message:"I love snacks"},t+a)]})}},2221:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Snackbar from '@material-ui/core/Snackbar';\n\nexport default function PositionedSnackbar() {\n const [state, setState] = React.useState({\n open: false,\n vertical: 'top',\n horizontal: 'center',\n });\n\n const { vertical, horizontal, open } = state;\n\n const handleClick = (newState) => () => {\n setState({ open: true, ...newState });\n };\n\n const handleClose = () => {\n setState({ ...state, open: false });\n };\n\n const buttons = (\n <React.Fragment>\n <Button onClick={handleClick({ vertical: 'top', horizontal: 'center' })}>Top-Center</Button>\n <Button onClick={handleClick({ vertical: 'top', horizontal: 'right' })}>Top-Right</Button>\n <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'right' })}>\n Bottom-Right\n </Button>\n <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}>\n Bottom-Center\n </Button>\n <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>Bottom-Left</Button>\n <Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>Top-Left</Button>\n </React.Fragment>\n );\n\n return (\n <div>\n {buttons}\n <Snackbar\n anchorOrigin={{ vertical, horizontal }}\n open={open}\n onClose={handleClose}\n message=\"I love snacks\"\n key={vertical + horizontal}\n />\n </div>\n );\n}\n"},2222:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return l}));t(0);var a=t(1098),o=t(1072),s=t(1027),c=t(1);const i=Object(c.jsx)(a.a,{color:"secondary",size:"small",children:"lorem ipsum dolorem"}),r=Object(o.a)((n=>({root:{maxWidth:600,"& > * + *":{marginTop:n.spacing(2)}}})));function l(){const n=r();return Object(c.jsxs)("div",{className:n.root,children:[Object(c.jsx)(s.a,{message:"I love snacks.",action:i}),Object(c.jsx)(s.a,{message:"I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate."}),Object(c.jsx)(s.a,{message:"I love candy. I love cookies. I love cupcakes.",action:i}),Object(c.jsx)(s.a,{message:"I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.",action:i})]})}},2223:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport { makeStyles } from '@material-ui/core/styles';\nimport SnackbarContent from '@material-ui/core/SnackbarContent';\n\nconst action = (\n <Button color=\"secondary\" size=\"small\">\n lorem ipsum dolorem\n </Button>\n);\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n maxWidth: 600,\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function LongTextSnackbar() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <SnackbarContent message=\"I love snacks.\" action={action} />\n <SnackbarContent\n message={\n 'I love candy. I love cookies. I love cupcakes. \\\n I love cheesecake. I love chocolate.'\n }\n />\n <SnackbarContent message=\"I love candy. I love cookies. I love cupcakes.\" action={action} />\n <SnackbarContent\n message={\n 'I love candy. I love cookies. I love cupcakes. \\\n I love cheesecake. I love chocolate.'\n }\n action={action}\n />\n </div>\n );\n}\n"},2224:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return h}));var a=t(0),o=t.n(a),s=t(1072),c=t(1098),i=t(1089),r=t(1028),l=t(1185),m=t.n(l),u=t(1);const d=Object(s.a)((n=>({close:{padding:n.spacing(.5)}})));function h(){const[n,e]=o.a.useState([]),[t,a]=o.a.useState(!1),[s,l]=o.a.useState(void 0);o.a.useEffect((()=>{n.length&&!s?(l({...n[0]}),e((n=>n.slice(1))),a(!0)):n.length&&s&&t&&a(!1)}),[n,s,t]);const h=n=>()=>{e((e=>[...e,{message:n,key:(new Date).getTime()}]))},p=(n,e)=>{"clickaway"!==e&&a(!1)},b=d();return Object(u.jsxs)("div",{children:[Object(u.jsx)(c.a,{onClick:h("Message A"),children:"Show message A"}),Object(u.jsx)(c.a,{onClick:h("Message B"),children:"Show message B"}),Object(u.jsx)(i.a,{anchorOrigin:{vertical:"bottom",horizontal:"left"},open:t,autoHideDuration:6e3,onClose:p,onExited:()=>{l(void 0)},message:s?s.message:void 0,action:Object(u.jsxs)(o.a.Fragment,{children:[Object(u.jsx)(c.a,{color:"secondary",size:"small",onClick:p,children:"UNDO"}),Object(u.jsx)(r.a,{"aria-label":"close",color:"inherit",className:b.close,onClick:p,children:Object(u.jsx)(m.a,{})})]})},s?s.key:void 0)]})}},2225:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport CloseIcon from '@material-ui/icons/Close';\n\nconst useStyles = makeStyles((theme) => ({\n close: {\n padding: theme.spacing(0.5),\n },\n}));\n\nexport default function ConsecutiveSnackbars() {\n const [snackPack, setSnackPack] = React.useState([]);\n const [open, setOpen] = React.useState(false);\n const [messageInfo, setMessageInfo] = React.useState(undefined);\n\n React.useEffect(() => {\n if (snackPack.length && !messageInfo) {\n // Set a new snack when we don't have an active one\n setMessageInfo({ ...snackPack[0] });\n setSnackPack((prev) => prev.slice(1));\n setOpen(true);\n } else if (snackPack.length && messageInfo && open) {\n // Close an active snack when a new one is added\n setOpen(false);\n }\n }, [snackPack, messageInfo, open]);\n\n const handleClick = (message) => () => {\n setSnackPack((prev) => [...prev, { message, key: new Date().getTime() }]);\n };\n\n const handleClose = (event, reason) => {\n if (reason === 'clickaway') {\n return;\n }\n setOpen(false);\n };\n\n const handleExited = () => {\n setMessageInfo(undefined);\n };\n\n const classes = useStyles();\n return (\n <div>\n <Button onClick={handleClick('Message A')}>Show message A</Button>\n <Button onClick={handleClick('Message B')}>Show message B</Button>\n <Snackbar\n key={messageInfo ? messageInfo.key : undefined}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n open={open}\n autoHideDuration={6000}\n onClose={handleClose}\n onExited={handleExited}\n message={messageInfo ? messageInfo.message : undefined}\n action={\n <React.Fragment>\n <Button color=\"secondary\" size=\"small\" onClick={handleClose}>\n UNDO\n </Button>\n <IconButton\n aria-label=\"close\"\n color=\"inherit\"\n className={classes.close}\n onClick={handleClose}\n >\n <CloseIcon />\n </IconButton>\n </React.Fragment>\n }\n />\n </div>\n );\n}\n"},2226:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return O}));var a=t(0),o=t.n(a),s=t(1072),c=t(1100),i=t(1342),r=t(1101),l=t(1028),m=t(1164),u=t.n(m),d=t(194),h=t(1098),p=t(1102),b=t(1174),j=t.n(b),f=t(1089),k=t(1);const x=Object(s.a)((n=>({"@global":{body:{backgroundColor:n.palette.background.paper}},menuButton:{marginRight:n.spacing(2)},fab:{position:"absolute",bottom:n.spacing(2),right:n.spacing(2)},snackbar:{[n.breakpoints.down("xs")]:{bottom:90}}})));function O(){const n=x();return Object(k.jsxs)(o.a.Fragment,{children:[Object(k.jsx)(i.a,{}),Object(k.jsxs)("div",{children:[Object(k.jsx)(c.a,{position:"static",color:"primary",children:Object(k.jsxs)(r.a,{children:[Object(k.jsx)(l.a,{edge:"start",className:n.menuButton,color:"inherit","aria-label":"menu",children:Object(k.jsx)(u.a,{})}),Object(k.jsx)(d.a,{variant:"h6",color:"inherit",children:"App Bar"})]})}),Object(k.jsx)(p.a,{color:"secondary",className:n.fab,children:Object(k.jsx)(j.a,{})}),Object(k.jsx)(f.a,{open:!0,autoHideDuration:6e3,message:"Archived",action:Object(k.jsx)(h.a,{color:"inherit",size:"small",children:"Undo"}),className:n.snackbar})]})]})}},2227:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport Fab from '@material-ui/core/Fab';\nimport AddIcon from '@material-ui/icons/Add';\nimport Snackbar from '@material-ui/core/Snackbar';\n\nconst useStyles = makeStyles((theme) => ({\n '@global': {\n body: {\n backgroundColor: theme.palette.background.paper,\n },\n },\n menuButton: {\n marginRight: theme.spacing(2),\n },\n fab: {\n position: 'absolute',\n bottom: theme.spacing(2),\n right: theme.spacing(2),\n },\n snackbar: {\n [theme.breakpoints.down('xs')]: {\n bottom: 90,\n },\n },\n}));\n\nexport default function FabIntegrationSnackbar() {\n const classes = useStyles();\n\n return (\n <React.Fragment>\n <CssBaseline />\n <div>\n <AppBar position=\"static\" color=\"primary\">\n <Toolbar>\n <IconButton\n edge=\"start\"\n className={classes.menuButton}\n color=\"inherit\"\n aria-label=\"menu\"\n >\n <MenuIcon />\n </IconButton>\n <Typography variant=\"h6\" color=\"inherit\">\n App Bar\n </Typography>\n </Toolbar>\n </AppBar>\n <Fab color=\"secondary\" className={classes.fab}>\n <AddIcon />\n </Fab>\n <Snackbar\n open\n autoHideDuration={6000}\n message=\"Archived\"\n action={\n <Button color=\"inherit\" size=\"small\">\n Undo\n </Button>\n }\n className={classes.snackbar}\n />\n </div>\n </React.Fragment>\n );\n}\n"},2228:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return h}));var a=t(0),o=t.n(a),s=t(1098),c=t(1089),i=t(546),r=t(1040),l=t(368),m=t(1);function u(n){return Object(m.jsx)(r.a,{...n,direction:"up"})}function d(n){return Object(m.jsx)(l.a,{...n})}function h(){const[n,e]=o.a.useState({open:!1,Transition:i.a}),t=n=>()=>{e({open:!0,Transition:n})};return Object(m.jsxs)("div",{children:[Object(m.jsx)(s.a,{onClick:t(d),children:"Grow Transition"}),Object(m.jsx)(s.a,{onClick:t(i.a),children:"Fade Transition"}),Object(m.jsx)(s.a,{onClick:t(u),children:"Slide Transition"}),Object(m.jsx)(c.a,{open:n.open,onClose:()=>{e({...n,open:!1})},TransitionComponent:n.Transition,message:"I love snacks"},n.Transition.name)]})}},2229:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport Fade from '@material-ui/core/Fade';\nimport Slide from '@material-ui/core/Slide';\nimport Grow from '@material-ui/core/Grow';\n\nfunction SlideTransition(props) {\n return <Slide {...props} direction=\"up\" />;\n}\n\nfunction GrowTransition(props) {\n return <Grow {...props} />;\n}\n\nexport default function TransitionsSnackbar() {\n const [state, setState] = React.useState({\n open: false,\n Transition: Fade,\n });\n\n const handleClick = (Transition) => () => {\n setState({\n open: true,\n Transition,\n });\n };\n\n const handleClose = () => {\n setState({\n ...state,\n open: false,\n });\n };\n\n return (\n <div>\n <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>\n <Button onClick={handleClick(Fade)}>Fade Transition</Button>\n <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>\n <Snackbar\n open={state.open}\n onClose={handleClose}\n TransitionComponent={state.Transition}\n message=\"I love snacks\"\n key={state.Transition.name}\n />\n </div>\n );\n}\n"},2230:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return h}));var a=t(0),o=t.n(a),s=t(1098),c=t(1089),i=t(1040),r=t(1);function l(n){return Object(r.jsx)(i.a,{...n,direction:"left"})}function m(n){return Object(r.jsx)(i.a,{...n,direction:"up"})}function u(n){return Object(r.jsx)(i.a,{...n,direction:"right"})}function d(n){return Object(r.jsx)(i.a,{...n,direction:"down"})}function h(){const[n,e]=o.a.useState(!1),[t,a]=o.a.useState(void 0),i=n=>()=>{a((()=>n)),e(!0)};return Object(r.jsxs)("div",{children:[Object(r.jsx)(s.a,{onClick:i(l),children:"Right"}),Object(r.jsx)(s.a,{onClick:i(m),children:"Up"}),Object(r.jsx)(s.a,{onClick:i(u),children:"Left"}),Object(r.jsx)(s.a,{onClick:i(d),children:"Down"}),Object(r.jsx)(c.a,{open:n,onClose:()=>{e(!1)},TransitionComponent:t,message:"I love snacks"},t?t.name:"")]})}},2231:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport Slide from '@material-ui/core/Slide';\n\nfunction TransitionLeft(props) {\n return <Slide {...props} direction=\"left\" />;\n}\n\nfunction TransitionUp(props) {\n return <Slide {...props} direction=\"up\" />;\n}\n\nfunction TransitionRight(props) {\n return <Slide {...props} direction=\"right\" />;\n}\n\nfunction TransitionDown(props) {\n return <Slide {...props} direction=\"down\" />;\n}\n\nexport default function DirectionSnackbar() {\n const [open, setOpen] = React.useState(false);\n const [transition, setTransition] = React.useState(undefined);\n\n const handleClick = (Transition) => () => {\n setTransition(() => Transition);\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button onClick={handleClick(TransitionLeft)}>Right</Button>\n <Button onClick={handleClick(TransitionUp)}>Up</Button>\n <Button onClick={handleClick(TransitionRight)}>Left</Button>\n <Button onClick={handleClick(TransitionDown)}>Down</Button>\n <Snackbar\n open={open}\n onClose={handleClose}\n TransitionComponent={transition}\n message=\"I love snacks\"\n key={transition ? transition.name : ''}\n />\n </div>\n );\n}\n"},2232:function(n,e,t){"use strict";t.r(e),t.d(e,"default",(function(){return l}));var a=t(0),o=t.n(a),s=t(1098),c=t(178),i=t(1);function r(){const{enqueueSnackbar:n}=Object(c.c)();return Object(i.jsxs)(o.a.Fragment,{children:[Object(i.jsx)(s.a,{onClick:()=>{n("I love snacks.")},children:"Show snackbar"}),Object(i.jsx)(s.a,{onClick:(e="success",()=>{n("This is a success message!",{variant:e})}),children:"Show success snackbar"})]});var e}function l(){return Object(i.jsx)(c.b,{maxSnack:3,children:Object(i.jsx)(r,{})})}},2233:function(n,e,t){"use strict";t.r(e),e.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport { SnackbarProvider, useSnackbar } from 'notistack';\n\nfunction MyApp() {\n const { enqueueSnackbar } = useSnackbar();\n\n const handleClick = () => {\n enqueueSnackbar('I love snacks.');\n };\n\n const handleClickVariant = (variant) => () => {\n // variant could be success, error, warning, info, or default\n enqueueSnackbar('This is a success message!', { variant });\n };\n\n return (\n <React.Fragment>\n <Button onClick={handleClick}>Show snackbar</Button>\n <Button onClick={handleClickVariant('success')}>Show success snackbar</Button>\n </React.Fragment>\n );\n}\n\nexport default function IntegrationNotistack() {\n return (\n <SnackbarProvider maxSnack={3}>\n <MyApp />\n </SnackbarProvider>\n );\n}\n"},2602:function(n,e,t){"use strict";t.r(e);var a=t(1130),o=t(1098),s=t(1090),c=t(194),i=t(1072),r=t(1);const l=Object(i.a)((n=>({layoutRoot:{"& .description":{marginBottom:16}}})));e.default=function(n){return l(),Object(r.jsxs)(r.Fragment,{children:[Object(r.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(r.jsxs)(o.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/snackbars",target:"_blank",role:"button",children:[Object(r.jsx)(s.a,{children:"link"}),Object(r.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(r.jsx)(c.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Snackbar"}),Object(r.jsx)(c.a,{className:"description",children:"Snackbars provide brief messages about app processes. The component is also known as a toast."}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(r.jsx)("a",{href:"https://material.io/design/components/snackbars.html",children:"Snackbars"})," inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn\u2019t interrupt the user experience, and they don\u2019t require user input to disappear."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications."}),Object(r.jsx)(c.a,{className:"text-16 mt-32 mb-8",component:"h4",children:"Frequency"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"Only one snackbar may be displayed at a time."}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple snackbars"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"A basic snackbar that aims to reproduce Google Keep's snackbar behavior."}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2216).default,raw:t(2217)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized snackbars"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["Here are some examples of customizing the component. You can learn more about this in the",Object(r.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2218).default,raw:t(2219)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Positioned snackbars"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen, however there may be circumstances where the placement of the snackbar needs to be more flexible. You can control the position of the snackbar by specifying the ",Object(r.jsx)("code",{children:"anchorOrigin"})," prop."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2220).default,raw:t(2221)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Message Length"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"Some snackbars with varying message length."}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2222).default,raw:t(2223)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Transitions"}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Consecutive Snackbars"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"When multiple snackbar updates are necessary, they should appear one at a time."}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2224).default,raw:t(2225)})}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Snackbars and floating action buttons (FABs)"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"Snackbars should appear above FABs (on mobile)."}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!0,component:t(2226).default,raw:t(2227)})}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Change Transition"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(r.jsx)("a",{href:"/components/transitions/#grow",children:"Grow"})," is the default transition but you can use a different one."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2228).default,raw:t(2229)})}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Control Slide direction"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can change the direction of the ",Object(r.jsx)("a",{href:"/components/transitions/#slide",children:"Slide"})," ","transition."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2230).default,raw:t(2231)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Complementary projects"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"For more advanced use cases you might be able to take advantage of:"}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"notistack"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:[" ",'src="https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars" alt="stars/> src="https://img.shields.io/npm/dm/notistack.svg" alt="npm downloads/>']}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["This example demonstrates how to use"," ",Object(r.jsx)("a",{href:"https://github.com/iamhosseindhv/notistack",children:"notistack"}),". notistack has an"," ",Object(r.jsx)("strong",{children:"imperative API"})," that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to ",Object(r.jsx)("strong",{children:"stack"})," them on top of one another (although this is discouraged by the Material Design specification)."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2232).default,raw:t(2233)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(r.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-1.1/#alert",children:"https://www.w3.org/TR/wai-aria-1.1/#alert"}),")"]}),Object(r.jsx)("ul",{children:Object(r.jsxs)("li",{children:["By default, the snackbar won't auto-hide. However, if you decide to use the"," ",Object(r.jsx)("code",{children:"autoHideDuration"})," prop, it's recommended to give the user"," ",Object(r.jsx)("a",{href:"https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html",children:"sufficient time"})," ","to respond."]})})]})}}}]);
Mini Shell