diff --git a/core/src/components/Editor/EditorToolbar.tsx b/core/src/components/Editor/EditorToolbar.tsx index 400fd7a3..9ca16667 100644 --- a/core/src/components/Editor/EditorToolbar.tsx +++ b/core/src/components/Editor/EditorToolbar.tsx @@ -1,4 +1,3 @@ -import { styled } from '@mui/material/styles'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import AppBar from '@mui/material/AppBar'; @@ -7,11 +6,13 @@ import CircularProgress from '@mui/material/CircularProgress'; import green from '@mui/material/colors/green'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; +import { styled } from '@mui/material/styles'; import Toolbar from '@mui/material/Toolbar'; import React, { useCallback, useMemo, useState } from 'react'; import { translate } from 'react-polyglot'; import { colors, components, zIndex } from '../../components/UI/styles'; +import { selectAllowDeletion } from '../../lib/util/collection.util'; import { SettingsDropdown } from '../UI'; import NavLink from '../UI/NavLink'; @@ -106,6 +107,7 @@ const EditorToolbar = ({ editorBackLink, }: TranslatedProps) => { const canCreate = useMemo(() => collection.create ?? false, [collection.create]); + const canDelete = useMemo(() => selectAllowDeletion(collection), [collection]); const isPublished = useMemo(() => !isNewEntry && !hasChanged, [hasChanged, isNewEntry]); const [anchorEl, setAnchorEl] = useState(null); @@ -117,6 +119,74 @@ const EditorToolbar = ({ setAnchorEl(null); }, []); + const handleMenuOptionClick = useCallback( + (callback: () => Promise | void) => () => { + handleClose(); + callback(); + }, + [handleClose], + ); + + const handlePersistAndNew = useMemo( + () => handleMenuOptionClick(onPersistAndNew), + [handleMenuOptionClick, onPersistAndNew], + ); + const handlePersistAndDuplicate = useMemo( + () => handleMenuOptionClick(onPersistAndDuplicate), + [handleMenuOptionClick, onPersistAndDuplicate], + ); + const handleDuplicate = useMemo( + () => handleMenuOptionClick(onDuplicate), + [handleMenuOptionClick, onDuplicate], + ); + const handlePersist = useMemo( + () => handleMenuOptionClick(() => onPersist()), + [handleMenuOptionClick, onPersist], + ); + const handleDelete = useMemo( + () => handleMenuOptionClick(onDelete), + [handleMenuOptionClick, onDelete], + ); + + const menuItems = useMemo(() => { + const items: JSX.Element[] = []; + + if (!isPublished) { + items.push( + + {t('editor.editorToolbar.publishNow')} + , + ); + + if (canCreate) { + items.push( + + {t('editor.editorToolbar.publishAndCreateNew')} + , + + {t('editor.editorToolbar.publishAndDuplicate')} + , + ); + } + } + + if (canCreate) { + items.push( + {t('editor.editorToolbar.duplicate')}, + ); + } + + return items; + }, [ + canCreate, + handleDuplicate, + handlePersist, + handlePersistAndDuplicate, + handlePersistAndNew, + isPublished, + t, + ]); + const controls = useMemo( () => ( @@ -131,6 +201,7 @@ const EditorToolbar = ({ variant="contained" color={isPublished ? 'success' : 'primary'} endIcon={} + disabled={menuItems.length === 0 || isPersisting} > {isPublished ? t('editor.editorToolbar.published') @@ -161,29 +232,11 @@ const EditorToolbar = ({ 'aria-labelledby': 'existing-published-button', }} > - {!isPublished ? ( - [ - onPersist()}> - {t('editor.editorToolbar.publishNow')} - , - ...(canCreate - ? [ - - {t('editor.editorToolbar.publishAndCreateNew')} - , - - {t('editor.editorToolbar.publishAndDuplicate')} - , - ] - : []), - ] - ) : ( - {t('editor.editorToolbar.duplicate')} - )} + {menuItems} - {showDelete ? ( - ) : null} @@ -191,16 +244,13 @@ const EditorToolbar = ({ ), [ anchorEl, - canCreate, + canDelete, handleClick, handleClose, + handleDelete, isPersisting, isPublished, - onDelete, - onDuplicate, - onPersist, - onPersistAndDuplicate, - onPersistAndNew, + menuItems, open, showDelete, t,