style(generator): update objectContainer default style (#154)

jd-opensource · Mar 11, 2022 · d1590df · d1590df
1 parent 27cefed
commit d1590df
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 28 deletions.
diff --git a/packages/drip-form/src/container/ObjectContainer/index.styl b/packages/drip-form/src/container/ObjectContainer/index.styl
@@ -1,2 +1,6 @@
 .object-container-err
 	color red
+
+.drip-form_objectContainer--collapse
+	&>div>div
+		background-color #EFF6FF
diff --git a/packages/drip-form/src/container/ObjectContainer/index.tsx b/packages/drip-form/src/container/ObjectContainer/index.tsx
@@ -3,12 +3,13 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-11 15:26:55
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-19 18:23:10
+ * @Last Modified time: 2022-03-11 13:55:35
  */
 import React, { useMemo, memo } from 'react'
 import { useTitle } from '@jdfed/hooks'
 import renderCoreFn from '../../render'
 import { Title, CommonContainerHoc } from '@form/components/index'
+import cx from 'classnames'
 import type { RenderFnProps, ContainerType } from '../../render/type'
 import type { Props } from '../type'
 import './index.styl'
@@ -83,7 +84,7 @@ const objectContainer = memo<Props & RenderFnProps & ObjectContainerProps>(
         panelProp: panelPropMap,
       }
     }, [props])
-    const newTitleUi = useTitle(titleUi)
+    const newTitleUi = useTitle(titleUi, 'object')
     const Collapse = uiComponents[theme]?.Collapse
     const Panel = uiComponents[theme]?.Collapse.Panel
     // 是否渲染为折叠面板模式
