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)}
|
{children(renderProps)}
|
||||||
<LeaveScreenDialog
|
<LeaveScreenDialog
|
||||||
onSaveChanges={renderProps.submit}
|
onSaveChanges={renderProps.submit}
|
||||||
onRejectChanges={renderProps.leaveAction}
|
onRejectChanges={renderProps.leaveAction.current}
|
||||||
onClose={() => renderProps.askToLeave(null)}
|
onClose={() => renderProps.askToLeave(null)}
|
||||||
open={!!renderProps.leaveModal}
|
open={!!renderProps.leaveModal}
|
||||||
confirmButtonState="default"
|
confirmButtonState="default"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { toggle } from "@saleor/utils/lists";
|
import { toggle } from "@saleor/utils/lists";
|
||||||
import isEqual from "lodash-es/isEqual";
|
import isEqual from "lodash-es/isEqual";
|
||||||
import { useState } from "react";
|
import { MutableRefObject, useRef, useState } from "react";
|
||||||
|
|
||||||
import useStateFromProps from "./useStateFromProps";
|
import useStateFromProps from "./useStateFromProps";
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ export type FormChange = (event: ChangeEvent, cb?: () => void) => void;
|
||||||
|
|
||||||
export interface UseFormResult<T> {
|
export interface UseFormResult<T> {
|
||||||
askToLeave: (action: () => void | null) => void;
|
askToLeave: (action: () => void | null) => void;
|
||||||
leaveAction: () => void | null;
|
leaveAction: MutableRefObject<() => void | null>;
|
||||||
leaveModal: boolean;
|
leaveModal: boolean;
|
||||||
change: FormChange;
|
change: FormChange;
|
||||||
data: T;
|
data: T;
|
||||||
|
@ -62,7 +62,7 @@ function useForm<T extends FormData>(
|
||||||
onRefresh: newData => handleRefresh(data, newData, setChanged)
|
onRefresh: newData => handleRefresh(data, newData, setChanged)
|
||||||
});
|
});
|
||||||
const [leaveModal, setLeaveModal] = useState<boolean>(false);
|
const [leaveModal, setLeaveModal] = useState<boolean>(false);
|
||||||
const [leaveAction, setLeaveAction] = useState<() => void>(null);
|
const leaveAction = useRef<() => void>(null);
|
||||||
|
|
||||||
function toggleValue(event: ChangeEvent, cb?: () => void) {
|
function toggleValue(event: ChangeEvent, cb?: () => void) {
|
||||||
const { name, value } = event.target;
|
const { name, value } = event.target;
|
||||||
|
@ -112,7 +112,7 @@ function useForm<T extends FormData>(
|
||||||
}
|
}
|
||||||
|
|
||||||
function submit() {
|
function submit() {
|
||||||
onSubmit(data, leaveAction);
|
onSubmit(data, leaveAction.current);
|
||||||
setLeaveModal(false);
|
setLeaveModal(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,7 +122,7 @@ function useForm<T extends FormData>(
|
||||||
|
|
||||||
function askToLeave(action: () => void | null) {
|
function askToLeave(action: () => void | null) {
|
||||||
setLeaveModal(() => !!action);
|
setLeaveModal(() => !!action);
|
||||||
setLeaveAction(() => action);
|
leaveAction.current = action;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in a new issue