Dropdown.js

// /*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
// Departamento de Informatica - Universidade Federal do Parana

// This file is part of Plataforma Integrada MEC.

// Plataforma Integrada MEC is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// Plataforma Integrada MEC is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.

// You should have received a copy of the GNU Affero General Public License
// along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Popper from '@material-ui/core/Popper';
import Button from '@material-ui/core/Button';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';
import { MenuItem, MenuList } from '@material-ui/core/'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Store } from '../Store';
import { HashLink as Link } from 'react-router-hash-link';

const useStyles = makeStyles((theme) => ({
  typography: {
    padding: theme.spacing(2),
  },
}));

export default function PositionedPopper(props) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const [placement, setPlacement] = React.useState();
  const classes = useStyles();
  const { state, dispatch } = React.useContext(Store)
  const innerDropdown = React.useRef(null)

  const handleClick = (newPlacement) => (event) => {
    if (state.searchOpen)
      dispatch({
        type: 'HANDLE_SEARCH_BAR',
        opened: false
      })
    setAnchorEl(event.currentTarget);
    setOpen((prev) => placement !== newPlacement || !prev);
    setPlacement(newPlacement);
  };

  const handleItemClicked = () => {
    setOpen(false)
  }

  useEffect(() => {
    const handleClickOutside = (event) => {
      innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
    }

    document.addEventListener('mousedown', handleClickOutside)

    return () => document.removeEventListener('mousedown', handleClickOutside)

  }, [])

  return (
    <div className={classes.root}>
      <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <MenuList className={`${state.contrast}BackColor`}>
                {
                  props.items.map((item) =>
                    <Link onClick={handleItemClicked} className={`${state.contrast}LinkColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
                  )
                }
              </MenuList>
            </Paper>
          </Fade>
        )}
      </Popper>
      <Button
        className={`${state.contrast}LinkColor`}
        style={{ textTransform: "none" }}
        aria-controls="menu-list-grow"
        aria-haspopup="true"
        onClick={handleClick('bottom')}
      >
        {props.name}
        <ExpandMoreIcon className={`${state.contrast}IconColor`}/>
      </Button>
    </div>
  );
}