envoc-form/es/Form/NewFormBasedPreventNavigation.js

Envoc form components

import { useEffect } from 'react';
import { unstable_usePrompt as usePrompt, } from 'react-router-dom';
/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
export default function NewFormBasedPreventNavigation(_a) {
    var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
    usePrompt({
        when: preventNavigate,
        message: promptMessage,
    });
    // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
    // that do not support the react-router Data API we can remove this.
    useEffect(function () {
        if (!preventNavigate) {
            return;
        }
        var unblock = function () { };
        var push = navigator.push;
        navigator.push = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            if (window.confirm(promptMessage)) {
                push.apply(void 0, args);
            }
        };
        window.addEventListener('beforeunload', beforeUnload);
        return function () {
            unblock();
            navigator.push = push;
            window.removeEventListener('beforeunload', beforeUnload);
        };
        function beforeUnload(e) {
            e.preventDefault();
            e.returnValue = promptMessage;
        }
    }, [preventNavigate, promptMessage, navigator]);
    return null;
}