docs(react): add react docs

alibaba · Feb 18, 2021 · 76b799a · 76b799a
1 parent 7940cab
commit 76b799a
Show file tree

Hide file tree

Showing 12 changed files with 1,190 additions and 45 deletions.
diff --git a/packages/json-schema/src/schema.ts b/packages/json-schema/src/schema.ts
@@ -2,7 +2,7 @@ import {
   ISchema,
   SchemaEnum,
   SchemaProperties,
-  SchemaExtendReaction,
+  SchemaReaction,
   SchemaTypes,
   SchemaKey,
   ISchemaTransformerOptions,
@@ -137,7 +137,7 @@ export class Schema<
   //组件属性
   ['x-component-props']?: ComponentProps;
 
-  ['x-reactions']?: SchemaExtendReaction<ReactionField>[];
+  ['x-reactions']?: SchemaReaction<ReactionField>[];
 
   ['x-content']?: any;
 
@@ -196,8 +196,9 @@ export class Schema<
   }
 
   removeProperty = (key: SchemaKey) => {
+    const schema = this.properties[key]
     delete this.properties[key]
-    return this
+    return schema
   }
 
   setProperties = (
@@ -239,8 +240,9 @@ export class Schema<
   }
 
   removePatternProperty = (key: SchemaKey) => {
+    const schema = this.patternProperties[key]
     delete this.patternProperties[key]
-    return this
+    return schema
   }
 
   setPatternProperties = (

diff --git a/packages/json-schema/src/transformer.ts b/packages/json-schema/src/transformer.ts
@@ -17,7 +17,7 @@ import {
   ISchema,
   ISchemaFieldFactoryOptions,
   ISchemaFieldUpdateRequest,
-  SchemaExtendReactions,
+  SchemaReactions,
 } from './types'
 import '@formily/core'
 
@@ -139,7 +139,9 @@ const getFieldInternalPropsBySchema = (
     title: schema.title,
     description: schema.description,
     disabled: schema['x-disabled'],
-    editable: schema['x-editable'],
+    editable: isValid(schema['x-editable'])
+      ? schema['x-editable']
+      : schema['writeOnly'],
     readOnly: isValid(schema['x-read-only'])
       ? schema['x-read-only']
       : schema['readOnly'],
@@ -219,7 +221,7 @@ const getSchemaFieldReactions = (
         )
       }
       if (isStr(request.run)) {
-        compile(`async function(){${request.run}}`)()
+        compile(`{{async function(){${request.run}}}}`)()
       }
     })
   }
@@ -240,7 +242,7 @@ const getSchemaFieldReactions = (
   }
 
   return (field: Formily.Core.Models.Field) => {
-    const reactions: SchemaExtendReactions = toArr(schema['x-reactions'])
+    const reactions: SchemaReactions = toArr(schema['x-reactions'])
     reactions.forEach((reaction) => {
       if (!reaction) return
       if (isFn(reaction)) {
@@ -258,10 +260,11 @@ const getSchemaFieldReactions = (
         $dependencies,
       }
       const when = Schema.compile(reaction?.when, scope)
+      const condition = isValid(when) ? when : true
       const compile = (expression: any) => {
         return Schema.compile(expression, scope)
       }
-      if (when) {
+      if (condition) {
         if (reaction.target) {
           field.query(reaction.target).forEach((field) => {
             setSchemaFieldState(field, reaction.fullfill, compile)

diff --git a/packages/json-schema/src/types.ts b/packages/json-schema/src/types.ts
@@ -43,7 +43,7 @@ export type SchemaPatch = (schema: ISchema) => ISchema
 
 export type SchemaKey = string | number
 
-export type SchemaExtendReaction<Field = any> =
+export type SchemaReaction<Field = any> =
   | {
       dependencies?: string[]
       when?: string | boolean
@@ -61,9 +61,9 @@ export type SchemaExtendReaction<Field = any> =
     }
   | ((field: Field) => void)
 
-export type SchemaExtendReactions<Field = any> =
-  | SchemaExtendReaction<Field>
-  | SchemaExtendReaction<Field>[]
+export type SchemaReactions<Field = any> =
+  | SchemaReaction<Field>
+  | SchemaReaction<Field>[]
 
 export type SchemaItems<
   Decorator,
@@ -220,7 +220,7 @@ export interface ISchema<
   //组件属性
   ['x-component-props']?: ComponentProps
   //组件响应器
-  ['x-reactions']?: SchemaExtendReactions<ReactionField>
+  ['x-reactions']?: SchemaReactions<ReactionField>
   //内容
   ['x-content']?: any
 

diff --git a/packages/react/docs/api/components/SchemaField.md b/packages/react/docs/api/components/SchemaField.md
@@ -28,7 +28,7 @@ type ComposeSchemaField = React.FC<ISchemaFieldProps> & {
 //工厂函数参数属性
 interface ISchemaFieldFactoryProps {
   components?: {
-    [key: string]: React.JSXElementConstructor<any> //组件列表
+    [key: string]: React.FC //组件列表
   }
   scope?: any //全局作用域，用于实现协议表达式变量注入
 }

diff --git a/packages/react/docs/api/hooks/useField.md b/packages/react/docs/api/hooks/useField.md
@@ -4,6 +4,10 @@
 
 主要用在自定义组件内读取当前字段属性，操作字段状态等，在所有 Field 组件的子树内都能使用，注意，拿到的是[GeneralField](https://core.formilyjs.org/api/models/field#generalfield)，如果需要对不同类型的字段做处理，请使用[Type Checker](https://core.formilyjs.org/api/entry/form-checker)
 
+<Alert>
+注意：如果要在自定义组件内使用useField，并响应字段模型变化，那需要给自定义组件包装observer
+</Alert>
+
 ## 签名
 
 ```ts
@@ -45,19 +49,6 @@ const FormItem = observer(({ children }) => {
 
 export default () => {
   const form = useMemo(() => createForm({ validateFirst: true }))
-
-  const createPasswordEqualValidate = (equalName) => (field) => {
-    if (
-      form.values.confirm_password &&
-      field.value &&
-      form.values[equalName] !== field.value
-    ) {
-      field.errors = ['Password does not match Confirm Password.']
-    } else {
-      field.errors = []
-    }
-  }
-
   return (
     <FormProvider form={form}>
       <Form layout="vertical">
@@ -68,22 +59,6 @@ export default () => {
           decorator={[FormItem]}
           component={[Input, { placeholder: 'Please Input' }]}
         />
-        <Field
-          name="password"
-          title="Password"
-          required
-          decorator={[FormItem]}
-          component={[Input, { type: 'password', placeholder: 'Please Input' }]}
-          reactions={createPasswordEqualValidate('confirm_password')}
-        />
-        <Field
-          name="confirm_password"
-          title="Confirm Password"
-          required
-          decorator={[FormItem]}
-          component={[Input, { type: 'password', placeholder: 'Please Input' }]}
-          reactions={createPasswordEqualValidate('password')}
-        />
         <code>
           <pre>
             <FormConsumer>