From 93f87ad26b6d28c70dfa6c3c9dba651fb354b651 Mon Sep 17 00:00:00 2001
From: quirkyvar <quirkyvar@gmail.com>
Date: Fri, 13 Dec 2019 13:45:34 +0800
Subject: [PATCH] fix: form effect demo (#499)

---
 packages/antd/README.md       | 75 ++++++++++++----------------------
 packages/antd/README.zh-cn.md | 75 ++++++++++++----------------------
 packages/next/README.md       | 75 ++++++++++++----------------------
 packages/next/README.zh-cn.md | 77 ++++++++++++-----------------------
 4 files changed, 105 insertions(+), 197 deletions(-)

diff --git a/packages/antd/README.md b/packages/antd/README.md
index 0fb74d38292..214e80abcdd 100644
--- a/packages/antd/README.md
+++ b/packages/antd/README.md
@@ -2345,48 +2345,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
+import SchemaForm, {
+  SchemaMarkupField as Field,
+  VirtualField,
+  createFormActions,
+  useFormEffects,
+  LifeCycleTypes,
+  createVirtualBox
+} from '@uform/antd'
 
 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 CheckedField = props => (
-  <Field {...props}>
-    {({ state, mutators }) => {
-      const loading = state.props.loading
-      return <React.Fragment>
-        { props.label && <label>{props.label}</label> }
-        { loading ? ' loading... ' : <input type="checkbox" onChange={() => {
-            mutators.change(!state.value)
-          }} checked={!!state.value} /> }
-        <span style={{ color: 'red' }}>{state.errors}</span>
-        <span style={{ color: 'orange' }}>{state.warnings}</span>
-      </React.Fragment>
-    }}
-  </Field>
-)
 
-const FormFragment = () => {
+const FragmentContainer = createVirtualBox('ffb', (props) => {
   useFormEffects(($, { setFieldState }) => {
-    $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
+    $(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
       setFieldState('a~', state => state.visible = false)
     })
 
@@ -2405,24 +2377,29 @@ const FormFragment = () => {
 
   return (
     <React.Fragment>
-      <CheckedField name="trigger" label="show/hide" /> 
-      <div>
-        <InputField label="a" name="a" />
-      </div>
-      <div>
-        <InputField label="a-copy" name="a-copy" />
-      </div>
+      {props.children}
     </React.Fragment>
   )
+});
+
+const FormFragment = () => {
+  return <FragmentContainer>
+    <Field
+      type="radio"
+      name="trigger"
+      title="trigger"
+      enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
+    />
+    <Field type="string" name="a" title="a" />
+    <Field type="string" name="a-copy" title="a-copy" />   
+  </FragmentContainer>   
 }
 
 const App = () => {
   return (
-    <Form
-      actions={actions}
-    >
+    <SchemaForm actions={actions}>
       <FormFragment />
-    </Form>
+    </SchemaForm>
   )
 }
 
diff --git a/packages/antd/README.zh-cn.md b/packages/antd/README.zh-cn.md
index 71e20a7da6e..13cb66ebfc2 100644
--- a/packages/antd/README.zh-cn.md
+++ b/packages/antd/README.zh-cn.md
@@ -2410,48 +2410,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
+import SchemaForm, {
+  SchemaMarkupField as Field,
+  VirtualField,
+  createFormActions,
+  useFormEffects,
+  LifeCycleTypes,
+  createVirtualBox
+} from '@uform/antd'
 
 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 CheckedField = props => (
-  <Field {...props}>
-    {({ state, mutators }) => {
-      const loading = state.props.loading
-      return <React.Fragment>
-        { props.label && <label>{props.label}</label> }
-        { loading ? ' loading... ' : <input type="checkbox" onChange={() => {
-            mutators.change(!state.value)
-          }} checked={!!state.value} /> }
-        <span style={{ color: 'red' }}>{state.errors}</span>
-        <span style={{ color: 'orange' }}>{state.warnings}</span>
-      </React.Fragment>
-    }}
-  </Field>
-)
-
-const FormFragment = () => {
+const FragmentContainer = createVirtualBox('ffb', (props) => {
   useFormEffects(($, { setFieldState }) => {
-    $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
+    $(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
       setFieldState('a~', state => state.visible = false)
     })
 
@@ -2470,24 +2442,29 @@ const FormFragment = () => {
 
   return (
     <React.Fragment>
-      <CheckedField name="trigger" label="show/hide" />
-      <div>
-        <InputField label="a" name="a" />
-      </div>
-      <div>
-        <InputField label="a-copy" name="a-copy" />
-      </div>
+      {props.children}
     </React.Fragment>
   )
+});
+
+const FormFragment = () => {
+  return <FragmentContainer>
+    <Field
+      type="radio"
+      name="trigger"
+      title="trigger"
+      enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
+    />
+    <Field type="string" name="a" title="a" />
+    <Field type="string" name="a-copy" title="a-copy" />   
+  </FragmentContainer>   
 }
 
 const App = () => {
   return (
-    <Form
-      actions={actions}
-    >
+    <SchemaForm actions={actions}>
       <FormFragment />
-    </Form>
+    </SchemaForm>
   )
 }
 
diff --git a/packages/next/README.md b/packages/next/README.md
index 14d9e16b9d2..6f667c32193 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -2334,48 +2334,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
+import SchemaForm, {
+  SchemaMarkupField as Field,
+  VirtualField,
+  createFormActions,
+  useFormEffects,
+  LifeCycleTypes,
+  createVirtualBox
+} from '@uform/next'
 
 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 CheckedField = props => (
-  <Field {...props}>
-    {({ state, mutators }) => {
-      const loading = state.props.loading
-      return <React.Fragment>
-        { props.label && <label>{props.label}</label> }
-        { loading ? ' loading... ' : <input type="checkbox" onChange={() => {
-            mutators.change(!state.value)
-          }} checked={!!state.value} /> }
-        <span style={{ color: 'red' }}>{state.errors}</span>
-        <span style={{ color: 'orange' }}>{state.warnings}</span>
-      </React.Fragment>
-    }}
-  </Field>
-)
 
-const FormFragment = () => {
+const FragmentContainer = createVirtualBox('ffb', (props) => {
   useFormEffects(($, { setFieldState }) => {
-    $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
+    $(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
       setFieldState('a~', state => state.visible = false)
     })
 
@@ -2394,24 +2366,29 @@ const FormFragment = () => {
 
   return (
     <React.Fragment>
-      <CheckedField name="trigger" label="show/hide" /> 
-      <div>
-        <InputField label="a" name="a" />
-      </div>
-      <div>
-        <InputField label="a-copy" name="a-copy" />
-      </div>
+      {props.children}
     </React.Fragment>
   )
+});
+
+const FormFragment = () => {
+  return <FragmentContainer>
+    <Field
+      type="radio"
+      name="trigger"
+      title="trigger"
+      enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
+    />
+    <Field type="string" name="a" title="a" />
+    <Field type="string" name="a-copy" title="a-copy" />   
+  </FragmentContainer>   
 }
 
 const App = () => {
   return (
-    <Form
-      actions={actions}
-    >
+    <SchemaForm actions={actions}>
       <FormFragment />
-    </Form>
+    </SchemaForm>
   )
 }
 
diff --git a/packages/next/README.zh-cn.md b/packages/next/README.zh-cn.md
index 3052a454a1c..d293251864c 100644
--- a/packages/next/README.zh-cn.md
+++ b/packages/next/README.zh-cn.md
@@ -2355,48 +2355,20 @@ ReactDOM.render(<App />, document.getElementById('root'))
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
+import SchemaForm, {
+  SchemaMarkupField as Field,
+  VirtualField,
+  createFormActions,
+  useFormEffects,
+  LifeCycleTypes,
+  createVirtualBox
+} from '@uform/next'
 
 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 CheckedField = props => (
-  <Field {...props}>
-    {({ state, mutators }) => {
-      const loading = state.props.loading
-      return <React.Fragment>
-        { props.label && <label>{props.label}</label> }
-        { loading ? ' loading... ' : <input type="checkbox" onChange={() => {
-            mutators.change(!state.value)
-          }} checked={!!state.value} /> }
-        <span style={{ color: 'red' }}>{state.errors}</span>
-        <span style={{ color: 'orange' }}>{state.warnings}</span>
-      </React.Fragment>
-    }}
-  </Field>
-)
-
-const FormFragment = () => {
+const FragmentContainer = createVirtualBox('ffb', (props) => {
   useFormEffects(($, { setFieldState }) => {
-    $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
+    $(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
       setFieldState('a~', state => state.visible = false)
     })
 
@@ -2415,24 +2387,29 @@ const FormFragment = () => {
 
   return (
     <React.Fragment>
-      <CheckedField name="trigger" label="show/hide" /> 
-      <div>
-        <InputField label="a" name="a" />
-      </div>
-      <div>
-        <InputField label="a-copy" name="a-copy" />
-      </div>
+      {props.children}
     </React.Fragment>
   )
+});
+
+const FormFragment = () => {
+  return <FragmentContainer>
+    <Field
+      type="radio"
+      name="trigger"
+      title="trigger"
+      enum={[{ label: 'show', value: true }, { label: 'hide', value: false } ]}
+    />
+    <Field type="string" name="a" title="a" />
+    <Field type="string" name="a-copy" title="a-copy" />   
+  </FragmentContainer>   
 }
 
 const App = () => {
   return (
-    <Form
-      actions={actions}
-    >
+    <SchemaForm actions={actions}>
       <FormFragment />
-    </Form>
+    </SchemaForm>
   )
 }
 
@@ -2461,7 +2438,7 @@ import { Form, Field, VirtualField,
   useFormEffects,
   useFieldState,
   LifeCycleTypes
-} from '@uform/react'
+} from '@uform/next'
 
 const InputField = props => (
   <Field {...props}>