Use ref to persist leave action
This commit is contained in:
parent
b9bccd07f3
commit
4b01781157
2 changed files with 6 additions and 6 deletions
|
@ -39,7 +39,7 @@ function Form<T>(props: FormProps<T>) {
|
|||
{children(renderProps)}
|
||||
<LeaveScreenDialog
|
||||
onSaveChanges={renderProps.submit}
|
||||
onRejectChanges={renderProps.leaveAction}
|
||||
onRejectChanges={renderProps.leaveAction.current}
|
||||
onClose={() => renderProps.askToLeave(null)}
|
||||
open={!!renderProps.leaveModal}
|
||||
confirmButtonState="default"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { toggle } from "@saleor/utils/lists";
|
||||
import isEqual from "lodash-es/isEqual";
|
||||
import { useState } from "react";
|
||||
import { MutableRefObject, useRef, useState } from "react";
|
||||
|
||||
import useStateFromProps from "./useStateFromProps";
|
||||
|
||||
|
@ -15,7 +15,7 @@ export type FormChange = (event: ChangeEvent, cb?: () => void) => void;
|
|||
|
||||
export interface UseFormResult<T> {
|
||||
askToLeave: (action: () => void | null) => void;
|
||||
leaveAction: () => void | null;
|
||||
leaveAction: MutableRefObject<() => void | null>;
|
||||
leaveModal: boolean;
|
||||
change: FormChange;
|
||||
data: T;
|
||||
|
@ -62,7 +62,7 @@ function useForm<T extends FormData>(
|
|||
onRefresh: newData => handleRefresh(data, newData, setChanged)
|
||||
});
|
||||
const [leaveModal, setLeaveModal] = useState<boolean>(false);
|
||||
const [leaveAction, setLeaveAction] = useState<() => void>(null);
|
||||
const leaveAction = useRef<() => void>(null);
|
||||
|
||||
function toggleValue(event: ChangeEvent, cb?: () => void) {
|
||||
const { name, value } = event.target;
|
||||
|
@ -112,7 +112,7 @@ function useForm<T extends FormData>(
|
|||
}
|
||||
|
||||
function submit() {
|
||||
onSubmit(data, leaveAction);
|
||||
onSubmit(data, leaveAction.current);
|
||||
setLeaveModal(false);
|
||||
}
|
||||
|
||||
|
@ -122,7 +122,7 @@ function useForm<T extends FormData>(
|
|||
|
||||
function askToLeave(action: () => void | null) {
|
||||
setLeaveModal(() => !!action);
|
||||
setLeaveAction(() => action);
|
||||
leaveAction.current = action;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
Loading…
Reference in a new issue