fix(@uform/core): fix field props transformer is not work

packages/core/src/form.ts

@@ -82,6 +82,8 @@ export class Form {
 
   private batchUpdateField: boolean
 
+  private traverse: (schema: ISchema) => ISchema
+
   constructor(opts: IFormOptions) {
     this.options = defaults<IFormOptions>(opts)
     this.publisher = new Broadcast()
@@ -93,6 +95,7 @@ export class Form {
     this.updateBuffer = new BufferList()
     this.editable = opts.editable
     this.schema = opts.schema || {}
+    this.traverse = opts.traverse
     this.initialize({
       values: this.options.values,
       initialValues: this.options.initialValues
@@ -208,7 +211,7 @@ export class Form {
         value,
         path: options.path,
         initialValue,
-        props: options.props
+        props: this.traverse ? this.traverse(options.props) : options.props
       })
       const field = this.fields[name]
       if (options.onChange) {

packages/core/src/index.ts

@@ -21,7 +21,8 @@ export const createForm = ({
   subscribes,
   editable,
   effects,
-  onValidateFailed
+  onValidateFailed,
+  traverse
 }: IFormOptions) => {
   let fields = []
   let calculatedValues = caculateSchemaInitialValues(
@@ -49,7 +50,8 @@ export const createForm = ({
     editable,
     effects,
     onValidateFailed,
-    schema
+    schema,
+    traverse
   })
 
   if (isFn(onFormWillInit)) {

packages/react/src/__tests__/traverse.spec.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { render, act } from '@testing-library/react'
+import SchemaForm, {
+  Field,
+  registerFormField,
+  connect,
+  createFormActions,
+  registerFormFieldPropsTransformer
+} from '../index'
+
+registerFormField(
+  'test-string',
+  connect()(props => (
+    <React.Fragment>
+      <div data-testid="value">{props.value}</div>
+      <div data-testid="type-value">{typeof props.value}</div>
+      <div data-testid="extra-props">{props.extra}</div>
+    </React.Fragment>
+  ))
+)
+
+registerFormFieldPropsTransformer('test-string', schema => {
+  schema['x-props'] = {
+    extra: 'this is extra props'
+  }
+  return schema
+})
+
+registerFormFieldPropsTransformer('test-string', schema => {
+  schema['x-props'] = {
+    extra: 'this is extra props 2'
+  }
+  return schema
+})
+
+test('props traverse', async () => {
+
+  const actions = createFormActions()
+
+  const Component = () => {
+    return (
+      <SchemaForm actions={actions} value={{ foo: '123' }}>
+        <Field name="foo" type="test-string" />
+      </SchemaForm>
+    )
+  }
+
+  const { getByTestId, baseElement } = render(<Component />)
+  await sleep(33)
+  expect(getByTestId('extra-props').textContent).toEqual('this is extra props 2')
+  actions.setFieldState('foo',state=>{
+    state.props['x-props'].extra = 'modify props'
+  })
+  await sleep(33)
+  expect(getByTestId('extra-props').textContent).toEqual('modify props')
+})

packages/react/src/state/field.tsx

@@ -135,7 +135,6 @@ const StateField = createHOC((options, Field) => {
         : schemaIs(props, 'array')
         ? value || []
         : value
-
       return visible === false || display === false ? (
         <React.Fragment />
       ) : (

packages/react/src/state/form.tsx

@@ -41,6 +41,12 @@ export const StateForm = createHOC((options, Form) => {
         subscribes: props.subscribes,
         schema: props.schema,
         editable: props.editable,
+        traverse: schema => {
+          const traverse =
+            schema &&
+            getFormFieldPropsTransformer(schema['x-component'] || schema.type)
+          return traverse ? traverse(schema) : schema
+        },
         onSubmit: this.onSubmitHandler(props),
         onFormChange: this.onFormChangeHandler(props),
         onFieldChange: this.onFieldChangeHandler(props),
@@ -133,12 +139,7 @@ export const StateForm = createHOC((options, Form) => {
     }
 
     public getSchema = path => {
-      const { schema } = this.props
-      const result = getSchemaNodeFromPath(schema, path)
-      const transformer =
-        result &&
-        getFormFieldPropsTransformer(result['x-component'] || result.type)
-      return transformer ? transformer(result) : result
+      return getSchemaNodeFromPath(this.props.schema, path)
     }
 
     public onSubmitHandler = $props => {

packages/types/src/form.ts

@@ -46,6 +46,7 @@ export interface IFormOptions {
   onFormWillInit?: (form: any) => void
   onReset: (payload: IFormPayload) => void
   onSubmit: (values: any) => Promise<any> | void
+  traverse?: (schema: ISchema) => ISchema
 }
 
 // 通过 createActions 或者 createAsyncActions 创建出来的 actions 接口