refactor: using isDirty in forms
This commit is contained in:
@ -1,17 +1,14 @@
|
|||||||
import { FC } from "react";
|
import { FC } from "react";
|
||||||
import { isEqual } from "lodash";
|
|
||||||
import { Button, Group } from "@mantine/core";
|
import { Button, Group } from "@mantine/core";
|
||||||
import { UseFormReturnType } from "@mantine/form";
|
import { UseFormReturnType } from "@mantine/form";
|
||||||
import { DealForm } from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
|
import { DealForm } from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
|
||||||
import { DealSchema } from "@/lib/client";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
form: UseFormReturnType<DealForm>;
|
form: UseFormReturnType<DealForm>;
|
||||||
initialValues: Partial<DealSchema>;
|
|
||||||
onDelete: () => void;
|
onDelete: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
|
const Footer: FC<Props> = ({ form, onDelete }) => {
|
||||||
return (
|
return (
|
||||||
<Group
|
<Group
|
||||||
justify={"space-between"}
|
justify={"space-between"}
|
||||||
@ -19,14 +16,14 @@ const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
|
|||||||
<Group wrap={"nowrap"}>
|
<Group wrap={"nowrap"}>
|
||||||
<Button
|
<Button
|
||||||
type={"submit"}
|
type={"submit"}
|
||||||
disabled={isEqual(form.values, initialValues)}
|
disabled={!form.isDirty()}
|
||||||
variant={"filled"}>
|
variant={"filled"}>
|
||||||
Сохранить
|
Сохранить
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type={"reset"}
|
type={"reset"}
|
||||||
onClick={() => form.reset()}
|
onClick={() => form.reset()}
|
||||||
disabled={isEqual(form.values, initialValues)}
|
disabled={!form.isDirty()}
|
||||||
variant={"default"}>
|
variant={"default"}>
|
||||||
Отменить
|
Отменить
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -29,7 +29,7 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = (values: DealForm) => {
|
const onSubmit = (values: DealForm) => {
|
||||||
form.setInitialValues(values);
|
form.resetDirty();
|
||||||
onChange({
|
onChange({
|
||||||
...values,
|
...values,
|
||||||
board: values.board!,
|
board: values.board!,
|
||||||
@ -63,7 +63,6 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
|
|||||||
/>
|
/>
|
||||||
<Footer
|
<Footer
|
||||||
form={form}
|
form={form}
|
||||||
initialValues={value}
|
|
||||||
onDelete={() => onDelete(value)}
|
onDelete={() => onDelete(value)}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|||||||
@ -1,16 +1,14 @@
|
|||||||
import { FC } from "react";
|
import { FC } from "react";
|
||||||
import { isEqual } from "lodash";
|
|
||||||
import { Button, Group } from "@mantine/core";
|
import { Button, Group } from "@mantine/core";
|
||||||
import { UseFormReturnType } from "@mantine/form";
|
import { UseFormReturnType } from "@mantine/form";
|
||||||
import { ProjectSchema } from "@/lib/client";
|
import { ProjectSchema } from "@/lib/client";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
form: UseFormReturnType<ProjectSchema>;
|
form: UseFormReturnType<ProjectSchema>;
|
||||||
initialValues: Partial<ProjectSchema>;
|
|
||||||
onDelete: () => void;
|
onDelete: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
|
const Footer: FC<Props> = ({ form, onDelete }) => {
|
||||||
return (
|
return (
|
||||||
<Group
|
<Group
|
||||||
justify={"space-between"}
|
justify={"space-between"}
|
||||||
@ -18,14 +16,14 @@ const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
|
|||||||
<Group wrap={"nowrap"}>
|
<Group wrap={"nowrap"}>
|
||||||
<Button
|
<Button
|
||||||
type={"submit"}
|
type={"submit"}
|
||||||
disabled={isEqual(form.values, initialValues)}
|
disabled={!form.isDirty()}
|
||||||
variant={"filled"}>
|
variant={"filled"}>
|
||||||
Сохранить
|
Сохранить
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type={"reset"}
|
type={"reset"}
|
||||||
onClick={() => form.reset()}
|
onClick={() => form.reset()}
|
||||||
disabled={isEqual(form.values, initialValues)}
|
disabled={!form.isDirty()}
|
||||||
variant={"default"}>
|
variant={"default"}>
|
||||||
Отменить
|
Отменить
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -19,8 +19,8 @@ const GeneralTab: FC<Props> = ({ value, onChange, onDelete }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = (values: ProjectSchema) => {
|
const onSubmit = (values: ProjectSchema) => {
|
||||||
|
form.resetDirty(values);
|
||||||
onChange(values);
|
onChange(values);
|
||||||
form.setInitialValues(values);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -32,7 +32,6 @@ const GeneralTab: FC<Props> = ({ value, onChange, onDelete }) => {
|
|||||||
/>
|
/>
|
||||||
<Footer
|
<Footer
|
||||||
form={form}
|
form={form}
|
||||||
initialValues={value}
|
|
||||||
onDelete={() => onDelete(value)}
|
onDelete={() => onDelete(value)}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|||||||
Reference in New Issue
Block a user