| 1 |
- {"ast":null,"code":"var _jsxFileName = \"/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/SearchBar.js\";\nimport React from 'react';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport InputBase from '@material-ui/core/InputBase';\nimport { fade, makeStyles } from '@material-ui/core/styles';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport SearchIcon from '@material-ui/icons/Search';\nconst useStyles = makeStyles(theme => ({\n root: {\n flexGrow: 1\n },\n menuButton: {\n marginRight: theme.spacing(2)\n },\n title: {\n flexGrow: 1,\n display: 'none',\n [theme.breakpoints.up('sm')]: {\n display: 'block'\n }\n },\n search: {\n position: 'relative',\n borderRadius: theme.shape.borderRadius,\n backgroundColor: fade(theme.palette.common.white, 0.15),\n '&:hover': {\n backgroundColor: fade(theme.palette.common.white, 0.25)\n },\n marginLeft: 0,\n width: '100%',\n [theme.breakpoints.up('sm')]: {\n marginLeft: theme.spacing(1),\n width: 'auto'\n }\n },\n searchIcon: {\n padding: theme.spacing(0, 2),\n height: '100%',\n position: 'absolute',\n pointerEvents: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n inputRoot: {\n color: 'inherit'\n },\n inputInput: {\n padding: theme.spacing(1, 1, 1, 0),\n // vertical padding + font size from searchIcon\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\n transition: theme.transitions.create('width'),\n width: '100%',\n [theme.breakpoints.up('sm')]: {\n width: '12ch',\n '&:focus': {\n width: '20ch'\n }\n }\n }\n}));\nexport default function SearchAppBar() {\n const classes = useStyles();\n return /*#__PURE__*/React.createElement(\"div\", {\n className: classes.root,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 14\n }\n }, /*#__PURE__*/React.createElement(AppBar, {\n position: \"static\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(Toolbar, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 73,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(IconButton, {\n edge: \"start\",\n className: classes.menuButton,\n color: \"inherit\",\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 75,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(MenuIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 79,\n columnNumber: 9\n }\n })), \" \", /*#__PURE__*/React.createElement(Typography, {\n className: classes.title,\n variant: \"h6\",\n noWrap: true,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 82,\n columnNumber: 22\n }\n }, \"Material - UI \"), \" \", /*#__PURE__*/React.createElement(\"div\", {\n className: classes.search,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 87,\n columnNumber: 22\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.searchIcon,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 89,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(SearchIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 91,\n columnNumber: 9\n }\n })), \" \", /*#__PURE__*/React.createElement(InputBase, {\n placeholder: \"Search\\u2026\",\n classes: {\n root: classes.inputRoot,\n input: classes.inputInput\n },\n inputProps: {\n 'aria-label': 'search'\n },\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 94,\n columnNumber: 15\n }\n }), \" \"), \" \"), \" \"), \" \");\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/SearchBar.js"],"names":["React","AppBar","Toolbar","IconButton","Typography","InputBase","fade","makeStyles","MenuIcon","SearchIcon","useStyles","theme","root","flexGrow","menuButton","marginRight","spacing","title","display","breakpoints","up","search","position","borderRadius","shape","backgroundColor","palette","common","white","marginLeft","width","searchIcon","padding","height","pointerEvents","alignItems","justifyContent","inputRoot","color","inputInput","paddingLeft","transition","transitions","create","SearchAppBar","classes","input"],"mappings":"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","sourcesContent":["import React from 'react';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport InputBase from '@material-ui/core/InputBase';\nimport { fade, makeStyles } from '@material-ui/core/styles';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport SearchIcon from '@material-ui/icons/Search';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n menuButton: {\n marginRight: theme.spacing(2),\n },\n title: {\n flexGrow: 1,\n display: 'none',\n [theme.breakpoints.up('sm')]: {\n display: 'block',\n },\n },\n search: {\n position: 'relative',\n borderRadius: theme.shape.borderRadius,\n backgroundColor: fade(theme.palette.common.white, 0.15),\n '&:hover': {\n backgroundColor: fade(theme.palette.common.white, 0.25),\n },\n marginLeft: 0,\n width: '100%',\n [theme.breakpoints.up('sm')]: {\n marginLeft: theme.spacing(1),\n width: 'auto',\n },\n },\n searchIcon: {\n padding: theme.spacing(0, 2),\n height: '100%',\n position: 'absolute',\n pointerEvents: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n inputRoot: {\n color: 'inherit',\n },\n inputInput: {\n padding: theme.spacing(1, 1, 1, 0),\n // vertical padding + font size from searchIcon\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\n transition: theme.transitions.create('width'),\n width: '100%',\n [theme.breakpoints.up('sm')]: {\n width: '12ch',\n '&:focus': {\n width: '20ch',\n },\n },\n },\n}));\n\nexport default function SearchAppBar() {\n const classes = useStyles();\n\n return ( <\n div className = { classes.root } >\n <\n AppBar position = \"static\" >\n <\n Toolbar >\n <\n IconButton edge = \"start\"\n className = { classes.menuButton }\n color = \"inherit\" >\n <\n MenuIcon / >\n <\n /IconButton> <\n Typography className = { classes.title }\n variant = \"h6\"\n noWrap >\n Material - UI <\n /Typography> <\n div className = { classes.search } >\n <\n div className = { classes.searchIcon } >\n <\n SearchIcon / >\n <\n /div> <\n InputBase placeholder = \"Search…\"\n classes = {\n {\n root: classes.inputRoot,\n input: classes.inputInput,\n }\n }\n inputProps = {\n { 'aria-label': 'search' }\n }\n /> < /\n div > <\n /Toolbar> < /\n AppBar > <\n /div>\n );\n}"]},"metadata":{},"sourceType":"module"}
|
