feat: compile expression for array-table column title (#868)

* feat: compile expression for array-table column title

* feat: named export SchemaContext instead of default

* feat: rename SchemaContext to FormSchemaForm

Author: soulwu

packages/antd-components/src/array-table/index.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   ISchemaFieldComponentProps,
   SchemaField,
-  Schema
+  Schema,
+  complieExpression,
+  FormExpressionScopeContext
 } from '@formily/react-schema-renderer'
 import { toArr, isFn, isArr, FormPath } from '@formily/shared'
 import { ArrayList, DragListView } from '@formily/react-shared-components'
@@ -40,6 +42,7 @@ const DragHandler = styled.span`
 
 export const ArrayTable: any = styled(
   (props: ISchemaFieldComponentProps & { className: string }) => {
+    const expressionScope = useContext(FormExpressionScopeContext)
     const { value, schema, className, editable, path, mutators } = props
     const {
       renderAddition,
@@ -71,7 +74,7 @@ export const ArrayTable: any = styled(
           ...props.getExtendsProps()
         }
         return {
-          title: props.title,
+          title: complieExpression(props.title, expressionScope),
           ...itemProps,
           key,
           dataIndex: key,
@@ -178,10 +181,12 @@ export const ArrayTable: any = styled(
           )}
           <ArrayList.Addition>
             {({ children }) => {
-              return children && (
-                <div className="array-table-addition" onClick={onAdd}>
-                  {children}
-                </div>
+              return (
+                children && (
+                  <div className="array-table-addition" onClick={onAdd}>
+                    {children}
+                  </div>
+                )
               )
             }}
           </ArrayList.Addition>

packages/antd/src/index.tsx

@@ -14,6 +14,7 @@ import {
   FormProvider,
   JSONCondition,
   complieExpression,
+  FormExpressionScopeContext,
   FormEffectHooks,
   createEffectHook,
   setValidationLanguage,
@@ -79,6 +80,7 @@ export {
   JSONCondition,
   FormEffectHooks,
   complieExpression,
+  FormExpressionScopeContext,
   createEffectHook,
   setValidationLanguage,
   setValidationLocale,

packages/next-components/src/array-table/index.tsx

@@ -1,8 +1,10 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useContext } from 'react'
 import {
   ISchemaFieldComponentProps,
   SchemaField,
-  Schema
+  Schema,
+  FormExpressionScopeContext,
+  complieExpression
 } from '@formily/react-schema-renderer'
 import { toArr, isFn, isArr, FormPath } from '@formily/shared'
 import { ArrayList, DragListView } from '@formily/react-shared-components'
@@ -124,6 +126,7 @@ const DragableTable = styled(props => {
 
 export const ArrayTable = styled(
   (props: ISchemaFieldComponentProps & { className: string }) => {
+    const expressionScope = useContext(FormExpressionScopeContext)
     const { value, schema, className, editable, path, mutators } = props
     const {
       renderAddition,
@@ -158,7 +161,7 @@ export const ArrayTable = styled(
           <ArrayList.Item
             width={200}
             {...itemProps}
-            title={props.title}
+            title={complieExpression(props.title, expressionScope)}
             key={key}
             dataIndex={key}
             cell={(value: any, index: number) => {
@@ -255,10 +258,12 @@ export const ArrayTable = styled(
           )}
           <ArrayList.Addition>
             {({ children }) => {
-              return children && (
-                <div className="array-table-addition" onClick={onAdd}>
-                  {children}
-                </div>
+              return (
+                children && (
+                  <div className="array-table-addition" onClick={onAdd}>
+                    {children}
+                  </div>
+                )
               )
             }}
           </ArrayList.Addition>
@@ -270,7 +275,7 @@ export const ArrayTable = styled(
   display: inline-block;
   width: 100%;
   max-width: 100%;
-  overflow: scroll;
+  overflow: auto;
   table {
     margin-bottom: 0 !important;
     th,

packages/next/src/index.tsx

@@ -14,6 +14,7 @@ import {
   FormProvider,
   JSONCondition,
   complieExpression,
+  FormExpressionScopeContext,
   FormEffectHooks,
   createEffectHook,
   setValidationLanguage,
@@ -80,6 +81,7 @@ export {
   JSONCondition,
   FormEffectHooks,
   complieExpression,
+  FormExpressionScopeContext,
   createEffectHook,
   setValidationLanguage,
   setValidationLocale,

packages/react-schema-renderer/src/components/SchemaField.tsx

@@ -15,7 +15,8 @@ import {
   ISchemaVirtualFieldComponentProps
 } from '../types'
 import { Schema } from '../shared/schema'
-import SchemaContext, {
+import {
+  FormSchemaContext,
   FormComponentsContext,
   FormExpressionScopeContext
 } from '../shared/context'
@@ -45,7 +46,7 @@ export const SchemaField: React.FunctionComponent<ISchemaFieldProps> = (
   props: ISchemaFieldProps
 ) => {
   const path = FormPath.parse(props.path)
-  const formSchema = useContext(SchemaContext)
+  const formSchema = useContext(FormSchemaContext)
   const fieldSchema = new Schema(props.schema || formSchema.get(path))
   const formRegistry = useContext(FormComponentsContext)
   const expressionScope = useContext(FormExpressionScopeContext)

packages/react-schema-renderer/src/components/SchemaForm.tsx

@@ -3,7 +3,8 @@ import { ISchemaFormProps } from '../types'
 import { Form } from '@formily/react'
 import { SchemaField } from './SchemaField'
 import { useSchemaForm } from '../hooks/useSchemaForm'
-import SchemaContext, {
+import {
+  FormSchemaContext,
   FormComponentsContext,
   FormExpressionScopeContext
 } from '../shared/context'
@@ -25,7 +26,7 @@ export const SchemaForm: React.FC<ISchemaFormProps> = props => {
       value={{ fields, virtualFields, formComponent, formItemComponent }}
     >
       <FormExpressionScopeContext.Provider value={props.expressionScope}>
-        <SchemaContext.Provider value={schema}>
+        <FormSchemaContext.Provider value={schema}>
           <Form form={form}>
             {React.createElement(
               formComponent,
@@ -43,7 +44,7 @@ export const SchemaForm: React.FC<ISchemaFormProps> = props => {
               children
             )}
           </Form>
-        </SchemaContext.Provider>
+        </FormSchemaContext.Provider>
       </FormExpressionScopeContext.Provider>
     </FormComponentsContext.Provider>
   )

packages/react-schema-renderer/src/index.ts

@@ -32,6 +32,7 @@ import {
 export * from './components/SchemaField'
 export * from './components/SchemaForm'
 export * from './components/SchemaMarkup'
+export * from './shared/context'
 export * from './shared/connect'
 export * from './shared/registry'
 export * from './shared/schema'

packages/react-schema-renderer/src/shared/context.ts

@@ -6,4 +6,4 @@ export const FormComponentsContext = createContext<ISchemaFormRegistry>(null)
 
 export const FormExpressionScopeContext = createContext<any>({})
 
-export default createContext<Schema>(null)
+export const FormSchemaContext = createContext<Schema>(null)