| 1 |
- {"ast":null,"code":"var _jsxFileName = \"/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/testIL.js\";\nimport React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport IconButton from '@material-ui/core/IconButton';\nimport InfoIcon from '@material-ui/icons/Info';\nimport tileData from './tileData';\nimport StarBorderIcon from '@material-ui/icons/StarBorderOutlined';\nimport clsx from 'clsx';\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n backgroundColor: theme.palette.background.paper\n },\n gridList: {\n width: '100%',\n height: '100%'\n },\n icon: {\n color: 'rgba(255, 255, 255, 0.54)'\n },\n titleBar: {\n background: 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' + 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)'\n },\n titleGrid: {},\n titleGridOpen: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen\n })\n },\n titleGridClose: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen\n })\n }\n}));\n/**\n * The example data is structured as follows:\n *\n * import image from 'path/to/image.jpg';\n * [etc...]\n *\n * const tileData = [\n * {\n * img: image,\n * title: 'Image',\n * author: 'author',\n * },\n * {\n * [etc...]\n * },\n * ];\n */\n\nexport default function TitlebarGridList() {\n const classes = useStyles();\n const [Hovering, isHovering] = React.useState(false);\n\n const handleMouseHover = value => () => {\n isHovering(value);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: classes.root,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 74,\n columnNumber: 14\n }\n }, /*#__PURE__*/React.createElement(GridList, {\n cellHeight: 180,\n cols: 5,\n className: classes.gridList,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 76,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(GridListTile, {\n key: \"Subheader\",\n cols: 5,\n style: {\n height: 'auto'\n },\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(ListSubheader, {\n component: \"div\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 9\n }\n }, \" December \"), \" \"), \" \", tileData.map(tile => /*#__PURE__*/React.createElement(GridListTile, {\n key: tile.img,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 89,\n columnNumber: 38\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: tile.img,\n alt: tile.title,\n onMouseEnter: handleMouseHover(true),\n onMouseLeave: handleMouseHover(false),\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 91,\n columnNumber: 17\n }\n }), Hovering && /*#__PURE__*/React.createElement(GridListTileBar, {\n title: tile.title,\n titlePosition: \"top\",\n onMouseEnter: handleMouseHover(true),\n onMouseLeave: handleMouseHover(false),\n className: clsx(classes.titleGrid, {\n [classes.titleGridOpen]: Hovering,\n [classes.titleGridClose]: !Hovering\n }),\n actionIcon: /*#__PURE__*/React.createElement(IconButton, {\n className: classes.icon,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 107,\n columnNumber: 32\n }\n }, /*#__PURE__*/React.createElement(StarBorderIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 110,\n columnNumber: 21\n }\n })),\n actionPosition: \"left\",\n className: classes.titleBar,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 96,\n columnNumber: 32\n }\n }))), \" \"), \" \");\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/testIL.js"],"names":["React","makeStyles","GridList","GridListTile","GridListTileBar","ListSubheader","IconButton","InfoIcon","tileData","StarBorderIcon","clsx","useStyles","theme","root","display","flexWrap","justifyContent","overflow","backgroundColor","palette","background","paper","gridList","width","height","icon","color","titleBar","titleGrid","titleGridOpen","transition","transitions","create","easing","sharp","duration","enteringScreen","titleGridClose","leavingScreen","TitlebarGridList","classes","Hovering","isHovering","useState","handleMouseHover","value","map","tile","img","title"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport IconButton from '@material-ui/core/IconButton';\nimport InfoIcon from '@material-ui/icons/Info';\nimport tileData from './tileData';\nimport StarBorderIcon from '@material-ui/icons/StarBorderOutlined';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n backgroundColor: theme.palette.background.paper,\n },\n gridList: {\n width: '100%',\n height: '100%',\n },\n icon: {\n color: 'rgba(255, 255, 255, 0.54)',\n },\n titleBar: {\n background: 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +\n 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',\n },\n titleGrid: {},\n titleGridOpen: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n titleGridClose: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n}));\n\n/**\n * The example data is structured as follows:\n *\n * import image from 'path/to/image.jpg';\n * [etc...]\n *\n * const tileData = [\n * {\n * img: image,\n * title: 'Image',\n * author: 'author',\n * },\n * {\n * [etc...]\n * },\n * ];\n */\n\n\nexport default function TitlebarGridList() {\n const classes = useStyles();\n const [Hovering, isHovering] = React.useState(false);\n\n const handleMouseHover = value => () => {\n isHovering(value);\n }\n\n return ( <\n div className = { classes.root } >\n <\n GridList cellHeight = { 180 }\n cols = { 5 }\n className = { classes.gridList } >\n <\n GridListTile key = \"Subheader\"\n cols = { 5 }\n style = {\n { height: 'auto' }\n } >\n <\n ListSubheader component = \"div\" > December < /ListSubheader> < /\n GridListTile > {\n tileData.map((tile) => ( <\n GridListTile key = { tile.img } >\n <\n img src = { tile.img }\n alt = { tile.title }\n onMouseEnter = { handleMouseHover(true) }\n onMouseLeave = { handleMouseHover(false) }\n />{Hovering && <GridListTileBar\n title = { tile.title }\n titlePosition = \"top\"\n onMouseEnter = { handleMouseHover(true) }\n onMouseLeave = { handleMouseHover(false) }\n className = {\n clsx(classes.titleGrid, {\n [classes.titleGridOpen]: Hovering,\n [classes.titleGridClose]: !Hovering,\n })\n }\n actionIcon = { <\n IconButton\n className = { classes.icon } >\n <\n StarBorderIcon / >\n <\n /IconButton>\n }\n actionPosition = \"left\"\n className = { classes.titleBar }\n />}< /\n GridListTile >\n ))\n } <\n /GridList> < /\n div >\n );\n}"]},"metadata":{},"sourceType":"module"}
|
