chore: CollapseGroup组件新增enableFieldSetStyle控制样式

docs/zh-CN/components/collapse.md

@@ -211,15 +211,62 @@ order: 36
 }
 ```
 
+## 类FieldSet样式
+
+当Collapse组件作为Form组件的子元素时，`enableFieldSetStyle`属性可以控制Collapse组件样式风格，开启后转换为类似[FieldSet组件](./form/fieldset)的样式，默认开启。
+
+
+```schema: scope="body"
+{
+  "type": "form",
+  "body": [
+    {
+      "type": "switch",
+      "name": "enableFieldSetStyle",
+      "label": "切换展示方式",
+      "mode": "horizontal",
+      "value": true
+    },
+    {
+      "type": "collapse-group",
+      "activeKey": ["1"],
+      "enableFieldSetStyle": "${enableFieldSetStyle}",
+      "body": [
+        {
+          "type": "collapse",
+          "key": "1",
+          "header": "标题1",
+          "body": "这里是内容1"
+        },
+        {
+          "type": "collapse",
+          "key": "2",
+          "header": "标题2",
+          "body": "这里是内容2"
+        },
+        {
+          "type": "collapse",
+          "key": "3",
+          "header": "标题3",
+          "body": "这里是内容3"
+        }
+      ]
+    }
+  ]
+}
+```
+
 ## CollapseGroup 属性表
 
-| 属性名             | 类型                                                   | 默认值             | 说明                                |
+| 属性名             | 类型                                                   | 默认值             | 说明                                | 版本 |
-| ------------------ | ------------------------------------------------------ | ------------------ | ----------------------------------- |
+| ------------------ | ------------------------------------------------------ | ------------------ | ----------------------------------- | --- |
 | type               | `string`                                               | `"collapse-group"` | 指定为 collapse-group 渲染器        |
 | activeKey          | `Array<string \| number \| never> \| string \| number` | -                  | 初始化激活面板的 key                |
 | accordion          | `boolean`                                              | `false`            | 手风琴模式                          |
 | expandIcon         | `SchemaNode`                                           | -                  | 自定义切换图标                      |
 | expandIconPosition | `string`                                               | `"left"`           | 设置图标位置，可选值`left \| right` |
+| enableFieldSetStyle | `boolean`              | `true`       | 当Collapse作为Form组件的子元素时，开启该属性后组件样式设置为FieldSet组件的样式，默认开启           | `3.5.0` |
+
 
 ## CollapseGroup 事件表
 
@@ -297,8 +344,8 @@ order: 36
 
 ## Collapse 属性表
 
-| 属性名    | 类型                   | 默认值       | 说明                   |
+| 属性名    | 类型                   | 默认值       | 说明                   | 版本 |
-| --------- | ---------------------- | ------------ | ---------------------- |
+| --------- | ---------------------- | ------------ | ---------------------- | --- |
 | type      | `string`               | `"collapse"` | 指定为 collapse 渲染器 |
 | disabled  | `boolean`              | `false`      | 禁用                   |
 | collapsed | `boolean`              | `true`       | 初始状态是否折叠       |

packages/amis-ui/scss/components/_collapse.scss

@@ -170,16 +170,19 @@
 
 //FieldSet Form + Collapse
 .#{$ns}Form {
-  .#{$ns}Collapse {
+  .#{$ns}Collapse.#{$ns}Collapse--fieldset {
     border: none;
-    &-header {
+
+    .#{$ns}Collapse-header {
       background-color: var(--white);
       display: inline-flex;
       justify-content: flex-end;
+      align-items: center;
       flex-direction: row-reverse;
       border-radius: 0;
     }
-    &-content {
+
+    .#{$ns}Collapse-content {
       padding: 0;
     }
   }

packages/amis-ui/src/components/Collapse.tsx

@@ -53,6 +53,8 @@ export interface CollapseProps extends ThemeProps {
   partial?: boolean;
   children?: React.ReactNode | Array<React.ReactNode>;
   divideLine?: boolean;
+  /** 当Collapse作为Form组件的子元素时，开启该属性后组件样式设置为FieldSet组件的样式，默认开启 */
+  enableFieldSetStyle?: boolean;
 }
 
 export interface CollapseState {
@@ -72,7 +74,8 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
     collapsable: true,
     disabled: false,
     showArrow: true,
-    propsUpdate: false
+    propsUpdate: false,
+    enableFieldSetStyle: true
   };
 
   state: CollapseState = {
@@ -191,7 +194,8 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       expandIcon,
       disabled,
       children,
-      mobileUI
+      mobileUI,
+      enableFieldSetStyle
     } = this.props;
 
     const finalHeader = this.state.collapsed
@@ -278,7 +282,8 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
             'is-active': !this.state.collapsed,
             [`Collapse--${size}`]: size,
             'Collapse--disabled': disabled,
-            'Collapse--title-bottom': headerPosition === 'bottom'
+            'Collapse--title-bottom': headerPosition === 'bottom',
+            'Collapse--fieldset': enableFieldSetStyle !== false
           },
           className
         )}

packages/amis/__tests__/renderers/Collapse.test.tsx

@@ -6,6 +6,7 @@
  * 2. accordion 手风琴模式
  * 3. 自定义图标
  * 4. disabled 禁用 和 面板嵌套
+ * 5. enableFieldSetStyle属性控制CollapseGroup组件在Form中的样式
  */
 import {render, fireEvent, waitFor} from '@testing-library/react';
 import '../../src';
@@ -13,7 +14,7 @@ import {render as amisRender} from '../../src';
 import {makeEnv, wait} from '../helper';
 
 // 1. 基本用法
-test('Renderer:Collapse', async () => {
+test('1. Renderer:Collapse', async () => {
   const {container} = render(
     amisRender(
       {
@@ -61,7 +62,7 @@ test('Renderer:Collapse', async () => {
 });
 
 // 2. accordion 手风琴模式
-test('Renderer:Collapse with accordion', async () => {
+test('2. Renderer:Collapse with accordion', async () => {
   const {container} = render(
     amisRender(
       {
@@ -110,7 +111,7 @@ test('Renderer:Collapse with accordion', async () => {
 });
 
 // 3. 自定义图标
-test('Renderer:Collapse with expandIcon & expandIconPosition & showArrow', async () => {
+test('3. Renderer:Collapse with expandIcon & expandIconPosition & showArrow', async () => {
   const schema = {
     type: 'collapse-group',
     activeKey: ['1'],
@@ -163,7 +164,7 @@ test('Renderer:Collapse with expandIcon & expandIconPosition & showArrow', async
 });
 
 // 4. disabled 禁用 和 面板嵌套
-test('Renderer:Collapse with disabled & panel nesting', async () => {
+test('4. Renderer:Collapse with disabled & panel nesting', async () => {
   const schema = {
     type: 'collapse-group',
     activeKey: ['1'],
@@ -205,3 +206,62 @@ test('Renderer:Collapse with disabled & panel nesting', async () => {
     'cxd-Collapse--disabled'
   );
 });
+
+test('5. enableFieldSetStyle属性控制CollapseGroup组件在Form中的样式', async () => {
+  const {container} = render(
+    amisRender(
+      {
+        "type": "form",
+        "body": [
+          {
+            "type": "collapse-group",
+            "body": [
+              {
+                "type": "collapse",
+                "key": "1",
+                "header": "标题1",
+                "body": "这里是内容1"
+              },
+              {
+                "type": "collapse",
+                "key": "2",
+                "header": "标题2",
+                "body": "这里是内容2"
+              }
+            ]
+          },
+          {
+            "type": "collapse-group",
+            "enableFieldSetStyle": false,
+            "body": [
+              {
+                "type": "collapse",
+                "key": "1",
+                "header": "标题1",
+                "body": "这里是内容1"
+              },
+              {
+                "type": "collapse",
+                "key": "2",
+                "header": "标题2",
+                "body": "这里是内容2"
+              }
+            ]
+          }
+        ]
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  const totalCollections = container.querySelectorAll(
+    '.cxd-CollapseGroup > .cxd-Collapse'
+  );
+  const fieldsetStyledCollections = container.querySelectorAll(
+    '.cxd-CollapseGroup > .cxd-Collapse.cxd-Collapse--fieldset'
+  );
+
+  expect(totalCollections.length).toBe(4);
+  expect(fieldsetStyledCollections.length).toBe(2);
+})

packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`Renderer:fieldSet 1`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active no-border"
+          class="cxd-Collapse is-active cxd-Collapse--fieldset no-border"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -161,7 +161,7 @@ exports[`Renderer:fieldSet with mode 1`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active"
+          class="cxd-Collapse is-active cxd-Collapse--fieldset"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -336,7 +336,7 @@ exports[`Renderer:fieldSet with mode 2`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active"
+          class="cxd-Collapse is-active cxd-Collapse--fieldset"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -511,7 +511,7 @@ exports[`Renderer:fieldSet with mode 3`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active"
+          class="cxd-Collapse is-active cxd-Collapse--fieldset"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -678,7 +678,7 @@ exports[`Renderer:fieldSet with titlePosition & collapseTitle & title 1`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active cxd-Collapse--title-bottom"
+          class="cxd-Collapse is-active cxd-Collapse--title-bottom cxd-Collapse--fieldset"
         >
           <div
             class="cxd-Collapse-contentWrapper"

packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Renderer:Collapse 1`] = `
+exports[`1. Renderer:Collapse 1`] = `
 <div>
   <div
     class="cxd-CollapseGroup"
   >
     <div
