fix(vue): fix connect

alibaba · Jan 9, 2021 · 727169b · 727169b
1 parent 259334c
commit 727169b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 40 deletions.
diff --git a/packages/vue/src/shared/connect.ts b/packages/vue/src/shared/connect.ts
@@ -1,6 +1,6 @@
 /* eslint-disable vue/one-component-per-file */
 import { h, defineComponent } from '@vue/composition-api'
-import { isFn } from '@formily/shared'
+import { isFn, FormPath } from '@formily/shared'
 import { isVoidField } from '@formily/core'
 import { defineObservableComponent } from '../utils/define-observable-component'
 import { VueComponent, IComponentMapper, IStateMapper } from '../types'
@@ -12,16 +12,25 @@ export function mapProps(...args: IStateMapper[]) {
       observableSetup(collect, props, { slots }) {
         const field = useField()
         collect({
-          field
+          field,
         })
         const results = args.reduce(
           (props, mapper) => {
             if (isFn(mapper)) {
               props = Object.assign(props, mapper(props, field))
             } else {
-              props[mapper.to || mapper.extract] = isFn(mapper.transform)
-                ? mapper.transform(field[mapper.extract as keyof Formily.Core.Types.GeneralField])
-                : field[mapper.extract as keyof Formily.Core.Types.GeneralField]
+              const extract = FormPath.getIn(field, mapper.extract)
+              const target = mapper.to || mapper.extract
+              if (mapper.extract === 'value') {
+                if (mapper.to !== mapper.extract) {
+                  delete props.value
+                }
+              }
+              FormPath.setIn(
+                props,
+                target as any,
+                isFn(mapper.transform) ? mapper.transform(extract) : extract
+              )
             }
             return props
           },
@@ -31,11 +40,11 @@ export function mapProps(...args: IStateMapper[]) {
           h(
             target,
             {
-              props: results
+              props: results,
             },
             slots.default && slots.default()
           )
-      }
+      },
     })
   }
 }
@@ -46,41 +55,39 @@ export function mapReadPretty(component: VueComponent) {
       observableSetup(collect, props: { [key: string]: any }, { slots }) {
         const field = useField()
         collect({
-          field
+          field,
         })
         return () =>
           h(
             !isVoidField(field) && field.pattern === 'readPretty'
               ? component
               : target,
             {
-              props: props
+              props: props,
             },
             slots.default && slots.default()
           )
-      }
+      },
     })
   }
 }
 
-export function connect(...args: IComponentMapper[]) {
-  return function(target: VueComponent) {
-    const Component = args.reduce((target: VueComponent, mapper) => {
-      return mapper(target)
-    }, target) as VueComponent
+export function connect(target: VueComponent, ...args: IComponentMapper[]) {
+  const Component = args.reduce((target: VueComponent, mapper) => {
+    return mapper(target)
+  }, target) as VueComponent
 
-    return defineComponent({
-      name: target['name'],
-      setup(props: { [key: string]: any; }, { slots }) {
-        return () =>
-          h(
-            Component,
-            {
-              props: props
-            },
-            slots.default && slots.default()
-          )
-      }
-    })
-  }
+  return defineComponent({
+    name: target['name'],
+    setup(props: { [key: string]: any }, { slots }) {
+      return () =>
+        h(
+          Component,
+          {
+            props: props,
+          },
+          slots.default && slots.default()
+        )
+    },
+  })
 }
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
@@ -14,14 +14,14 @@ export type IVoidFieldProps<
   C extends VueComponent
 > = Formily.Core.Types.IVoidFieldFactoryProps<D, C>
 
-export interface IComponentMapper {
-  (target: VueComponent): VueComponent
-}
-
-export type IStateMapper =
-  | {
-      extract: string
-      to?: string
-      transform?: (value: any) => any
-    }
-  | ((props: any, field: Formily.Core.Types.GeneralField) => any)
+  export interface IComponentMapper<T extends VueComponent = any> {
+    (target: T): VueComponent
+  }
+  
+  export type IStateMapper<Props = any> =
+    | {
+        extract: keyof Formily.Core.Models.Field
+        to?: keyof Props
+        transform?: (value: any) => any
+      }
+    | ((props: Props, field: Formily.Core.Types.GeneralField) => Props)