| 1 |
- {"ast":null,"code":"var _jsxFileName = \"/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/SearchBar.js\";\nimport React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\nimport ImageList from './ImageList';\nimport PhotoIcon from '@material-ui/icons/Photo';\nimport ShareIcon from '@material-ui/icons/Share';\nconst drawerWidth = 240;\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex'\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen\n })\n },\n appBarShift: {\n marginLeft: drawerWidth,\n width: `calc(100% - ${drawerWidth}px)`,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen\n })\n },\n menuButton: {\n marginRight: 36\n },\n hide: {\n display: 'none'\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n whiteSpace: 'nowrap'\n },\n drawerOpen: {\n width: drawerWidth,\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen\n })\n },\n drawerClose: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen\n }),\n overflowX: 'hidden',\n width: theme.spacing(7) + 1,\n [theme.breakpoints.up('sm')]: {\n width: theme.spacing(9) + 1\n }\n },\n toolbar: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n padding: theme.spacing(0, 1),\n // necessary for content to be below app bar\n ...theme.mixins.toolbar\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3)\n }\n}));\nexport default function MiniDrawer() {\n const classes = useStyles();\n const theme = useTheme();\n const [open, setOpen] = React.useState(false);\n\n const handleDrawerOpen = () => {\n setOpen(true);\n };\n\n const handleDrawerClose = () => {\n setOpen(false);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: classes.root,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 100,\n columnNumber: 14\n }\n }, /*#__PURE__*/React.createElement(CssBaseline, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 102,\n columnNumber: 9\n }\n }), /*#__PURE__*/React.createElement(AppBar, {\n position: \"fixed\",\n className: clsx(classes.appBar, {\n [classes.appBarShift]: open\n }),\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 104,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(Toolbar, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 111,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(IconButton, {\n color: \"inherit\",\n onClick: handleDrawerOpen,\n edge: \"start\",\n className: clsx(classes.menuButton, {\n [classes.hide]: open\n }),\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 113,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(MenuIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 122,\n columnNumber: 9\n }\n })), \" \", /*#__PURE__*/React.createElement(Typography, {\n variant: \"h6\",\n noWrap: true,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 125,\n columnNumber: 22\n }\n }, \"\\u8C37\\u72D7\\u76F8\\u8584 \"), \" \"), \" \"), \" \", /*#__PURE__*/React.createElement(Drawer, {\n variant: \"permanent\",\n className: clsx(classes.drawer, {\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open\n }),\n classes: {\n paper: clsx({\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open\n })\n },\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 131,\n columnNumber: 18\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.toolbar,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(IconButton, {\n onClick: handleDrawerClose,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 149,\n columnNumber: 9\n }\n }, \" \", theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(ChevronRightIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 84\n }\n }) : /*#__PURE__*/React.createElement(ChevronLeftIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 109\n }\n }), \" \"), \" \"), \" \", /*#__PURE__*/React.createElement(Divider, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 152,\n columnNumber: 15\n }\n }), /*#__PURE__*/React.createElement(List, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 154,\n columnNumber: 9\n }\n }, \" \", ['相片', '共享', '相簿', '實用工具'].map((text, index) => /*#__PURE__*/React.createElement(ListItem, {\n button: true,\n key: text,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 156,\n columnNumber: 63\n }\n }, /*#__PURE__*/React.createElement(ListItemIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 158,\n columnNumber: 17\n }\n }, \" \", index == 0 ? /*#__PURE__*/React.createElement(PhotoIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 159,\n columnNumber: 47\n }\n }) : index == 1 ? /*#__PURE__*/React.createElement(ShareIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 159,\n columnNumber: 78\n }\n }) : /*#__PURE__*/React.createElement(PhotoIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 159,\n columnNumber: 96\n }\n }), \" \"), \" \", /*#__PURE__*/React.createElement(ListItemText, {\n primary: text,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 159,\n columnNumber: 131\n }\n }), \" \")), \" \"), \" \"), \" \", /*#__PURE__*/React.createElement(\"main\", {\n className: classes.content,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 166,\n columnNumber: 18\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.toolbar,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 168,\n columnNumber: 9\n }\n }), \" \", /*#__PURE__*/React.createElement(ImageList, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 12\n }\n }), \" \"), \" \");\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/SearchBar.js"],"names":["React","clsx","makeStyles","useTheme","Drawer","AppBar","Toolbar","List","CssBaseline","Typography","Divider","IconButton","MenuIcon","ChevronLeftIcon","ChevronRightIcon","ListItem","ListItemIcon","ListItemText","InboxIcon","MailIcon","ImageList","PhotoIcon","ShareIcon","drawerWidth","useStyles","theme","root","display","appBar","zIndex","drawer","transition","transitions","create","easing","sharp","duration","leavingScreen","appBarShift","marginLeft","width","enteringScreen","menuButton","marginRight","hide","flexShrink","whiteSpace","drawerOpen","drawerClose","overflowX","spacing","breakpoints","up","toolbar","alignItems","justifyContent","padding","mixins","content","flexGrow","MiniDrawer","classes","open","setOpen","useState","handleDrawerOpen","handleDrawerClose","paper","direction","map","text","index"],"mappings":"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","sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\nimport ImageList from './ImageList';\nimport PhotoIcon from '@material-ui/icons/Photo';\nimport ShareIcon from '@material-ui/icons/Share';\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n appBarShift: {\n marginLeft: drawerWidth,\n width: `calc(100% - ${drawerWidth}px)`,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n menuButton: {\n marginRight: 36,\n },\n hide: {\n display: 'none',\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n whiteSpace: 'nowrap',\n },\n drawerOpen: {\n width: drawerWidth,\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n drawerClose: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n overflowX: 'hidden',\n width: theme.spacing(7) + 1,\n [theme.breakpoints.up('sm')]: {\n width: theme.spacing(9) + 1,\n },\n },\n toolbar: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n padding: theme.spacing(0, 1),\n // necessary for content to be below app bar\n ...theme.mixins.toolbar,\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n },\n}));\n\nexport default function MiniDrawer() {\n const classes = useStyles();\n const theme = useTheme();\n const [open, setOpen] = React.useState(false);\n\n const handleDrawerOpen = () => {\n setOpen(true);\n };\n\n const handleDrawerClose = () => {\n setOpen(false);\n };\n\n return ( <\n div className = { classes.root } >\n <\n CssBaseline / >\n <\n AppBar position = \"fixed\"\n className = {\n clsx(classes.appBar, {\n [classes.appBarShift]: open,\n })\n } >\n <\n Toolbar >\n <\n IconButton color = \"inherit\"\n onClick = { handleDrawerOpen }\n edge = \"start\"\n className = {\n clsx(classes.menuButton, {\n [classes.hide]: open,\n })\n } >\n <\n MenuIcon / >\n <\n /IconButton> <\n Typography variant = \"h6\"\n noWrap >\n 谷狗相薄 <\n /Typography> < /\n Toolbar > <\n /AppBar> <\n Drawer variant = \"permanent\"\n className = {\n clsx(classes.drawer, {\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open,\n })\n }\n classes = {\n {\n paper: clsx({\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open,\n }),\n }\n } >\n <\n div className = { classes.toolbar } >\n <\n IconButton onClick = { handleDrawerClose } > { theme.direction === 'rtl' ? < ChevronRightIcon / > : < ChevronLeftIcon / > } <\n /IconButton> < /\n div > <\n Divider / >\n <\n List > {\n ['相片', '共享', '相簿', '實用工具'].map((text, index) => ( <\n ListItem button key = { text } >\n <\n ListItemIcon > { index == 0 ? < PhotoIcon / > : index == 1 ? < ShareIcon / > : < PhotoIcon / > } < /ListItemIcon> <\n ListItemText primary = { text }\n /> < /\n ListItem >\n ))\n } <\n /List> < /\n Drawer > <\n main className = { classes.content } >\n <\n div className = { classes.toolbar }\n /> <\n ImageList / > < /\n main > <\n /div>\n );\n}"]},"metadata":{},"sourceType":"module"}
|
