feat: 表单布局支持配置外边距

对象容器默认下边距20px
jd-opensource · Jan 20, 2022 · 2016881 · 2016881
1 parent 4564f2f
commit 2016881
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 8 deletions.
diff --git a/packages/drip-form/src/render/index.tsx b/packages/drip-form/src/render/index.tsx
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-07-30 16:35:48
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-14 14:49:36
+ * @Last Modified time: 2022-01-19 17:33:30
  */
 import React from 'react'
 import type { RenderFnProps } from './type'
@@ -162,7 +162,9 @@ const Render = ({
       : true
     // 布局样式
     const containerStyle = Object.assign(
-      {},
+      type === 'object' && properties[item]?.mode === 'collapse'
+        ? { marginBottom: 20 }
+        : {},
       isRoot ? globalContainerStyle : {},
       properties[item]?.containerStyle || {}
     )

diff --git a/packages/generator/src/components/RightSideBar/Check/index.tsx b/packages/generator/src/components/RightSideBar/Check/index.tsx
@@ -4,7 +4,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-16 11:32:22
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-16 13:44:17
+ * @Last Modified time: 2022-01-19 19:08:33
  */
 import React, { useMemo, memo, useCallback } from 'react'
 import {
@@ -201,7 +201,13 @@ const CheckConfig = (): JSX.Element => {
               type: 'object',
               title: '通用校验',
               fieldKey: 'common',
-              ui: { type: 'object', mode: 'collapse' },
+              ui: {
+                type: 'object',
+                mode: 'collapse',
+                containerStyle: {
+                  marginBottom: 0,
+                },
+              },
               schema: CommonSchema.concat(curTypeSchema),
             },
             ...(bussinessSchema.length > 0
@@ -210,7 +216,13 @@ const CheckConfig = (): JSX.Element => {
                     type: 'object',
                     title: '业务校验',
                     fieldKey: 'business',
-                    ui: { type: 'object', mode: 'collapse' },
+                    ui: {
+                      type: 'object',
+                      mode: 'collapse',
+                      containerStyle: {
+                        marginBottom: 0,
+                      },
+                    },
                     schema: bussinessSchema,
                   },
                 ]
@@ -222,6 +234,9 @@ const CheckConfig = (): JSX.Element => {
               ui: {
                 type: 'object',
                 mode: 'collapse',
+                containerStyle: {
+                  marginBottom: 0,
+                },
               },
               schema: [
                 {

diff --git a/packages/generator/src/fields/common/checkConfig/String/index.ts b/packages/generator/src/fields/common/checkConfig/String/index.ts
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-16 11:31:04
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-14 20:34:06
+ * @Last Modified time: 2022-01-19 00:10:00
  */
 // dataSchema2019-09支持的字符串校验关键字
 const stringJsonSchema = {
@@ -222,6 +222,9 @@ const dripFormPluginKeywords = {
     ui: {
       type: 'object',
       mode: 'collapse',
+      containerStyle: {
+        marginBottom: 0,
+      },
       description: {
         type: 'icon',
         title: '使用delimiter指定的字符分隔，最少多少，最多多少',

diff --git a/packages/generator/src/fields/common/propertyConfig/description.schema.ts b/packages/generator/src/fields/common/propertyConfig/description.schema.ts
@@ -8,6 +8,9 @@ const unitedSchema = {
   ui: {
     type: 'object',
     mode: 'collapse',
+    containerStyle: {
+      marginBottom: 0,
+    },
   },
   schema: [
     {

diff --git a/packages/generator/src/fields/common/propertyConfig/layout.schema.ts b/packages/generator/src/fields/common/propertyConfig/layout.schema.ts
@@ -7,6 +7,9 @@ const unitedSchema = {
   ui: {
     type: 'object',
     mode: 'collapse',
+    containerStyle: {
+      marginBottom: 0,
+    },
   },
   title: '布局',
   schema: [
@@ -26,6 +29,15 @@ const unitedSchema = {
         },
       },
     },
+    {
+      fieldKey: 'margin',
+      type: 'string',
+      title: '组件外边距',
+      ui: {
+        type: 'text',
+        placeholder: '形如0 30px 20px 0 | 0 30px',
+      },
+    },
   ],
 }
 

diff --git a/packages/generator/src/fields/common/propertyConfig/title.schema.ts b/packages/generator/src/fields/common/propertyConfig/title.schema.ts
@@ -7,6 +7,9 @@ const unitedSchema = {
   ui: {
     type: 'object',
     mode: 'collapse',
+    containerStyle: {
+      marginBottom: 0,
+    },
   },
   title: '标题',
   schema: [

diff --git a/packages/generator/src/fields/container/array.field.ts b/packages/generator/src/fields/container/array.field.ts
@@ -109,6 +109,9 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          containerStyle: {
+            marginBottom: 0,
+          },
           style: {
             paddingBottom: '20px',
           },
@@ -135,6 +138,9 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          containerStyle: {
+            marginBottom: 0,
+          },
           vcontrol: 'return props.formData.ui.hasConfirm',
         },
         schema: [

diff --git a/packages/generator/src/fields/container/root.field.ts b/packages/generator/src/fields/container/root.field.ts
@@ -98,6 +98,9 @@ const unitedSchema = [
     ui: {
       type: 'object',
       mode: 'collapse',
+      containerStyle: {
+        marginBottom: 0,
+      },
     },
     schema: [
       {
@@ -216,6 +219,9 @@ const unitedSchema = [
     ui: {
       mode: 'collapse',
       type: 'object',
+      containerStyle: {
+        marginBottom: 0,
+      },
     },
     schema: [
       {
@@ -237,6 +243,15 @@ const unitedSchema = [
           },
         },
       },
+      {
+        fieldKey: 'margin',
+        type: 'string',
+        title: '组件外边距',
+        ui: {
+          type: 'text',
+          placeholder: '形如0 30px 20px 0 | 0 30px',
+        },
+      },
     ],
   },
   {
@@ -246,6 +261,9 @@ const unitedSchema = [
     ui: {
       type: 'object',
       mode: 'collapse',
+      containerStyle: {
+        marginBottom: 0,
+      },
     },
     schema: [
       {

diff --git a/packages/generator/src/fields/formItem/upload.field.ts b/packages/generator/src/fields/formItem/upload.field.ts
@@ -136,6 +136,9 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          containerStyle: {
+            marginBottom: 0,
+          },
         },
         schema: [
           {
@@ -229,6 +232,9 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          containerStyle: {
+            marginBottom: 0,
+          },
         },
         schema: [
           {

diff --git a/packages/generator/src/store/rightSidebar/index.ts b/packages/generator/src/store/rightSidebar/index.ts
@@ -43,6 +43,9 @@ export const allPropertyConfigSchemaSelector = selector<
                 ui: {
                   type: 'object',
                   mode: 'collapse',
+                  containerStyle: {
+                    marginBottom: 0,
+                  },
                 },
                 title: '样式',
                 schema:

diff --git a/packages/hooks/src/useContainerStyle.ts b/packages/hooks/src/useContainerStyle.ts
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-25 11:06:41
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-11-05 17:45:17
+ * @Last Modified time: 2022-01-18 23:40:09
  */
 import { useMemo } from 'react'
 import type { ContainerStyle } from '@jdfed/utils'
@@ -13,7 +13,10 @@ const useContainerStyle = (
   containerStyle: ContainerStyle
 ): ContainerStyle => {
   const newContainerStyle = useMemo(() => {
-    return formMode === 'edit' ? containerStyle : {}
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { width, ...props } = containerStyle || {}
+    // generator模式的宽度在@jdfed/form-generator中使用containerHoc控制
+    return formMode === 'edit' ? containerStyle : props
   }, [containerStyle, formMode])
 
   return newContainerStyle