-      class="cxd-Collapse is-active"
+      class="cxd-Collapse is-active cxd-Collapse--fieldset"
     >
       <div
         class="cxd-Collapse-header"
@@ -48,7 +48,7 @@ exports[`Renderer:Collapse 1`] = `
       </div>
     </div>
     <div
-      class="cxd-Collapse is-active"
+      class="cxd-Collapse is-active cxd-Collapse--fieldset"
     >
       <div
         class="cxd-Collapse-header"
@@ -90,7 +90,7 @@ exports[`Renderer:Collapse 1`] = `
       </div>
     </div>
     <div
-      class="cxd-Collapse is-active"
+      class="cxd-Collapse is-active cxd-Collapse--fieldset"
     >
       <div
         class="cxd-Collapse-header"
@@ -136,13 +136,130 @@ exports[`Renderer:Collapse 1`] = `
 </div>
 `;
 
-exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
+exports[`3. Renderer:Collapse with expandIcon & expandIconPosition & showArrow 1`] = `
+<div>
+  <div
+    class="cxd-CollapseGroup icon-position-right"
+  >
+    <div
+      class="cxd-Collapse is-active cxd-Collapse--fieldset"
+    >
+      <div
+        class="cxd-Collapse-header"
+      >
+        <i
+          class="caret-right cxd-Collapse-icon-tranform cxd-Collapse-icon-tranform fa fa-caret-right"
+        />
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            标题1
+          </span>
+        </span>
+      </div>
+      <div
+        class="cxd-Collapse-contentWrapper"
+      >
+        <div
+          class="cxd-Collapse-body"
+        >
+          <div
+            class="cxd-Collapse-content"
+          >
+            <span
+              class="cxd-TplField"
+            >
+              <span>
+                这里是内容1
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="cxd-Collapse cxd-Collapse--fieldset"
+    >
+      <div
+        class="cxd-Collapse-header"
+      >
+        <i
+          class="caret-right cxd-Collapse-icon-tranform cxd-Collapse-icon-tranform fa fa-caret-right"
+        />
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            标题2
+          </span>
+        </span>
+      </div>
+      <div
+        class="cxd-Collapse-contentWrapper out"
+      >
+        <div
+          class="cxd-Collapse-body"
+        >
+          <div
+            class="cxd-Collapse-content"
+          >
+            <span
+              class="cxd-TplField"
+            >
+              <span>
+                这里是内容2
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="cxd-Collapse cxd-Collapse--fieldset"
+    >
+      <div
+        class="cxd-Collapse-header"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            标题3
+          </span>
+        </span>
+      </div>
+      <div
+        class="cxd-Collapse-contentWrapper out"
+      >
+        <div
+          class="cxd-Collapse-body"
+        >
+          <div
+            class="cxd-Collapse-content"
+          >
+            <span
+              class="cxd-TplField"
+            >
+              <span>
+                这里是内容3
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`4. Renderer:Collapse with disabled & panel nesting 1`] = `
 <div>
   <div
     class="cxd-CollapseGroup"
   >
     <div
