diff --git a/README.md b/README.md index 1e255ac1..dbb69472 100644 --- a/README.md +++ b/README.md @@ -497,6 +497,16 @@ If provided will be used in overriding the default translations arrived locally By default once the user makes any change/edit on the image and hasn't saved the image yet and tried to leave the page before saving then a browser's confirmation would be shown asking him if he really wants to leave before saving, `true` means it won't be shown. +#### `avoidChangesNotSavedAlertOnClose` + +Type: `boolean` + +Supported version: +v4.0.0 + +Default: `false` + +By default once the user makes any change/edit on the image and hasn't saved the image yet and then clicks on the close button, a confirmation modal will be shown asking if they really want to close without saving. Setting this to `true` will skip showing the confirmation modal and close immediately. + #### `showBackButton` Type: `boolean` diff --git a/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx b/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx index f3572e53..5af23c4d 100644 --- a/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx +++ b/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx @@ -17,7 +17,7 @@ const ConfirmationModal = ({ children, isReset }) => { dispatch, isResetted = true, haveNotSavedChanges, - config: { onClose }, + config: { onClose, avoidChangesNotSavedAlertOnClose }, } = useStore(); const [isModalOpened, setIsModalOpened] = useState(false); @@ -33,10 +33,6 @@ const ConfirmationModal = ({ children, isReset }) => { setIsModalOpened(false); }; - const openModal = () => { - setIsModalOpened(true); - }; - const dispatchReset = useCallback(() => { dispatch({ type: RESET, payload: { config } }); cancelModal(); @@ -49,6 +45,15 @@ const ConfirmationModal = ({ children, isReset }) => { dispatchReset(); }; + const openModal = () => { + // Don't open the modal if avoidChangesNotSavedAlertOnClose is true + if (avoidChangesNotSavedAlertOnClose) { + closeWithReason(); + return; + } + setIsModalOpened(true); + }; + return ( <> {React.cloneElement(children, { diff --git a/packages/react-filerobot-image-editor/src/context/defaultConfig.js b/packages/react-filerobot-image-editor/src/context/defaultConfig.js index 5495dc98..62b48067 100644 --- a/packages/react-filerobot-image-editor/src/context/defaultConfig.js +++ b/packages/react-filerobot-image-editor/src/context/defaultConfig.js @@ -106,6 +106,7 @@ export default { translations: null, language: 'en', avoidChangesNotSavedAlertOnLeave: false, + avoidChangesNotSavedAlertOnClose: false, loadableDesignState: null, moreSaveOptions: [], savingPixelRatio: 4, diff --git a/packages/react-filerobot-image-editor/src/index.d.ts b/packages/react-filerobot-image-editor/src/index.d.ts index 3e48d062..c1f1c195 100644 --- a/packages/react-filerobot-image-editor/src/index.d.ts +++ b/packages/react-filerobot-image-editor/src/index.d.ts @@ -316,6 +316,7 @@ export interface FilerobotImageEditorConfig { | 'ro' | string; avoidChangesNotSavedAlertOnLeave?: boolean; + avoidChangesNotSavedAlertOnClose?: boolean; loadableDesignState?: imageDesignState; showBackButton?: boolean; savingPixelRatio: number; diff --git a/public/demo-config.js b/public/demo-config.js index 52cf0abe..a50fcfe1 100644 --- a/public/demo-config.js +++ b/public/demo-config.js @@ -344,6 +344,7 @@ const config = { // translations: null, // language: 'en', // available same as on backend ('en', 'fr', 'de', 'it', 'pt', 'es', 'nl', 'pl', 'ro') // avoidChangesNotSavedAlertOnLeave: false, // true => user tries to close the tab and the it is not + // avoidChangesNotSavedAlertOnClose: false, // true => don't show confirmation modal when closing the editor // loadableDesignState: null, // if provided, it will be used in loading the design state, [TODO: NEEDS TO BE IMPROVED] // defaultSavedImageType: null, // 'png', 'jpeg' & 'webp' => 'png' must be provided you want the image to be transparent and use elliptical crop || null (defaualt) means use the same provided image extension (extracted from the image's src url), if it was unknwon PNG will be used // defaultSavedImageQuality: 0.92, // Min: 0.1, Max: 1, (1% - 100%) applied for 'jpg', 'jpeg' & 'webp' only