fix(element): fix FormLayout provide props not update (#2448)

* fix(element): fix FormLayout provide props not update * chore(reactive-vue): ignore vue3 test branch
alibaba · Nov 17, 2021 · cd50ad7 · cd50ad7
1 parent f3f2989
commit cd50ad7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/packages/element/src/form-layout/index.ts b/packages/element/src/form-layout/index.ts
@@ -49,26 +49,29 @@ export const FormLayoutShallowContext: InjectionKey<Ref<FormLayoutProps>> =
   Symbol('FormLayoutShallowContext')
 
 export const useFormDeepLayout = (): Ref<FormLayoutProps> =>
-  inject(FormLayoutDeepContext, ref(null))
+  inject(FormLayoutDeepContext, ref({}))
 
 export const useFormShallowLayout = (): Ref<FormLayoutProps> =>
-  inject(FormLayoutShallowContext, ref(null))
+  inject(FormLayoutShallowContext, ref({}))
 
 export const useFormLayout = (): Ref<FormLayoutProps> => {
   const shallowLayout = useFormShallowLayout()
   const deepLayout = useFormDeepLayout()
-  const formLayout = ref({})
+  const formLayout = ref({
+    ...deepLayout.value,
+    ...shallowLayout.value,
+  })
 
   watch(
-    [shallowLayout],
+    [shallowLayout, deepLayout],
     () => {
       formLayout.value = {
         ...deepLayout.value,
         ...shallowLayout.value,
       }
     },
     {
-      immediate: true,
+      deep: true,
     }
   )
   return formLayout
@@ -115,7 +118,7 @@ export const FormLayout = defineComponent<FormLayoutProps>({
       () => {
         shallowProps.value = props.value.shallow ? props.value : undefined
         if (!props.value.shallow) {
-          Object.assign(newDeepLayout.value, props)
+          Object.assign(newDeepLayout.value, props.value)
         } else {
           if (props.value.size) {
             newDeepLayout.value.size = props.value.size

diff --git a/packages/reactive-vue/src/hooks/useObserver.ts b/packages/reactive-vue/src/hooks/useObserver.ts
@@ -1,6 +1,7 @@
 import { autorun } from '@formily/reactive'
 import { getCurrentInstance, onBeforeUnmount, isVue3 } from 'vue-demi'
 
+/* istanbul ignore next */
 export const useObserver = () => {
   if (isVue3) {
     const vm = getCurrentInstance()

diff --git a/packages/reactive-vue/src/observer/observerInVue3.ts b/packages/reactive-vue/src/observer/observerInVue3.ts
@@ -1,6 +1,7 @@
 import { IObserverOptions } from '../types'
 import { useObserver } from '../hooks/useObserver'
 
+/* istanbul ignore next */
 export const observer = function (opts: any, options?: IObserverOptions): any {
   const name = options?.name || opts.name || 'ObservableComponent'