examples: support for defaultChecked

recruit-tech · Oct 29, 2022 · 4daabb9 · 4daabb9
1 parent 12b2310
commit 4daabb9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 6 deletions.
diff --git a/examples/react-hook-form/pages/form/[index].tsx b/examples/react-hook-form/pages/form/[index].tsx
@@ -11,6 +11,8 @@ import styles from '../../styles/form.module.css'
 type FormState = {
   name: string
   comment: string
+  radio: string
+  checkbox: readonly string[]
   items: readonly {
     value: string
   }[]
@@ -23,6 +25,8 @@ const formState = initializableAtom<FormState>({
       refine: object({
         name: string(),
         comment: string(),
+        radio: string(),
+        checkbox: array(string()),
         items: array(
           object({
             value: string(),
@@ -33,9 +37,11 @@ const formState = initializableAtom<FormState>({
   ],
 })
 
-const initialState = {
+const initialState: FormState = {
   name: 'a',
   comment: 'b',
+  radio: '1',
+  checkbox: ['1'],
   items: [{ value: '1' }, { value: '2' }],
 }
 
@@ -50,6 +56,7 @@ const Form: NextPage<FormState> = (props) => {
   const {
     control,
     registerWithDefaultValue,
+    registerWithDefaultChecked,
     onChangeForm,
     handleSubmit,
     reset,
@@ -96,6 +103,17 @@ const Form: NextPage<FormState> = (props) => {
                 {fields.map((field, index) => (
                   <li key={field.id}>
                     <span>{index} </span>
+                    <input
+                      type="radio"
+                      {...registerWithDefaultChecked('radio', `${index + 1}`)}
+                    />
+                    <input
+                      type="checkbox"
+                      {...registerWithDefaultChecked(
+                        'checkbox',
+                        `${index + 1}`
+                      )}
+                    />
                     <input
                       {...registerWithDefaultValue(
                         `items.${index}.value` as const

diff --git a/examples/react-hook-form/src/hooks/useFormSync.ts b/examples/react-hook-form/src/hooks/useFormSync.ts
@@ -1,8 +1,10 @@
 import { useCallback, useRef } from 'react'
 import {
   DeepPartial,
+  FieldPath,
   FieldValues,
   InternalFieldName,
+  RegisterOptions,
   Resolver,
   useFieldArray,
   UseFieldArrayAppend,
@@ -28,11 +30,23 @@ import {
   useSetRecoilState,
 } from 'recoil'
 
+type RegisterWithDefaultChecked<
+  TFieldValues extends FieldValues,
+  TContext = any
+> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(
+  name: TFieldName,
+  value: TFieldValues[TFieldName] extends Readonly<Array<infer E>>
+    ? E
+    : TFieldValues[TFieldName],
+  options?: RegisterOptions<TFieldValues, TFieldName>
+) => UseFormRegisterReturn<TFieldName>
+
 type UseFormSyncReturn<
   TFieldValues extends FieldValues,
   TContext = any
 > = UseFormReturn<TFieldValues, TContext> & {
   registerWithDefaultValue: UseFormRegister<TFieldValues>
+  registerWithDefaultChecked: RegisterWithDefaultChecked<TFieldValues, TContext>
   onChangeForm: () => void
   useFieldArraySync: (
     props: UseFieldArrayProps<TFieldValues>
@@ -58,6 +72,13 @@ export function useFormSync<TFieldValues extends FieldValues, TContext = any>(
   )
   const defaultValuesRef = useRef<TFieldValues>()
   defaultValuesRef.current ??= getDefaultValues()
+  const getDefaultValue = (name: string) => {
+    const defaultValues = defaultValuesRef.current!
+    const names = FIELD_ARRAY_NAME_PATTERN.exec(name)
+    return names
+      ? defaultValues[names[1]]?.[+names[2]]?.[names[3]]
+      : defaultValues[name]
+  }
 
   const {
     register,
@@ -73,16 +94,31 @@ export function useFormSync<TFieldValues extends FieldValues, TContext = any>(
 
   const registerWithDefaultValue: UseFormRegister<TFieldValues> = useCallback(
     (name, options) => {
-      const defaultValues = defaultValuesRef.current!
-      const names = FIELD_ARRAY_NAME_PATTERN.exec(name)
-      const defaultValue = names
-        ? defaultValues[names[1]]?.[+names[2]]?.[names[3]]
-        : defaultValues[name]
+      const defaultValue = getDefaultValue(name) ?? null
       return { ...register(name, options), defaultValue }
     },
     [register]
   )
 
+  const registerWithDefaultChecked: RegisterWithDefaultChecked<
+    TFieldValues,
+    TContext
+  > = useCallback(
+    (name, value, options) => {
+      console.log(name, value)
+      const defaultValue = getDefaultValue(name)
+      const defaultChecked =
+        defaultValue == null
+          ? false
+          : Array.isArray(defaultValue)
+          ? defaultValue.includes(value)
+          : defaultValue === value
+      console.log(defaultValue, defaultChecked)
+      return { ...register(name, options), value, defaultChecked }
+    },
+    [register]
+  )
+
   const resetState = useResetRecoilState(formState)
   const reset = useCallback(() => {
     resetState()
@@ -152,6 +188,7 @@ export function useFormSync<TFieldValues extends FieldValues, TContext = any>(
     ...rest,
     register,
     registerWithDefaultValue,
+    registerWithDefaultChecked,
     getValues,
     reset,
     onChangeForm,