| 1 |
- {"ast":null,"code":"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';\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden'\n },\n gridList: {\n width: '100%',\n height: '100%'\n },\n icon: {\n color: 'rgba(255, 255, 255, 0.54)'\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 * cols: 2,\n * },\n * {\n * [etc...]\n * },\n * ];\n */\n\nexport default function ImageGridList() {\n const classes = useStyles();\n /*\n return ( <\n div className = { classes.root } >\n <\n GridList cellHeight = { 160 }\n className = { classes.gridList } >\n <\n GridListTile key = \"Subheader\"\n cols = { 2 }\n style = {\n { height: 'auto' }\n } >\n <\n ListSubheader component = \"div\" > December < /ListSubheader> < /\n GridListTile > {\n tileData.map((tile) => ( < GridListTile key = { tile.img }\n cols = { tile.cols || 1 } >\n <\n img src = { tile.img }\n alt = { tile.title }\n /> < /\n GridListTile >\n ))\n } <\n /GridList> < /\n div >\n );\n \n /*\n return ( <\n div className = { classes.root } >\n <\n GridList cellHeight = { 140 }\n className = { classes.gridList }\n cols = { 4 } > {\n tileData.map((tile) => ( <\n GridListTile key = { tile.img }\n cols = { tile.cols || 1 } >\n <\n img src = { tile.img }\n alt = { tile.title }\n /> < /\n GridListTile >\n ))\n } <\n /GridList> < /\n div >\n );\n */\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/ImageList.js"],"names":["React","makeStyles","GridList","GridListTile","GridListTileBar","ListSubheader","IconButton","InfoIcon","tileData","useStyles","theme","root","display","flexWrap","justifyContent","overflow","gridList","width","height","icon","color","ImageGridList","classes"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,0BAA3B;AACA,OAAOC,QAAP,MAAqB,4BAArB;AACA,OAAOC,YAAP,MAAyB,gCAAzB;AACA,OAAOC,eAAP,MAA4B,mCAA5B;AACA,OAAOC,aAAP,MAA0B,iCAA1B;AACA,OAAOC,UAAP,MAAuB,8BAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,OAAOC,QAAP,MAAqB,YAArB;AAEA,MAAMC,SAAS,GAAGR,UAAU,CAAES,KAAD,KAAY;AACrCC,EAAAA,IAAI,EAAE;AACFC,IAAAA,OAAO,EAAE,MADP;AAEFC,IAAAA,QAAQ,EAAE,MAFR;AAGFC,IAAAA,cAAc,EAAE,cAHd;AAIFC,IAAAA,QAAQ,EAAE;AAJR,GAD+B;AAOrCC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE;AAFF,GAP2B;AAWrCC,EAAAA,IAAI,EAAE;AACFC,IAAAA,KAAK,EAAE;AADL;AAX+B,CAAZ,CAAD,CAA5B;AAgBA;;;;;;;;;;;;;;;;;;;AAkBA,eAAe,SAASC,aAAT,GAAyB;AACpC,QAAMC,OAAO,GAAGb,SAAS,EAAzB;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDH","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';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n },\n gridList: {\n width: '100%',\n height: '100%',\n },\n icon: {\n color: 'rgba(255, 255, 255, 0.54)',\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 * cols: 2,\n * },\n * {\n * [etc...]\n * },\n * ];\n */\nexport default function ImageGridList() {\n const classes = useStyles();\n /*\n return ( <\n div className = { classes.root } >\n <\n GridList cellHeight = { 160 }\n className = { classes.gridList } >\n <\n GridListTile key = \"Subheader\"\n cols = { 2 }\n style = {\n { height: 'auto' }\n } >\n <\n ListSubheader component = \"div\" > December < /ListSubheader> < /\n GridListTile > {\n tileData.map((tile) => ( < GridListTile key = { tile.img }\n cols = { tile.cols || 1 } >\n <\n img src = { tile.img }\n alt = { tile.title }\n /> < /\n GridListTile >\n ))\n } <\n /GridList> < /\n div >\n );\n \n /*\n return ( <\n div className = { classes.root } >\n <\n GridList cellHeight = { 140 }\n className = { classes.gridList }\n cols = { 4 } > {\n tileData.map((tile) => ( <\n GridListTile key = { tile.img }\n cols = { tile.cols || 1 } >\n <\n img src = { tile.img }\n alt = { tile.title }\n /> < /\n GridListTile >\n ))\n } <\n /GridList> < /\n div >\n );\n */\n}"]},"metadata":{},"sourceType":"module"}
|
