mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
chore: 优化 table 编辑器体验支持宽度实时更新 (#7876)
This commit is contained in:
liaoxuezhi
GitHub
parent
ffc5e33ae9
commit
d66a7cd7c7
@ -938,12 +938,17 @@ export const TableStore = iRendererStore
|
||||
});
|
||||
|
||||
const originColumns = self.columns.concat();
|
||||
columns = columns.map((item, index) => ({
|
||||
columns = columns.map((item, index) => {
|
||||
const origin = item.id
|
||||
? originColumns.find(column => column.id === item.id)
|
||||
: originColumns[index];
|
||||
|
||||
return {
|
||||
...item,
|
||||
id: guid(),
|
||||
index,
|
||||
width: originColumns[index]?.width || 0,
|
||||
minWidth: originColumns[index]?.minWidth || 0,
|
||||
width: origin?.width || 0,
|
||||
minWidth: origin?.minWidth || 0,
|
||||
rawIndex: index - PARTITION_INDEX,
|
||||
type: item.type || 'plain',
|
||||
pristine: item.pristine || item,
|
||||
@ -954,7 +959,8 @@ export const TableStore = iRendererStore
|
||||
label: isPureVariable(item.label)
|
||||
? resolveVariableAndFilter(item.label, self.data)
|
||||
: item.label
|
||||
}));
|
||||
};
|
||||
});
|
||||
|
||||
self.columns.replace(columns as any);
|
||||
self.useFixedLayout = self.columns.some(
|
||||
@ -968,79 +974,51 @@ 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(
|
||||
''
|
||||
)}</tr></thead></table><table style="table-layout:auto!important;min-width:${
|
||||
table.offsetWidth
|
||||
}px!important;" class="${table.className.replace(
|
||||
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',
|
||||
''
|
||||
)}"><thead><tr>${ths
|
||||
.map(th => {
|
||||
)}">${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]')
|
||||
);
|
||||
|
||||
ths1.forEach(th => {
|
||||
th.style.cssText += 'width: 0';
|
||||
});
|
||||
ths2.forEach(th => {
|
||||
const index = parseInt(th.getAttribute('data-index')!, 10);
|
||||
const column = self.columns[index];
|
||||
|
||||
return `<th style="${
|
||||
th.style.cssText += `${
|
||||
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>`;
|
||||
}`;
|
||||
});
|
||||
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) => {
|
||||
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) => {
|
||||
ths2.forEach((col: HTMLElement) => {
|
||||
const index = parseInt(col.getAttribute('data-index')!, 10);
|
||||
const column = self.columns[index];
|
||||
column.setWidth(
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -79,27 +79,15 @@ setSchemaTpl('formItemName', {
|
||||
// validateOnChange: false
|
||||
});
|
||||
|
||||
setSchemaTpl('formItemExtraName', {
|
||||
className: 'mb-3',
|
||||
type: 'fieldset',
|
||||
body: [
|
||||
setSchemaTpl(
|
||||
'formItemExtraName',
|
||||
getSchemaTpl('formItemName', {
|
||||
required: true,
|
||||
label: '额外字段',
|
||||
required: false,
|
||||
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'
|
||||
}
|
||||
]
|
||||
});
|
||||
description: '配置了结尾字段名，该组件将开始和结尾存成两个字段'
|
||||
})
|
||||
);
|
||||
|
||||
setSchemaTpl(
|
||||
'formItemMode',
|
||||
|
||||
@ -203,7 +203,8 @@
|
||||
&:hover:active {
|
||||
@content;
|
||||
}
|
||||
&.active {
|
||||
&.active,
|
||||
&.is-active {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user