feat: support form layout (#8)

JackWang032 · jialan · web-flow · commit 0ade79a9b0e5 · 2023-11-30T11:54:27.000+08:00
* 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 &lt;jialan@dtstack.com&gt;
diff --git 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
@@ -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
@@ -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
@@ -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<any>;
 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<FormItemWrapperProps> = (props) => {
     const {
         formItemMeta,
+        defaultSpan,
         getWidgets,
         publishServiceEvent,
         valueGetter,
@@ -50,6 +52,7 @@ const FormItemWrapper: React.FC<FormItemWrapperProps> = (props) => {
         trigger,
         valueDerived,
         servicesTriggers,
+        colProps,
         destroy,
         required,
         noStyle,
@@ -164,29 +167,38 @@ const FormItemWrapper: React.FC<FormItemWrapperProps> = (props) => {
                 onFocus && (serviceProps.onFocus = onFocus);
                 onSearch && (serviceProps.onSearch = onSearch);
                 return (
-                    <FormItem
-                        name={fieldName}
-                        initialValue={initialValue}
-                        tooltip={tooltip}
-                        label={valueGetter(label)}
-                        rules={valueGetter(rules)}
-                        hidden={valueGetter(hidden)}
-                        colon={colon}
-                        extra={extra}
-                        labelAlign={labelAlign}
-                        trigger={trigger}
-                        valuePropName={valuePropName}
-                        {...(required === undefined
-                            ? {}
-                            : { required: valueGetter(required) })}
-                        noStyle={noStyle}
-                        validateFirst
+                    <Col
+                        {...colProps}
+                        span={
+                            valueGetter(hidden)
+                                ? 0
+                                : colProps?.span ?? defaultSpan
+                        }
                     >
-                        <Widget
-                            {...widgetPropsGetter(widgetProps)}
-                            {...serviceProps}
-                        />
-                    </FormItem>
+                        <FormItem
+                            name={fieldName}
+                            initialValue={initialValue}
+                            tooltip={tooltip}
+                            label={valueGetter(label)}
+                            rules={valueGetter(rules)}
+                            hidden={valueGetter(hidden)}
+                            colon={colon}
+                            extra={extra}
+                            labelAlign={labelAlign}
+                            trigger={trigger}
+                            valuePropName={valuePropName}
+                            {...(required === undefined
+                                ? {}
+                                : { required: valueGetter(required) })}
+                            noStyle={noStyle}
+                            validateFirst
+                        >
+                            <Widget
+                                {...widgetPropsGetter(widgetProps)}
+                                {...serviceProps}
+                            />
+                        </FormItem>
+                    </Col>
                 );
             }}
         </FormItem>
diff --git 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 (
-                        <FormItemWrapper
-                            debounceSearch={debounceSearch}
-                            valueGetter={valueGetter}
-                            getWidgets={getWidgets}
-                            key={formItemMeta.fieldName}
-                            formItemMeta={formItemMeta}
-                            onDerivedValueChange={onDerivedValueChange}
-                            publishServiceEvent={
-                                pubSubCenterRef.current.publishServiceEvent
-                            }
-                        />
-                    );
-                })}
+                <Row style={{ width: '100%' }} {...rowProps}>
+                    {formItemsMeta.map((formItemMeta) => {
+                        return (
+                            <FormItemWrapper
+                                debounceSearch={debounceSearch}
+                                valueGetter={valueGetter}
+                                getWidgets={getWidgets}
+                                defaultSpan={defaultColSpan}
+                                key={formItemMeta.fieldName}
+                                formItemMeta={formItemMeta}
+                                onDerivedValueChange={onDerivedValueChange}
+                                publishServiceEvent={
+                                    pubSubCenterRef.current.publishServiceEvent
+                                }
+                            />
+                        );
+                    })}
+                </Row>
                 {typeof footer === 'function'
                     ? footer?.(form, extraDataRef.current)
                     : footer}
diff --git 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
@@ -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
@@ -43,6 +43,7 @@ const FormSample: React.FC<IProps> = (props) => {
             ref={formRef}
             {...formLayout}
             docsMap={docsMap}
+            rowProps={{ gutter: [16, 0] }}
             getWidgets={getWidgets}
             ruleMap={ruleMap}
             formServicePool={formServicePool}
