53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
|
import { useEffect } from 'react';
|
|||
|
|
import { FormInstance } from 'antd';
|
|||
|
|
|
|||
|
|
interface UseFormGuardOptions {
|
|||
|
|
form: FormInstance;
|
|||
|
|
enabled?: boolean;
|
|||
|
|
onSaveDraft?: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 表单离开拦截 Hook
|
|||
|
|
* - 浏览器刷新/关闭拦截 (beforeunload)
|
|||
|
|
* - 移动端切后台时保存草稿 (visibilitychange + pagehide)
|
|||
|
|
*
|
|||
|
|
* 注意：路由跳转拦截需要在使用组件中手动处理（因为 BrowserRouter 不支持 useBlocker）
|
|||
|
|
*/
|
|||
|
|
function useFormGuard(options: UseFormGuardOptions) {
|
|||
|
|
const { form, enabled = true, onSaveDraft } = options;
|
|||
|
|
|
|||
|
|
// 浏览器刷新/关闭拦截
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!enabled) return;
|
|||
|
|
const handler = (e: BeforeUnloadEvent) => {
|
|||
|
|
if (form.isFieldsTouched()) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
window.addEventListener('beforeunload', handler);
|
|||
|
|
return () => window.removeEventListener('beforeunload', handler);
|
|||
|
|
}, [form, enabled]);
|
|||
|
|
|
|||
|
|
// 移动端：页面切到后台时保存草稿
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!enabled || !onSaveDraft) return;
|
|||
|
|
const handler = () => {
|
|||
|
|
if (document.visibilityState === 'hidden' && form.isFieldsTouched()) {
|
|||
|
|
onSaveDraft();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
document.addEventListener('visibilitychange', handler);
|
|||
|
|
const pageHideHandler = () => {
|
|||
|
|
if (form.isFieldsTouched()) onSaveDraft();
|
|||
|
|
};
|
|||
|
|
window.addEventListener('pagehide', pageHideHandler);
|
|||
|
|
return () => {
|
|||
|
|
document.removeEventListener('visibilitychange', handler);
|
|||
|
|
window.removeEventListener('pagehide', pageHideHandler);
|
|||
|
|
};
|
|||
|
|
}, [form, enabled, onSaveDraft]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default useFormGuard;
|