Use ref to persist leave action

This commit is contained in:
Dawid Tarasiuk 2020-09-29 11:06:42 +02:00
parent b9bccd07f3
commit 4b01781157
2 changed files with 6 additions and 6 deletions

View file

@ -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"

View file

@ -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 {