1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import React, { useState } from 'react';
import {
IconButton, Menu, MenuItem, useMediaQuery, useTheme,
} from '@mui/material';
import Tooltip from '@mui/material/Tooltip';
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 ? (
<>
<IconButton size="small" onClick={(event) => setMenuAnchorEl(event.currentTarget)}>
<MoreVertIcon fontSize="small" />
</IconButton>
<Menu open={!!menuAnchorEl} anchorEl={menuAnchorEl} onClose={() => setMenuAnchorEl(null)}>
{customActions && customActions.map((action) => (
<MenuItem onClick={() => handleCustom(action)} key={action.key}>{action.title}</MenuItem>
))}
{!readonly && (
<>
<MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
<MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
</>
)}
</Menu>
</>
) : (
<div className={classes.row}>
{customActions && customActions.map((action) => (
<Tooltip title={action.title} key={action.key}>
<IconButton size="small" onClick={() => handleCustom(action)}>
{action.icon}
</IconButton>
</Tooltip>
))}
{!readonly && (
<>
<Tooltip title={t('sharedEdit')}>
<IconButton size="small" onClick={handleEdit}>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title={t('sharedRemove')}>
<IconButton size="small" onClick={handleRemove}>
<DeleteIcon fontSize="small" />
</IconButton>
</Tooltip>
</>
)}
</div>
)}
<RemoveDialog style={{ transform: 'none' }} open={removing} endpoint={endpoint} itemId={itemId} onResult={handleRemoveResult} />
</>
);
};
export default CollectionActions;
|
