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

fix: 修复编辑器模拟数据逻辑导致的组件无限刷新问题 (#10293)

Browse Source
This commit is contained in:
liaoxuezhi 2024-05-22 19:27:07 +08:00 committed by 2betop
parent fb3ce5cf8d
commit 53bac72e06
11 changed files with 149 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/amis-editor/src/plugin/Cards.tsx
View File

@ -562,15 +562,19 @@ export class CardsPlugin extends BasePlugin {
return dataSchema;
}
filterProps(props: any) {
filterProps(props: any, node: EditorNodeType) {
// 编辑时显示两行假数据
const count = (props.columnsCount || 3) * 2;
props.value = repeatArray({}, count).map((item, index) => {
return {
...item,
id: index + 1
};
});
if (!node.state.value) {
node.updateState({
value: repeatArray({}, count).map((item, index) => {
return {
...item,
id: index + 1
};
})
});
}
props.className = `${props.className || ''} ae-Editor-list`;
props.itemsClassName = `${props.itemsClassName || ''} cards-items`;

12
packages/amis-editor/src/plugin/Each.tsx
View File

@ -356,11 +356,17 @@ export class EachPlugin extends BasePlugin {
]);
};
filterProps(props: any) {
filterProps(props: any, node: EditorNodeType) {
// 列表类型内的文本元素显示{{公式}}或者自定义展位，不显示实际值
props = escapeFormula(props);
// 循环编辑态显示2个元素
props.value = [{}, {}];
if (!node.state.value) {
// 循环编辑态显示2个元素
// props.value = [{}, {}];
node.updateState({
value: [{}, {}]
});
}
props.className = `${props.className || ''} ae-Editor-list`;
if (

28
packages/amis-editor/src/plugin/Form/Combo.tsx
View File

@ -707,18 +707,26 @@ export class ComboControlPlugin extends BasePlugin {
]);
};
filterProps(props: any) {
// 至少显示一个成员，否则啥都不显示。
if (props.multiple && !props.value && !props.$schema.value && !props.$ref) {
const mockedData = {};
if (Array.isArray(props.items) && props.items.length === 0) {
props.items.forEach((control: any) => {
control.name &&
setVariable(mockedData, control.name, mockValue(control));
filterProps(props: any, node: EditorNodeType) {
if (!node.state.value) {
// 至少显示一个成员，否则啥都不显示。
if (
props.multiple &&
!props.value &&
!props.$schema.value &&
!props.$ref
) {
const mockedData = {};
if (Array.isArray(props.items) && props.items.length === 0) {
props.items.forEach((control: any) => {
control.name &&
setVariable(mockedData, control.name, mockValue(control));
});
}
node.updateState({
value: [mockedData]
});
}
props.value = [mockedData];
return props;
}
return props;
}

10
packages/amis-editor/src/plugin/Form/InputArray.tsx
View File

@ -1,5 +1,5 @@
import {Button} from 'amis';
import {registerEditorPlugin} from 'amis-editor-core';
import {EditorNodeType, registerEditorPlugin} from 'amis-editor-core';
import {
BaseEventContext,
BasePlugin,
@ -147,12 +147,14 @@ export class ArrayControlPlugin extends BasePlugin {
];
};
filterProps(props: any) {
filterProps(props: any, node: EditorNodeType) {
props = JSONPipeOut(props);
// 至少显示一个成员，否则啥都不显示。
if (!props.value) {
props.value = [''];
if (!node.state.value && !props.value) {
node.updateState({
value: ['']
});
}
return props;

9
packages/amis-editor/src/plugin/Form/InputSubForm.tsx
View File

@ -102,12 +102,15 @@ export class SubFormControlPlugin extends BasePlugin {
] as SchemaCollection;
};
filterProps(props: any) {
filterProps(props: any, node: EditorNodeType) {
props = JSONPipeOut(props);
// 至少显示一个成员，否则啥都不显示。
if (!props.value) {
props.value = [''];
// 至少显示一个成员，否则啥都不显示。
if (!node.state.value && !props.value) {
node.updateState({
value: ['']
});
}
return props;

44
packages/amis-editor/src/plugin/Form/InputTable.tsx
View File

@ -1411,29 +1411,33 @@ export class TableControlPlugin extends BasePlugin {
]);
};
filterProps(props: any) {
const arr = resolveArrayDatasource(props);
filterProps(props: any, node: EditorNodeType) {
if (!node.state.value) {
const arr = resolveArrayDatasource(props);
let value: Array<any> = [];
/** 可 */
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = {};
/** 可 */
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = {};
if (Array.isArray(props.columns)) {
props.columns.forEach((column: any) => {
/** 可编辑状态下不写入 Mock 数据，避免误导用户 */
if (column.name && !props.editable) {
setVariable(mockedData, column.name, mockValue(column));
}
});
if (Array.isArray(props.columns)) {
props.columns.forEach((column: any) => {
/** 可编辑状态下不写入 Mock 数据，避免误导用户 */
if (column.name && !props.editable) {
setVariable(mockedData, column.name, mockValue(column));
}
});
}
value = repeatArray(mockedData, 1).map((item, index) => ({
...item,
id: index + 1
}));
} else {
// 只取10条预览，否则太多卡顿
value = arr.slice(0, 10);
}
props.value = repeatArray(mockedData, 1).map((item, index) => ({
...item,
id: index + 1
}));
} else {
// 只取10条预览，否则太多卡顿
props.value = arr.slice(0, 10);
node.updateState({value});
}
return {

6
packages/amis-editor/src/plugin/Form/Static.tsx
View File

@ -409,8 +409,10 @@ export class StaticControlPlugin extends BasePlugin {
filterProps(props: any, node: EditorNodeType) {
props.$$id = node.id;
if (typeof props.value === 'undefined') {
props.value = mockValue(props);
if (typeof props.value === 'undefined' && !node.state.value) {
node.updateState({
value: mockValue(props)
});
}
return props;
}

46
packages/amis-editor/src/plugin/List.tsx
View File

@ -191,28 +191,34 @@ export class ListPlugin extends BasePlugin {
]);
};
filterProps(props: any) {
if (props.isSlot) {
props.value = [props.data];
return props;
}
filterProps(props: any, node: EditorNodeType) {
if (!node.state.value) {
if (props.isSlot) {
node.updateState({
value: [props.data]
});
return;
}
const data = {
...props.defaultData,
...props.data
};
const arr = resolveArrayDatasource({
value: props.value,
data,
source: props.source
});
const data = {
...props.defaultData,
...props.data
};
const arr = resolveArrayDatasource({
value: props.value,
data,
source: props.source
});
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = this.buildMockData();
props.value = repeatArray(mockedData, 1).map((item, index) => ({
...item,
id: index + 1
}));
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = this.buildMockData();
node.updateState({
value: repeatArray(mockedData, 1).map((item, index) => ({
...item,
id: index + 1
}))
});
}
}
const {$schema, ...rest} = props;

18
packages/amis-editor/src/plugin/List2.tsx
View File

@ -438,15 +438,19 @@ export class List2Plugin extends BasePlugin {
return dataSchema;
}
filterProps(props: any) {
filterProps(props: any, node: EditorNodeType) {
// 编辑时显示两行假数据
const count = (props.columnsCount || 3) * 2;
props.value = repeatArray({}, count).map((item, index) => {
return {
...item,
id: index + 1
};
});
if (!node.state.value) {
node.updateState({
value: repeatArray({}, count).map((item, index) => {
return {
...item,
id: index + 1
};
})
});
}
props.className = `${props.className || ''} ae-Editor-list`;
props.itemsClassName = `${props.itemsClassName || ''} cards-items`;

40
packages/amis-editor/src/plugin/Table.tsx
View File

@ -745,27 +745,33 @@ export class TablePlugin extends BasePlugin {
]);
};
filterProps(props: any) {
const arr = resolveArrayDatasource(props);
filterProps(props: any, node: EditorNodeType) {
if (!node.state.value) {
const arr = resolveArrayDatasource(props);
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = {};
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = {};
if (Array.isArray(props.columns)) {
props.columns.forEach((column: any) => {
if (column.name) {
setVariable(mockedData, column.name, mockValue(column));
}
if (Array.isArray(props.columns)) {
props.columns.forEach((column: any) => {
if (column.name) {
setVariable(mockedData, column.name, mockValue(column));
}
});
}
node.updateState({
value: repeatArray(mockedData, 1).map((item, index) => ({
...item,
id: index + 1
}))
});
} else {
// 只取10条预览，否则太多卡顿
node.updateState({
value: arr.slice(0, 3)
});
}
props.value = repeatArray(mockedData, 1).map((item, index) => ({
...item,
id: index + 1
}));
} else {
// 只取10条预览，否则太多卡顿
props.value = arr.slice(0, 3);
}
// 编辑模式，不允许表格调整宽度

12
packages/amis-editor/src/plugin/Table2.tsx
View File

@ -511,7 +511,7 @@ export class Table2Plugin extends BasePlugin {
return super.getRendererInfo(context);
}
filterProps(props: any) {
filterProps(props: any, node: EditorNodeType) {
const arr = resolveArrayDatasource(props);
const getFooterSummary = (text: string) => ({
type: 'alert',
@ -606,6 +606,16 @@ export class Table2Plugin extends BasePlugin {
props.expandable.expandedRowKeys = [1];
}
if (props.value) {
if (!node.state.value) {
node.updateState({
value: props.value
});
}
delete props.value;
}
return props;
}