ColCardOwnerOptions.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, {useState} from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import MenuItem from '@material-ui/core/MenuItem';
import OpenIcon from '@material-ui/icons/OpenInNew';
import CreateIcon from '@material-ui/icons/Create';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import {Link} from 'react-router-dom'
import MoreVertIcon from '@material-ui/icons/MoreVert';
import styled from 'styled-components'
import ModalExcluirColecao from './ModalExcluirColecao.js'
import ModalEditarColecao from './ModalEditarColecao.js'

export default function ColCardOwnerOptions (props) {
    const [anchorEl, setAnchorEl] = React.useState(null);

    function handleClick(event) {
        setAnchorEl(event.currentTarget);
    }

    function handleClose() {
        setAnchorEl(null);
    }

    const [modalExcluirOpen, toggleModalExcluir] = useState(false)

    const [modalEditarOpen, toggleModalEditar] = useState(false)


    return (
        <>
            <ModalExcluirColecao id={props.id}
                contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
            />
            <ModalEditarColecao id={props.id}
                contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
                changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
            />

            <div style={{fontSize: "12px"}}>
                <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
                    OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/>
                </Button>
                <Menu
                    id="simple-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                >
                    <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
                        <Link to={"/colecao-do-usuario/" + props.id}>
                            <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
                        </Link>
                    </StyledMenuItem>

                    <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
                        <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar
                    </StyledMenuItem>

                    <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
                        <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
                    </StyledMenuItem>
                </Menu>
            </div>
        </>
    )
}

export const StyledMenuItem = styled(MenuItem)`
    background-color: ${props => props.contrast === "" ? "white" : "black"} !important;

    .MuiSvgIcon-root {
        vertical-align : middle !important;
    }
    a {
        color : inherit !important;
    }
`