fix: 对象容器样式调整 & 数组｜对象容器schema支持style参数 (#116)

* fix: 对象容器样式调整 & 数组｜对象容器schema支持style参数 * fix: 数组容器sidebar属性配置内下边距展示调整
jd-opensource · Jan 10, 2022 · 45f0f39 · 45f0f39
1 parent 347b31a
commit 45f0f39
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 6 deletions.
diff --git a/packages/drip-form/src/container/ArrayContainer/index.styl b/packages/drip-form/src/container/ArrayContainer/index.styl
@@ -43,6 +43,7 @@
 .array-field--container
 	display flex
 	justify-content space-between
+	margin-bottom 20px
 
 	&.title
 		&-top

diff --git a/packages/drip-form/src/container/ArrayContainer/index.tsx b/packages/drip-form/src/container/ArrayContainer/index.tsx
@@ -5,7 +5,7 @@
  * @Last Modified by: jiangxiaowei
  * @Last Modified time: 2022-01-07 16:54:47
  */
-import React, { useMemo, useState, useEffect, memo } from 'react'
+import React, { useMemo, useState, useEffect, memo, CSSProperties } from 'react'
 import cx from 'classnames'
 import { typeCheck, number2Chinese } from '@jdfed/utils'
 import { useArray, useContainer, useContainerStyle } from '@jdfed/hooks'
@@ -135,6 +135,7 @@ const ArrayContainer: FC<Props & RenderFnProps & ArrayProps> = ({
           }),
           display: 'flex',
           margin: titleMargin.style,
+          lineHeight: '32px',
         }}
       >
         {titleUi?.requiredIcon &&
@@ -177,6 +178,7 @@ const ArrayContainer: FC<Props & RenderFnProps & ArrayProps> = ({
         titlePlacementCls(titlePlacement)
       )}
       style={{
+        ...(uiProp?.style as CSSProperties),
         ...(newContainerStyle?.width && { width: newContainerStyle.width }),
       }}
     >
@@ -192,6 +194,7 @@ const ArrayContainer: FC<Props & RenderFnProps & ArrayProps> = ({
               : titleUi?.width || 90
           }px)`,
           minWidth: '200px',
+          flexShrink: 0,
         }}
       >
         {(formMode === 'generator' || isTuple ? [''] : fieldData).map(

diff --git a/packages/drip-form/src/container/ObjectContainer/index.styl b/packages/drip-form/src/container/ObjectContainer/index.styl
@@ -1,4 +1,7 @@
 .object-container
+	.object-container__collapse-custom
+		margin-bottom 20px
+
 	&__title
 		&--common
 			margin-bottom 20px
@@ -18,4 +21,4 @@
 			flex-direction column-reverse
 
 		&-right
-			flex-direction row-reverse
+			flex-direction row-reverse
diff --git a/packages/drip-form/src/container/ObjectContainer/index.tsx b/packages/drip-form/src/container/ObjectContainer/index.tsx
@@ -5,7 +5,7 @@
  * @Last Modified by: jiangxiaowei
  * @Last Modified time: 2021-12-24 14:53:47
  */
-import React, { useMemo, memo, useState, useEffect } from 'react'
+import React, { useMemo, memo, useState, useEffect, CSSProperties } from 'react'
 import { useContainer, useContainerStyle } from '@jdfed/hooks'
 import cx from 'classnames'
 import renderCoreFn from '../../render'
@@ -115,11 +115,15 @@ const ObjectContainer: FC<Props & RenderFnProps & ObjectContainerProps> = ({
     <div
       className="object-container"
       style={{
+        ...(uiProp?.style as CSSProperties),
         ...(newContainerStyle?.width && { width: newContainerStyle.width }),
       }}
     >
       {isCollapse ? (
-        <Collapse defaultActiveKey={defaultActiveKey}>
+        <Collapse
+          defaultActiveKey={defaultActiveKey}
+          className={cx('object-container__collapse-custom')}
+        >
           <Panel
             header={titleMemo}
             key={fieldKey}

diff --git a/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx b/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx
@@ -301,7 +301,7 @@ const PropertyConfig = () => {
 
   return (
     <Fragment>
-      <div className={styles.panelConfig}>
+      <div className={`${styles.panelConfig} panelConfigGlobal`}>
         {type !== 'root' && (
           <>
             <div className={cx(styles.propertyConfig)}>

diff --git a/packages/generator/src/components/RightSideBar/index.module.css b/packages/generator/src/components/RightSideBar/index.module.css
@@ -1,3 +1,16 @@
+:global {
+  .panelConfigGlobal {
+    .object-container {
+      .object-container__collapse-custom {
+        margin-bottom: 0
+      }
+    }
+    .array-field--container {
+      margin-bottom: 0
+    }
+  }
+}
+
 .container {
   @apply w-1/4 p-3 h-full;
   min-width: 350px;

diff --git a/packages/generator/src/fields/container/array.field.ts b/packages/generator/src/fields/container/array.field.ts
@@ -91,6 +91,9 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          style: {
+            paddingBottom: '20px',
+          },
           vcontrol: 'return props.formData.ui.showNo == true',
         },
         default: {

diff --git a/packages/generator/src/fields/formItem/checkbox.field.ts b/packages/generator/src/fields/formItem/checkbox.field.ts
@@ -29,7 +29,12 @@ const config: Field = {
         type: 'array',
         title: '选项',
         default: [],
-        ui: { type: 'array' },
+        ui: {
+          type: 'array',
+          style: {
+            marginBottom: '20px',
+          },
+        },
         items: {
           type: 'object',
           title: '',