mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
chore: CollapseGroup组件新增enableFieldSetStyle控制样式
This commit is contained in:
lurunze1226
parent
92168782ef
commit
199fa5c5ca
@ -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` | 初始状态是否折叠 |
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
)}
|
||||
|
||||
@ -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);
|
||||
})
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user