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

style: 调整 table 固顶模式的样式兼容 safari Close: #8708 (#8863)

Browse Source
This commit is contained in:
liaoxuezhi 2023-11-23 19:19:06 +08:00 committed by GitHub
parent be312da1c5
commit f3d53fbf7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -528,7 +528,8 @@ export const TableStore = iRendererStore
exportExcelLoading: false,
searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
lazyRenderAfter: 100,
tableLayout: 'auto'
tableLayout: 'auto',
theadHeight: 0
})
.views(self => {
function getColumnsExceptBuiltinTypes() {
@ -1001,7 +1002,7 @@ export const TableStore = iRendererStore
},
buildStyles(style: any) {
style = {...style};
style = {...style, '--Table-thead-height': self.theadHeight + 'px'};
getFilteredColumns().forEach(column => {
style[`--Table-column-${column.index}-width`] =
@ -1295,9 +1296,9 @@ export const TableStore = iRendererStore
if (!table) {
return;
}
const cols = [].slice.call(
table.querySelectorAll(':scope>thead>tr>th[data-index]')
);
const thead = table.querySelector(':scope>thead') as HTMLElement;
const cols = [].slice.call(thead.querySelectorAll('tr>th[data-index]'));
self.theadHeight = thead.offsetHeight;
cols.forEach((col: HTMLElement) => {
const index = parseInt(col.getAttribute('data-index')!, 10);
const column = self.columns[index];

8
packages/amis-ui/scss/components/_table.scss
View File

@ -273,8 +273,12 @@
padding-top: 0;
}
&--affixHeader > thead {
visibility: collapse;
&--affixHeader {
margin-top: calc(var(--Table-thead-height) * -1);
> thead {
visibility: hidden;
}
}
&--withCombine {

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

@ -28,7 +28,7 @@ exports[`doAction:crud reload 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--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; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -335,7 +335,7 @@ exports[`doAction:crud reload with data1 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--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; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -642,7 +642,7 @@ exports[`doAction:crud reload with data2 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--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; position: relative;"
>
<div
class="cxd-Table-fixedTop"

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

@ -53,7 +53,7 @@ exports[`Renderer:input table 1`] = `
>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-contentWrap"
@ -378,7 +378,7 @@ exports[`Renderer:input table add 1`] = `
>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
>
<div
class="cxd-Table-contentWrap"
@ -690,7 +690,7 @@ exports[`Renderer:input-table cell selects delete 1`] = `
>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-contentWrap"
@ -1029,7 +1029,7 @@ exports[`Renderer:input-table init display 1`] = `
>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-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; position: relative;"
>
<div
class="cxd-Table-contentWrap"
@ -1716,7 +1716,7 @@ exports[`Renderer:input-table with combo column 1`] = `
>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; position: relative;"
>
<div
class="cxd-Table-contentWrap"

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

@ -20,7 +20,7 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -2157,7 +2157,7 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
>
<div
class="cxd-Table cxd-Crud-body"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -2799,7 +2799,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</div>
<div
class="cxd-Table cxd-Crud-body"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative; --Table-column-1-width: 0px;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative; --Table-column-1-width: 0px;"
>
<div
class="cxd-Table-fixedTop"

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

@ -83,7 +83,7 @@ exports[`Renderer:Pagination 1`] = `
</div>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"

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

@ -4,7 +4,7 @@ exports[`Renderer:table 1`] = `
<div>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -370,7 +370,7 @@ exports[`Renderer:table align 1`] = `
<div>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -775,7 +775,7 @@ exports[`Renderer:table children 1`] = `
>
<div
class="cxd-Table m-b-none"
style="--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; 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; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -1355,7 +1355,7 @@ exports[`Renderer:table classNameExpr 1`] = `
<div>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -1721,7 +1721,7 @@ exports[`Renderer:table column head style className 1`] = `
<div>
<div
class="cxd-Table className"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -2114,7 +2114,7 @@ exports[`Renderer:table combine Renderer:table combineNum only 1`] = `
>
<div
class="cxd-Table"
style="--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; 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; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -2689,7 +2689,7 @@ exports[`Renderer:table combine Renderer:table combineNum with fromIndex 1`] = `
>
<div
class="cxd-Table"
style="--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; 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; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -3334,7 +3334,7 @@ exports[`Renderer:table groupName-default 1`] = `
>
<div
class="cxd-Table m-b-none"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-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-8-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -4113,7 +4113,7 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
>
<div
class="cxd-Table m-b-none"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-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-8-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -4896,7 +4896,7 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
>
<div
class="cxd-Table m-b-none"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-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-8-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -5667,7 +5667,7 @@ exports[`Renderer:table groupName-withTpl 1`] = `
>
<div
class="cxd-Table m-b-none"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-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-8-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -6430,7 +6430,7 @@ exports[`Renderer:table isHead fixed 1`] = `
<div>
<div
class="cxd-Table"
style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
>
<div
class="cxd-Table-fixedTop"
@ -6807,7 +6807,7 @@ exports[`Renderer:table list 1`] = `
<div>
<div
class="cxd-Table"
style="--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; --Table-column-10-width: 0px; --Table-column-11-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; --Table-column-10-width: 0px; --Table-column-11-width: 0px; position: relative;"
>
<div
class="cxd-Table-toolbar cxd-Table-headToolbar"

5
packages/amis/src/renderers/Table/ItemActionsWrapper.tsx
View File

@ -30,7 +30,10 @@ function ItemActionsWrapper(props: ItemActionsProps) {
}
const rect = dom.getBoundingClientRect();
const height = rect.height;
const top = rect.top - frame.getBoundingClientRect().top;
const top =
rect.top -
frame.getBoundingClientRect().top +
parseInt(getComputedStyle(frame)['marginTop'], 10);
divRef.current!.style.cssText += `top: ${top}px;height: ${height}px;`;
}, [store.hoverRow?.id]);

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

@ -1591,6 +1591,10 @@ export default class Table extends React.Component<TableProps, object> {
document.addEventListener('mousemove', this.handleColResizeMouseMove);
document.addEventListener('mouseup', this.handleColResizeMouseUp);
// 防止选中文本
e.preventDefault();
e.stopPropagation();
}
// 垂直线拖拽移动