chore(form): 优化布局

- [email protected]
umijs · Apr 1, 2021 · 79815a5 · 79815a5
1 parent dbd7bd3
commit 79815a5
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/docs/private/formLayout.md b/docs/private/formLayout.md
@@ -0,0 +1,10 @@
+---
+group:
+  title: 对内测试
+  order: 99
+title: Form布局
+order: 1
+---
+
+
+<code title="布局" src="./formLayout.tsx" />
diff --git a/docs/private/formLayout.tsx b/docs/private/formLayout.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Form } from 'sula';
+
+export default class LayoutDemo extends React.Component {
+  render() {
+    return (
+      <Form
+        itemLayout={{ span: 8, gutter: 0 }}
+        fields={[
+          {
+            name: 'input1',
+            label: 'Input1',
+            field: 'input',
+          },
+          {
+            name: 'input2',
+            label: 'Input2',
+            field: 'input',
+          },
+          {
+            name: 'input3',
+            label: 'Input3',
+            field: 'input',
+          },
+          {
+            name: 'input4',
+            label: 'Input4',
+            field: 'input',
+          },
+          {
+            name: 'input5',
+            label: 'Input2',
+            field: 'textarea',
+            itemLayout: {
+              span: 16,
+              labelCol: {
+                span: 4,
+              },
+              wrapperCol: {
+                span: 20,
+              }
+            },
+          },
+        ]}
+      />
+    );
+  }
+}
diff --git a/packages/sula/package.json b/packages/sula/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sula",
-  "version": "1.2.0-beta.41",
+  "version": "1.2.0-beta.42",
   "module": "./es/index.js",
   "main": "./es/index.js",
   "types": "./es/index.d.ts",

diff --git a/packages/sula/src/form/utils/layoutUtil.ts b/packages/sula/src/form/utils/layoutUtil.ts
@@ -10,16 +10,13 @@ export function getItemLayout(
 
   const finalSpan = getItemSpan(itemLayout, matchedPonint);
 
-  let finalOffset = offset;
-  let finalGutter = gutter;
+  let finalOffset = isNumber(offset) ? offset : 0;
+  let finalGutter = isNumber(gutter) ? gutter : 24;
 
   let finalWrapperCol;
   let finalLabelCol;
 
   if (layout === 'vertical' || layout === 'horizontal') {
-    finalOffset = finalOffset || 0;
-    finalGutter = finalGutter || 24;
-
     // 只有水平布局需要设置 wrapperCol 和 labelCol
     if (layout === 'horizontal') {
       finalLabelCol = labelCol || { span: 8 };
@@ -35,7 +32,7 @@ export function getItemLayout(
     labelCol: finalLabelCol,
     span: finalSpan,
     offset: finalOffset,
-    gutter: finalGutter || 0,
+    gutter: finalGutter,
   };
 }