feat: containerStyle configuration add padding prop

jd-opensource · Mar 10, 2022 · 27cefed · 27cefed
1 parent fcbbf9d
commit 27cefed
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 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-03-02 16:35:49
+ * @Last Modified time: 2022-03-10 18:22:15
  */
 import React from 'react'
 import type { RenderFnProps } from './type'
@@ -36,7 +36,7 @@ const Render = ({
     theme = 'antd',
     title: globalTitleUi = {},
     formMode = 'edit',
-    containerStyle: globalContainerStyle = { width: '100%' },
+    containerStyle: globalContainerStyle,
   } = uiSchema
   // 当前父级UiSchema
   const currentUiSchema = parentUiSchemaKey.reduce((prev, cur) => {
@@ -160,7 +160,7 @@ const Render = ({
       type === 'object' && properties[item]?.mode === 'collapse'
         ? { marginBottom: 20 }
         : {},
-      isRoot ? globalContainerStyle : {},
+      isRoot ? { width: '100%', ...globalContainerStyle } : {},
       properties[item]?.containerStyle || {}
     )
     // 当前Field所接收的ui props

diff --git a/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx b/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx
@@ -140,7 +140,7 @@ const PropertyConfig = () => {
    * 监听配置区修改，实时更新到渲染区
    */
   const onChangeSchema = useCallback(
-    ({ changeKey, get }) => {
+    ({ changeKey, get, set }) => {
       // 当chengKey为空字符串时，认为为ajv校验或初始化执行的操作，不做实时更新
       if (changeKey === '') return
       // 当前修改的字段处理为为可映射到渲染区schema的路径
@@ -189,6 +189,10 @@ const PropertyConfig = () => {
         key = 'ui.options'
       }
       if (changeKey === 'containerStyle.width') {
+        // 更改全局布局宽度时，如果选用多列并且未设置padding，则自动设置
+        if (type === 'root' && data !== 100 && !get().data.padding) {
+          set('containerStyle.padding', 'data', '0 10px 0 0')
+        }
         // TODO @jiangxiaowei 后续支持px、vw
         data = data + '%'
       }

diff --git a/packages/generator/src/fields/common/propertyConfig/layout.schema.ts b/packages/generator/src/fields/common/propertyConfig/layout.schema.ts
@@ -38,6 +38,15 @@ const unitedSchema = {
         placeholder: '形如0 30px 20px 0 | 0 30px',
       },
     },
+    {
+      fieldKey: 'padding',
+      type: 'string',
+      title: '组件内边距',
+      ui: {
+        type: 'text',
+        placeholder: '形如0 10px 0 10px | 0 10px',
+      },
+    },
   ],
 }
 

diff --git a/packages/generator/src/fields/container/root.field.ts b/packages/generator/src/fields/container/root.field.ts
@@ -252,6 +252,15 @@ const unitedSchema = [
           placeholder: '形如0 30px 20px 0 | 0 30px',
         },
       },
+      {
+        fieldKey: 'padding',
+        type: 'string',
+        title: '组件内边距',
+        ui: {
+          type: 'text',
+          placeholder: '形如0 10px 0 10px | 0 10px',
+        },
+      },
     ],
   },
   {

diff --git a/packages/utils/src/schemaHandle/types.ts b/packages/utils/src/schemaHandle/types.ts
@@ -20,6 +20,12 @@ export type ContainerStyle = Partial<{
   marginLeft: number | string
   // 容器margin
   margin: string
+  // 容器padding
+  padding: string
+  paddingTop: number | string
+  paddingBottom: number | string
+  paddingRigth: number | string
+  paddingLeft: number | string
 }> | null
 export type Description = {
   type: 'icon' | 'text'