From 6cbe532936ecbef87bc902cbce5f2b4a88cc7bd0 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.ricardo@hyperting.com>
Date: Wed, 8 Jun 2022 09:48:22 +0200
Subject: [PATCH] feat/watch form with FormProvider and change react-hook-form
 to be peer dependency to have the same instance

---
 packages/chakra-admin/rollup.config.js        | 13 ++--
 .../src/components/forms/BaseForm.tsx         | 78 ++++++++++---------
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/packages/chakra-admin/rollup.config.js b/packages/chakra-admin/rollup.config.js
index cb05b8f..2077bfe 100644
--- a/packages/chakra-admin/rollup.config.js
+++ b/packages/chakra-admin/rollup.config.js
@@ -28,12 +28,13 @@ export default {
     typescript({
       useTsconfigDeclarationDir: true,
       transformers: [
-        service => ({
-          before: [ keysTransformer(service.getProgram()) ],
-          after: []
-        })
-      ]
+        (service) => ({
+          before: [keysTransformer(service.getProgram())],
+          after: [],
+        }),
+      ],
     }),
-    yalcPublish()
+    yalcPublish(),
   ],
+  external: ['react-hook-form'],
 }
diff --git a/packages/chakra-admin/src/components/forms/BaseForm.tsx b/packages/chakra-admin/src/components/forms/BaseForm.tsx
index 9b78eab..0f22923 100644
--- a/packages/chakra-admin/src/components/forms/BaseForm.tsx
+++ b/packages/chakra-admin/src/components/forms/BaseForm.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react'
 import { chakra, ChakraProps, Box } from '@chakra-ui/react'
-import { useForm } from 'react-hook-form'
+import { FormProvider, useForm } from 'react-hook-form'
 import { deepMap } from '../../core/details/deep-map'
 import { UseCreateResult } from '../../core/details/useCreate'
 import { UseEditResult } from '../../core/details/useEdit'
@@ -56,9 +56,10 @@ export const BaseForm: FC<BaseFormProps> = ({
   )
 
   return (
-    <chakra.form onSubmit={handleSubmit(onSubmit)}>
-      <chakra.div mb={renderingInModal ? '76px' : 0}>
-        {/* {deepMap(children, (child: any, index) => {
+    <FormProvider {...methods}>
+      <chakra.form onSubmit={handleSubmit(onSubmit)}>
+        <chakra.div mb={renderingInModal ? '76px' : 0}>
+          {/* {deepMap(children, (child: any, index) => {
           const isLayout =
             child?.type?.displayName &&
             Object.keys(CALayoutComponents).includes(child?.type?.displayName)
@@ -111,41 +112,42 @@ export const BaseForm: FC<BaseFormProps> = ({
             //   : child
           }
         })} */}
-        <TreeRenderer
-          children={children}
-          propsOverride={{
-            ...filterChakraProps(rest),
-            setValue: methods.setValue,
-            register: methods.register,
-            unregister: methods.unregister,
-            control: methods.control,
-            resource,
-          }}
-        />
-      </chakra.div>
-
-      <Box
-        zIndex="1"
-        position={renderingInModal ? 'fixed' : 'relative'}
-        bottom="0px"
-        w="100%"
-        right="0px"
-        boxShadow={renderingInModal ? 'main' : 'none'}
-        bg={renderingInModal ? 'white' : 'transparent'}
-        p={renderingInModal ? 4 : 0}
-      >
-        <chakra.div display="flex" justifyContent="end" marginBottom={renderingInModal ? 0 : 5}>
-          <CancelButton />
-          <SubmitButton
-            disabled={mutationResult?.loading}
-            isLoading={mutationResult?.loading}
-            type="submit"
-            bg="gray.700"
-            _hover={{ bg: 'gray.500' }}
-            ml={5}
+          <TreeRenderer
+            children={children}
+            propsOverride={{
+              ...filterChakraProps(rest),
+              setValue: methods.setValue,
+              register: methods.register,
+              unregister: methods.unregister,
+              control: methods.control,
+              resource,
+            }}
           />
         </chakra.div>
-      </Box>
-    </chakra.form>
+
+        <Box
+          zIndex="1"
+          position={renderingInModal ? 'fixed' : 'relative'}
+          bottom="0px"
+          w="100%"
+          right="0px"
+          boxShadow={renderingInModal ? 'main' : 'none'}
+          bg={renderingInModal ? 'white' : 'transparent'}
+          p={renderingInModal ? 4 : 0}
+        >
+          <chakra.div display="flex" justifyContent="end" marginBottom={renderingInModal ? 0 : 5}>
+            <CancelButton />
+            <SubmitButton
+              disabled={mutationResult?.loading}
+              isLoading={mutationResult?.loading}
+              type="submit"
+              bg="gray.700"
+              _hover={{ bg: 'gray.500' }}
+              ml={5}
+            />
+          </chakra.div>
+        </Box>
+      </chakra.form>
+    </FormProvider>
   )
 }