test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: JSON展示支持设置最大展示长度; fix: Debug面板无法横向滚动 (#4632)

Browse Source
This commit is contained in:
RUNZE LU 2022-06-17 14:30:12 +08:00 committed by GitHub
parent 13470259cb
commit 2521f87fc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/zh-CN/components/json.md
View File

@ -233,16 +233,36 @@ List 的内容、Card 卡片的内容配置同上
}
```
## 文本过长自动处理
> 2.0.0 及以上版本
设置`ellipsisThreshold`可以设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串。
```schema
{
"type": "page",
"body": {
"type": "json",
"ellipsisThreshold": 80,
"value": {
"text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
}
}
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ |
| type | `string` | | 如果在 Table、Card 和 List 中，为`"json"`；在 Form 中用作静态展示，为`"static-json"` |
| className | `string` | | 外层 CSS 类名 |
| value | `object`/`string` | | json 值，如果是 string 会自动 parse |
| source | `string` | `''` | 通过数据映射获取数据链中的值 |
| placeholder | `string` | `-` | 占位文本 |
| levelExpand | `number` | `1` | 默认展开的层级 |
| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |
| mutable | `boolean` | `false` | 是否可修改 |
| displayDataTypes | `boolean` | `false` | 是否显示数据类型 |
| 属性名 | 类型 | 默认值 | 说明 |
| ----------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ |
| type | `string` | | 如果在 Table、Card 和 List 中，为`"json"`；在 Form 中用作静态展示，为`"static-json"` |
| className | `string` | | 外层 CSS 类名 |
| value | `object`/`string` | | json 值，如果是 string 会自动 parse |
| source | `string` | `''` | 通过数据映射获取数据链中的值 |
| placeholder | `string` | `-` | 占位文本 |
| levelExpand | `number` | `1` | 默认展开的层级 |
| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |
| mutable | `boolean` | `false` | 是否可修改 |
| displayDataTypes | `boolean` | `false` | 是否显示数据类型 |
| ellipsisThreshold | `number` | `false` | 设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串 |

8
packages/amis-core/src/utils/debug.tsx
View File

@ -53,6 +53,11 @@ class AMISDebugStore {
* 当前选中的组件节点 id
*/
@observable activeId: string;
/**
* 字段值文本最大展示长度
*/
@observable ellipsisThreshold: number;
}
const store = new AMISDebugStore();
@ -67,6 +72,8 @@ const ComponentInfo = {} as {[propName: string]: ComponentInspect};
const LogView = observer(({store}: {store: AMISDebugStore}) => {
const logs = store.logs;
const ellipsisThreshold = store.ellipsisThreshold ?? 50;
return (
<>
{logs.map((log, index) => {
@ -83,6 +90,7 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
collapsed={true}
enableClipboard={false}
displayDataTypes={false}
collapseStringsAfterLength={ellipsisThreshold}
iconStyle="square"
/>
) : null}

4
packages/amis-ui/scss/components/_debug.scss
View File

@ -167,4 +167,8 @@
&-inspect {
padding: var(--gap-sm);
}
&-logLine {
overflow-x: hidden;
}
}

12
packages/amis/src/renderers/Json.tsx
View File

@ -54,6 +54,11 @@ export interface JsonSchema extends BaseSchema {
* 是否为键排序
*/
sortKeys?: boolean;
/**
* 设置字符串的最大展示长度，超出长度阈值的字符串将被截断，点击value可切换字符串展示方式，默认为false
*/
ellipsisThreshold?: number | false;
}
export interface JSONProps extends RendererProps, JsonSchema {
@ -74,7 +79,8 @@ export class JSONField extends React.Component<JSONProps, object> {
enableClipboard: false,
iconStyle: 'square',
quotesOnKeys: true,
sortKeys: false
sortKeys: false,
ellipsisThreshold: false
};
@autobind
@ -114,7 +120,8 @@ export class JSONField extends React.Component<JSONProps, object> {
iconStyle,
quotesOnKeys,
sortKeys,
name
name,
ellipsisThreshold
} = this.props;
const value = getPropValue(this.props);
@ -157,6 +164,7 @@ export class JSONField extends React.Component<JSONProps, object> {
shouldCollapse={this.shouldExpandNode}
enableClipboard={enableClipboard}
displayDataTypes={displayDataTypes}
collapseStringsAfterLength={ellipsisThreshold}
iconStyle={iconStyle}
quotesOnKeys={quotesOnKeys}
sortKeys={sortKeys}