fix(@uform/antd/next/react): doc (#471)

* feat: enhanced document * fix: custom string component
alibaba · Dec 6, 2019 · 6d73c6c · 6d73c6c
1 parent b4ea26b
commit 6d73c6c
Show file tree

Hide file tree

Showing 22 changed files with 1,737 additions and 101 deletions.
diff --git a/docs/Examples/antd/Actions.md b/docs/Examples/antd/Actions.md
@@ -15,7 +15,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -79,7 +79,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,

diff --git a/docs/Examples/antd/Deconstruction.md b/docs/Examples/antd/Deconstruction.md
@@ -10,7 +10,7 @@
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { SchemaForm, Field, FormButtonGroup, Submit, Reset } from '@uform/antd'
+import { SchemaForm, SchemaMarkupField as Field, FormButtonGroup, Submit, Reset } from '@uform/antd'
 import { Button } from '@alifd/antd'
 import Printer from '@uform/printer'
 import 'antd/dist/antd.css'
@@ -42,7 +42,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -107,7 +107,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -179,14 +179,15 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
   registerFormField,
   connect,
   FormLayout,
-  FormPath
+  FormPath,
+  FormEffectHooks,
 } from '@uform/antd'
 import { Button } from '@alifd/antd'
 import Printer from '@uform/printer'
@@ -219,12 +220,13 @@ registerFormField(
     )
   })
 )
