feat: update formValidation setValue to be optional across components

Author: nicosammito

src/components/editor/Editor.tsx

@@ -492,7 +492,7 @@ export const Editor: React.FC<EditorProps> = (props) => {
                                 try {
                                     const json = JSON.parse(val)
                                     onChange?.(json)
-                                    formValidation?.setValue(json)
+                                    formValidation?.setValue?.(json)
                                 } catch (e) {
                                 }
                             } else {

src/components/form/CheckboxInput.tsx

@@ -28,7 +28,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
     const [checked, setChecked] = React.useState<CheckedState>(props.initialValue ?? "indeterminate");
 
     React.useEffect(() => {
-        formValidation.setValue(checked)
+        formValidation.setValue?.(checked)
     }, [checked])
 
     return <>

src/components/form/EditorInput.tsx

@@ -63,7 +63,7 @@ export const EditorInput: React.FC<EditorInputProps> = (props) => {
                          formValidation={formValidation}>
 
         <CodeMirror extensions={internalExtensions} onChange={value => {
-            formValidation?.setValue(value)
+            formValidation?.setValue?.(value)
             onChange?.(value)
         }} theme={myTheme} {...mergeComponentProps("editor-input", rest)} basicSetup={{
             lineNumbers: false,

src/components/form/PinInput.tsx

@@ -43,7 +43,7 @@ export const PinInput: React.FC<PinInputProps> = (props) => {
             <OneTimePasswordField {...mergeComponentProps("pin-input", {
                 ...rest, onValueChange: (value: string) => {
                     if (rest.onValueChange) rest.onValueChange!!(value)
-                    formValidation.setValue(value)
+                    formValidation.setValue?.(value)
                 }
             })}/>
         </div>

src/components/form/RadioGroup.tsx

@@ -35,7 +35,7 @@ export const RadioGroup: React.FC<RadioGroupProps> = (props) => {
             defaultValue={initialValue ?? props.defaultValue} {...mergeComponentProps("radio-group", {
             ...rest, onValueChange: (value: string) => {
                 if (rest.onValueChange) rest.onValueChange!!(value)
-                formValidation.setValue(value)
+                formValidation.setValue?.(value)
             }
         })}/>
 

src/components/form/SelectInput.tsx

@@ -29,7 +29,7 @@ export const SelectInput: React.FC<SelectProps> = (props) => {
                          formValidation={formValidation}>
         <RadixSelect.Root {...mergeComponentProps("select-input", {
             ...rest, onValueChange: (value: string) => {
-                formValidation?.setValue(value)
+                formValidation?.setValue?.(value)
                 rest.onValueChange?.(value)
             }
         }) as SelectProps}/>

src/components/form/useForm.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import {useCallback, useEffect, useRef, useState} from "react";
+import React, {useCallback, useEffect, useRef, useState} from "react";
 
 export type Validations<Values> = Partial<{
     [Key in keyof Values]: (value: Values[Key], values?: Values) => string | null;
@@ -20,7 +20,7 @@ export interface ValidationProps<Value> {
     value?: Value | undefined
     required?: boolean
     formValidation?: {
-        setValue: (value: any) => void
+        setValue?: (value: any) => void
         valid?: boolean
         notValidMessage?: string | null
     }
@@ -30,11 +30,10 @@ export type ValidationsProps<Values> = Partial<{
     [Key in keyof Values]: ValidationProps<Values[Key]>
 }>
 
-export type FormValidationReturn<Values> = [IValidation<Values>, <Key extends keyof Values>(key?: Key | any) => void]
+export type FormValidationReturn<Values> = [IValidation<Values>, <Key extends keyof Values>(key?: Key | any, submit?: boolean) => void, Values]
 
 export interface IValidation<Values> {
     getInputProps<Key extends keyof Values>(key: Key): ValidationProps<Values[Key]>
-
     isValid(): boolean
 }
 
@@ -127,64 +126,62 @@ export const useForm = <
         onSubmit
     } = props
 
-    const [values, setValues] = useState<Values>(initialValues)
-    const valuesRef = useRef<Values>(initialValues)
+    const initValues = React.useMemo(() => initialValues as Values, [])
+    const [values, setValues] = useState<Values>(initValues)
     const cachedMessagesRef = useRef<Map<keyof Values, string | null>>(new Map())
 
     const changeValue = useCallback((key: keyof Values, value: any) => {
         setValues(prevState => {
-            const nextState = {
+            return {
                 ...prevState,
                 [key]: value,
             }
-            valuesRef.current = nextState
-            return nextState
         })
     }, [])
 
     const [validation, setValidation] = useState<Validation<Values>>(new Validation<Values>(
         changeValue,
         values,
         validate,
-        useInitialValidation ? new Map<keyof Values, boolean>(Object.keys(initialValues).map(k => [k as keyof Values, true])) : new Map<keyof Values, boolean>(),
+        useInitialValidation ? new Map<keyof Values, boolean>(Object.keys(initValues).map(k => [k as keyof Values, true])) : new Map<keyof Values, boolean>(),
         cachedMessagesRef.current
     ))
 
     useEffect(() => {
-        setValues(initialValues)
-        valuesRef.current = initialValues
+        setValues(initValues)
         setValidation(new Validation<Values>(
             changeValue,
-            initialValues,
+            initValues,
             validate,
-            useInitialValidation ? new Map<keyof Values, boolean>(Object.keys(initialValues).map(k => [k as keyof Values, true])) : new Map<keyof Values, boolean>(),
+            useInitialValidation ? new Map<keyof Values, boolean>(Object.keys(initValues).map(k => [k as keyof Values, true])) : new Map<keyof Values, boolean>(),
             cachedMessagesRef.current
         ))
-    }, [initialValues])
+    }, [initValues])
 
-    const validateFunction = useCallback(<Key extends keyof Values>(key?: Key) => {
+    const validateFunction = useCallback(<Key extends keyof Values>(key?: Key, submit = true) => {
 
-        const shouldValidateMap = key && new Set(Object.keys(initialValues)).has(String(key))
+        const shouldValidateMap = key && new Set(Object.keys(values)).has(String(key))
             ? new Map<keyof Values, boolean>([[key, true]])
-            : new Map<keyof Values, boolean>(Object.keys(initialValues).map(k => [String(k) as keyof Values, true]))
+            : new Map<keyof Values, boolean>(Object.keys(values).map(k => [String(k) as keyof Values, true]))
 
         const currentValidation = new Validation<Values>(
             changeValue,
-            valuesRef.current,
+            values,
             validate,
             shouldValidateMap,
             cachedMessagesRef.current
         )
 
         setValidation(currentValidation)
 
-        if (!new Set(Object.keys(initialValues)).has(String(key)) && onSubmit && (!truthyValidationBeforeSubmit || currentValidation.isValid())) {
-            onSubmit(valuesRef.current as Values)
+        if (submit && !new Set(Object.keys(values)).has(String(key)) && onSubmit && (!truthyValidationBeforeSubmit || currentValidation.isValid())) {
+            onSubmit(values as Values)
         }
-    }, [changeValue, validate, onSubmit, truthyValidationBeforeSubmit, initialValues])
+    }, [changeValue, validate, onSubmit, truthyValidationBeforeSubmit, values])
 
     return [
         validation,
-        validateFunction
+        validateFunction,
+        values
     ]
 }