diff --git a/README.md b/README.md index 98d0fe8..7a88c4b 100644 --- a/README.md +++ b/README.md @@ -76,9 +76,9 @@ type MuiRhfFormField = { props?: any; type?: keyof MuiRhfFieldComponentMap; gridProps?: Pick; - condition?: MuiRhfFormFieldCondition; // Union of conditions - conditions?: MuiRhfFormFieldCondition; // Intersection of conditions - conditionalProps?: MuiRhfFormFieldConditionalProps; // Props applied when condition is satisfied + hideCondition?: MuiRhfFormFieldHideConditions; // Union of conditions, if true, field will be hidden + hideConditions?: MuiRhfFormFieldHideConditions; // Intersection of conditions, if true, field will be hidden + conditionalProps?: MuiRhfFormFieldConditionalProps; // Extra props applied depending on other form fields values }; ``` diff --git a/src/components/MuiRhfAutocomplete.tsx b/src/components/MuiRhfAutocomplete.tsx index a444406..ef50058 100644 --- a/src/components/MuiRhfAutocomplete.tsx +++ b/src/components/MuiRhfAutocomplete.tsx @@ -2,25 +2,18 @@ import * as React from "react"; import { Controller } from "react-hook-form"; -import { TextField, TextFieldProps } from "@material-ui/core"; +import { TextField } from "@material-ui/core"; import { Autocomplete } from "@material-ui/lab"; -import { MuiRhfFieldProps } from "~/models/fields"; - -type MuiRhfAutocompleteProps = MuiRhfFieldProps & { - defaultValue?: unknown; - textField?: Omit; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - autocomplete?: any; -}; +import { MuiRhfAutocompleteProps } from "~/models/fields"; const MuiRhfAutocomplete: React.FC = ({ control, errors, name, defaultValue, - textField: textFieldProps, - autocomplete: autocompleteProps, + textFieldProps, + autocompleteProps, }) => ( ; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - autocomplete?: any; -}; - const MuiRhfAutocompleteMultiple: React.FC = ({ defaultValue = [], - autocomplete: autocompleteProps = {}, + autocompleteProps = {}, ...rest }) => ( ); diff --git a/src/components/MuiRhfAutocompleteSingle.tsx b/src/components/MuiRhfAutocompleteSingle.tsx index 4f5d186..5b774d7 100644 --- a/src/components/MuiRhfAutocompleteSingle.tsx +++ b/src/components/MuiRhfAutocompleteSingle.tsx @@ -1,26 +1,17 @@ import * as React from "react"; -import { TextFieldProps } from "@material-ui/core"; - -import { MuiRhfFieldProps } from "~/models/fields"; +import { MuiRhfAutocompleteProps } from "~/models/fields"; import MuiRhfAutocomplete from "./MuiRhfAutocomplete"; -type MuiRhfAutocompleteProps = MuiRhfFieldProps & { - defaultValue?: unknown; - textField?: Omit; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - autocomplete?: any; -}; - const MuiRhfAutocompleteSingle: React.FC = ({ defaultValue = null, - autocomplete: autocompleteProps = {}, + autocompleteProps = {}, ...rest }) => ( ); diff --git a/src/components/MuiRhfForm.tsx b/src/components/MuiRhfForm.tsx index eb4d01e..11af4b2 100644 --- a/src/components/MuiRhfForm.tsx +++ b/src/components/MuiRhfForm.tsx @@ -40,8 +40,8 @@ const MuiRhfForm: React.FC = ({ props = {}, gridProps = {}, type = "textField", - condition, - conditions, + hideCondition, + hideConditions, conditionalProps, }) => { // Initialize dynamic props based on watched values @@ -52,21 +52,21 @@ const MuiRhfForm: React.FC = ({ MuiRhfTextField; //fallback to textField in case not valid type if (watch) { - // Union will be used in condition keys - if (condition) { + // Union will be used in hideCondition keys + if (hideCondition) { let conditionHidden = true; - // Retrieve conditions keys - const conditionKeys = Object.keys(condition); + // Retrieve hideConditions keys + const conditionKeys = Object.keys(hideCondition); // Retrieve watched values const conditionWatchedValues = watch(conditionKeys); - // Check conditions, we are actually doing an union of conditions - // If at least one condition has been satisfied, display + // Check hideConditions, we are actually doing an union of hideConditions + // If at least one hideCondition has been satisfied, display conditionKeys.forEach((conditionKey) => { if ( - condition[conditionKey]( + hideCondition[conditionKey]( conditionWatchedValues[conditionKey] ) ) { @@ -79,21 +79,21 @@ const MuiRhfForm: React.FC = ({ } } - // Intersection will be used in conditions keys - if (conditions) { + // Intersection will be used in hideConditions keys + if (hideConditions) { let conditionsHidden = false; - // Retrieve conditions keys - const conditionsKeys = Object.keys(conditions); + // Retrieve hideConditions keys + const conditionsKeys = Object.keys(hideConditions); // Retrieve watched values const conditionsWatchedValues = watch(conditionsKeys); - // Check conditions, we are actually doing an union of conditions - // All condition needs to be satisfied to display the field + // Check hideConditions, we are actually doing an union of hideConditions + // All hideCondition needs to be satisfied to display the field conditionsKeys.forEach((conditionsKey) => { if ( - !conditions[conditionsKey]( + !hideConditions[conditionsKey]( conditionsWatchedValues[conditionsKey] ) ) { @@ -107,13 +107,13 @@ const MuiRhfForm: React.FC = ({ } if (conditionalProps) { - // Retrieve conditions keys + // Retrieve hideConditions keys const conditionalKeys = Object.keys(conditionalProps); // Retrieve watched values const conditionalWatchedValues = watch(conditionalKeys); - // Check conditions + // Check hideConditions conditionalKeys.forEach((conditionalKey) => { const [path, customCondition] = conditionalProps[ conditionalKey diff --git a/src/components/MuiRhfSelect.tsx b/src/components/MuiRhfSelect.tsx index 4b835ff..2b9bbf6 100644 --- a/src/components/MuiRhfSelect.tsx +++ b/src/components/MuiRhfSelect.tsx @@ -19,7 +19,7 @@ const MuiRhfSelect: React.FC = ({ label, defaultValue = "", options, - select: selectProps, + selectProps, }) => ( { + it("render basic form", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + + ); + }); + + it("render complex form", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + + ); + }); + + it("render basic form with hideConditions", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + value === "John Doe" }, + }, + ], + ]} + /> + ); + }); +}); diff --git a/src/components/tests/render.test.tsx b/src/components/tests/render.test.tsx index d2b092b..2847003 100644 --- a/src/components/tests/render.test.tsx +++ b/src/components/tests/render.test.tsx @@ -5,7 +5,13 @@ import { renderHook } from "@testing-library/react-hooks"; import { useForm } from "react-hook-form"; -import MuiRhfTextField from "../MuiRhfTextField"; +import { + MuiRhfTextField, + MuiRhfSelect, + MuiRhfCheckbox, + MuiRhfAutocompleteSingle, + MuiRhfAutocompleteMultiple, +} from "../"; describe("Basic render", () => { it("render MuiRhfTextField", () => { @@ -15,4 +21,54 @@ describe("Basic render", () => { ); }); + it("render MuiRhfAutocompleteSingle", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + + ); + }); + + it("render MuiRhfAutocompleteMultiple", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + + ); + }); + + it("render MuiRhfCheckbox", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + + ); + }); + + it("render MuiRhfSelect", () => { + const { result } = renderHook(() => useForm()); + const { control, errors /**, loading */ } = result.current; + render( + + ); + }); }); diff --git a/src/models/fields/typing.ts b/src/models/fields/typing.ts index 425ac87..65e391e 100644 --- a/src/models/fields/typing.ts +++ b/src/models/fields/typing.ts @@ -1,5 +1,6 @@ import { Control, FieldErrors } from "react-hook-form"; import { TextFieldProps, SelectProps, CheckboxProps } from "@material-ui/core"; +import { AutocompleteProps } from "@material-ui/lab"; /** Common fields props */ export type MuiRhfFieldProps = { @@ -18,7 +19,7 @@ export type MuiRhfTextFieldProps = MuiRhfFieldProps & /** Select */ export type MuiRhfSelectProps = MuiRhfFieldProps & { defaultValue?: unknown; - select?: SelectProps; + selectProps?: SelectProps; options: { value: string | number | readonly string[] | undefined; label: string; @@ -34,7 +35,7 @@ export type MuiRhfCheckboxProps = MuiRhfFieldProps & /** Autocomplete */ export type MuiRhfAutocompleteProps = MuiRhfFieldProps & { defaultValue?: unknown; - textField?: Omit; + textFieldProps?: Omit; // eslint-disable-next-line @typescript-eslint/no-explicit-any - autocomplete?: any; + autocompleteProps: any; }; diff --git a/src/models/form/typing.ts b/src/models/form/typing.ts index f4f3632..bae7ca9 100644 --- a/src/models/form/typing.ts +++ b/src/models/form/typing.ts @@ -20,7 +20,9 @@ export type MuiRhfFieldComponentMap = { }; /** Form */ -type MuiRhfFormFieldCondition = { [key: string]: (value: unknown) => boolean }; +type MuiRhfFormFieldHideConditions = { + [key: string]: (value: unknown) => boolean; +}; type MuiRhfFormFieldConditionalProps = { [key: string]: [string, (value: unknown) => unknown]; }; @@ -31,9 +33,9 @@ type MuiRhfFormField = { props?: any; type?: keyof MuiRhfFieldComponentMap; gridProps?: Pick; - condition?: MuiRhfFormFieldCondition; // Union - conditions?: MuiRhfFormFieldCondition; // Intersection - conditionalProps?: MuiRhfFormFieldConditionalProps; // Props applied when condition is satisfied + hideCondition?: MuiRhfFormFieldHideConditions; // Union + hideConditions?: MuiRhfFormFieldHideConditions; // Intersection + conditionalProps?: MuiRhfFormFieldConditionalProps; // Props applied when hideCondition is satisfied }; type MuiRhfFormHeader = {