+const { onFieldValueChange$ } = FormEffectHooks
 
 const App = () => (
   <Printer>
     <SchemaForm
       effects={($, { setFieldState }) => {
-        $('onFieldValueChange', 'wrapper.relation').subscribe(({ value }) => {
+        onFieldValueChange$('wrapper.relation').subscribe(({ value }) => {
           setFieldState(
             FormPath.match(
               'wrapper.[[{aa:{bb:{cc:destructor1,dd:\\[destructor2,destructor3\\],ee}}}]]'

diff --git a/docs/Examples/antd/Detail.md b/docs/Examples/antd/Detail.md
@@ -9,7 +9,7 @@ import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,

diff --git a/docs/Examples/antd/International.md b/docs/Examples/antd/International.md
@@ -10,7 +10,7 @@
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { SchemaForm, Field, FormButtonGroup, Submit, Reset,setValidationLanguage } from '@uform/antd'
+import { SchemaForm, SchemaMarkupField as Field, FormButtonGroup, Submit, Reset,setValidationLanguage } from '@uform/antd'
 import { Button,LocaleProvider } from 'antd'
 import Printer from '@uform/printer'
 import zhCN from 'antd/lib/locale-provider/zh_CN'
@@ -108,7 +108,7 @@ ReactDOM.render(
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { SchemaForm, Field, FormButtonGroup, Submit, Reset,setValidationLanguage } from '@uform/antd'
+import { SchemaForm, SchemaMarkupField as Field, FormButtonGroup, Submit, Reset,setValidationLanguage } from '@uform/antd'
 import { Button,LocaleProvider } from 'antd'
 import Printer from '@uform/printer'
 import enUS from 'antd/lib/locale-provider/en_US'

diff --git a/docs/Examples/antd/Layout.md b/docs/Examples/antd/Layout.md
@@ -16,7 +16,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -58,7 +58,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -99,7 +99,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -147,7 +147,7 @@ import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -232,7 +232,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -275,7 +275,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
 ```jsx
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   FormEffectHooks,

diff --git a/docs/Examples/antd/List.md b/docs/Examples/antd/List.md
@@ -34,7 +34,7 @@ import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -122,7 +122,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -198,7 +198,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,

diff --git a/docs/Examples/antd/Relations.md b/docs/Examples/antd/Relations.md
@@ -32,7 +32,7 @@ import ReactDOM from 'react-dom'
 import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -41,19 +41,27 @@ import {
   FormPath,
   FormBlock,
   FormLayout,
-  createFormActions
+  createFormActions,
+  FormEffectHooks,
+  createEffectHook,
 } from '@uform/antd'
 import { Button } from 'antd'
 import Printer from '@uform/printer'
 import 'antd/dist/antd.css'
 
+const { onFormInit$, onFieldValueChange$ } = FormEffectHooks
+const onSearch$ = createEffectHook('onSearch')
+const onChangeOption$ = createEffectHook('onChangeOption')
+const actions = createFormActions()
+
 const App = () => {
   const [state, setState] = useState({ visible: false })
   return (
     <Printer>
       <SchemaForm
+        actions={actions}
         effects={($, { setFieldState, getFieldState }) => {
-          $('onFormInit').subscribe(() => {
+          onFormInit$().subscribe(() => {
             setFieldState(FormPath.match('*(gg,hh)'), state => {
               state.props['x-props'] = state.props['x-props'] || {}
               state.props['x-props'].style = {
@@ -64,14 +72,14 @@ const App = () => {
               }
             })
           })
-          $('onFieldValueChange', 'aa').subscribe(fieldState => {
+          onFieldValueChange$('aa').subscribe(fieldState => {
             console.log(fieldState.value)
             setFieldState('bb', state => {
               state.visible = !fieldState.value
             })
           })
 
-          $('onFieldValueChange', 'cc').subscribe(fieldState => {
+          onFieldValueChange$('cc').subscribe(fieldState => {
             setFieldState('dd', state => {
               state.visible = !fieldState.value
             })
@@ -89,14 +97,14 @@ const App = () => {
               }
             })
           })
-          $('onFieldValueChange', 'mm').subscribe(fieldState => {
+          onFieldValueChange$('mm').subscribe(fieldState => {
             setFieldState('ff', state => {
               state.visible = !fieldState.value
             })
           })
-          $('onFieldValueChange', 'gg')
+          onFieldValueChange$('gg')
             .pipe(
-              withLatestFrom($('onChangeOption')),
+              withLatestFrom(onChangeOption$()),
               map(([fieldState, { payload: option }]) => {
                 return {
                   state: fieldState,
@@ -114,7 +122,8 @@ const App = () => {
                 }
               })
             })
-          $('onSearch', 'gg')
+
+          onSearch$('gg')
             .pipe(
               map(fieldState => {
                 setFieldState('gg', state => {
@@ -175,7 +184,7 @@ const App = () => {
             name="gg"
             type="string"
             x-effect={dispatch => ({
-              onChange(value, option) {
+              onChange(value, option) {       
                 dispatch('onChangeOption', option)
               },
               onSearch(value) {
@@ -215,26 +224,29 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
   FormItemGrid,
   FormCard,
   FormPath,
   FormBlock,
-  FormLayout
+  FormLayout,
+  FormEffectHooks,
 } from '@uform/next'
 import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators'
 import { Button } from '@alifd/next'
 import Printer from '@uform/printer'
 import '@alifd/next/dist/next.css'
 
+const { onFieldValueChange$ } = FormEffectHooks
+
 const App = () => (
   <Printer>
     <SchemaForm
       effects={($, { setFieldState, getFieldState }) => {
-        $('onFieldValueChange', 'total').subscribe(({ value }) => {
+        onFieldValueChange$('total').subscribe(({ value }) => {
           if (!value) return
           setFieldState('count', state => {
             const price = getFieldState('price', state => state.value)
@@ -247,7 +259,7 @@ const App = () => (
             state.value = value / count
           })
         })
-        $('onFieldValueChange', 'price').subscribe(({ value }) => {
+        onFieldValueChange$('price').subscribe(({ value }) => {
           if (!value) return
           setFieldState('total', state => {
             const count = getFieldState('count', state => state.value)
@@ -260,7 +272,7 @@ const App = () => (
             state.value = total / value
           })
         })
-        $('onFieldValueChange', 'count').subscribe(({ value }) => {
+        onFieldValueChange$('count').subscribe(({ value }) => {
           if (!value) return
           setFieldState('total', state => {
             const price = getFieldState('price', state => state.value)
@@ -305,7 +317,7 @@ import ReactDOM from 'react-dom'
 import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -314,12 +326,15 @@ import {
   FormPath,
   FormBlock,
   FormLayout,
-  createFormActions
+  createFormActions,
+  FormEffectHooks,
 } from '@uform/antd'
 import { Button } from 'antd'
 import Printer from '@uform/printer'
 import 'antd/dist/antd.css'
 
+const { onFormInit$, onFieldValueChange$ } = FormEffectHooks
+
 const App = () => (
   <Printer>
     <SchemaForm
@@ -354,10 +369,10 @@ const App = () => (
             state.value = value
           })
         }
-        $('onFormInit').subscribe(() => {
+        onFormInit$().subscribe(() => {
           hide('bb')
         })
-        $('onFieldValueChange', 'aa').subscribe(fieldState => {
+        onFieldValueChange$('aa').subscribe(fieldState => {
           if (!fieldState.value) return
           show('bb')
           loading('bb')
@@ -367,7 +382,7 @@ const App = () => (
             setValue('bb', '1111')
           }, 1000)
         })
-        $('onFieldValueChange', 'bb').subscribe(fieldState => {
+        onFieldValueChange$('bb').subscribe(fieldState => {
           console.log(fieldState.loading)
           if (!fieldState.value) return hide('cc')
           show('cc')
@@ -411,7 +426,7 @@ import ReactDOM from 'react-dom'
 import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,
@@ -471,7 +486,7 @@ import ReactDOM from 'react-dom'
 import { filter, withLatestFrom, map, debounceTime } from 'rxjs/operators'
 import {
   SchemaForm,
-  Field,
+  SchemaMarkupField as Field,
   FormButtonGroup,
   Submit,
   Reset,