From 0ade79a9b0e5c2671f4f4968cb63abf50c41bc95 Mon Sep 17 00:00:00 2001 From: JackWang032 <64318393+JackWang032@users.noreply.github.com> Date: Wed, 29 Nov 2023 21:54:27 -0600 Subject: [PATCH] feat: support form layout (#8) * feat(core): support form item layout feature via row and col * docs(core): add docs for formItemLayout * feat(playground): add span in editor field completion * feat(core): support all row and col props fo form layout * docs(core): update docs for row and col props * feat(playground): update colProps --------- Co-authored-by: jialan --- docs/FormRenderer.md | 2 + docs/FormService.md | 4 +- docs/JsonConfig.md | 3 +- .../src/components/formItemWrapper/index.tsx | 58 +++++++++++-------- .../src/components/formRenderer/index.tsx | 40 ++++++++----- packages/core/src/type.ts | 4 +- .../src/components/editor/languages.ts | 5 ++ .../src/components/formSample/index.tsx | 1 + 8 files changed, 74 insertions(+), 43 deletions(-) diff --git a/docs/FormRenderer.md b/docs/FormRenderer.md index e5e8cc3..55e7358 100644 --- a/docs/FormRenderer.md +++ b/docs/FormRenderer.md @@ -8,6 +8,8 @@ - `jsonConfig` 解析后的表单 json 配置，详情看[这里](./JsonConfig.md) - `formServicePool` FormService 的集合，详情看[这里](./FormService.md) +- `rowProps` 用于表单的排版布局，与 [ant-design#Row](https://ant.design/components/grid-cn#row) 一致 +- `defaultColSpan` 用于表单项的默认占用栅格大小, 默认为`24` - `ruleMap` 自定义的表单校验器的集合 - `docsMap` 自定义的 tooltip 的集合 - `getWidgets` 接收表单自定义组件的名称，返回表单自定义组件，详情看[这里](./Widget.md) diff --git a/docs/FormService.md b/docs/FormService.md index 88a4191..f4c8e79 100644 --- a/docs/FormService.md +++ b/docs/FormService.md @@ -9,7 +9,7 @@ FormService 的基本格式如下所示 ```js -function service1(formData, extraData, trigger, args) { +function service1({ formData, extraData, trigger, args }) { return new Promise((resolve) => { resolve(data); }); @@ -116,4 +116,4 @@ FormRenderer 内部维护了一个存储外部数据的容器-`extraData` ，`ex - `onFocus` 当前表单项组件触发 focus 事件时 - `onSearch` 当前表单项组件触发 search 事件时 -除了 `onMount` 外，当 FormService 被触发时 trigger 对应事件的回调函数的参数，会被作为 FormService 的第四个参数（`args`）传给 FormService +除了 `onMount` 外，当 FormService 被触发时 trigger 对应事件的回调函数的参数，会被作为 FormService 参数（`args`）传给 FormService diff --git a/docs/JsonConfig.md b/docs/JsonConfig.md index 8b1eff3..5f3a17a 100644 --- a/docs/JsonConfig.md +++ b/docs/JsonConfig.md @@ -46,4 +46,5 @@ JsonConfig 用于描述表单的渲染，它的一级结构如下所示 - `labelAlign` 同 ant-design FormItem 的 labelAlign - `colon` 同 ant-design FormItem 的 colon - `extra` 同 ant-design FormItem 的 extra -- `noStyle` 同 ant-design FormItem 的 noStyle +- `noStyle` 同 ant-design FormItem 的 noStyle, +- `colProps` 用于表单项排版布局，同 ant-design Col [ant-design#Col](https://ant.design/components/grid-cn#col) diff --git a/packages/core/src/components/formItemWrapper/index.tsx b/packages/core/src/components/formItemWrapper/index.tsx index 89eb9f5..57134d2 100644 --- a/packages/core/src/components/formItemWrapper/index.tsx +++ b/packages/core/src/components/formItemWrapper/index.tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect, useMemo } from 'react'; -import { Form, FormInstance } from 'antd'; +import { Form, FormInstance, Col } from 'antd'; import { debounce } from '../helpers'; import ExtraContext from '../../extraDataContext'; import internalWidgets from '../internalWidgets'; @@ -18,6 +18,7 @@ const { Item: FormItem, useFormInstance } = Form; export type GetWidgets = (widget: string) => React.ComponentType; export interface FormItemWrapperProps { formItemMeta: FieldItemMetaType; + defaultSpan?: number; getWidgets: GetWidgets; publishServiceEvent: PubSubCenter['publishServiceEvent']; onDerivedValueChange: (fieldName: string, value: any) => any; @@ -28,6 +29,7 @@ export interface FormItemWrapperProps { const FormItemWrapper: React.FC = (props) => { const { formItemMeta, + defaultSpan, getWidgets, publishServiceEvent, valueGetter, @@ -50,6 +52,7 @@ const FormItemWrapper: React.FC = (props) => { trigger, valueDerived, servicesTriggers, + colProps, destroy, required, noStyle, @@ -164,29 +167,38 @@ const FormItemWrapper: React.FC = (props) => { onFocus && (serviceProps.onFocus = onFocus); onSearch && (serviceProps.onSearch = onSearch); return ( - + + ); }} diff --git a/packages/core/src/components/formRenderer/index.tsx b/packages/core/src/components/formRenderer/index.tsx index e462f3b..eedddac 100644 --- a/packages/core/src/components/formRenderer/index.tsx +++ b/packages/core/src/components/formRenderer/index.tsx @@ -5,7 +5,8 @@ import React, { useImperativeHandle, useLayoutEffect, } from 'react'; -import { Form } from 'antd'; +import { Form, Row } from 'antd'; +import type { RowProps } from 'antd'; import type { FormInstance, FormProps } from 'antd/es/form/Form'; import type { FormServicePoolType, @@ -27,6 +28,8 @@ const { useForm } = Form; export interface FormRendererProps extends FormProps { jsonConfig: JsonConfigType; formServicePool?: FormServicePoolType; + rowProps?: RowProps; + defaultColSpan?: number; ruleMap?: FormItemRuleMapType; docsMap?: DocsMapType; getWidgets?: GetWidgets; @@ -53,6 +56,8 @@ const FormRenderer: React.ForwardRefRenderFunction< const { jsonConfig, formServicePool, + rowProps, + defaultColSpan = 24, defaultExtraData, ruleMap, getWidgets, @@ -198,21 +203,24 @@ const FormRenderer: React.ForwardRefRenderFunction< {typeof header === 'function' ? header?.(form, extraDataRef.current) : header} - {formItemsMeta.map((formItemMeta) => { - return ( - - ); - })} + + {formItemsMeta.map((formItemMeta) => { + return ( + + ); + })} + {typeof footer === 'function' ? footer?.(form, extraDataRef.current) : footer} diff --git a/packages/core/src/type.ts b/packages/core/src/type.ts index 5643718..4a4c8ab 100644 --- a/packages/core/src/type.ts +++ b/packages/core/src/type.ts @@ -1,5 +1,5 @@ import React from 'react'; -import type { FormItemProps } from 'antd'; +import type { ColProps, FormItemProps } from 'antd'; import type { TransformedFnType } from './expressionParser/fnExpressionTransformer'; /** @@ -161,6 +161,7 @@ export interface JsonConfigFieldType { valueDerived?: FunctionExprType; required?: FunctionExprType | boolean; noStyle?: boolean; + colProps?: ColProps; } /** @@ -200,4 +201,5 @@ export interface FieldItemMetaType { valueDerived?: TransformedFnType; servicesTriggers?: ServiceTriggerKind[]; noStyle?: boolean; + colProps?: ColProps; } diff --git a/packages/playground/src/components/editor/languages.ts b/packages/playground/src/components/editor/languages.ts index d3e27d8..e7e6b17 100644 --- a/packages/playground/src/components/editor/languages.ts +++ b/packages/playground/src/components/editor/languages.ts @@ -90,6 +90,11 @@ export const fieldCompletionsCreator: ( label: 'valueDerived', detail: '值的派生', }, + { + label: 'colProps', + detail: '表单项栅格布局属性', + insertText: `"${'colProps'}": { "span": 24$1 },`, + }, ].map((i) => ({ ...i, range: range, diff --git a/packages/playground/src/components/formSample/index.tsx b/packages/playground/src/components/formSample/index.tsx index 97e67ac..7acd0bb 100644 --- a/packages/playground/src/components/formSample/index.tsx +++ b/packages/playground/src/components/formSample/index.tsx @@ -43,6 +43,7 @@ const FormSample: React.FC = (props) => { ref={formRef} {...formLayout} docsMap={docsMap} + rowProps={{ gutter: [16, 0] }} getWidgets={getWidgets} ruleMap={ruleMap} formServicePool={formServicePool}