fix: discard on mobile

StaticJsCMS · Apr 26, 2024 · 0a714f6 · 0a714f6
1 parent e655745
commit 0a714f6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/core/src/components/entry-editor/EditorToolbar.css b/packages/core/src/components/entry-editor/EditorToolbar.css
@@ -22,6 +22,11 @@
     lg:!hidden;
 }
 
+.CMS_EditorToolbar_discard-button {
+  @apply flex
+    lg:!hidden;
+}
+
 .CMS_EditorToolbar_delete-button {
   @apply flex
     lg:!hidden;

diff --git a/packages/core/src/components/entry-editor/EditorToolbar.tsx b/packages/core/src/components/entry-editor/EditorToolbar.tsx
@@ -29,8 +29,8 @@ import MenuGroup from '../common/menu/MenuGroup';
 import MenuItemButton from '../common/menu/MenuItemButton';
 import EditorWorkflowToolbarButtons from './EditorWorkflowToolbarButtons';
 
-import type { WorkflowStatus } from '@staticcms/core/constants/publishModes';
 import type { CollectionWithDefaults, EditorPersistOptions } from '@staticcms/core';
+import type { WorkflowStatus } from '@staticcms/core/constants/publishModes';
 import type { FC, MouseEventHandler } from 'react';
 
 import './EditorToolbar.css';
@@ -41,6 +41,7 @@ export const classes = generateClassNames('EditorToolbar', [
   'more-menu-button',
   'more-menu-label-icon',
   'preview-toggle',
+  'discard-button',
   'delete-button',
   'publish-button',
   'publish-button-icon',
@@ -419,14 +420,34 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
           disabled={disabled}
         />
       ) : null}
-      {canDelete ? (
+      {hasChanged ? (
+        <IconButton
+          icon={TrashIcon}
+          key="discard-button"
+          title={t('editor.editorToolbar.discardChanges')}
+          color="warning"
+          variant="text"
+          onClick={handleDiscardDraft}
+          rootClassName={classes['discard-button']}
+          aria-label="discard chnages"
+          disabled={disabled}
+        />
+      ) : canDelete &&
+        (!useOpenAuthoring || hasUnpublishedChanges) &&
+        (!useWorkflow || workflowDeleteLabel) ? (
         <IconButton
           icon={TrashIcon}
           key="delete-button"
-          title={t('editor.editorToolbar.deleteEntry')}
+          title={useWorkflow ? t(workflowDeleteLabel!) : t('editor.editorToolbar.deleteEntry')}
           color="error"
           variant="text"
-          onClick={onDelete}
+          onClick={
+            useWorkflow &&
+            workflowDeleteLabel &&
+            workflowDeleteLabel !== 'editor.editorToolbar.deletePublishedEntry'
+              ? onDeleteUnpublishedChanges
+              : onDelete
+          }
           rootClassName={classes['delete-button']}
           aria-label="delete"
           disabled={disabled}