Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2026-02-24 04:01:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

upgrade react-hook-form to v7 to match @rowy/form-builder

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-29 10:42:00 +10:00
parent 9dfd2ca7da
commit 26df992b2a
32 changed files with 54 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -12,6 +12,7 @@
"@date-io/date-fns": "1.x",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@hookform/resolvers": "^2.8.1",
"@mdi/js": "^5.9.55",
"@monaco-editor/react": "^4.1.0",
"@mui/icons-material": "^5.0.0",
@@ -51,7 +52,7 @@
"react-element-scroll-hook": "^1.1.0",
"react-firebaseui": "^5.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^6",
"react-hook-form": "^7.16.1",
"react-image": "^4.0.3",
"react-joyride": "^2.3.0",
"react-json-view": "^1.19.1",

6
src/components/SideDrawer/Form/Autosave.tsx
View File

@@ -4,7 +4,7 @@ import _isEqual from "lodash/isEqual";
import _pick from "lodash/pick";
import _pickBy from "lodash/pickBy";
import { Control, UseFormMethods, useWatch } from "react-hook-form";
import { Control, UseFormReturn, useWatch } from "react-hook-form";
import { Values } from "./utils";
import { useProjectContext } from "contexts/ProjectContext";
@@ -14,8 +14,8 @@ export interface IAutosaveProps {
control: Control;
docRef: firebase.default.firestore.DocumentReference;
row: any;
reset: UseFormMethods["reset"];
dirtyFields: UseFormMethods["formState"]["dirtyFields"];
reset: UseFormReturn["reset"];
dirtyFields: UseFormReturn["formState"]["dirtyFields"];
}
const getEditables = (values: Values, tableState?: TableState) =>

