38 lines
1.7 KiB
TypeScript
38 lines
1.7 KiB
TypeScript
|
import { useEffect, useId, useRef } from 'react';
|
||
|
|
|
||
|
|
import { useUnsavedStore, type SaveHandler } from '@/stores/unsaved';
|
||
|
|
|
||
|
|
export interface UnsavedChangesOptions {
|
||
|
|
/** Есть ли в форме несохранённый черновик. */
|
||
|
|
dirty: boolean;
|
||
|
|
/** Сохранение формы — та же операция, что и у кнопки «Сохранить». */
|
||
|
|
save: SaveHandler;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Регистрирует форму в реестре несохранённых изменений, пока `dirty === true`
|
||
|
|
* (docs/client-tauri.md §5). Запись снимается при размонтировании формы и при
|
||
|
|
* возврате `dirty` в `false` — например, сразу после успешного сохранения.
|
||
|
|
*
|
||
|
|
* `save` хранится в ref: формы пересобирают обработчик на каждом рендере
|
||
|
|
* (он замкнут на текущее состояние полей), а регистрация должна оставаться
|
||
|
|
* одной — иначе реестр «мигал» бы на каждый введённый символ.
|
||
|
|
*/
|
||
|
|
export function useUnsavedChanges({ dirty, save }: UnsavedChangesOptions): void {
|
||
|
|
// id компонента вместо счётчика: уникален и не зависит от порядка рендера.
|
||
|
|
const id = useId();
|
||
|
|
const register = useUnsavedStore((state) => state.register);
|
||
|
|
|
||
|
|
const saveRef = useRef(save);
|
||
|
|
useEffect(() => {
|
||
|
|
saveRef.current = save;
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!dirty) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
return register(id, () => saveRef.current());
|
||
|
|
}, [dirty, id, register]);
|
||
|
|
}
|