| 1 |
- {"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';\n\nfunction rand() {\n return Math.round(Math.random() * 20) - 10;\n}\n\nfunction getModalStyle() {\n const top = 50 + rand();\n const left = 50 + rand();\n return {\n top: `${top}%`,\n left: `${left}%`,\n transform: `translate(-${top}%, -${left}%)`\n };\n}\n\nconst useStyles = makeStyles(theme => ({\n paper: {\n position: 'absolute',\n width: 400,\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 SimpleModal() {\n //const classes = useStyles();\n // getModalStyle is not a pure function, we roll the style only on the first render\n const [modalStyle] = React.useState(getModalStyle);\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 const body = /*#__PURE__*/React.createElement(\"div\", {\n style: modalStyle,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 20\n }\n }, /*#__PURE__*/React.createElement(\"h2\", {\n id: \"simple-modal-title\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 47,\n columnNumber: 9\n }\n }, \" Text in a modal \"), \" \", /*#__PURE__*/React.createElement(\"p\", {\n id: \"simple-modal-description\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 63\n }\n }, \"Duis mollis, est non commodo luctus, nisi erat porttitor ligula. \"), \" \", /*#__PURE__*/React.createElement(SimpleModal, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 51,\n columnNumber: 13\n }\n }));\n return /*#__PURE__*/React.createElement(\"div\", {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 57,\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: 59,\n columnNumber: 9\n }\n }, \"Open Modal \"), \" \", /*#__PURE__*/React.createElement(Modal, {\n open: open,\n onClose: handleClose,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 18\n }\n }, \" \", body, \" \"), \" \");\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/modal.js"],"names":["React","makeStyles","Modal","rand","Math","round","random","getModalStyle","top","left","transform","useStyles","theme","paper","position","width","backgroundColor","palette","background","border","boxShadow","shadows","padding","spacing","SimpleModal","modalStyle","useState","open","setOpen","handleOpen","handleClose","body"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,0BAA3B;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,SAASC,IAAT,GAAgB;AACZ,SAAOC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,EAA3B,IAAiC,EAAxC;AACH;;AAED,SAASC,aAAT,GAAyB;AACrB,QAAMC,GAAG,GAAG,KAAKL,IAAI,EAArB;AACA,QAAMM,IAAI,GAAG,KAAKN,IAAI,EAAtB;AAEA,SAAO;AACHK,IAAAA,GAAG,EAAG,GAAEA,GAAI,GADT;AAEHC,IAAAA,IAAI,EAAG,GAAEA,IAAK,GAFX;AAGHC,IAAAA,SAAS,EAAG,cAAaF,GAAI,OAAMC,IAAK;AAHrC,GAAP;AAKH;;AAED,MAAME,SAAS,GAAGV,UAAU,CAAEW,KAAD,KAAY;AACrCC,EAAAA,KAAK,EAAE;AACHC,IAAAA,QAAQ,EAAE,UADP;AAEHC,IAAAA,KAAK,EAAE,GAFJ;AAGHC,IAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,UAAd,CAAyBL,KAHvC;AAIHM,IAAAA,MAAM,EAAE,gBAJL;AAKHC,IAAAA,SAAS,EAAER,KAAK,CAACS,OAAN,CAAc,CAAd,CALR;AAMHC,IAAAA,OAAO,EAAEV,KAAK,CAACW,OAAN,CAAc,CAAd,EAAiB,CAAjB,EAAoB,CAApB;AANN;AAD8B,CAAZ,CAAD,CAA5B;AAWA,eAAe,SAASC,WAAT,GAAuB;AAClC;AACA;AACA,QAAM,CAACC,UAAD,IAAezB,KAAK,CAAC0B,QAAN,CAAenB,aAAf,CAArB;AACA,QAAM,CAACoB,IAAD,EAAOC,OAAP,IAAkB5B,KAAK,CAAC0B,QAAN,CAAe,KAAf,CAAxB;;AAEA,QAAMG,UAAU,GAAG,MAAM;AACrBD,IAAAA,OAAO,CAAC,IAAD,CAAP;AACH,GAFD;;AAIA,QAAME,WAAW,GAAG,MAAM;AACtBF,IAAAA,OAAO,CAAC,KAAD,CAAP;AACH,GAFD;;AAIA,QAAMG,IAAI,gBAAK;AACP,IAAA,KAAK,EAAKN,UADH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEX;AACG,IAAA,EAAE,EAAG,oBADR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAFW,oBAG2C;AACpD,IAAA,EAAE,EAAG,0BAD+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yEAH3C,oBAMP,oBACJ,WADI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IANO,CAAf;AAYA,sBAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEL;AACO,IAAA,IAAI,EAAG,QADd;AAEA,IAAA,OAAO,EAAKI,UAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAFK,oBAMI,oBACT,KADS;AACH,IAAA,IAAI,EAAKF,IADN;AAET,IAAA,OAAO,EAAKG,WAFH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAEqBC,IAFrB,MANJ,MAAT;AAYH","sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\n\nfunction rand() {\n return Math.round(Math.random() * 20) - 10;\n}\n\nfunction getModalStyle() {\n const top = 50 + rand();\n const left = 50 + rand();\n\n return {\n top: `${top}%`,\n left: `${left}%`,\n transform: `translate(-${top}%, -${left}%)`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n position: 'absolute',\n width: 400,\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 SimpleModal() {\n //const classes = useStyles();\n // getModalStyle is not a pure function, we roll the style only on the first render\n const [modalStyle] = React.useState(getModalStyle);\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 const body = ( <\n div style = { modalStyle } >\n <\n h2 id = \"simple-modal-title\" > Text in a modal < /h2> <\n p id = \"simple-modal-description\" >\n Duis mollis, est non commodo luctus, nisi erat porttitor ligula. <\n /p> <\n SimpleModal / >\n <\n /div>\n );\n\n return ( <\n div >\n <\n button type = \"button\"\n onClick = { handleOpen } >\n Open Modal <\n /button> <\n Modal open = { open }\n onClose = { handleClose } > { body } <\n /Modal> < /\n div >\n );\n}"]},"metadata":{},"sourceType":"module"}
|
