@eureca/eureca-ui/src/components/Drawer/index.js

UI component library of Eureca's user and admin apps

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { Drawer, Box } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';

import { SideDrawer } from './SideDrawer';

const Overlay = styled(Box)`
  position: absolute;
  top: 0;
  height: 100%;
  width: 72px;
  background-color: transparent;
`;

function DrawerMenu({
  list,
  current,
  isOpen,
  onClose,
  user,
  onClickUser,
  onLogout,
  onClickItem,
  linkComponent,
  windowSize,
}) {
  const theme = useTheme();
  const { sm, md } = theme.breakpoints.values;

  const [open, setOpen] = useState(isOpen);
  const [curr, setCurr] = useState(current);

  useEffect(() => {
    setOpen(isOpen);
  }, [isOpen]);

  function handleOpen() {
    setOpen(true);
  }
  function handleClose() {
    setOpen(false);
    windowSize?.width < sm && onClose();
  }
  function handleClick(id) {
    setCurr(id);
    onClickItem(id);
    setOpen(false);
  }

  if (windowSize?.width < sm) {
    return (
      <Drawer open={open} onClose={handleClose}>
        <SideDrawer
          enlarged
          list={list}
          current={curr}
          onClick={handleClick}
          user={user}
          onClickUser={onClickUser}
          onLogout={onLogout}
          linkComponent={linkComponent}
          windowSize={windowSize}
        />
      </Drawer>
    );
  }

  if (windowSize?.width >= sm && windowSize?.width < md) {
    return (
      <>
        <Box display="flex" flexGrow={0}>
          <SideDrawer
            list={list}
            current={curr}
            onClick={handleClick}
            user={user}
            onClickUser={onClickUser}
            onLogout={onLogout}
            linkComponent={linkComponent}
            windowSize={windowSize}
          />
          <Overlay onClick={handleOpen} />
        </Box>
        <Drawer open={open} onClose={handleClose}>
          <SideDrawer
            enlarged
            list={list}
            current={curr}
            onClick={handleClick}
            user={user}
            onClickUser={onClickUser}
            onLogout={onLogout}
            linkComponent={linkComponent}
            windowSize={windowSize}
          />
        </Drawer>
      </>
    );
  }

  return (
    <SideDrawer
      list={list}
      current={curr}
      onClick={handleClick}
      user={user}
      onClickUser={onClickUser}
      onLogout={onLogout}
      linkComponent={linkComponent}
      windowSize={windowSize}
    />
  );
}

DrawerMenu.propTypes = {
  list: PropTypes.object,
  current: PropTypes.string,
  isOpen: PropTypes.bool,
  onClose: PropTypes.func,
  user: PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    name: PropTypes.string.isRequired,
    avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  }),
  onClickUser: PropTypes.func,
  onLogout: PropTypes.func,
  onClickItem: PropTypes.func,
  linkComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
  windowSize: PropTypes.object.isRequired,
};

DrawerMenu.defaultProps = {
  list: {},
  current: '',
  isOpen: false,
  user: {
    id: null,
    name: '',
    avatar: '',
  },
  linkComponent: null,
  onClose: () => {},
  onClickUser: () => {},
  onLogout: () => {},
  onClickItem: () => {},
};

export { DrawerMenu };