-      class="cxd-Collapse is-active"
+      class="cxd-Collapse is-active cxd-Collapse--fieldset"
     >
       <div
         class="cxd-Collapse-header"
@@ -176,7 +293,7 @@ exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
               class="cxd-CollapseGroup"
             >
               <div
-                class="cxd-Collapse is-active"
+                class="cxd-Collapse is-active cxd-Collapse--fieldset"
               >
                 <div
                   class="cxd-Collapse-header"
@@ -223,7 +340,7 @@ exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
       </div>
     </div>
     <div
-      class="cxd-Collapse cxd-Collapse--disabled lastOne"
+      class="cxd-Collapse cxd-Collapse--disabled cxd-Collapse--fieldset lastOne"
     >
       <div
         class="cxd-Collapse-header"
@@ -267,120 +384,3 @@ exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
   </div>
 </div>
 `;
-
-exports[`Renderer:Collapse with expandIcon & expandIconPosition & showArrow 1`] = `
-<div>
-  <div
-    class="cxd-CollapseGroup icon-position-right"
-  >
-    <div
-      class="cxd-Collapse is-active"
-    >
-      <div
-        class="cxd-Collapse-header"
-      >
-        <i
-          class="caret-right cxd-Collapse-icon-tranform cxd-Collapse-icon-tranform fa fa-caret-right"
-        />
-        <span
-          class="cxd-TplField"
-        >
-          <span>
-            标题1
-          </span>
-        </span>
-      </div>
-      <div
-        class="cxd-Collapse-contentWrapper"
-      >
-        <div
-          class="cxd-Collapse-body"
-        >
-          <div
-            class="cxd-Collapse-content"
-          >
-            <span
-              class="cxd-TplField"
-            >
-              <span>
-                这里是内容1
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="cxd-Collapse"
-    >
-      <div
-        class="cxd-Collapse-header"
-      >
-        <i
-          class="caret-right cxd-Collapse-icon-tranform cxd-Collapse-icon-tranform fa fa-caret-right"
-        />
-        <span
-          class="cxd-TplField"
-        >
-          <span>
-            标题2
-          </span>
-        </span>
-      </div>
-      <div
-        class="cxd-Collapse-contentWrapper out"
-      >
-        <div
-          class="cxd-Collapse-body"
-        >
-          <div
-            class="cxd-Collapse-content"
-          >
-            <span
-              class="cxd-TplField"
-            >
-              <span>
-                这里是内容2
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="cxd-Collapse"
-    >
-      <div
-        class="cxd-Collapse-header"
-      >
-        <span
-          class="cxd-TplField"
-        >
-          <span>
-            标题3
-          </span>
-        </span>
-      </div>
-      <div
-        class="cxd-Collapse-contentWrapper out"
-      >
-        <div
-          class="cxd-Collapse-body"
-        >
-          <div
-            class="cxd-Collapse-content"
-          >
-            <span
-              class="cxd-TplField"
-            >
-              <span>
-                这里是内容3
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

