fix(@uform/core): validate

package.json

@@ -15,6 +15,7 @@
     "test": "npm run lint && jest",
     "test:core": "jest --watch packages/core/src/__tests__/*.spec.ts",
     "test:hook": "jest --watch packages/react/src/__tests__/*.spec.tsx",
+    "test:renderer": "jest --watch packages/react-schema-renderer/src/__tests__/*.spec.tsx",
     "test:editor": "jest --watch packages/react-schema-editor/src/__tests__/*.spec.ts",
     "test:prod": "cross-env TEST_ENV=production npm run build && jest",
     "doc:core": "doc-scripts start -i packages/core",

packages/antd/README.md

@@ -16,6 +16,7 @@ npm install --save @uform/antd
   - [`<SchemaMarkupField/>`](#SchemaMarkupField)
   - [`<Submit/>`](#Submit)
   - [`<Reset/>`](#Reset)
+  - [`<FormSpy/>`](#FormSpy)
   - [`<Field/>(deprecated，please use <SchemaMarkupField/>)`](#<Field/>)
 - [Form List](#Array-Components)
   - [`array`](#array)
@@ -61,7 +62,7 @@ npm install --save @uform/antd
   - [`connect`](#connect)
   - [`registerFormField`](#registerFormField)  
 - [Interfaces](#Interfaces)
-  - [ISchema](#ischema)
+  - [`ISchema`](#ischema)
   - [`IFormActions`](#IFormActions)
   - [`IFormAsyncActions`](#IFormAsyncActions)
   - [`ButtonProps`](#ButtonProps)
@@ -79,6 +80,7 @@ npm install --save @uform/antd
   - [`IMutators`](#IMutators)
   - [`IFieldProps`](#IFieldProps)
   - [`IConnectOptions`](#IConnectOptions)
+  - [`ISpyHook`](#ISpyHook)
 
 
 ### Quick-Start
@@ -716,6 +718,128 @@ interface IResetProps {
 }
 ```
 
+#### `<FormSpy/>`
+
+> `<FormSpy>` Props
+
+```typescript
+interface IFormSpyProps {
+  // selector, eg: [ LifeCycleTypes.ON_FORM_SUBMIT_START, LifeCycleTypes.ON_FORM_SUBMIT_END ]
+  selector?: string[] | string
+  // reducer
+  reducer?: (
+    state: any,
+    action: { type: string; payload: any },
+    form: IForm
+  ) => any
+  children?: React.ReactElement | ((api: IFormSpyAPI) => React.ReactElement)
+}
+```
+
+**Usage**
+
+Example1： Form state change counter
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Form, Field, createFormActions, FormSpy, LifeCycleTypes } from '@uform/react'
+
+const actions = createFormActions()
+const InputField = props => (
+  <Field {...props}>
+    {({ state, mutators }) => (
+      <React.Fragment>
+        <input
+          disabled={!state.editable}
+          value={state.value || ''}
+          onChange={mutators.change}
+          onBlur={mutators.blur}
+          onFocus={mutators.focus}
+        />
+        <span style={{ color: 'red' }}>{state.errors}</span>
+        <span style={{ color: 'orange' }}>{state.warnings}</span>
+      </React.Fragment>
+    )}
+  </Field>
+)
+
+const App = () => {
+  return (
+    <Form actions={actions}>
+      <label>username</label>
+      <InputField name="username" />
+      <label>age</label>
+      <InputField name="age" />
+      <FormSpy
+        selector={LifeCycleTypes.ON_FORM_VALUES_CHANGE}
+        reducer={(state, action, form) => ({
+          count: state.count ? state.count + 1 : 1
+        })}
+      >
+        {({ state, type, form }) => {
+          return <div>count: {state.count || 0}</div>
+        }}
+      </FormSpy>
+    </Form>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+```
+
+Example2：Combo
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Form, Field, createFormActions, FormSpy } from '@uform/react'
+
+const actions = createFormActions()
+const InputField = props => (
+  <Field {...props}>
+    {({ state, mutators }) => (
+      <React.Fragment>
+        <input
+          disabled={!state.editable}
+          value={state.value || ''}
+          onChange={mutators.change}
+          onBlur={mutators.blur}
+          onFocus={mutators.focus}
+        />
+        <span style={{ color: 'red' }}>{state.errors}</span>
+        <span style={{ color: 'orange' }}>{state.warnings}</span>
+      </React.Fragment>
+    )}
+  </Field>
+)
+
+const App = () => {
+  return (
+    <Form actions={actions}>
+      <label>username</label>
+      <InputField name="username" />
+      <label>age</label>
+      <InputField name="age" />
+      <FormSpy>
+        {({ state, form }) => {
+          return (
+            <div>
+              name: {form.getFieldValue('username')}
+              <br />
+              age: {form.getFieldValue('age')}
+            </div>
+          )
+        }}
+      </FormSpy>
+    </Form>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
 #### `<Field/>`
 
 > deprecated，please use [SchemaMarkupField](#SchemaMarkupField)
@@ -2931,7 +3055,7 @@ interface IFormActions {
     selector?: FormPathPattern
   }): Promise<void | IFormValidateResult>
   /*
-   * Validation form
+   * Validation form, throw IFormValidateResult when validation fails
    */
   validate(
     path?: FormPathPattern,
@@ -3040,7 +3164,7 @@ interface IFormAsyncActions {
    */
   clearErrors: (pattern?: FormPathPattern) => Promise<void>
   /*
-   * Validation form
+   * Validation form, throw IFormValidateResult when validation fails
    */
   validate(
     path?: FormPathPattern,
@@ -3460,4 +3584,15 @@ interface IConnectOptions<T> {
   ) => T
 }
 
+```
+
+
+#### ISpyHook
+
+```typescript
+interface ISpyHook {
+  form: IForm
+  state: any
+  type: string
+}
 ```

packages/antd/README.zh-cn.md

@@ -17,7 +17,8 @@ npm install --save @uform/antd
   - [`<SchemaMarkupField/>`](#SchemaMarkupField)
   - [`<Submit/>`](#Submit)
   - [`<Reset/>`](#Reset)
-  - [`<Field/>(即将废弃，请使用<SchemaMarkupField/>)`](<#Field(即将废弃，请使用SchemaMarkupField)>)
+  - [`<FormSpy/>`](#FormSpy)
+  - [`<Field/>(即将废弃，请使用<SchemaMarkupField/>)`](#<Field/>)
 - [表单List](#Array-Components)
   - [`array`](#array)
   - [`cards`](#cards)
@@ -62,7 +63,7 @@ npm install --save @uform/antd
   - [`connect`](#connect)
   - [`registerFormField`](#registerFormField)  
 - [Interfaces](#Interfaces)
-  - [ISchema](#ischema)
+  - [`ISchema`](#ischema)
   - [`IFormActions`](#IFormActions)
   - [`IFormAsyncActions`](#IFormAsyncActions)
   - [`ButtonProps`](#ButtonProps)
@@ -80,6 +81,7 @@ npm install --save @uform/antd
   - [`IMutators`](#IMutators)
   - [`IFieldProps`](#IFieldProps)
   - [`IConnectOptions`](#IConnectOptions)
+  - [`ISpyHook`](#ISpyHook)
 
 
 ### 使用方式
@@ -711,6 +713,136 @@ interface IResetProps {
 }
 ```
 
+#### `<FormSpy/>`
+
+> FormSpy 组件属性定义
+
+```typescript
+interface IFormSpyProps {
+  // 选择器, 如：[ LifeCycleTypes.ON_FORM_SUBMIT_START, LifeCycleTypes.ON_FORM_SUBMIT_END ]
+  selector?: string[] | string
+  // reducer函数，状态叠加处理，action为当前命中的生命周期的数据
+  reducer?: (
+    state: any,
+    action: { type: string; payload: any },
+    form: IForm
+  ) => any
+  children?: React.ReactElement | ((api: IFormSpyAPI) => React.ReactElement)
+}
+```
+
+**用法**
+
+例子 1： 实现一个统计表单 values 改变的计数器
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Form, Field, createFormActions, FormSpy, LifeCycleTypes } from '@uform/react'
+
+const actions = createFormActions()
+const InputField = props => (
+  <Field {...props}>
+    {({ state, mutators }) => {
+      const loading = state.props.loading
+      return <React.Fragment>
+        { props.label && <label>{props.label}</label> }
+        { loading ? ' loading... ' : <input
+          disabled={!state.editable}
+          value={state.value || ''}
+          onChange={mutators.change}
+          onBlur={mutators.blur}
+          onFocus={mutators.focus}
+        /> }
+        <span style={{ color: 'red' }}>{state.errors}</span>
+        <span style={{ color: 'orange' }}>{state.warnings}</span>
+      </React.Fragment>
+    }}
+  </Field>
+)
+
+const App = () => {
+  return (
+    <Form actions={actions}>
+      <label>username</label>
+      <InputField name="username" />
+      <label>age</label>
+      <InputField name="age" />
+      <FormSpy
+        selector={LifeCycleTypes.ON_FORM_VALUES_CHANGE}
+        reducer={(state, action, form) => ({
+          count: state.count ? state.count + 1 : 1
+        })}
+      >
+        {({ state, type, form }) => {
+          return <div>count: {state.count || 0}</div>
+        }}
+      </FormSpy>
+    </Form>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+```
+
+例子 2：实现常用 combo 组件
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Form, Field, createFormActions, FormSpy } from '@uform/react'
+
+const actions = createFormActions()
+const InputField = props => (
+  <Field {...props}>
+    {({ state, mutators }) => {
+      const loading = state.props.loading
+      return <React.Fragment>
+        { props.label && <label>{props.label}</label> }
+        { loading ? ' loading... ' : <input
+          disabled={!state.editable}
+          value={state.value || ''}
+          onChange={mutators.change}
+          onBlur={mutators.blur}
+          onFocus={mutators.focus}
+        /> }
+        <span style={{ color: 'red' }}>{state.errors}</span>
+        <span style={{ color: 'orange' }}>{state.warnings}</span>
+      </React.Fragment>
+    }}
+  </Field>
+)
+
+const App = () => {
+  return (
+    <Form actions={actions}>
+      <label>username</label>
+      <InputField name="username" />
+      <label>age</label>
+      <InputField name="age" />
+      <FormSpy>
+        {({ state, form }) => {
+          return (
+            <div>
+              name: {form.getFieldValue('username')}
+              <br />
+              age: {form.getFieldValue('age')}
+            </div>
+          )
+        }}
+      </FormSpy>
+    </Form>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+#### `<Field/>`
+
+> 即将废弃，请使用 [SchemaMarkupField](#SchemaMarkupField)
+
 ### Array Components
 
 #### array
@@ -2917,7 +3049,7 @@ interface IFormActions {
   }): Promise<void | IFormValidateResult>
 
   /*
-   * 校验表单
+   * 校验表单，当校验失败时抛出异常
    */
   validate(
     path?: FormPathPattern,
@@ -3096,7 +3228,7 @@ interface IFormAsyncActions {
    */
   clearErrors: (pattern?: FormPathPattern) => Promise<void>
   /*
-   * 校验表单
+   * 校验表单, 当校验失败时抛出异常
    */
   validate(
     path?: FormPathPattern,
@@ -3485,4 +3617,14 @@ interface IConnectOptions<T> {
   ) => T
 }
 
+```
+
+#### ISpyHook
+
+```typescript
+interface ISpyHook {
+  form: IForm
+  state: any
+  type: string
+}
 ```