import React, { useState } from 'react'; import { IconButton, Menu, MenuItem, useMediaQuery, useTheme, } from '@mui/material'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import EditIcon from '@mui/icons-material/Edit'; import DeleteIcon from '@mui/icons-material/Delete'; import { useNavigate } from 'react-router-dom'; import { makeStyles } from '@mui/styles'; import RemoveDialog from '../../common/components/RemoveDialog'; import { useTranslation } from '../../common/components/LocalizationProvider'; const useStyles = makeStyles(() => ({ row: { display: 'flex', }, })); const CollectionActions = ({ itemId, editPath, endpoint, setTimestamp, customActions, readonly, }) => { const theme = useTheme(); const classes = useStyles(); const navigate = useNavigate(); const t = useTranslation(); const phone = useMediaQuery(theme.breakpoints.down('sm')); const [menuAnchorEl, setMenuAnchorEl] = useState(null); const [removing, setRemoving] = useState(false); const handleEdit = () => { navigate(`${editPath}/${itemId}`); setMenuAnchorEl(null); }; const handleRemove = () => { setRemoving(true); setMenuAnchorEl(null); }; const handleCustom = (action) => { action.handler(itemId); setMenuAnchorEl(null); }; const handleRemoveResult = (removed) => { setRemoving(false); if (removed) { setTimestamp(Date.now()); } }; return ( <> {phone ? ( <> setMenuAnchorEl(event.currentTarget)}> setMenuAnchorEl(null)}> {customActions && customActions.map((action) => ( handleCustom(action)} key={action.key}>{action.title} ))} {!readonly && ( <> {t('sharedEdit')} {t('sharedRemove')} )} ) : (
{customActions && customActions.map((action) => ( handleCustom(action)} key={action.key}> {action.icon} ))} {!readonly && ( <> )}
)} ); }; export default CollectionActions;