10
src/components/SideDrawer/Form/Reset.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect } from "react";
import { UseFormMethods } from "react-hook-form";
import { UseFormReturn } from "react-hook-form";
import _pickBy from "lodash/pickBy";
import _isEqual from "lodash/isEqual";
@@ -7,9 +7,9 @@ import { Values } from "./utils";
export interface IResetProps {
defaultValues: Values;
dirtyFields: UseFormMethods["formState"]["dirtyFields"];
reset: UseFormMethods["reset"];
getValues: UseFormMethods["getValues"];
dirtyFields: UseFormReturn["formState"]["dirtyFields"];
reset: UseFormReturn["reset"];
getValues: UseFormReturn["getValues"];
}
/**
@@ -38,7 +38,7 @@ export default function Reset({
const diff = _pickBy(getValues(), (v, k) => !_isEqual(v, resetValues[k]));
// Reset if needed & keep the current dirty fields
if (Object.keys(diff).length > 0) {
reset(resetValues, { isDirty: true, dirtyFields: true });
reset(resetValues, { keepDirty: true });
}
},
// `defaultValues` is the `initialValue` of each field type +

7
src/components/SideDrawer/Form/index.tsx
View File

@@ -38,10 +38,8 @@ export default function Form({ values }: IFormProps) {
const { ref: docRef, ...rowValues } = values;
const defaultValues = { ...initialValues, ...rowValues };
const { control, reset, formState, getValues } = useForm({
mode: "onBlur",
defaultValues,
});
const methods = useForm({ mode: "onBlur", defaultValues });
const { control, reset, formState, getValues } = methods;
const { dirtyFields } = formState;
// const { sideDrawerRef } = useProjectContext();
@@ -105,6 +103,7 @@ export default function Form({ values }: IFormProps) {
control,
docRef,
disabled: field.editable === false,
useFormMethods: methods,
})}
</FieldWrapper>
);

2
src/components/fields/Action/SideDrawerField.tsx
View File

@@ -21,7 +21,7 @@ export default function Action({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => {
render={({ field: { onChange, value } }) => {
const hasRan = value && value.status;
return (

2
src/components/fields/Checkbox/SideDrawerField.tsx
View File

@@ -16,7 +16,7 @@ export default function Checkbox({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onChange(event.target.checked);
};

2
src/components/fields/Code/SideDrawerField.tsx
View File

@@ -30,7 +30,7 @@ export default function Code({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => (
render={({ field: { onChange, value } }) => (
<CodeEditor
disabled={disabled}
value={value}

2
src/components/fields/Color/SideDrawerField.tsx
View File

@@ -52,7 +52,7 @@ export default function Color({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
console.log(value);
return (
<>

2
src/components/fields/ConnectService/SideDrawerField.tsx
View File

@@ -21,7 +21,7 @@ export default function ConnectService({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleDelete = (hit: any) => () => {
// if (multiple)
onChange(

9
src/components/fields/ConnectTable/SideDrawerField.tsx
View File

@@ -1,7 +1,7 @@
import { Controller } from "react-hook-form";
import { ISideDrawerFieldProps } from "../types";
import { useTheme, Grid, Chip } from "@mui/material";
import { Grid, Chip } from "@mui/material";
import ConnectTableSelect from "./ConnectTableSelect";
@@ -9,16 +9,15 @@ export default function ConnectTable({
column,
control,
disabled,
useFormMethods,
}: ISideDrawerFieldProps) {
const theme = useTheme();
const config = column.config ?? {};
return (
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleDelete = (hit: any) => () => {
// if (multiple)
onChange(value.filter((v) => v.snapshot.objectID !== hit.objectID));
@@ -29,7 +28,7 @@ export default function ConnectTable({
<>
{!disabled && (
<ConnectTableSelect
row={control.getValues()}
row={useFormMethods.getValues()}
column={column}
config={(config as any) ?? {}}
value={value}

2
src/components/fields/Date/SideDrawerField.tsx
View File

@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => {
render={({ field: { onChange, value } }) => {
const transformedValue = transformValue(value);
const handleChange = (date: Date | null) => {

2
src/components/fields/DateTime/SideDrawerField.tsx
View File

@@ -17,7 +17,7 @@ export default function Date_({ column, control }: IDateProps) {
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => {
render={({ field: { onChange, value } }) => {
const transformedValue = transformValue(value);
const handleChange = (date: Date | null) => {

2
src/components/fields/Duration/SideDrawerField.tsx
View File

@@ -11,7 +11,7 @@ export default function Duration({ column, control }: ISideDrawerFieldProps) {
<Controller
control={control}
name={column.key}
render={({ value }) => {
render={({ field: { value } }) => {
if (
!value ||
!value.start ||

2
src/components/fields/Email/SideDrawerField.tsx
View File

@@ -12,7 +12,7 @@ export default function Email({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextField
variant="filled"

2
src/components/fields/File/SideDrawerField.tsx
View File

@@ -169,7 +169,7 @@ export default function File_({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => (
render={({ field: { onChange, value } }) => (
<ControlledFileUploader
disabled={disabled}
column={column}

2
src/components/fields/Image/SideDrawerField.tsx
View File

@@ -272,7 +272,7 @@ export default function Image_({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => (
render={({ field: { onChange, value } }) => (
<ControlledImageUploader
disabled={disabled}
column={column}

2
src/components/fields/Json/SideDrawerField.tsx
View File

@@ -29,7 +29,7 @@ export default function Json({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => {
render={({ field: { onChange, value } }) => {
if (disabled)
return (
<div

2
src/components/fields/LongText/SideDrawerField.tsx
View File

@@ -12,7 +12,7 @@ export default function LongText({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextField
variant="filled"

2
src/components/fields/MultiSelect/SideDrawerField.tsx
View File

@@ -19,7 +19,7 @@ export default function MultiSelect({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleDelete = (index: number) => () => {
const newValues = [...value];
newValues.splice(index, 1);

2
src/components/fields/Number/SideDrawerField.tsx
View File

@@ -12,7 +12,7 @@ export default function Number_({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleChange = (e) => onChange(Number(e.target.value));
return (

2
src/components/fields/Percentage/SideDrawerField.tsx
View File

@@ -39,7 +39,7 @@ export default function Percentage({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleChange = (e) => onChange(Number(e.target.value) / 100);
return (

2
src/components/fields/Phone/SideDrawerField.tsx
View File

@@ -12,7 +12,7 @@ export default function Phone({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextField
variant="filled"

2
src/components/fields/Rating/SideDrawerField.tsx
View File

@@ -32,7 +32,7 @@ export default function Rating({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => (
render={({ field: { onChange, value } }) => (
<Grid container alignItems="center" className={fieldClasses.root}>
<MuiRating
name={column.key}

2
src/components/fields/RichText/SideDrawerField.tsx
View File

@@ -11,7 +11,7 @@ export default function RichText({
<Controller
control={control}
name={column.key}
render={({ onChange, value }) => (
render={({ field: { onChange, value } }) => (
<RichTextEditor
disabled={disabled}
value={value}

2
src/components/fields/ShortText/SideDrawerField.tsx
View File

@@ -12,7 +12,7 @@ export default function ShortText({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
return (
<TextField
variant="filled"

2
src/components/fields/SingleSelect/SideDrawerField.tsx
View File

@@ -15,7 +15,7 @@ export default function SingleSelect({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => (
render={({ field: { onChange, onBlur, value } }) => (
<>
<MultiSelect
value={sanitiseValue(value)}

2
src/components/fields/Slider/SideDrawerField.tsx
View File

@@ -32,7 +32,7 @@ export default function Slider({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
const handleChange = (_: any, value: number | number[]) => {
onChange(value);
onBlur();

2
src/components/fields/Status/SideDrawerField.tsx
View File

@@ -16,7 +16,7 @@ export default function Rating({ control, column }: ISideDrawerFieldProps) {
<Controller
control={control}
name={column.key}
render={({ value }) => (
render={({ field: { value } }) => (
<Grid container alignItems="center" className={fieldClasses.root}>
<>{value}</>
</Grid>

2
src/components/fields/Url/SideDrawerField.tsx
View File

@@ -13,7 +13,7 @@ export default function Url({
<Controller
control={control}
name={column.key}
render={({ onChange, onBlur, value }) => {
render={({ field: { onChange, onBlur, value } }) => {
return (
<Stack direction="row">
<TextField

2
src/components/fields/User/SideDrawerField.tsx
View File

@@ -14,7 +14,7 @@ export default function User({ control, column }: ISideDrawerFieldProps) {
<Controller
control={control}
name={column.key}
render={({ value }) => {
render={({ field: { value } }) => {
if (!value || !value.displayName || !value.timestamp)
return <div className={fieldClasses.root} />;
const dateLabel = format(

3
src/components/fields/types.ts
View File

@@ -1,7 +1,7 @@
import { FieldType } from "constants/fields";
import { FormatterProps, EditorProps } from "react-data-grid";
import { Control } from "react-hook-form";
import { Control, UseFormReturn } from "react-hook-form";
import { PopoverProps } from "@mui/material";
export { FieldType };
@@ -49,6 +49,7 @@ export interface ISideDrawerFieldProps {
control: Control;
docRef: firebase.default.firestore.DocumentReference;
disabled: boolean;
useFormMethods: UseFormReturn;
}
export interface ISettingsProps {

15
yarn.lock
View File

@@ -2153,6 +2153,11 @@
resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.0.tgz#32e82b072ff71c71e62fb2901b129642a0c5897e"
integrity sha512-ALlr0Bg6zDHdRsdqkwfWGPMnIxP4hqMRPvFDHp7lWXQeA7rKykto3cWqQQh1s0PzX043RHwMB6OHVPMwFJqwxg==
"@hookform/resolvers@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.1.tgz#0d4fdd25bdeb4b98bf4e177c63fc4efa173454dd"
integrity sha512-U5lgaCkvD+0e5X8iQmCHiF+jOqjTX6OHUA7zPdeIHI6xdAOoi3rH9MKNuwMwv5Hly2LL6XtDgDkS/k+YG9hOew==
"@icons/material@^0.2.4":
version "0.2.4"
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@@ -13569,16 +13574,16 @@ react-helmet@^6.1.0:
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-hook-form@^6:
version "6.15.8"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
react-hook-form@^7.10.0:
version "7.15.2"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.15.2.tgz#c4d4fa44a5df755648ab19034062ae37087536b0"
integrity sha512-tPcLlsTXaOtZkyc1IGGaJfQ6amo2sJiM6DDufE7WG+S4N8s5Wr60HGtnKS7gPnnZL93pFPQYrSj7WDB5An2VVw==
react-hook-form@^7.16.1:
version "7.16.1"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.16.1.tgz#669046df378a71949e5cf8a2398cbe20d5cb27bc"
integrity sha512-kcLDmSmlyLUFx2UU5bG/o4+3NeK753fhKodJa8gkplXohGkpAq0/p+TR24OWjZmkEc3ES7ppC5v5d6KUk+fJTA==
react-image@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.0.3.tgz#6fa722877660b67295298a914bff1ed87ad2cf83"