{"ast":null,"code":"var _jsxFileName = \"/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/modal.js\";\nimport React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport Fade from '@material-ui/core/Fade';\nconst useStyles = makeStyles(theme => ({\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n paper: {\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3)\n }\n}));\nexport default function TransitionsModal() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 14\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n onClick: handleOpen,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 9\n }\n }, \"react - transition - group \"), \" \", /*#__PURE__*/React.createElement(Modal, {\n className: classes.modal,\n open: open,\n onClose: handleClose,\n closeAfterTransition: true,\n BackdropComponent: Backdrop,\n BackdropProps: {\n timeout: 500\n },\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 18\n }\n }, /*#__PURE__*/React.createElement(Fade, {\n in: open,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.paper,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 51,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"h2\", {\n id: \"transition-modal-title\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 9\n }\n }, \" Transition modal \"), \" \", /*#__PURE__*/React.createElement(\"p\", {\n id: \"transition-modal-description\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 68\n }\n }, \" react - transition - group animates me. \"), \" \"), \" \"), \" \"), \" \");\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/modal.js"],"names":["React","makeStyles","Modal","Backdrop","Fade","useStyles","theme","modal","display","alignItems","justifyContent","paper","backgroundColor","palette","background","border","boxShadow","shadows","padding","spacing","TransitionsModal","classes","open","setOpen","useState","handleOpen","handleClose","timeout"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,0BAA3B;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AACA,OAAOC,QAAP,MAAqB,4BAArB;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AAEA,MAAMC,SAAS,GAAGJ,UAAU,CAAEK,KAAD,KAAY;AACrCC,EAAAA,KAAK,EAAE;AACHC,IAAAA,OAAO,EAAE,MADN;AAEHC,IAAAA,UAAU,EAAE,QAFT;AAGHC,IAAAA,cAAc,EAAE;AAHb,GAD8B;AAMrCC,EAAAA,KAAK,EAAE;AACHC,IAAAA,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,UAAd,CAAyBH,KADvC;AAEHI,IAAAA,MAAM,EAAE,gBAFL;AAGHC,IAAAA,SAAS,EAAEV,KAAK,CAACW,OAAN,CAAc,CAAd,CAHR;AAIHC,IAAAA,OAAO,EAAEZ,KAAK,CAACa,OAAN,CAAc,CAAd,EAAiB,CAAjB,EAAoB,CAApB;AAJN;AAN8B,CAAZ,CAAD,CAA5B;AAcA,eAAe,SAASC,gBAAT,GAA4B;AACvC,QAAMC,OAAO,GAAGhB,SAAS,EAAzB;AACA,QAAM,CAACiB,IAAD,EAAOC,OAAP,IAAkBvB,KAAK,CAACwB,QAAN,CAAe,KAAf,CAAxB;;AAEA,QAAMC,UAAU,GAAG,MAAM;AACrBF,IAAAA,OAAO,CAAC,IAAD,CAAP;AACH,GAFD;;AAIA,QAAMG,WAAW,GAAG,MAAM;AACtBH,IAAAA,OAAO,CAAC,KAAD,CAAP;AACH,GAFD;;AAIA,sBAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEL;AACO,IAAA,IAAI,EAAG,QADd;AAEA,IAAA,OAAO,EAAKE,UAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAFK,oBAMI,oBACT,KADS;AACH,IAAA,SAAS,EAAKJ,OAAO,CAACd,KADnB;AAET,IAAA,IAAI,EAAKe,IAFA;AAGT,IAAA,OAAO,EAAKI,WAHH;AAIT,IAAA,oBAAoB,MAJX;AAIY,IAAA,iBAAiB,EAAKvB,QAJlC;AAKT,IAAA,aAAa,EACT;AACIwB,MAAAA,OAAO,EAAE;AADb,KANK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUT,oBACA,IADA;AACK,IAAA,EAAE,EAAKL,IADZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEA;AACI,IAAA,SAAS,EAAKD,OAAO,CAACV,KAD1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEA;AACG,IAAA,EAAE,EAAG,wBADR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAFA,oBAG2D;AACzD,IAAA,EAAE,EAAG,8BADoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iDAH3D,MAFA,MAVS,MANJ,MAAT;AA4BH","sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport Fade from '@material-ui/core/Fade';\n\nconst useStyles = makeStyles((theme) => ({\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n}));\n\nexport default function TransitionsModal() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return ( <\n div >\n <\n button type = \"button\"\n onClick = { handleOpen } >\n react - transition - group <\n /button> <\n Modal className = { classes.modal }\n open = { open }\n onClose = { handleClose }\n closeAfterTransition BackdropComponent = { Backdrop }\n BackdropProps = {\n {\n timeout: 500,\n }\n } >\n <\n Fade in = { open } >\n <\n div className = { classes.paper } >\n <\n h2 id = \"transition-modal-title\" > Transition modal < /h2> <\n p id = \"transition-modal-description\" > react - transition - group animates me. < /p> < /\n div > <\n /Fade> < /\n Modal > <\n /div>\n );\n}"]},"metadata":{},"sourceType":"module"}