packages/amis/src/renderers/Collapse.tsx

@@ -6,7 +6,9 @@ import {
   RendererProps,
   ScopedContext,
   autobind,
-  resolveEventData
+  resolveEventData,
+  isPureVariable,
+  resolveVariableAndFilter
 } from 'amis-core';
 import {Collapse as BasicCollapse, Icon} from 'amis-ui';
 import {BaseSchema, SchemaCollection, SchemaTpl, SchemaObject} from '../Schema';
@@ -109,6 +111,8 @@ export interface CollapseProps
 
   // 内容口子
   children?: JSX.Element | ((props?: any) => JSX.Element);
+  /** 当Collapse作为Form组件的子元素时，开启该属性后组件样式设置为FieldSet组件的样式，默认开启 */
+  enableFieldSetStyle?: boolean;
 }
 
 export default class Collapse extends React.Component<CollapseProps, {}> {
@@ -194,9 +198,9 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
       collapsed,
       propsUpdate,
       mobileUI,
-      divideLine
+      divideLine,
+      enableFieldSetStyle
     } = this.props;
-
     const heading = title || header || '';
 
     return (
@@ -253,6 +257,7 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
         mobileUI={mobileUI}
         onCollapse={this.handleCollapseChange}
         divideLine={divideLine}
+        enableFieldSetStyle={enableFieldSetStyle}
       ></BasicCollapse>
     );
   }

packages/amis/src/renderers/CollapseGroup.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import {Renderer, RendererProps, autobind, resolveEventData} from 'amis-core';
+import {
+  Renderer,
+  RendererProps,
+  autobind,
+  resolveEventData,
+  isPureVariable,
+  resolveVariableAndFilter
+} from 'amis-core';
 import {BaseSchema, SchemaCollection, SchemaObject} from '../Schema';
 import {CollapseGroup} from 'amis-ui';
 
@@ -37,6 +44,11 @@ export interface CollapseGroupSchema extends BaseSchema {
    * 内容区域
    */
   body?: SchemaCollection;
+
+  /**
+   * 当Collapse作为Form组件的子元素时，开启该属性后组件样式设置为FieldSet组件的样式，默认开启
+   */
+  enableFieldSetStyle?: boolean;
 }
 export interface CollapseGroupProps
   extends RendererProps,
@@ -49,6 +61,10 @@ export class CollapseGroupRender extends React.Component<
   CollapseGroupProps,
   {}
 > {
+  static defaultProps = {
+    enableFieldSetStyle: true
+  };
+
   constructor(props: CollapseGroupProps) {
     super(props);
   }
@@ -84,8 +100,19 @@ export class CollapseGroupRender extends React.Component<
       className,
       style,
       render,
-      mobileUI
+      mobileUI,
+      data
     } = this.props;
+    let enableFieldSetStyle = this.props.enableFieldSetStyle;
+
+    if (isPureVariable(enableFieldSetStyle)) {
+      enableFieldSetStyle = resolveVariableAndFilter(
+        enableFieldSetStyle,
+        data,
+        '| raw'
+      );
+    }
+
     return (
       <CollapseGroup
         defaultActiveKey={defaultActiveKey}
@@ -97,7 +124,7 @@ export class CollapseGroupRender extends React.Component<
         mobileUI={mobileUI}
         onCollapseChange={this.handleCollapseChange}
       >
-        {render('body', body || '')}
+        {render('body', body || '', {enableFieldSetStyle})}
       </CollapseGroup>
     );
   }