import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { useHistory } from 'react-router-dom'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import Fab from '@material-ui/core/Fab'; import AddIcon from '@material-ui/icons/Add'; import RemoveDialog from './RemoveDialog'; import { useTranslation } from './LocalizationProvider'; import dimensions from './theme/dimensions'; import { useEditable } from './common/permissions'; const useStyles = makeStyles((theme) => ({ fab: { position: 'fixed', bottom: theme.spacing(2), right: theme.spacing(2), [theme.breakpoints.down('md')]: { bottom: dimensions.bottomBarHeight + theme.spacing(2), }, }, })); const EditCollectionView = ({ content, editPath, endpoint, disableAdd, filter, }) => { const classes = useStyles(); const history = useHistory(); const t = useTranslation(); const editable = useEditable(); const [selectedId, setSelectedId] = useState(null); const [selectedAnchorEl, setSelectedAnchorEl] = useState(null); const [removeDialogShown, setRemoveDialogShown] = useState(false); const [updateTimestamp, setUpdateTimestamp] = useState(Date.now()); const menuShow = (anchorId, itemId) => { setSelectedAnchorEl(anchorId); setSelectedId(itemId); }; const menuHide = () => { setSelectedAnchorEl(null); }; const handleAdd = () => { history.push(editPath); menuHide(); }; const handleEdit = () => { history.push(`${editPath}/${selectedId}`); menuHide(); }; const handleRemove = () => { setRemoveDialogShown(true); menuHide(); }; const handleRemoveResult = () => { setRemoveDialogShown(false); setUpdateTimestamp(Date.now()); }; const Content = content; return ( <> {editable && !disableAdd && ( )} {t('sharedEdit')} {t('sharedRemove')} ); }; export default EditCollectionView;