feat(fr):新增属性用于控制面板折叠

alibaba · Mar 23, 2022 · dc59ae3 · dc59ae3
1 parent 9dead63
commit dc59ae3
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/docs/form-render/advanced/display.md b/docs/form-render/advanced/display.md
@@ -32,6 +32,7 @@ const schema = displayType => ({
       bind: 'obj',
       description: '这是一个对象类型',
       type: 'object',
+      collapsed: false,
       properties: {
         input1: {
           title: '简单输入框',
@@ -49,6 +50,7 @@ const schema = displayType => ({
   },
 });
 
+
 export default () => (
   <div>
     <h2>display: row</h2>

diff --git a/docs/form-render/schema/schema.md b/docs/form-render/schema/schema.md
@@ -456,6 +456,33 @@ readOnly=true 的情况，FormRender 默认使用 html 组件渲染。特殊情
 }
 ```
 
+### collapsed
+
+只在嵌套的对象类型组件中使用，用于控制折叠面板是否展开
+
+- 类型：boolean
+- 默认值：false
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "objectName": {
+      "type": "object",
+      "description": "这是一个对象类型",
+      "collapsed": false,
+      "properties": {
+        "input1": {
+          "title": "简单输入框",
+          "type": "string",
+          "required": true,
+        },
+    }
+    }
+  }
+}
+```
+
 ### enum & enumNames
 
 只在选择类组件中使用，用于描述枚举值的值和文案

diff --git a/packages/form-render/src/widgets/antd/map.js b/packages/form-render/src/widgets/antd/map.js
@@ -3,13 +3,20 @@ import React, { useEffect, useState } from 'react';
 // import { useStore2 } from '../../hooks';
 const { Panel } = Collapse;
 
-export default function Map({ children, title, ...rest }) {
+export default function Map({ children, title, schema, ...rest }) {
   const { theme, displayType, allCollapsed } = {}; // TODO!
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(schema.collapsed || false);
+  // useEffect(() => {
+  //   setCollapsed(allCollapsed);
+  // }, [allCollapsed]);
 
-  useEffect(() => {
-    setCollapsed(allCollapsed);
-  }, [allCollapsed]);
+  useEffect(()=>{
+    if(schema.hasOwnProperty('collapsed')){
+      setCollapsed(schema.collapsed)
+    }
+  },[schema.collapsed])
+
+
 
   if (!title) {
     return <div className="w-100">{children}</div>;