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

chore: 优化 table 编辑器体验支持宽度实时更新 (#7876)

Browse Source
This commit is contained in:
liaoxuezhi 2023-08-21 20:58:02 +08:00 committed by GitHub
parent ffc5e33ae9
commit d66a7cd7c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1107 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
packages/amis-core/src/store/table.ts
View File

@ -938,23 +938,29 @@ export const TableStore = iRendererStore
});
const originColumns = self.columns.concat();
columns = columns.map((item, index) => ({
...item,
id: guid(),
index,
width: originColumns[index]?.width || 0,
minWidth: originColumns[index]?.minWidth || 0,
rawIndex: index - PARTITION_INDEX,
type: item.type || 'plain',
pristine: item.pristine || item,
toggled: item.toggled !== false,
breakpoint: item.breakpoint,
isPrimary: index === PARTITION_INDEX,
/** 提前映射变量，方便后续view中使用 */
label: isPureVariable(item.label)
? resolveVariableAndFilter(item.label, self.data)
: item.label
}));
columns = columns.map((item, index) => {
const origin = item.id
? originColumns.find(column => column.id === item.id)
: originColumns[index];
return {
...item,
id: guid(),
index,
width: origin?.width || 0,
minWidth: origin?.minWidth || 0,
rawIndex: index - PARTITION_INDEX,
type: item.type || 'plain',
pristine: item.pristine || item,
toggled: item.toggled !== false,
breakpoint: item.breakpoint,
isPrimary: index === PARTITION_INDEX,
/** 提前映射变量，方便后续view中使用 */
label: isPureVariable(item.label)
? resolveVariableAndFilter(item.label, self.data)
: item.label
};
});
self.columns.replace(columns as any);
self.useFixedLayout = self.columns.some(
@ -968,91 +974,63 @@ export const TableStore = iRendererStore
if (!table) {
return;
}
// 自动将 table-layout: auto 改成 fixed
const ths = (
[].slice.call(
table.querySelectorAll(':scope>thead>tr>th[data-index]')
) as HTMLTableCellElement[]
).filter((th, index, arr) => {
return (
arr.findIndex(
item =>
item.getAttribute('data-index') === th.getAttribute('data-index')
) === index
);
});
const tableWidth = table.parentElement!.offsetWidth;
const thead = table.querySelector(':scope>thead')!;
const tbodyTr = table.querySelector(':scope>tbody>tr:first-child');
const div = document.createElement('div');
div.className = 'amis-scope'; // jssdk 里面 css 会在这一层
div.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;visibility: hidden;`;
div.innerHTML = `<table style="table-layout:auto!important;width:0!important;min-width:0!important;" class="${
table.className
}"><thead><tr>${ths
.map(
th =>
`<th style="width:0" data-index="${th.getAttribute(
'data-index'
)}" class="${th.className}">${th.innerHTML}</th>`
)
.join(
div.style.cssText += `visibility: hidden!important;`;
div.innerHTML =
`<table style="table-layout:auto!important;width:0!important;min-width:0!important;" class="${table.className}">${thead.outerHTML}</table>` +
`<table style="table-layout:auto!important;min-width:${tableWidth}px!important;width:${tableWidth}px!important;" class="${table.className.replace(
'is-layout-fixed',
''
)}</tr></thead></table><table style="table-layout:auto!important;min-width:${
table.offsetWidth
}px!important;" class="${table.className.replace(
'is-layout-fixed',
''
)}"><thead><tr>${ths
.map(th => {
const index = parseInt(th.getAttribute('data-index')!, 10);
const column = self.columns[index];
)}">${thead.outerHTML}${
tbodyTr ? `<tbody>${tbodyTr.outerHTML}</tbody>` : ''
}</table>`;
const ths1: Array<HTMLTableCellElement> = [].slice.call(
div.querySelectorAll(':scope>table:first-child>thead>tr>th[data-index]')
);
const ths2: Array<HTMLTableCellElement> = [].slice.call(
div.querySelectorAll(':scope>table:last-child>thead>tr>th[data-index]')
);
return `<th style="${
typeof column.pristine.width === 'number'
? `width: ${column.pristine.width}px;`
: column.pristine.width
? `width: ${column.pristine.width};`
: ''
}" data-index="${th.getAttribute('data-index')}" class="${
th.className
}">${th.innerHTML}</th>`;
})
.join('')}</tr></thead>${
tbodyTr ? `<tbody>${tbodyTr.outerHTML}</tbody>` : ''
}</table>`;
ths1.forEach(th => {
th.style.cssText += 'width: 0';
});
ths2.forEach(th => {
const index = parseInt(th.getAttribute('data-index')!, 10);
const column = self.columns[index];
th.style.cssText += `${
typeof column.pristine.width === 'number'
? `width: ${column.pristine.width}px;`
: column.pristine.width
? `width: ${column.pristine.width};`
: ''
}`;
});
document.body.appendChild(div);
const minWidths: {
[propName: string]: number;
} = {};
[].slice
.call(
div.querySelectorAll(
':scope>table:first-child>thead>tr>th[data-index]'
)
)
.forEach((th: HTMLTableCellElement) => {
minWidths[th.getAttribute('data-index')!] = th.clientWidth;
});
ths1.forEach((th: HTMLTableCellElement) => {
minWidths[th.getAttribute('data-index')!] = th.clientWidth;
});
[].slice
.call(
div.querySelectorAll(
':scope>table:last-child>thead>tr>th[data-index]'
)
)
.forEach((col: HTMLElement) => {
const index = parseInt(col.getAttribute('data-index')!, 10);
const column = self.columns[index];
column.setWidth(
Math.max(
typeof column.pristine.width === 'number'
? column.pristine.width
: col.clientWidth - 2,
minWidths[index]
),
ths2.forEach((col: HTMLElement) => {
const index = parseInt(col.getAttribute('data-index')!, 10);
const column = self.columns[index];
column.setWidth(
Math.max(
typeof column.pristine.width === 'number'
? column.pristine.width
: col.clientWidth - 2,
minWidths[index]
);
});
),
minWidths[index]
);
});
document.body.removeChild(div);
}

6
packages/amis-editor-core/src/component/factory.tsx
View File

@ -153,9 +153,11 @@ export function makeWrapper(
ref = ref.getWrappedInstance();
}
this.editorNode &&
isAlive(this.editorNode) &&
if (this.editorNode && isAlive(this.editorNode)) {
this.editorNode.setComponent(ref);
info.plugin?.componentRef?.(this.editorNode, ref);
}
}
/**

7
packages/amis-editor-core/src/plugin.ts
View File

@ -940,6 +940,13 @@ export interface PluginInterface
) => Schema | void;
dispose?: () => void;
/**
* 组件 ref 回调，mount 和 unmount 的时候都会调用
* @param ref
* @returns
*/
componentRef?: (node: EditorNodeType, ref: any) => void;
}
export interface RendererPluginEvent {

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

@ -32,6 +32,7 @@ import {
schemaToArray,
resolveArrayDatasource
} from '../util';
import {reaction} from 'mobx';
export class TablePlugin extends BasePlugin {
static id = 'TablePlugin';
@ -942,6 +943,26 @@ export class TablePlugin extends BasePlugin {
}
});
}
unWatchWidthChange: {[propName: string]: () => void} = {};
componentRef(node: EditorNodeType, ref: any) {
if (ref) {
const store = ref.props.store;
this.unWatchWidthChange[node.id] = reaction(
() =>
store.columns.map((column: any) => column.pristine.width).join(','),
() => {
ref.updateTableInfoLazy(() => {
this.manager.store.highlightNodes.forEach(node =>
node.calculateHighlightBox()
);
});
}
);
} else {
this.unWatchWidthChange[node.id]?.();
}
}
}
registerEditorPlugin(TablePlugin);

30
packages/amis-editor/src/tpl/common.tsx
View File

@ -79,27 +79,15 @@ setSchemaTpl('formItemName', {
// validateOnChange: false
});
setSchemaTpl('formItemExtraName', {
className: 'mb-3',
type: 'fieldset',
body: [
getSchemaTpl('formItemName', {
required: true,
label: '额外字段',
name: 'extraName',
visibleOn: 'typeof this.extraName === "string"'
}),
{
type: 'switch',
label: tipedLabel('存成两个字段', '开启后将选中范围分别存成两个字段'),
name: 'extraName',
pipeIn: (value: any) => typeof value === 'string',
pipeOut: (value: any) => (value ? '' : undefined),
inputClassName: 'is-inline'
}
]
});
setSchemaTpl(
'formItemExtraName',
getSchemaTpl('formItemName', {
required: false,
label: '结尾字段名',
name: 'extraName',
description: '配置了结尾字段名，该组件将开始和结尾存成两个字段'
})
);
setSchemaTpl(
'formItemMode',

3
packages/amis-ui/scss/_mixins.scss
View File

@ -203,7 +203,8 @@
&:hover:active {
@content;
}
&.active {
&.active,
&.is-active {
@content;
}
}

120
packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
View File

@ -25,6 +25,7 @@ exports[`doAction:crud reload 1`] = `
</button>
<div
class="cxd-Crud is-loading"
style="position: relative;"
>
<div
class="cxd-Table cxd-Crud-body"
@ -261,6 +262,45 @@ exports[`doAction:crud reload 1`] = `
<span />
</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>
@ -294,6 +334,7 @@ exports[`doAction:crud reload with data1 1`] = `
</button>
<div
class="cxd-Crud is-loading"
style="position: relative;"
>
<div
class="cxd-Table cxd-Crud-body"
@ -530,6 +571,45 @@ exports[`doAction:crud reload with data1 1`] = `
<span />
</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>
@ -563,6 +643,7 @@ exports[`doAction:crud reload with data2 1`] = `
</button>
<div
class="cxd-Crud is-loading"
style="position: relative;"
>
<div
class="cxd-Table cxd-Crud-body"
@ -799,6 +880,45 @@ exports[`doAction:crud reload with data2 1`] = `
<span />
</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>

160
packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
View File

@ -224,6 +224,7 @@ exports[`Renderer:input table 1`] = `
>
<div
class="cxd-InputTable cxd-Form-control"
style="position: relative;"
>
<div
class="cxd-Table"
@ -370,6 +371,45 @@ exports[`Renderer:input table 1`] = `
<span />
</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>
</form>
@ -550,6 +590,7 @@ exports[`Renderer:input table add 1`] = `
>
<div
class="cxd-InputTable cxd-Form-control"
style="position: relative;"
>
<div
class="cxd-Table"
@ -768,6 +809,45 @@ exports[`Renderer:input table add 1`] = `
</span>
</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>
</form>
@ -882,6 +962,7 @@ exports[`Renderer:input-table cell selects delete 1`] = `
</label>
<div
class="cxd-InputTable cxd-Form-control"
style="position: relative;"
>
<div
class="cxd-Table"
@ -1051,6 +1132,45 @@ exports[`Renderer:input-table cell selects delete 1`] = `
<span />
</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>
</form>
@ -1263,6 +1383,7 @@ exports[`Renderer:input-table with combo column 1`] = `
>
<div
class="cxd-InputTable cxd-Form-control"
style="position: relative;"
>
<div
class="cxd-Table"
@ -1459,6 +1580,45 @@ exports[`Renderer:input-table with combo column 1`] = `
<span />
</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>
</form>

120
packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
View File

@ -17,6 +17,7 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
>
<div
class="cxd-Crud"
style="position: relative;"
>
<div
class="cxd-Table cxd-Crud-body"
@ -793,6 +794,45 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
</div>
</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>
@ -2108,6 +2148,7 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
>
<div
class="cxd-Crud"
style="position: relative;"
>
<div
class="cxd-Table cxd-Crud-body"
@ -2601,6 +2642,45 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
</div>
</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>
@ -2626,6 +2706,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
>
<div
class="cxd-Crud"
style="position: relative;"
>
<div
class="cxd-Crud-selection"
@ -3537,6 +3618,45 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</div>
</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>

40
packages/amis/__tests__/renderers/__snapshots__/Pagination.test.tsx.snap
View File

@ -7,6 +7,7 @@ exports[`Renderer:Pagination 1`] = `
>
<div
class="cxd-PaginationWrapper"
style="position: relative;"
>
<div
class="cxd-Pagination-wrap cxd-PaginationWrapper-pager"
@ -212,6 +213,45 @@ exports[`Renderer:Pagination 1`] = `
<span />
</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>

538
packages/amis/__tests__/renderers/__snapshots__/Table.test.tsx.snap
View File

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Renderer:table 1`] = `
<div>
<div
style="position: relative;"
>
<div
class="cxd-Table"
>
@ -325,11 +327,52 @@ exports[`Renderer:table 1`] = `
<span />
</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>
`;
exports[`Renderer:table align 1`] = `
<div>
<div
style="position: relative;"
>
<div
class="cxd-Table"
>
@ -676,6 +719,45 @@ exports[`Renderer:table align 1`] = `
<span />
</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>
`;
@ -696,6 +778,7 @@ exports[`Renderer:table children 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table m-b-none"
@ -1252,6 +1335,45 @@ exports[`Renderer:table children 1`] = `
<span />
</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>
@ -1261,7 +1383,9 @@ exports[`Renderer:table children 1`] = `
`;
exports[`Renderer:table classNameExpr 1`] = `
<div>
<div
style="position: relative;"
>
<div
class="cxd-Table"
>
@ -1585,11 +1709,52 @@ exports[`Renderer:table classNameExpr 1`] = `
<span />
</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>
`;
exports[`Renderer:table column head style className 1`] = `
<div>
<div
style="position: relative;"
>
<div
class="cxd-Table className"
>
@ -1924,6 +2089,45 @@ exports[`Renderer:table column head style className 1`] = `
<span />
</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>
`;
@ -1944,6 +2148,7 @@ exports[`Renderer:table combine Renderer:table combineNum only 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table"
@ -2456,6 +2661,45 @@ exports[`Renderer:table combine Renderer:table combineNum only 1`] = `
<span />
</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>
@ -2481,6 +2725,7 @@ exports[`Renderer:table combine Renderer:table combineNum with fromIndex 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table"
@ -3063,6 +3308,45 @@ exports[`Renderer:table combine Renderer:table combineNum with fromIndex 1`] = `
<span />
</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>
@ -3088,6 +3372,7 @@ exports[`Renderer:table groupName-default 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table m-b-none"
@ -3804,6 +4089,45 @@ exports[`Renderer:table groupName-default 1`] = `
<span />
</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>
@ -3829,6 +4153,7 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table m-b-none"
@ -4549,6 +4874,45 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
<span />
</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>
@ -4574,6 +4938,7 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table m-b-none"
@ -5282,6 +5647,45 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
<span />
</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>
@ -5307,6 +5711,7 @@ exports[`Renderer:table groupName-withTpl 1`] = `
>
<div
class="cxd-Service"
style="position: relative;"
>
<div
class="cxd-Table m-b-none"
@ -6023,6 +6428,45 @@ exports[`Renderer:table groupName-withTpl 1`] = `
<span />
</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>
@ -6032,7 +6476,9 @@ exports[`Renderer:table groupName-withTpl 1`] = `
`;
exports[`Renderer:table isHead fixed 1`] = `
<div>
<div
style="position: relative;"
>
<div
class="cxd-Table"
>
@ -6367,11 +6813,52 @@ exports[`Renderer:table isHead fixed 1`] = `
<span />
</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>
`;
exports[`Renderer:table list 1`] = `
<div>
<div
style="position: relative;"
>
<div
class="cxd-Table"
>
@ -7559,5 +8046,44 @@ exports[`Renderer:table list 1`] = `
<span />
</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>
`;

26
packages/amis/src/renderers/Table/index.tsx
View File

@ -65,6 +65,7 @@ import {isMobile} from 'amis-core';
import isPlainObject from 'lodash/isPlainObject';
import omit from 'lodash/omit';
import ColGroup from './ColGroup';
import debounce from 'lodash/debounce';
/**
* 表格列，不指定类型时默认为文本类型。
@ -513,6 +514,10 @@ export default class Table extends React.Component<TableProps, object> {
subForms: any = {};
timer: ReturnType<typeof setTimeout>;
toDispose: Array<() => void> = [];
updateTableInfoLazy = debounce(this.updateTableInfo.bind(this), 250, {
trailing: true,
leading: false
});
constructor(props: TableProps, context: IScopedContext) {
super(props);
@ -524,6 +529,7 @@ export default class Table extends React.Component<TableProps, object> {
this.tableRef = this.tableRef.bind(this);
this.affixedTableRef = this.affixedTableRef.bind(this);
this.updateTableInfo = this.updateTableInfo.bind(this);
this.updateTableInfoRef = this.updateTableInfoRef.bind(this);
this.handleAction = this.handleAction.bind(this);
this.handleCheck = this.handleCheck.bind(this);
this.handleCheckAll = this.handleCheckAll.bind(this);
@ -661,6 +667,9 @@ export default class Table extends React.Component<TableProps, object> {
this.updateAutoFillHeight();
}
this.toDispose.push(
resizeSensor(currentNode.parentElement!, this.updateTableInfoLazy)
);
const {store, autoGenerateFilter, onSearchableFromInit} = this.props;
// autoGenerateFilter 开启后
@ -845,6 +854,7 @@ export default class Table extends React.Component<TableProps, object> {
this.toDispose.forEach(fn => fn());
this.toDispose = [];
this.updateTableInfoLazy.cancel();
formItem && isAlive(formItem) && formItem.setSubStore(null);
clearTimeout(this.timer);
@ -1169,11 +1179,19 @@ export default class Table extends React.Component<TableProps, object> {
return store.selectedRows.map(item => item.data);
}
updateTableInfo(ref: any) {
if (!ref) {
updateTableInfo(callback?: () => void) {
if (this.resizeLine) {
return;
}
this.props.store.syncTableWidth();
callback && setTimeout(callback, 20);
}
updateTableInfoRef(ref: any) {
if (!ref) {
return;
}
this.updateTableInfo();
}
// 当表格滚动是，需要让 affixHeader 部分的表格也滚动
@ -2850,7 +2868,9 @@ export default class Table extends React.Component<TableProps, object> {
{
// 利用这个将 table-layout: auto 转成 table-layout: fixed
store.columnWidthReady ? null : <span ref={this.updateTableInfo} />
store.columnWidthReady ? null : (
<span ref={this.updateTableInfoRef} />
)
}
</div>