469,912 Members | 1,785 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,912 developers. It's quick & easy.

How to have a universal js file in reactjs

Exequiel
288 256MB
Hello guys, I'm new in REACTJS and Im using Material UI. My question is how can I chop chop this code here, I want to separate the functions for drawer in other file and called it DrawerSlider.js and import it to HTML tags in DrawerView.js wich contains the html tags,

Expand|Select|Wrap|Line Numbers
  1. import React from 'react';
  2. import clsx from 'clsx';
  3. import { makeStyles, useTheme } from '@material-ui/core/styles';
  4. import Drawer from '@material-ui/core/Drawer';
  5. import AppBar from '@material-ui/core/AppBar';
  6. import Toolbar from '@material-ui/core/Toolbar';
  7. import List from '@material-ui/core/List';
  8. import CssBaseline from '@material-ui/core/CssBaseline';
  9. import Typography from '@material-ui/core/Typography';
  10. import Divider from '@material-ui/core/Divider';
  11. import IconButton from '@material-ui/core/IconButton';
  12. import MenuIcon from '@material-ui/icons/Menu';
  13. import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
  14. import ChevronRightIcon from '@material-ui/icons/ChevronRight';
  15. import ListItem from '@material-ui/core/ListItem';
  16. import ListItemIcon from '@material-ui/core/ListItemIcon';
  17. import ListItemText from '@material-ui/core/ListItemText';
  18. import InboxIcon from '@material-ui/icons/MoveToInbox';
  19. import MailIcon from '@material-ui/icons/Mail';
  20.  
  21. const drawerWidth = 240;
  22.  
  23. const useStyles = makeStyles((theme) => ({
  24.   root: {
  25.     display: 'flex',
  26.   },
  27.   appBar: {
  28.     zIndex: theme.zIndex.drawer + 1,
  29.     transition: theme.transitions.create(['width', 'margin'], {
  30.       easing: theme.transitions.easing.sharp,
  31.       duration: theme.transitions.duration.leavingScreen,
  32.     }),
  33.   },
  34.   appBarShift: {
  35.     marginLeft: drawerWidth,
  36.     width: `calc(100% - ${drawerWidth}px)`,
  37.     transition: theme.transitions.create(['width', 'margin'], {
  38.       easing: theme.transitions.easing.sharp,
  39.       duration: theme.transitions.duration.enteringScreen,
  40.     }),
  41.   },
  42.   menuButton: {
  43.     marginRight: 36,
  44.   },
  45.   hide: {
  46.     display: 'none',
  47.   },
  48.   drawer: {
  49.     width: drawerWidth,
  50.     flexShrink: 0,
  51.     whiteSpace: 'nowrap',
  52.   },
  53.   drawerOpen: {
  54.     width: drawerWidth,
  55.     transition: theme.transitions.create('width', {
  56.       easing: theme.transitions.easing.sharp,
  57.       duration: theme.transitions.duration.enteringScreen,
  58.     }),
  59.   },
  60.   drawerClose: {
  61.     transition: theme.transitions.create('width', {
  62.       easing: theme.transitions.easing.sharp,
  63.       duration: theme.transitions.duration.leavingScreen,
  64.     }),
  65.     overflowX: 'hidden',
  66.     width: theme.spacing(7) + 1,
  67.     [theme.breakpoints.up('sm')]: {
  68.       width: theme.spacing(9) + 1,
  69.     },
  70.   },
  71.   toolbar: {
  72.     display: 'flex',
  73.     alignItems: 'center',
  74.     justifyContent: 'flex-end',
  75.     padding: theme.spacing(0, 1),
  76.     // necessary for content to be below app bar
  77.     ...theme.mixins.toolbar,
  78.   },
  79.   content: {
  80.     flexGrow: 1,
  81.     padding: theme.spacing(3),
  82.   },
  83. }));
  84.  
  85. export default function MiniDrawer() {
  86.   const classes = useStyles();
  87.   const theme = useTheme();
  88.   const [open, setOpen] = React.useState(false);
  89.  
  90.   const handleDrawerOpen = () => {
  91.     setOpen(true);
  92.   };
  93.  
  94.   const handleDrawerClose = () => {
  95.     setOpen(false);
  96.   };
  97.  
  98.   return (
  99.     <div className={classes.root}>
  100.       <CssBaseline />
  101.       <AppBar
  102.         position="fixed"
  103.         className={clsx(classes.appBar, {
  104.           [classes.appBarShift]: open,
  105.         })}
  106.       >
  107.         <Toolbar>
  108.           <IconButton
  109.             color="inherit"
  110.             aria-label="open drawer"
  111.             onClick={handleDrawerOpen}
  112.             edge="start"
  113.             className={clsx(classes.menuButton, {
  114.               [classes.hide]: open,
  115.             })}
  116.           >
  117.             <MenuIcon />
  118.           </IconButton>
  119.           <Typography variant="h6" noWrap>
  120.             Mini variant drawer
  121.           </Typography>
  122.         </Toolbar>
  123.       </AppBar>
  124.       <Drawer
  125.         variant="permanent"
  126.         className={clsx(classes.drawer, {
  127.           [classes.drawerOpen]: open,
  128.           [classes.drawerClose]: !open,
  129.         })}
  130.         classes={{
  131.           paper: clsx({
  132.             [classes.drawerOpen]: open,
  133.             [classes.drawerClose]: !open,
  134.           }),
  135.         }}
  136.       >
  137.         <div className={classes.toolbar}>
  138.           <IconButton onClick={handleDrawerClose}>
  139.             {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
  140.           </IconButton>
  141.         </div>
  142.         <Divider />
  143.         <List>
  144.           {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
  145.             <ListItem button key={text}>
  146.               <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
  147.               <ListItemText primary={text} />
  148.             </ListItem>
  149.           ))}
  150.         </List>
  151.         <Divider />
  152.         <List>
  153.           {['All mail', 'Trash', 'Spam'].map((text, index) => (
  154.             <ListItem button key={text}>
  155.               <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
  156.               <ListItemText primary={text} />
  157.             </ListItem>
  158.           ))}
  159.         </List>
  160.       </Drawer>
  161.       <main className={classes.content}>
  162.         <div className={classes.toolbar} />
  163.         <Typography paragraph>
  164.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  165.           ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
  166.           facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
  167.           gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
  168.           donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
  169.           adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
  170.           Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
  171.           imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
  172.           arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
  173.           donec massa sapien faucibus et molestie ac.
  174.         </Typography>
  175.         <Typography paragraph>
  176.           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
  177.           facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
  178.           tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
  179.           consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
  180.           vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
  181.           hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
  182.           tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
  183.           nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
  184.           accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
  185.         </Typography>
  186.       </main>
  187.     </div>
  188.   );
  189. }
  190.  
or you can visit this site,
https://material-ui.com/components/drawers/#drawer

and scroll down to Mini variant drawer, you can view the code there. Hopefully you understand what I mean.
Than you.
Jul 14 '20 #1
0 1897

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by matt | last post: by
3 posts views Thread by Pernell Williams | last post: by
3 posts views Thread by Larry R Harrison Jr | last post: by
2 posts views Thread by guru.slt | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.