fix #51 wiith RHF 6.5.0 (#52)

* fix #51 wiith RHF 6.5.0

* fix devtool

Author: bluebill1049

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hookform/devtools",
-  "version": "2.1.0",
+  "version": "2.1.1-beta.2",
   "description": "React Hook Form dev tool to help debugging forms",
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.development.js",
@@ -84,7 +84,7 @@
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^6.0.0",
+    "react-hook-form": "^6.5.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.0.0"
+    "react-hook-form": ">=6.5.0"
   },
   "husky": {
     "hooks": {

src/devTool.test.tsx

@@ -27,11 +27,8 @@ describe('DevTool', () => {
               },
             },
             fieldsValues: {},
-            errorsRef: {
-              current: {},
-            },
-            formState: {
-              dirtyFields: {},
+            formStateRef: {
+              current: { dirtyFields: {} },
             },
             readFormStateRef: { current: {} },
           } as any

src/header.tsx

@@ -30,7 +30,7 @@ const Header = ({ setVisible, control }: Props) => {
             transition: '0.5s all',
             color:
               control.readFormStateRef.current.isValid &&
-              control.formState.isValid
+              control.formStateRef.current.isValid
                 ? colors.green
                 : colors.lightPink,
           }}

src/panel.tsx

@@ -10,7 +10,7 @@ import { Button, Input } from './styled';
 import { setCollapse } from './settingAction';
 
 export default ({
-  control: { fieldsRef, getValues, formState, errorsRef, readFormStateRef },
+  control: { fieldsRef, getValues, readFormStateRef, formStateRef },
 }: {
   control: Control;
 }) => {
@@ -107,13 +107,14 @@ export default ({
               name,
           )
           .map(([name, value], index) => {
-            const error = get(errorsRef.current, name);
+            const error = get(formStateRef.current.errors, name);
             const errorMessage = get(error, 'message', undefined);
             const errorType = get(error, 'type', undefined);
             const type = get(value, 'ref.type', undefined);
-            const isTouched = !!get(formState.touched, name);
+            const isTouched = !!get(formStateRef.current.touched, name);
             const isNative = (value as any).ref.type;
-            const isDirty = !!Object.keys(formState.dirtyFields).length;
+            const isDirty = !!Object.keys(formStateRef.current.dirtyFields)
+              .length;
             const hasError = !!error;
             const ref = get(value, 'ref');
 
@@ -147,7 +148,7 @@ export default ({
 
       <FormStateTable
         readFormStateRef={readFormStateRef}
-        formState={formState}
+        formState={formStateRef.current}
         showFormState={showFormState}
         setShowFormState={setShowFormState}
       />

yarn.lock

@@ -4774,10 +4774,10 @@ react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-hook-form@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.0.0.tgz#b51faa638aadfa3d4d9758dc1f8d0f67c2b1aa97"
-  integrity sha512-qFUMMnAMnZ84mcMFu/UZ6zkuEUQg/dAKdb9/wbjmOJ/KOgrobTx15aMGPhZyemzk6yLHwG7NmJCEOusRTV9UMg==
+react-hook-form@^6.5.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.5.1.tgz#504389d09970f2e7fc8c5ec8db2c551c863bcde9"
+  integrity sha512-MakeW3CRj4n1FW4HuliM8vlWup+5keUWDduf5lPlori6OWQ616xGzxrUOKoDUIGh0ERgCebObrLb5UiFDlSxAQ==
 
 react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.12.0"