test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Revert "fix: 兼容低版本浏览器配置table:autoFillHeight（不支持sticky） (#5020)" (#5109)

Browse Source 
This reverts commit f81d18c7c8.
This commit is contained in:
RUNZE LU 2022-08-10 20:25:45 +08:00 committed by GitHub
parent 55b638befb
commit 045a35016c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -961,9 +961,7 @@
}
> .#{$ns}Table-fixedTop {
.#{$ns}Table-fixedTop-shadow {
display: none;
}
display: none;
}
> .#{$ns}Table-footToolbar {

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

@ -616,7 +616,6 @@ export default class Table extends React.Component<TableProps, object> {
}
componentDidMount() {
const {autoFillHeight, classPrefix: ns} = this.props;
const currentNode = findDOMNode(this) as HTMLElement;
// 获取小于所有子元素高度之和的父元素
let parent: HTMLElement | Window | null = getScrollParent(
@ -643,11 +642,6 @@ export default class Table extends React.Component<TableProps, object> {
this.affixDetect();
parent.addEventListener('scroll', this.affixDetect);
if (autoFillHeight) {
document
.querySelector<HTMLElement>(`.${ns}Table-content`)!
.addEventListener('scroll', this.affixDetect);
}
window.addEventListener('resize', this.affixDetect);
this.updateAutoFillHeight();
window.addEventListener('resize', this.updateAutoFillHeight);
@ -822,15 +816,10 @@ export default class Table extends React.Component<TableProps, object> {
}
componentWillUnmount() {
const {formItem, autoFillHeight, classPrefix: ns} = this.props;
const {formItem} = this.props;
const parent = this.parentNode;
parent && parent.removeEventListener('scroll', this.affixDetect);
if (autoFillHeight) {
document
.querySelector<HTMLElement>(`.${ns}Table-content`)!
.addEventListener('scroll', this.affixDetect);
}
window.removeEventListener('resize', this.affixDetect);
window.removeEventListener('resize', this.updateAutoFillHeight);
(this.updateTableInfoLazy as any).cancel();
@ -1071,81 +1060,44 @@ export default class Table extends React.Component<TableProps, object> {
return store.selectedRows.map(item => item.data);
}
/**
* 滚动重新定位Table-fixedTop
*/
affixDetect() {
const {
affixHeader,
classPrefix: ns,
affixOffsetTop,
env,
autoFillHeight
} = this.props;
if (!(affixHeader || autoFillHeight) || !this.table) {
// if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
affixDetect() {
if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
return;
}
const ns = this.props.classPrefix;
const dom = findDOMNode(this) as HTMLElement;
const clip = (this.table as HTMLElement).getBoundingClientRect();
const offsetY =
this.props.affixOffsetTop ?? this.props.env.affixOffsetTop ?? 0;
const headingHeight =
dom.querySelector(`.${ns}Table-heading`)?.getBoundingClientRect()
.height || 0;
const headerHeight =
dom.querySelector(`.${ns}Table-headToolbar`)?.getBoundingClientRect()
.height || 0;
const affixed =
clip.top - headerHeight - headingHeight < offsetY &&
clip.top + clip.height - 40 > offsetY;
const affixedDom = dom.querySelector(`.${ns}Table-fixedTop`) as HTMLElement;
const affixedShadowDom = dom.querySelector(
`.${ns}Table-fixedTop-shadow`
) as HTMLElement;
const affixedDomHeight =
getComputedStyle(affixedDom).getPropertyValue('height');
if (autoFillHeight) {
//! 解决 sticky 不兼容的问题
const tableContentDom = document.querySelector<HTMLElement>(
`.${ns}Table-content`
)!;
const clip = tableContentDom.getBoundingClientRect();
const tableHeaderClip = affixedDom
.querySelector(`.${ns}Table-wrapper`)!
.getBoundingClientRect();
const offsetHeight =
affixedDom.getBoundingClientRect().height - tableHeaderClip.height;
const offsetY = clip.top - offsetHeight;
affixedDom.style.cssText += `top: ${offsetY}px;width: ${clip.width}px`;
affixedDom.classList.add('in');
} else {
// 配置了 affixHeader
const clip = (this.table as HTMLElement).getBoundingClientRect();
const offsetY = affixOffsetTop ?? env.affixOffsetTop ?? 0;
const headingHeight =
dom.querySelector(`.${ns}Table-heading`)?.getBoundingClientRect()
.height || 0;
const affixedShadowDom = dom.querySelector(
`.${ns}Table-fixedTop-shadow`
) as HTMLElement;
const affixed =
clip.top - headerHeight - headingHeight < offsetY &&
clip.top + clip.height - 40 > offsetY;
affixedDom.style.cssText += `top: ${offsetY}px;width: ${
(this.table.parentNode as HTMLElement).offsetWidth
}px`;
affixedShadowDom.style.cssText += `top: ${affixedDomHeight};width: ${
(this.table.parentNode as HTMLElement).offsetWidth
}px`;
const preStatus = affixedDom.classList.contains('in');
affixed
? affixedDom.classList.add('in')
: affixedDom.classList.remove('in');
// 出现affixHeader时重新计算列表宽度
if (!preStatus && affixed) {
this.updateTableInfoLazy();
}
}
affixedDom.style.cssText += `top: ${offsetY}px;width: ${
(this.table.parentNode as HTMLElement).offsetWidth
}px`;
affixedShadowDom.style.cssText += `top: ${affixedDomHeight};width: ${
(this.table.parentNode as HTMLElement).offsetWidth
}px`;
affixed
? affixedDom.classList.add('in')
: affixedDom.classList.remove('in');
// store.markHeaderAffix(clip.top < offsetY && (clip.top + clip.height - 40) > offsetY);
}