feat(react): improve expression scopes (#2778)

packages/antd/src/array-base/index.tsx

@@ -10,7 +10,13 @@ import {
 import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
 import { ButtonProps } from 'antd/lib/button'
 import { ArrayField } from '@formily/core'
-import { useField, useFieldSchema, Schema, JSXComponent } from '@formily/react'
+import {
+  useField,
+  useFieldSchema,
+  Schema,
+  JSXComponent,
+  ExpressionScope,
+} from '@formily/react'
 import { isValid, clone, isBool } from '@formily/shared'
 import { SortableHandle } from 'react-sortable-hoc'
 import { usePrefixCls } from '../__builtins__'
@@ -102,7 +108,13 @@ export const ArrayBase: ComposedArrayBase = (props) => {
 }
 
 ArrayBase.Item = ({ children, ...props }) => {
-  return <ItemContext.Provider value={props}>{children}</ItemContext.Provider>
+  return (
+    <ItemContext.Provider value={props}>
+      <ExpressionScope value={{ $record: props.record, $index: props.index }}>
+        {children}
+      </ExpressionScope>
+    </ItemContext.Provider>
+  )
 }
 
 const SortHandle = SortableHandle((props: any) => {

packages/next/src/array-base/index.tsx

@@ -3,7 +3,13 @@ import { Button } from '@alifd/next'
 import { isValid, clone, isBool } from '@formily/shared'
 import { ButtonProps } from '@alifd/next/lib/button'
 import { ArrayField } from '@formily/core'
-import { useField, useFieldSchema, Schema, JSXComponent } from '@formily/react'
+import {
+  useField,
+  useFieldSchema,
+  Schema,
+  JSXComponent,
+  ExpressionScope,
+} from '@formily/react'
 import { SortableHandle } from 'react-sortable-hoc'
 import {
   usePrefixCls,
@@ -102,7 +108,13 @@ export const ArrayBase: ComposedArrayBase = (props) => {
 }
 
 ArrayBase.Item = ({ children, ...props }) => {
-  return <ItemContext.Provider value={props}>{children}</ItemContext.Provider>
+  return (
+    <ItemContext.Provider value={props}>
+      <ExpressionScope value={{ $record: props.record, $index: props.index }}>
+        {children}
+      </ExpressionScope>
+    </ItemContext.Provider>
+  )
 }
 
 const SortHandle = SortableHandle((props: any) => {

packages/react/docs/api/components/ExpressionScope.zh-CN.md

@@ -0,0 +1,62 @@
+---
+order: 8
+---
+
+# ExpressionScope
+
+## 描述
+
+用于自定义组件内部给 json-schema 表达式传递局部作用域
+
+## 签名
+
+```ts
+interface IExpressionScopeProps {
+  value?: any
+}
+type ExpressionScope = React.FC<IExpressionScopeProps>
+```
+
+## 用例
+
+```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>
+)
+```

packages/react/src/__tests__/expression.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { createForm } from '@formily/core'
+import { FormProvider, ExpressionScope, createSchemaField } from '..'
+
+test('expression scope', async () => {
+  const Container = (props) => {
+    return (
+      <ExpressionScope value={{ $innerScope: 'this is inner scope value' }}>
+        {props.children}
+      </ExpressionScope>
+    )
+  }
+  const Input = (props) => <div data-testid="test-input">{props.value}</div>
+  const SchemaField = createSchemaField({
+    components: {
+      Container,
+      Input,
+    },
+  })
+  const form = createForm()
+  const { getByTestId } = render(
+    <FormProvider form={form}>
+      <SchemaField scope={{ $outerScope: 'this is outer scope value' }}>
+        <SchemaField.Void x-component="Container">
+          <SchemaField.String
+            name="input"
+            x-component="Input"
+            x-value="{{$innerScope + ' ' + $outerScope}}"
+          />
+        </SchemaField.Void>
+      </SchemaField>
+    </FormProvider>
+  )
+
+  expect(getByTestId('test-input').textContent).toBe(
+    'this is inner scope value this is outer scope value'
+  )
+})

packages/react/src/__tests__/field.spec.tsx

@@ -237,51 +237,57 @@ test('connect', async () => {
 })
 
 test('fields unmount and validate', async () => {
-  const fn = jest.fn();
+  const fn = jest.fn()
   const form = createForm({
     initialValues: {
       parent: {
         type: 'mounted',
-      }
+      },
     },
     effects: () => {
       onFieldUnmount('parent.child', () => {
         fn()
       })
-    }
+    },
   })
   const Parent = observer(() => {
-    const field = useField()
+    const field = useField<FieldType>()
     if (field.value.type === 'mounted') {
-      return <Field name='child' component={[Input]} validator={{required: true}} />
+      return (
+        <Field
+          name="child"
+          component={[Input]}
+          validator={{ required: true }}
+        />
+      )
     }
-    return <div data-testid='unmounted'></div>
+    return <div data-testid="unmounted"></div>
   })
   act(async () => {
     const MyComponent = () => {
       return (
         <FormProvider form={form}>
-          <Field name='parent' component={[Parent]} />
+          <Field name="parent" component={[Parent]} />
         </FormProvider>
       )
     }
     render(<MyComponent />)
     try {
       await form.validate()
     } catch {}
-  
+
     expect(form.invalid).toBeTruthy()
-  
+
     form.query('parent').take((field) => {
       field.setState((state) => {
         state.value.type = 'unmounted'
       })
     })
-  
+
     await waitFor(() => {
       expect(fn.mock.calls.length).toBe(1)
-    });
+    })
     await form.validate()
     expect(form.invalid).toBeFalsy()
   })
-})
+})

packages/react/src/components/ExpressionScope.tsx

@@ -0,0 +1,12 @@
+import React, { useContext } from 'react'
+import { SchemaExpressionScopeContext } from '../shared'
+import { IExpressionScopeProps } from '../types'
+
+export const ExpressionScope: React.FC<IExpressionScopeProps> = (props) => {
+  const scope = useContext(SchemaExpressionScopeContext)
+  return (
+    <SchemaExpressionScopeContext.Provider value={{ ...scope, ...props.value }}>
+      {props.children}
+    </SchemaExpressionScopeContext.Provider>
+  )
+}

packages/react/src/components/index.ts

@@ -4,5 +4,6 @@ export * from './ArrayField'
 export * from './ObjectField'
 export * from './VoidField'
 export * from './RecursionField'
+export * from './ExpressionScope'
 export * from './SchemaField'
 export * from './Field'

packages/react/src/types.ts

@@ -173,3 +173,7 @@ export type ISchemaTypeFieldProps<
   Decorator extends ReactComponentPath<Components>,
   Component extends ReactComponentPath<Components>
 > = ISchemaMarkupFieldProps<Components, Decorator, Component>
+
+export interface IExpressionScopeProps {
+  value?: any
+}