ra-core/dist/esm/form/useWarnWhenUnsavedChanges.js

Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React

import { useEffect, useState } from 'react';
import { useFormState } from 'react-hook-form';
import { useBlocker } from 'react-router-dom';
import { useTranslate } from '../i18n';
/**
 * Display a confirmation dialog if the form has unsaved changes.
 * - If the user confirms, the navigation continues and the changes are lost.
 * - If the user cancels, the navigation is cancelled and the changes are kept.
 */
export var useWarnWhenUnsavedChanges = function (enable, formRootPathname, control) {
    var translate = useTranslate();
    var _a = useFormState(control ? { control: control } : undefined), isSubmitSuccessful = _a.isSubmitSuccessful, dirtyFields = _a.dirtyFields;
    var isDirty = Object.keys(dirtyFields).length > 0;
    var _b = useState(false), shouldNotify = _b[0], setShouldNotify = _b[1];
    var shouldNotBlock = !enable || !isDirty || isSubmitSuccessful;
    var blocker = useBlocker(function (_a) {
        var currentLocation = _a.currentLocation, nextLocation = _a.nextLocation;
        if (shouldNotBlock)
            return false;
        // Also check if the new location is inside the form
        var initialLocation = formRootPathname || currentLocation.pathname;
        var newLocationIsInsideCurrentLocation = nextLocation.pathname.startsWith(initialLocation);
        var newLocationIsShowView = nextLocation.pathname.startsWith("".concat(initialLocation, "/show"));
        var newLocationIsInsideForm = newLocationIsInsideCurrentLocation && !newLocationIsShowView;
        if (newLocationIsInsideForm)
            return false;
        return true;
    });
    useEffect(function () {
        if (blocker.state === 'blocked') {
            // Corner case: the blocker might be triggered by a redirect in the onSuccess side effect,
            // happening during the same tick the form is reset after a successful save.
            // In that case, the blocker will block but shouldNotBlock will be true one tick after.
            // If we are in that case, we can proceed immediately.
            if (shouldNotBlock) {
                blocker.proceed();
                return;
            }
            setShouldNotify(true);
        }
        // This effect should only run when the blocker state changes, not when shouldNotBlock changes.
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [blocker.state]);
    useEffect(function () {
        if (shouldNotify) {
            var shouldProceed = window.confirm(translate('ra.message.unsaved_changes'));
            if (shouldProceed) {
                blocker.proceed && blocker.proceed();
            }
            else {
                blocker.reset && blocker.reset();
            }
        }
        setShouldNotify(false);
        // Can't use blocker in the dependency array because it is not stable across rerenders
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [shouldNotify, translate]);
    // This effect handles document navigation, e.g. closing the tab
    useEffect(function () {
        var beforeunload = function (e) {
            // Invoking event.preventDefault() will trigger a warning dialog when the user closes or navigates the tab
            // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#examples
            e.preventDefault();
            // Included for legacy support, e.g. Chrome/Edge < 119
            e.returnValue = true;
        };
        if (shouldNotBlock) {
            return;
        }
        window.addEventListener('beforeunload', beforeunload);
        return function () {
            window.removeEventListener('beforeunload', beforeunload);
        };
    }, [shouldNotBlock]);
};
//# sourceMappingURL=useWarnWhenUnsavedChanges.js.map