Chaim Lev-Ari
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useTransitionHook } from '@uirouter/react';
|
|
|
|
import { confirmGenericDiscard } from '@@/modals/confirm';
|
|
|
|
export function usePreventFormExit(
|
|
isChanged: () => boolean,
|
|
check = true,
|
|
confirmFn: () => Promise<boolean> = confirmGenericDiscard
|
|
) {
|
|
// when navigating away from the page with unsaved changes, show a portainer prompt to confirm
|
|
useTransitionHook('onBefore', {}, async () => {
|
|
// need to calculate inside the hook because it doesn't have dep array
|
|
if (!(check && isChanged())) {
|
|
return true;
|
|
}
|
|
return confirmFn();
|
|
});
|
|
|
|
const preventExit = check && isChanged();
|
|
// when reloading or exiting the page with unsaved changes, show a browser prompt to confirm
|
|
useEffect(() => {
|
|
function handler(event: BeforeUnloadEvent) {
|
|
if (!preventExit) {
|
|
return undefined;
|
|
}
|
|
|
|
event.preventDefault();
|
|
// eslint-disable-next-line no-param-reassign
|
|
event.returnValue = '';
|
|
return '';
|
|
}
|
|
|
|
window.addEventListener('beforeunload', handler);
|
|
return () => {
|
|
window.removeEventListener('beforeunload', handler);
|
|
};
|
|
}, [preventExit]);
|
|
}
|