From 48fbcf0fa7baf1a23f682b493e676f3f19cfd597 Mon Sep 17 00:00:00 2001 From: soulwu Date: Fri, 22 May 2020 19:54:00 +0800 Subject: [PATCH] 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 --- .../antd-components/src/array-table/index.tsx | 19 ++++++++++------- packages/antd/src/index.tsx | 2 ++ .../next-components/src/array-table/index.tsx | 21 ++++++++++++------- packages/next/src/index.tsx | 2 ++ .../src/components/SchemaField.tsx | 5 +++-- .../src/components/SchemaForm.tsx | 7 ++++--- packages/react-schema-renderer/src/index.ts | 1 + .../src/shared/context.ts | 2 +- 8 files changed, 38 insertions(+), 21 deletions(-) diff --git a/packages/antd-components/src/array-table/index.tsx b/packages/antd-components/src/array-table/index.tsx index 8936af8e909..fc0f73bf7fc 100644 --- a/packages/antd-components/src/array-table/index.tsx +++ b/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( )} {({ children }) => { - return children && ( -
- {children} -
+ return ( + children && ( +
+ {children} +
+ ) ) }} diff --git a/packages/antd/src/index.tsx b/packages/antd/src/index.tsx index 864bb5cf7ef..28596ed9d85 100644 --- a/packages/antd/src/index.tsx +++ b/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, diff --git a/packages/next-components/src/array-table/index.tsx b/packages/next-components/src/array-table/index.tsx index cd9ae8fd160..331a7515967 100644 --- a/packages/next-components/src/array-table/index.tsx +++ b/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( { @@ -255,10 +258,12 @@ export const ArrayTable = styled( )} {({ children }) => { - return children && ( -
- {children} -
+ return ( + children && ( +
+ {children} +
+ ) ) }} @@ -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, diff --git a/packages/next/src/index.tsx b/packages/next/src/index.tsx index 7fe2b3f43d9..5f93a15ccfd 100644 --- a/packages/next/src/index.tsx +++ b/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, diff --git a/packages/react-schema-renderer/src/components/SchemaField.tsx b/packages/react-schema-renderer/src/components/SchemaField.tsx index f16e4291959..c53b9f891a3 100644 --- a/packages/react-schema-renderer/src/components/SchemaField.tsx +++ b/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 = ( 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) diff --git a/packages/react-schema-renderer/src/components/SchemaForm.tsx b/packages/react-schema-renderer/src/components/SchemaForm.tsx index 9f2e803029e..65800e6e227 100644 --- a/packages/react-schema-renderer/src/components/SchemaForm.tsx +++ b/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 = props => { value={{ fields, virtualFields, formComponent, formItemComponent }} > - +
{React.createElement( formComponent, @@ -43,7 +44,7 @@ export const SchemaForm: React.FC = props => { children )} -
+ ) diff --git a/packages/react-schema-renderer/src/index.ts b/packages/react-schema-renderer/src/index.ts index bc03447201b..86b40f1405a 100644 --- a/packages/react-schema-renderer/src/index.ts +++ b/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' diff --git a/packages/react-schema-renderer/src/shared/context.ts b/packages/react-schema-renderer/src/shared/context.ts index 254acd904bd..0efcac29424 100644 --- a/packages/react-schema-renderer/src/shared/context.ts +++ b/packages/react-schema-renderer/src/shared/context.ts @@ -6,4 +6,4 @@ export const FormComponentsContext = createContext(null) export const FormExpressionScopeContext = createContext({}) -export default createContext(null) +export const FormSchemaContext = createContext(null)