@@ -97,7 +98,13 @@ const objectContainer = memo<Props & RenderFnProps & ObjectContainerProps>(
     return (
       <>
         {isCollapse ? (
-          <Collapse defaultActiveKey={defaultActiveKey} {...collapseProp}>
+          <Collapse
+            defaultActiveKey={defaultActiveKey}
+            {...collapseProp}
+            className={cx({
+              'drip-form_objectContainer--collapse': uiProp['$:dripStyle'],
+            })}
+          >
             <Panel
               header={
                 <>

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-03-09 18:17:49
+ * @Last Modified time: 2022-03-11 11:12:39
  */
 import React, { useMemo, memo, useCallback } from 'react'
 import {
@@ -158,6 +158,11 @@ const CheckConfig = (): JSX.Element => {
     return {
       validateTime: 'change',
       theme: 'antd',
+      ui: {
+        containerStyle: {
+          padding: '0 16px',
+        },
+      },
       schema: !selectedFieldKey
         ? [
             {
@@ -240,8 +245,11 @@ const CheckConfig = (): JSX.Element => {
               ui: {
                 type: 'object',
                 mode: 'collapse',
+                '$:dripStyle': true,
+                ghost: true,
                 containerStyle: {
-                  marginBottom: 0,
+                  marginBottom: 5,
+                  padding: 0,
                 },
               },
               schema: CommonSchema.concat(curTypeSchema),
@@ -255,8 +263,11 @@ const CheckConfig = (): JSX.Element => {
                     ui: {
                       type: 'object',
                       mode: 'collapse',
+                      '$:dripStyle': true,
+                      ghost: true,
                       containerStyle: {
-                        marginBottom: 0,
+                        padding: 0,
+                        marginBottom: 5,
                       },
                     },
                     schema: bussinessSchema,
@@ -270,8 +281,11 @@ const CheckConfig = (): JSX.Element => {
               ui: {
                 type: 'object',
                 mode: 'collapse',
+                '$:dripStyle': true,
+                ghost: true,
                 containerStyle: {
-                  marginBottom: 0,
+                  padding: 0,
+                  marginBottom: 5,
                 },
               },
               schema: [

diff --git a/packages/generator/src/components/RightSideBar/Config.tsx b/packages/generator/src/components/RightSideBar/Config.tsx
@@ -14,7 +14,7 @@ interface RightSideBarType {
 const Config = () => {
   return (
     <div className={cx(styles.container, 'rightSideBarGlobal')}>
-      <Tabs defaultActiveKey="1" type="card">
+      <Tabs defaultActiveKey="1" type="card" centered>
         <TabPane tab="属性配置" key="1">
           <PropertyConfig />
         </TabPane>

diff --git a/packages/generator/src/components/RightSideBar/index.module.css b/packages/generator/src/components/RightSideBar/index.module.css
@@ -2,17 +2,17 @@
   .rightSideBarGlobal {
     .object-container {
       .object-container__collapse-custom {
-        margin-bottom: 0
+        margin-bottom: 0;
       }
     }
     .array-field--container {
-      margin-bottom: 0
+      margin-bottom: 0;
     }
   }
 }
 
 .container {
-  @apply w-1/4 p-3 h-full;
+  @apply w-1/4 h-full pt-2 pb-2;
   min-width: 350px;
   overflow: hidden scroll;
 }

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-20 19:46:55
+ * @Last Modified time: 2022-03-11 11:33:44
  */
 // dataSchema2019-09支持的字符串校验关键字
 const stringJsonSchema = {
@@ -222,8 +222,11 @@ const dripFormPluginKeywords = {
     ui: {
       type: 'object',
       mode: 'collapse',
+      '$:dripStyle': true,
+      ghost: true,
       containerStyle: {
-        marginBottom: 0,
+        padding: 0,
+        marginBottom: 5,
       },
       description: {
         type: 'icon',
@@ -264,8 +267,11 @@ const dripFormPluginKeywords = {
     ui: {
       type: 'object',
       mode: 'collapse',
+      '$:dripStyle': true,
+      ghost: true,
       containerStyle: {
-        marginBottom: 0,
+        padding: 0,
+        marginBottom: 5,
       },
       description: {
         type: 'icon',

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

diff --git a/packages/generator/src/fields/common/propertyConfig/layout.schema.ts b/packages/generator/src/fields/common/propertyConfig/layout.schema.ts
@@ -7,8 +7,11 @@ const unitedSchema = {
   ui: {
     type: 'object',
     mode: 'collapse',
+    '$:dripStyle': true,
+    ghost: true,
     containerStyle: {
-      marginBottom: 0,
+      padding: 0,
+      marginBottom: 5,
     },
   },
   title: '布局',

diff --git a/packages/generator/src/fields/common/propertyConfig/title.schema.ts b/packages/generator/src/fields/common/propertyConfig/title.schema.ts
@@ -7,8 +7,11 @@ const unitedSchema = {
   ui: {
     type: 'object',
     mode: 'collapse',
+    '$:dripStyle': true,
+    ghost: true,
     containerStyle: {
-      marginBottom: 0,
+      padding: 0,
+      marginBottom: 5,
     },
   },
   title: '标题',

diff --git a/packages/generator/src/fields/container/array.field.ts b/packages/generator/src/fields/container/array.field.ts
@@ -109,8 +109,11 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          '$:dripStyle': true,
+          ghost: true,
           containerStyle: {
-            marginBottom: 0,
+            padding: 0,
+            marginBottom: 20,
           },
           style: {
             paddingBottom: '20px',
@@ -138,8 +141,11 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          '$:dripStyle': true,
+          ghost: true,
           containerStyle: {
-            marginBottom: 0,
+            padding: 0,
+            marginBottom: 5,
           },
           vcontrol: 'return props.formData.ui.hasConfirm',
         },

diff --git a/packages/generator/src/fields/container/object.field.ts b/packages/generator/src/fields/container/object.field.ts
@@ -12,6 +12,12 @@ const config: Field = {
     ui: {
       type: 'object',
       mode: 'collapse',
+      '$:dripStyle': true,
+      ghost: true,
+      containerStyle: {
+        padding: 0,
+        marginBottom: 5,
+      },
       active: false,
       title: {
         verticalAlign: 'top',
@@ -111,6 +117,19 @@ const config: Field = {
           vcontrol: 'return props.formData.ui.mode==="collapse"',
         },
       },
+      {
+        fieldKey: '$:dripStyle',
+        type: 'boolean',
+        title: '是否开启水滴样式',
+        ui: {
+          description: {
+            type: 'icon',
+            trigger: 'hover',
+            title: '开启之后，标题为淡蓝色',
+          },
+          type: 'switch',
+        },
+      },
     ],
   },
 }

diff --git a/packages/generator/src/fields/container/root.field.ts b/packages/generator/src/fields/container/root.field.ts
@@ -98,8 +98,11 @@ const unitedSchema = [
     ui: {
       type: 'object',
       mode: 'collapse',
+      '$:dripStyle': true,
+      ghost: true,
       containerStyle: {
-        marginBottom: 0,
+        padding: 0,
+        marginBottom: 5,
       },
     },
     schema: [
@@ -219,8 +222,11 @@ const unitedSchema = [
     ui: {
       mode: 'collapse',
       type: 'object',
+      '$:dripStyle': true,
+      ghost: true,
       containerStyle: {
-        marginBottom: 0,
+        padding: 0,
+        marginBottom: 5,
       },
     },
     schema: [
@@ -270,8 +276,11 @@ const unitedSchema = [
     ui: {
       type: 'object',
       mode: 'collapse',
+      '$:dripStyle': true,
+      ghost: true,
       containerStyle: {
-        marginBottom: 0,
+        padding: 0,
+        marginBottom: 5,
       },
     },
     schema: [
@@ -324,6 +333,12 @@ const unitedSchema = [
         ui: {
           type: 'object',
           mode: 'collapse',
+          '$:dripStyle': true,
+          ghost: true,
+          containerStyle: {
+            padding: 0,
+            marginBottom: 5,
+          },
           vcontrol: 'return props.formData.footer.showFooter == true',
         },
         default: {
@@ -341,6 +356,12 @@ const unitedSchema = [
         ui: {
           type: 'object',
           mode: 'collapse',
+          '$:dripStyle': true,
+          ghost: true,
+          containerStyle: {
+            padding: 0,
+            marginBottom: 5,
+          },
           vcontrol: 'return props.formData.footer.showFooter == true',
         },
         default: {

diff --git a/packages/generator/src/fields/formItem/upload.field.ts b/packages/generator/src/fields/formItem/upload.field.ts
@@ -136,8 +136,11 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          '$:dripStyle': true,
+          ghost: true,
           containerStyle: {
-            marginBottom: 0,
+            padding: 0,
+            marginBottom: 5,
           },
         },
         schema: [
@@ -232,8 +235,11 @@ const config: Field = {
         ui: {
           type: 'object',
           mode: 'collapse',
+          '$:dripStyle': true,
+          ghost: true,
           containerStyle: {
-            marginBottom: 0,
+            padding: 0,
+            marginBottom: 5,
           },
         },
         schema: [

diff --git a/packages/generator/src/store/rightSidebar/index.ts b/packages/generator/src/store/rightSidebar/index.ts
@@ -35,8 +35,11 @@ export const allPropertyConfigSchemaSelector = selector<
                 ui: {
                   type: 'object',
                   mode: 'collapse',
+                  '$:dripStyle': true,
+                  ghost: true,
                   containerStyle: {
-                    marginBottom: 0,
+                    padding: 0,
+                    marginBottom: 5,
                   },
                 },
                 title: '样式',