Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@4rthem
4rthem committed Sep 24, 2024
1 parent 0300a28 commit f1d0276
Show file tree
Hide file tree
Showing 18 changed files with 371 additions and 310 deletions.
6 changes: 5 additions & 1 deletion databox/client/.eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ module.exports = {
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
ignorePatterns: [
'dist',
'.eslintrc.cjs',
'src/TestMorph.tsx',
],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh', 'unused-imports'],
rules: {
Expand Down
280 changes: 121 additions & 159 deletions databox/client/src/components/AssetList/AssetContextMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,39 @@
import {
ClickAwayListener,
Divider,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
} from '@mui/material';
import {Divider, ListItemIcon, ListItemText, MenuItem} from '@mui/material';
import {Asset, AssetOrAssetContainer, StateSetter} from '../../types';
import LinkIcon from '@mui/icons-material/Link';
import {useTranslation} from 'react-i18next';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
import {PopoverPosition} from '@mui/material/Popover/Popover';
import FileOpenIcon from '@mui/icons-material/FileOpen';
import SaveAsButton from '../Media/Asset/Actions/SaveAsButton';
import SaveIcon from '@mui/icons-material/Save';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import {ActionsContext, ReloadFunc} from './types.ts';
import {useAssetActions} from '../../hooks/useAssetActions.ts';
import ContextMenu from '../Ui/ContextMenu.tsx';
import {ContextMenuContext} from '../../hooks/useContextMenu.ts';

type Props<Item extends AssetOrAssetContainer> = {
anchorPosition: PopoverPosition;
anchorEl: HTMLElement | undefined;
asset: Asset;
item: Item;
contextMenu: ContextMenuContext<{
asset: Asset;
item: Item;
}>;
onClose: () => void;
actionsContext: ActionsContext<Item>;
reload?: ReloadFunc;
setSelection?: StateSetter<Item[]>;
};

export default function AssetContextMenu<Item extends AssetOrAssetContainer>({
asset,
item,
anchorPosition,
anchorEl,
contextMenu,
onClose,
actionsContext,
reload,
setSelection,
}: Props<Item>) {
const {t} = useTranslation();
const {asset, item} = contextMenu.data;
const {id, original} = asset;

const {onDelete, onOpen, onDownload, onEdit, onEditAttr, can} =
Expand All @@ -52,154 +44,124 @@ export default function AssetContextMenu<Item extends AssetOrAssetContainer>({
};

return (
<ClickAwayListener onClickAway={onClose} mouseEvent={'onMouseDown'}>
<Menu
id={`item-menu-${id}`}
key={`item-menu-${id}`}
keepMounted
onClose={onClose}
open={true}
anchorReference={anchorEl ? 'anchorEl' : 'anchorPosition'}
anchorEl={anchorEl}
anchorPosition={anchorPosition}
style={{
pointerEvents: 'none',
}}
MenuListProps={{
style: {
pointerEvents: 'auto',
},
}}
BackdropProps={{
invisible: true,
}}
>
{can.open && (
<MenuItem onClick={() => onOpen(original!.id)}>
<ListItemIcon>
<FileOpenIcon />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.open', 'Open')}
/>
</MenuItem>
)}
{can.saveAs ? (
<SaveAsButton
Component={MenuItem}
asset={asset}
file={asset.source!}
variant={'text'}
>
<ListItemIcon>
<SaveIcon />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.save_as', `Save as`)}
/>
<ContextMenu id={id} onClose={onClose} contextMenu={contextMenu}>
{can.open && (
<MenuItem onClick={() => onOpen(original!.id)}>
<ListItemIcon>
<FileOpenIcon />
</ListItemIcon>
<ListItemText primary={t('asset.actions.open', 'Open')} />
</MenuItem>
)}
{can.saveAs ? (
<SaveAsButton
Component={MenuItem}
asset={asset}
file={asset.source!}
variant={'text'}
>
<ListItemIcon>
<SaveIcon />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.save_as', `Save as`)}
/>

<ListItemIcon>
<ArrowDropDownIcon />
</ListItemIcon>
</SaveAsButton>
) : (
''
)}
{original?.file?.alternateUrls &&
original.file.alternateUrls.map(a => (
<MenuItem key={a.type} onClick={() => openUrl(a.url)}>
<ListItemIcon>
<ArrowDropDownIcon />
</ListItemIcon>
</SaveAsButton>
) : (
''
)}
{original?.file?.alternateUrls &&
original.file.alternateUrls.map(a => (
<MenuItem key={a.type} onClick={() => openUrl(a.url)}>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
<ListItemText primary={a.label || a.type} />
</MenuItem>
))}
{can.download && (
<MenuItem onClick={onDownload}>
<ListItemIcon>
<CloudDownloadIcon />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.download', 'Download')}
/>
</MenuItem>
)}
{actionsContext.edit ? (
<MenuItem
disabled={!can.edit}
onClick={can.edit ? onEdit : undefined}
>
<ListItemIcon>
<EditIcon />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.edit', 'Edit')}
/>
</MenuItem>
) : (
''
)}
{actionsContext.edit ? (
<MenuItem
disabled={!can.editAttributes}
onClick={can.editAttributes ? onEditAttr : undefined}
>
<ListItemIcon>
<EditIcon />
<LinkIcon />
</ListItemIcon>
<ListItemText
primary={t(
'asset.actions.edit_attributes',
'Edit attributes'
)}
/>
<ListItemText primary={a.label || a.type} />
</MenuItem>
) : (
''
)}
<Divider key={'d'} />
{actionsContext.delete ? (
))}
{can.download && (
<MenuItem onClick={onDownload}>
<ListItemIcon>
<CloudDownloadIcon />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.download', 'Download')}
/>
</MenuItem>
)}
{actionsContext.edit ? (
<MenuItem
disabled={!can.edit}
onClick={can.edit ? onEdit : undefined}
>
<ListItemIcon>
<EditIcon />
</ListItemIcon>
<ListItemText primary={t('asset.actions.edit', 'Edit')} />
</MenuItem>
) : (
''
)}
{actionsContext.edit ? (
<MenuItem
disabled={!can.editAttributes}
onClick={can.editAttributes ? onEditAttr : undefined}
>
<ListItemIcon>
<EditIcon />
</ListItemIcon>
<ListItemText
primary={t(
'asset.actions.edit_attributes',
'Edit attributes'
)}
/>
</MenuItem>
) : (
''
)}
<Divider key={'d'} />
{actionsContext.delete ? (
<MenuItem
disabled={!can.delete}
onClick={can.delete ? onDelete : undefined}
>
<ListItemIcon>
<DeleteIcon color={'error'} />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.delete', `Delete`)}
/>
</MenuItem>
) : (
''
)}
{actionsContext.extraActions?.map(a => {
return (
<MenuItem
disabled={!can.delete}
onClick={can.delete ? onDelete : undefined}
key={a.name}
color={a.color}
disabled={a.disabled ?? false}
onClick={async () => {
onClose();
await a.apply([item]);
if (a.reload && reload) {
reload();
}
if (a.resetSelection && setSelection) {
setSelection([]);
}
}}
>
<ListItemIcon>
<DeleteIcon color={'error'} />
</ListItemIcon>
<ListItemText
primary={t('asset.actions.delete', `Delete`)}
/>
{a.icon ? <ListItemIcon>{a.icon}</ListItemIcon> : ''}
{a.labels.single}
</MenuItem>
) : (
''
)}
{actionsContext.extraActions?.map(a => {
return (
<MenuItem
key={a.name}
color={a.color}
disabled={a.disabled ?? false}
onClick={async () => {
onClose();
await a.apply([item]);
if (a.reload && reload) {
reload();
}
if (a.resetSelection && setSelection) {
setSelection([]);
}
}}
>
{a.icon ? (
<ListItemIcon>{a.icon}</ListItemIcon>
) : (
''
)}
{a.labels.single}
</MenuItem>
);
})}
</Menu>
</ClickAwayListener>
);
})}
</ContextMenu>
);
}
Loading

0 comments on commit f1d0276

Please sign in to comment.