feat(react): improve formily scope standard specification (#3212)

alibaba · Jun 20, 2022 · 0811c87 · 0811c87
1 parent ef218b9
commit 0811c87
Show file tree

Hide file tree

Showing 32 changed files with 830 additions and 53 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -122,14 +122,10 @@ export default () => (
   <Section
     title="High-Quality Community Group"
     style={{ marginTop: 140 }}
-    titleStyle={{ paddingBottom: 140, fontWeight: 'bold' }}
+    titleStyle={{ paddingBottom: 20, fontWeight: 'bold' }}
   >
     <QrCodeGroup>
-      <QrCode link="//img.alicdn.com/imgextra/i2/O1CN01n7kuJW1nrXhBw3Nud_!!6000000005143-0-tps-1284-1644.jpg" />
-      <QrCode
-        title="Already Full"
-        link="//img.alicdn.com/imgextra/i3/O1CN018neaqX1HvbT6SUIbp_!!6000000000820-0-tps-1284-1644.jpg"
-      />
+      <QrCode link="//img.alicdn.com/imgextra/i1/O1CN011zlc5b1uu1BDUpNg1_!!6000000006096-2-tps-978-1380.png" />
     </QrCodeGroup>
   </Section>
 )

diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
@@ -120,16 +120,12 @@ import './site/styles.less'
 
 export default () => (
   <Section
-    title="高质量技术交流"
+    title="全球互助共建答疑大群"
     style={{ marginTop: 140 }}
-    titleStyle={{ paddingBottom: 140 }}
+    titleStyle={{ paddingBottom: 20, fontWeight: 'bold' }}
   >
     <QrCodeGroup>
-      <QrCode link="//img.alicdn.com/imgextra/i2/O1CN01n7kuJW1nrXhBw3Nud_!!6000000005143-0-tps-1284-1644.jpg" />
-      <QrCode
-        title="该群已满"
-        link="//img.alicdn.com/imgextra/i3/O1CN018neaqX1HvbT6SUIbp_!!6000000000820-0-tps-1284-1644.jpg"
-      />
+      <QrCode link="//img.alicdn.com/imgextra/i1/O1CN011zlc5b1uu1BDUpNg1_!!6000000006096-2-tps-978-1380.png" />
     </QrCodeGroup>
   </Section>
 )

diff --git a/packages/antd/src/array-base/index.tsx b/packages/antd/src/array-base/index.tsx
@@ -15,7 +15,8 @@ import {
   useFieldSchema,
   Schema,
   JSXComponent,
-  ExpressionScope,
+  RecordScope,
+  RecordsScope,
 } from '@formily/react'
 import { isValid, clone } from '@formily/shared'
 import { SortableHandle } from 'react-sortable-hoc'
@@ -109,18 +110,25 @@ export const ArrayBase: ComposedArrayBase = (props) => {
   const field = useField<ArrayField>()
   const schema = useFieldSchema()
   return (
-    <ArrayBaseContext.Provider value={{ field, schema, props }}>
-      {props.children}
-    </ArrayBaseContext.Provider>
+    <RecordsScope getRecords={() => field.value}>
+      <ArrayBaseContext.Provider value={{ field, schema, props }}>
+        {props.children}
+      </ArrayBaseContext.Provider>
+    </RecordsScope>
   )
 }
 
 ArrayBase.Item = ({ children, ...props }) => {
   return (
     <ItemContext.Provider value={props}>
-      <ExpressionScope value={{ $record: props.record, $index: props.index }}>
+      <RecordScope
+        getIndex={() => props.index}
+        getRecord={() =>
+          typeof props.record === 'function' ? props.record() : props.record
+        }
+      >
         {children}
-      </ExpressionScope>
+      </RecordScope>
     </ItemContext.Provider>
   )
 }

diff --git a/packages/antd/src/array-cards/index.tsx b/packages/antd/src/array-cards/index.tsx
@@ -98,7 +98,11 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         />
       )
       return (
-        <ArrayBase.Item key={index} index={index} record={item}>
+        <ArrayBase.Item
+          key={index}
+          index={index}
+          record={() => dataSource[index]}
+        >
           <Card
             {...props}
             onChange={() => {}}

diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -140,7 +140,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 address: `${path}.**`,
               })
               return (
-                <ArrayBase.Item index={index} record={item}>
+                <ArrayBase.Item index={index} record={() => dataSource[index]}>
                   <RecursionField
                     schema={items}
                     name={index}

diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx
@@ -96,7 +96,11 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
               ? schema.items[index] || schema.items[0]
               : schema.items
             return (
-              <ArrayBase.Item key={index} index={index} record={item}>
+              <ArrayBase.Item
+                key={index}
+                index={index}
+                record={() => dataSource[index]}
+              >
                 <SortableItem key={`item-${index}`} index={index}>
                   <div className={`${prefixCls}-item-inner`}>
                     <RecursionField schema={items} name={index} />

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -135,7 +135,7 @@ const useArrayTableColumns = (
       render: (value: any, record: any) => {
         const index = dataSource.indexOf(record)
         const children = (
-          <ArrayBase.Item index={index} record={record}>
+          <ArrayBase.Item index={index} record={() => dataSource[index]}>
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
         )

diff --git a/packages/antd/src/form/index.tsx b/packages/antd/src/form/index.tsx
@@ -1,10 +1,15 @@
 import React from 'react'
-import { Form as FormType, ObjectField, IFormFeedback } from '@formily/core'
+import {
+  Form as FormType,
+  ObjectField,
+  IFormFeedback,
+  isForm,
+} from '@formily/core'
 import {
   useParentForm,
   FormProvider,
-  ExpressionScope,
   JSXComponent,
+  RecordScope,
 } from '@formily/react'
 import { FormLayout, IFormLayoutProps } from '../form-layout'
 import { PreviewText } from '../preview-text'
@@ -26,7 +31,7 @@ export const Form: React.FC<React.PropsWithChildren<FormProps>> = ({
 }) => {
   const top = useParentForm()
   const renderContent = (form: FormType | ObjectField) => (
-    <ExpressionScope value={{ $$form: form }}>
+    <RecordScope getRecord={() => (isForm(form) ? form.values : form.value)}>
       <PreviewText.Placeholder value={previewTextPlaceholder}>
         <FormLayout {...props}>
           {React.createElement(
@@ -42,7 +47,7 @@ export const Form: React.FC<React.PropsWithChildren<FormProps>> = ({
           )}
         </FormLayout>
       </PreviewText.Placeholder>
-    </ExpressionScope>
+    </RecordScope>
   )
   if (form)
     return <FormProvider form={form}>{renderContent(form)}</FormProvider>

diff --git a/packages/next/src/array-base/index.tsx b/packages/next/src/array-base/index.tsx
@@ -8,7 +8,8 @@ import {
   useFieldSchema,
   Schema,
   JSXComponent,
-  ExpressionScope,
+  RecordScope,
+  RecordsScope,
 } from '@formily/react'
 import { SortableHandle } from 'react-sortable-hoc'
 import {
@@ -105,18 +106,25 @@ export const ArrayBase: ComposedArrayBase = (props) => {
   const field = useField<ArrayField>()
   const schema = useFieldSchema()
   return (
-    <ArrayBaseContext.Provider value={{ field, schema, props }}>
-      {props.children}
-    </ArrayBaseContext.Provider>
+    <RecordsScope getRecords={() => field.value}>
+      <ArrayBaseContext.Provider value={{ field, schema, props }}>
+        {props.children}
+      </ArrayBaseContext.Provider>
+    </RecordsScope>
   )
 }
 
 ArrayBase.Item = ({ children, ...props }) => {
   return (
     <ItemContext.Provider value={props}>
-      <ExpressionScope value={{ $record: props.record, $index: props.index }}>
+      <RecordScope
+        getIndex={() => props.index}
+        getRecord={() =>
+          typeof props.record === 'function' ? props.record() : props.record
+        }
+      >
         {children}
-      </ExpressionScope>
+      </RecordScope>
     </ItemContext.Provider>
   )
 }

diff --git a/packages/next/src/array-cards/index.tsx b/packages/next/src/array-cards/index.tsx
@@ -151,7 +151,11 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         />
       )
       return (
-        <ArrayBase.Item key={index} index={index} record={item}>
+        <ArrayBase.Item
+          key={index}
+          index={index}
+          record={() => dataSource[index]}
+        >
           <Card
             contentHeight="auto"
             {...props}

diff --git a/packages/next/src/array-collapse/index.tsx b/packages/next/src/array-collapse/index.tsx
@@ -192,7 +192,11 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 key={index}
                 title={title()}
               >
-                <ArrayBase.Item index={index} key={index} record={item}>
+                <ArrayBase.Item
+                  index={index}
+                  key={index}
+                  record={() => dataSource[index]}
+                >
                   {content}
                 </ArrayBase.Item>
               </Collapse.Panel>

diff --git a/packages/next/src/array-items/index.tsx b/packages/next/src/array-items/index.tsx
@@ -96,7 +96,11 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
               ? schema.items[index] || schema.items[0]
               : schema.items
             return (
-              <ArrayBase.Item key={index} index={index} record={item}>
+              <ArrayBase.Item
+                key={index}
+                index={index}
+                record={() => dataSource[index]}
+              >
                 <SortableItem key={`item-${index}`} index={index}>
                   <div className={`${prefixCls}-item-inner`}>
                     <RecursionField schema={items} name={index} />

diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
@@ -133,7 +133,11 @@ const useArrayTableColumns = (
       cell: (value: any, _: number, record: any) => {
         const index = dataSource.indexOf(record)
         const children = (
-          <ArrayBase.Item key={index} index={index} record={record}>
+          <ArrayBase.Item
+            key={index}
+            index={index}
+            record={() => dataSource[index]}
+          >
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
         )

diff --git a/packages/next/src/form/index.tsx b/packages/next/src/form/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import {
   FormProvider,
-  ExpressionScope,
+  RecordScope,
   JSXComponent,
   useParentForm,
 } from '@formily/react'
@@ -13,6 +13,7 @@ import {
   Form as FormType,
   ObjectField,
   IFormFeedback,
+  isForm,
 } from '@formily/core'
 import { PreviewText } from '../preview-text'
 export interface FormProps extends IFormLayoutProps {
@@ -40,7 +41,7 @@ export const Form: React.FC<React.PropsWithChildren<FormProps>> = ({
   }, [lang])
 
   const renderContent = (form: FormType | ObjectField) => (
-    <ExpressionScope value={{ $$form: form }}>
+    <RecordScope getRecord={() => (isForm(form) ? form.values : form.value)}>
       <PreviewText.Placeholder value={previewTextPlaceholder}>
         <FormLayout {...props}>
           {React.createElement(
@@ -56,7 +57,7 @@ export const Form: React.FC<React.PropsWithChildren<FormProps>> = ({
           )}
         </FormLayout>
       </PreviewText.Placeholder>
-    </ExpressionScope>
+    </RecordScope>
   )
 
   if (form)

diff --git a/packages/react/docs/api/components/ExpressionScope.md b/packages/react/docs/api/components/ExpressionScope.md
@@ -0,0 +1,62 @@
+---
+order: 8
+---
+
+# ExpressionScope
+
+## Description
+
+Used to pass local scopes to json-schema expressions inside custom components
+
+## Signature
+
+```ts
+interface IExpressionScopeProps {
+  value?: any
+}
+type ExpressionScope = React.FC<React.PropsWithChildren<IExpressionScopeProps>>
+```
+
+## Example
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import {
+  FormProvider,
+  createSchemaField,
+  ExpressionScope,
+} from '@formily/react'
+import { Input } from 'antd'
+
+const form = createForm()
+
+const Container = (props) => {
+  return (
+    <ExpressionScope value={{ $innerScope: 'this inner scope value' }}>
+      {props.children}
+    </ExpressionScope>
+  )
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    Container,
+    Input,
+  },
+})
+
+export default () => (
+  <FormProvider form={form}>
+    <SchemaField>
+      <SchemaField.Void x-component="Container">
+        <SchemaField.String
+          name="input"
+          x-component="Input"
+          x-value="{{$innerScope}}"
+        />
+      </SchemaField.Void>
+    </SchemaField>
+  </FormProvider>
+)
+```