close #69

close #70

Author: bluebill1049

app/src/App.tsx

@@ -8,11 +8,17 @@ const App = () => {
     firstName: string;
     lastName: string;
     custom: string;
+    ha: {
+      test: string;
+    };
   }>({
     mode: 'onChange',
     defaultValues: {
       firstName: '',
       lastName: '',
+      ha: {
+        test: '',
+      },
     },
   });
 
@@ -34,6 +40,7 @@ const App = () => {
         </p>
         <label>First Name</label>
         <input {...register('firstName', { required: true })} />
+        <input {...register('ha.test', { required: true })} />
 
         <label>Last Name</label>
         <input {...register('lastName', { required: true })} />

app/src/devTool/panel.tsx

@@ -8,7 +8,99 @@ import FormStateTable from './formStateTable';
 import { Button, Input } from './styled';
 import { setCollapse } from './settingAction';
 
-export default ({ control, control: { fieldsRef } }: { control: Control }) => {
+let childIndex = 0;
+
+function PanelChildren<T, K, L, M, G>({
+  fields,
+  searchTerm,
+  touchedFields,
+  errors,
+  dirtyFields,
+  state,
+  fieldsValues,
+}: {
+  fields: T;
+  fieldsValues: K;
+  state: {
+    isCollapse: boolean;
+  };
+  searchTerm: string;
+  touchedFields: M;
+  errors: L;
+  dirtyFields: G;
+}) {
+  return (
+    <>
+      {Object.entries(fields)
+        .filter(
+          ([name]) =>
+            ((name &&
+              name.toLowerCase &&
+              name.toLowerCase().includes(searchTerm)) ||
+              (!name && !searchTerm) ||
+              searchTerm === '') &&
+            name,
+        )
+        .map(([name, value], index) => {
+          childIndex++;
+
+          if (!value._f) {
+            return (
+              <PanelChildren
+                key={name + childIndex}
+                {...{
+                  fields: value,
+                  searchTerm,
+                  touchedFields,
+                  errors,
+                  dirtyFields,
+                  state,
+                  fieldsValues,
+                }}
+              />
+            );
+          } else {
+            const error = get(errors, value._f.name);
+            const errorMessage = get(error, 'message', undefined);
+            const errorType = get(error, 'type', undefined);
+            const type = get(value, 'ref.type', undefined);
+            const isTouched = !!get(touchedFields, name);
+            const isNative = !!(value && value._f.ref.type);
+            const isDirty = !!get(dirtyFields, name);
+            const hasError = !!error;
+            const ref = get(value, '_f.ref');
+
+            return (
+              <section
+                key={value?._f.name + childIndex}
+                style={{
+                  borderBottom: `1px dashed ${colors.secondary}`,
+                  margin: 0,
+                }}
+              >
+                <PanelTable
+                  refObject={ref}
+                  index={index}
+                  collapseAll={state.isCollapse}
+                  name={value?._f.name}
+                  isTouched={isTouched}
+                  type={type}
+                  hasError={hasError}
+                  isNative={isNative}
+                  errorMessage={errorMessage}
+                  errorType={errorType}
+                  isDirty={isDirty}
+                  fieldsValues={fieldsValues}
+                />
+              </section>
+            );
+          }
+        })}
+    </>
+  );
+}
+
+const Panel = ({ control, control: { fieldsRef } }: { control: Control }) => {
   const formState = useFormState({
     control,
   });
@@ -98,52 +190,15 @@ export default ({ control, control: { fieldsRef } }: { control: Control }) => {
           overflow: 'auto',
         }}
       >
-        {Object.entries(fieldsRef.current)
-          .filter(
-            ([name]) =>
-              ((name &&
-                name.toLowerCase &&
-                name.toLowerCase().includes(searchTerm)) ||
-                (!name && !searchTerm) ||
-                searchTerm === '') &&
-              name,
-          )
-          .map(([name, value], index) => {
-            const error = get(errors, name);
-            const errorMessage = get(error, 'message', undefined);
-            const errorType = get(error, 'type', undefined);
-            const type = get(value, 'ref.type', undefined);
-            const isTouched = !!get(touchedFields, name);
-            const isNative = !!(value && value._f.ref.type);
-            const isDirty = !!get(dirtyFields, name);
-            const hasError = !!error;
-            const ref = get(value, '_f.ref');
-
-            return (
-              <section
-                key={`${name}${index}`}
-                style={{
-                  borderBottom: `1px dashed ${colors.secondary}`,
-                  margin: 0,
-                }}
-              >
-                <PanelTable
-                  refObject={ref}
-                  index={index}
-                  collapseAll={state.isCollapse}
-                  name={name}
-                  isTouched={isTouched}
-                  type={type}
-                  hasError={hasError}
-                  isNative={isNative}
-                  errorMessage={errorMessage}
-                  errorType={errorType}
-                  isDirty={isDirty}
-                  fieldsValues={fieldsValues}
-                />
-              </section>
-            );
-          })}
+        <PanelChildren
+          fields={fieldsRef.current}
+          searchTerm={searchTerm}
+          errors={errors}
+          touchedFields={touchedFields}
+          dirtyFields={dirtyFields}
+          fieldsValues={fieldsValues}
+          state={state}
+        />
       </div>
 
       <FormStateTable
@@ -154,3 +209,5 @@ export default ({ control, control: { fieldsRef } }: { control: Control }) => {
     </div>
   );
 };
+
+export default Panel;

package.json

@@ -84,7 +84,7 @@
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^7.0.0-beta.2",
+    "react-hook-form": "7.0.0-rc.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.10.7",
     "rollup-plugin-peer-deps-external": "^2.2.2",
@@ -97,7 +97,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "react-hook-form": ">=6.5.0"
+    "react-hook-form": "^7.0.0-rc.0"
   },
   "husky": {
     "hooks": {

src/devTool.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StateMachineProvider, createStore } from 'little-state-machine';
-import { Control } from 'react-hook-form';
+import { Control, useFormContext } from 'react-hook-form';
 import { DevToolUI } from './devToolUI';
 
 if (typeof window !== 'undefined') {
@@ -18,10 +18,12 @@ if (typeof window !== 'undefined') {
   );
 }
 
-export const DevTool = ({ control }: { control: Control<any> }) => {
+export const DevTool = (props?: { control: Control<any> }) => {
+  const methods = useFormContext();
+
   return (
     <StateMachineProvider>
-      <DevToolUI control={control} />
+      <DevToolUI control={methods.control || (props && props.control)} />
     </StateMachineProvider>
   );
 };