Skip to content

Commit

Permalink
chore: 调整 resizeSensor 优先 ResizeObserver, 优化 table 下表单项样式, 优化 inputTa…
Browse files Browse the repository at this point in the history 
…ble 部分逻辑 (#10761)
  • Loading branch information
@2betop
2betop committed Aug 16, 2024
1 parent adbfb01 commit aab978e
Show file tree
Hide file tree
Showing 45 changed files with 283 additions and 5,886 deletions.
5 changes: 4 additions & 1 deletion packages/amis-core/src/renderers/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1002,7 +1002,10 @@ export default class Form extends React.Component<FormProps, object> {

this.flushing = true;
const hooks = this.hooks['flush'] || [];
await Promise.all(hooks.map(fn => fn()));
// 得有顺序，有些可能依赖上一个的结果
for (let hook of hooks) {
await hook();
}
if (!this.emitting) {
await this.lazyEmitChange.flush();
}
Expand Down
6 changes: 6 additions & 0 deletions packages/amis-core/src/renderers/Item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,11 @@ export interface FormItemBasicConfig extends Partial<RendererConfig> {
storeType?: string;
validations?: string;
strictMode?: boolean;

/**
* 是否是瘦子
*/
thin?: boolean;
/**
* schema变化使视图更新的属性白名单
*/
Expand Down Expand Up @@ -2324,6 +2329,7 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
'is-inline': !!rest.inline && !mobileUI,
'is-error': model && !model.valid,
'is-full': size === 'full',
'is-thin': config.thin,
[`Form-control--withSize Form-control--size${ucFirst(
controlSize
)}`]:
Expand Down
78 changes: 49 additions & 29 deletions packages/amis-core/src/store/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1444,7 +1444,7 @@ export const TableStore = iRendererStore
function initRows(
rows: Array<any>,
getEntryId?: (entry: any, index: number) => string,
reUseRow?: boolean
reUseRow?: boolean | 'match'
) {
self.selectedRows.clear();
// self.expandedRows.clear();
Expand Down Expand Up @@ -1499,39 +1499,41 @@ export const TableStore = iRendererStore
);
}

replaceRow(arr, reUseRow);
let allMatched = replaceRow(arr, reUseRow);
self.isNested = self.rows.some(
item => item.children.length || (item.defer && !item.loaded)
);

// 前 20 个直接渲染，后面的按需渲染
if (
self.lazyRenderAfter &&
self.falttenedRows.length > self.lazyRenderAfter
) {
for (
let i = self.lazyRenderAfter, len = self.falttenedRows.length;
i < len;
i++
if (!allMatched) {
// 前 20 个直接渲染，后面的按需渲染
if (
self.lazyRenderAfter &&
self.falttenedRows.length > self.lazyRenderAfter
) {
self.falttenedRows[i].appeared = false;
self.falttenedRows[i].lazyRender = true;
for (
let i = self.lazyRenderAfter, len = self.falttenedRows.length;
i < len;
i++
) {
self.falttenedRows[i].appeared = false;
self.falttenedRows[i].lazyRender = true;
}
}
}

const expand = self.footable && self.footable.expand;
if (
expand === 'first' ||
(self.expandConfig && self.expandConfig.expand === 'first')
) {
self.rows.length && self.expandedRows.push(self.rows[0].id);
} else if (
(expand === 'all' && !self.footable.accordion) ||
(self.expandConfig &&
self.expandConfig.expand === 'all' &&
!self.expandConfig.accordion)
) {
self.expandedRows.replace(getExpandAllRows(self.rows));
const expand = self.footable && self.footable.expand;
if (
expand === 'first' ||
(self.expandConfig && self.expandConfig.expand === 'first')
) {
self.rows.length && self.expandedRows.push(self.rows[0].id);
} else if (
(expand === 'all' && !self.footable.accordion) ||
(self.expandConfig &&
self.expandConfig.expand === 'all' &&
!self.expandConfig.accordion)
) {
self.expandedRows.replace(getExpandAllRows(self.rows));
}
}

self.dragging = false;
Expand All @@ -1551,10 +1553,26 @@ export const TableStore = iRendererStore
}

// 尽可能的复用 row
function replaceRow(arr: Array<SRow>, reUseRow?: boolean) {
function replaceRow(arr: Array<SRow>, reUseRow?: boolean | 'match'): any {
if (reUseRow === false) {
self.rows.replace(arr.map(item => Row.create(item)));
return;
return false;
} else if (reUseRow === 'match') {
const rows = self.falttenedRows;
let allMatched = true;
self.rows.replace(
arr.map(item => {
const exist = rows.find(row => row.id === item.id);
if (exist) {
exist.replaceWith(item);
return exist;
}

allMatched = false;
return Row.create(item);
})
);
return allMatched;
}

const pool = arr.concat();
Expand All @@ -1577,6 +1595,8 @@ export const TableStore = iRendererStore
}
index++;
}

return false;
}

function updateSelected(selected: Array<any>, valueField?: string) {
Expand Down
33 changes: 33 additions & 0 deletions packages/amis-core/src/utils/resize-sensor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,39 @@ export function resizeSensor(
return () => {};
}

// 优先用 ResizeObserver
if (typeof ResizeObserver !== 'undefined') {
const rect = element.getBoundingClientRect();
let originWidth = rect.width;
let originHeight = rect.height;

const observer = new ResizeObserver(function (entries) {
if (once) {
observer.disconnect();
}

if (type === 'both') {
callback();
} else {
const entry = entries[0];
const cr = entry.contentRect;
if (
(type === 'width' && cr.width !== originWidth) ||
(type === 'height' && cr.height !== originHeight)
) {
callback();
originWidth = cr.width;
originHeight = cr.height;
}
}
});
observer.observe(element);
return () => {
observer.disconnect();
};
}

// 不支持 ResizeObserver 的话，用 polyfill
let disposeEvent: (() => void) | undefined = undefined;

if (once) {
Expand Down
3 changes: 2 additions & 1 deletion packages/amis-ui/scss/components/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,8 @@
}

& > .#{$ns}Form,
& > .#{$ns}Form-item {
& > .#{$ns}Form-item > .#{$ns}Form-control:not(.is-thin) {
// todo 优化这个，有些表单项宽度其实是很小的比如 switch，button，checkbox，radio
min-width: var(--Form-control-widthBase);
}

Expand Down
123 changes: 3 additions & 120 deletions packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`doAction:crud reload 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px;"
>
<div
class="cxd-Table-fixedTop"
Expand Down Expand Up @@ -260,45 +260,6 @@ exports[`doAction:crud reload 1`] = `
/>
</div>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -337,7 +298,7 @@ exports[`doAction:crud reload with data1 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px;"
>
<div
class="cxd-Table-fixedTop"
Expand Down Expand Up @@ -568,45 +529,6 @@ exports[`doAction:crud reload with data1 1`] = `
/>
</div>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -645,7 +567,7 @@ exports[`doAction:crud reload with data2 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px;"
>
<div
class="cxd-Table-fixedTop"
Expand Down Expand Up @@ -876,45 +798,6 @@ exports[`doAction:crud reload with data2 1`] = `
/>
</div>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit aab978e

Please sign in to comment.