antdesignblazor
/
ant-design-blazor
зеркало из https://github.com/ant-design-blazor/ant-design-blazor.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

fix(module: table): fix AutoHeight algorithm (#4238) 

* fix AutoHeight of table

* fix(module:table) Optimize tableHelper.ts code

* Update components/table/Table.razor.cs

* Update components/table/Table.razor.cs

---------

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
ysj265 2024-09-26 13:58:30 +08:00 коммит произвёл GitHub
Родитель be49a3b376
Коммит 772cfda2ee
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
3 изменённых файлов: 58 добавлений и 104 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

146
components/core/JsInterop/modules/components/tableHelper.ts
Просмотреть файл

@ -1,13 +1,11 @@
export class tableHelper {
static isHidden(element) {
if (element instanceof HTMLElement) {
if (element) {
const computedStyle = getComputedStyle(element);
if (computedStyle.display === "none" || computedStyle.visibility === "hidden") {
return true;
}
}
if (element.parentNode != null) {
if (tableHelper.isHidden(element.parentNode)) {
if (element.parentElement && tableHelper.isHidden(element.parentElement)) {
return true;
}
}
@ -26,107 +24,67 @@
}
return false;
}
static getTotalHeightAbove(rootElement, element, left: number, right: number): number {
let totalHeight = 0;
let currentElement = element.previousElementSibling;
let rowGap = 0;
if (element.parentElement != null) {
const computedStyle = getComputedStyle(element.parentElement);
if (computedStyle.rowGap) {
if (computedStyle.rowGap.endsWith('px')) {
rowGap = parseFloat(computedStyle.rowGap);
}
}
}
let nextElement = element;
let nextComputedStyle = getComputedStyle(element);
if (!tableHelper.isIgnore(element, nextComputedStyle, left, right)) {
totalHeight += parseFloat( nextComputedStyle.marginTop);
}
while (currentElement) {
const currentComputedStyle = getComputedStyle(currentElement);
if (!tableHelper.isIgnore(currentElement, currentComputedStyle, left, right)) {
totalHeight += currentElement.offsetHeight + Math.max(parseFloat(currentComputedStyle.marginTop), parseFloat(nextComputedStyle.marginTop)) + rowGap;
}
nextElement = currentElement;
currentElement = currentElement.previousElementSibling;
nextComputedStyle = currentComputedStyle;
}
if (!tableHelper.isIgnore(nextElement, nextComputedStyle, left, right)) {
totalHeight += parseFloat(nextComputedStyle.marginTop);
}
const parentElement = element.parentElement;
if (parentElement != null) {
const parentComputedStyle = getComputedStyle(parentElement);
if (!tableHelper.isIgnore(parentElement, parentComputedStyle, left, right)) {
totalHeight += parseFloat(parentComputedStyle.paddingTop);
totalHeight += parseFloat(parentComputedStyle.borderTop);
}
if (parentElement == rootElement) {
return totalHeight;
}
totalHeight += tableHelper.getTotalHeightAbove(rootElement, parentElement, left, right);
}
return totalHeight;
static getTotalHeightAbove(rootElement, element): number {
const currentRect = element.getBoundingClientRect();
const parentRect = rootElement.getBoundingClientRect();
return currentRect.top - parentRect.top;
}
static getTotalHeightBelow(rootElement, element, left: number, right: number): number {
static getTotalHeightBelow(rootElement, element, marginBottom: number, left: number, right: number): number {
let totalHeight = 0;
let currentElement = element.nextElementSibling;
let rowGap = 0;
if (element.parentElement != null) {
const computedStyle = getComputedStyle(element.parentElement);
if (computedStyle.rowGap) {
if (computedStyle.rowGap.endsWith('px')) {
rowGap = parseFloat(computedStyle.rowGap);
}
let parentBorderBottom = 0;
let parentPaddingBottom = 0;
const parentElement = element.parentElement;
if (parentElement) {
const parentComputedStyle = getComputedStyle(parentElement);
if (parentComputedStyle.rowGap && parentComputedStyle.rowGap.endsWith('px')) {
rowGap = parseFloat(parentComputedStyle.rowGap);
}
if (parentComputedStyle.borderStyle != 'none' && parentComputedStyle.borderBottom) {
parentBorderBottom = parseFloat(parentComputedStyle.borderBottom);
}
if (parentComputedStyle.paddingBottom) {
parentPaddingBottom = parseFloat(parentComputedStyle.paddingBottom);
}
}
let previousElement = element;
let previousComputedStyle = getComputedStyle(element);
if (!tableHelper.isIgnore(element, previousComputedStyle, left, right)) {
totalHeight += parseFloat(previousComputedStyle.marginBottom);
}
while (currentElement) {
const currentComputedStyle = getComputedStyle(currentElement);
if (!tableHelper.isIgnore(currentElement, currentComputedStyle, left, right)) {
totalHeight += currentElement.offsetHeight + Math.max(parseFloat(currentComputedStyle.marginTop), parseFloat(previousComputedStyle.marginBottom)) + rowGap;
previousElement = currentElement;
previousComputedStyle = currentComputedStyle;
}
previousElement = currentElement;
currentElement = currentElement.nextElementSibling;
previousComputedStyle = currentComputedStyle;
}
if (!tableHelper.isIgnore(previousElement, previousComputedStyle, left, right)) {
totalHeight += parseFloat(previousComputedStyle.marginBottom);
}
const parentElement = element.parentElement;
if (parentElement!=null) {
marginBottom = Math.max(parseFloat(previousComputedStyle.marginBottom), marginBottom);
if (parentBorderBottom > 0.1 || parentPaddingBottom>0.1) {
totalHeight += marginBottom;
marginBottom = 0;
}
}
if (parentElement) {
const parentComputedStyle = getComputedStyle(parentElement);
if (!tableHelper.isIgnore(parentElement, parentComputedStyle, left, right)) {
totalHeight += parseFloat(parentComputedStyle.paddingBottom);
totalHeight += parseFloat(parentComputedStyle.borderBottom);
//if (parentElement.scrollWidth > parentElement.clientWidth) {
// totalHeight += 23;
// console.log('scrollbar C:' + (parentElement.offsetHeight - parentElement.clientHeight));
// console.log(parentElement);
//}
totalHeight += parentPaddingBottom;
totalHeight += parentBorderBottom;
}
if (parentElement == rootElement) {
if (parentElement === rootElement) {
return totalHeight;
}
totalHeight += tableHelper.getTotalHeightBelow(rootElement,parentElement, left, right);
totalHeight += tableHelper.getTotalHeightBelow(rootElement, parentElement, marginBottom, left, right);
}
return totalHeight;
}
@ -135,7 +93,7 @@
return parseFloat(value);
}
static getCssHeight(element,height) {
if (element != null) {
if (element) {
if (height !== 'auto' && height !== '0px' && height !== '') {
// 将 'px' 以外的单位转换为像素
if (height.endsWith('px')) {
@ -145,7 +103,7 @@
} else if (height.endsWith('%')) {
// 获取父元素的高度
const parentElement = element.parentElement;
if (parentElement != null) {
if (parentElement) {
const parentComputedStyle = window.getComputedStyle(parentElement);
const parentHeight = parentComputedStyle.height;
return (tableHelper.parseHeightValue(height) / 100) * tableHelper.parseHeightValue(parentHeight);
@ -153,8 +111,6 @@
return 0;
}
return height;
}
}
return 0;
@ -162,23 +118,19 @@
static getNumericHeight(element) {
if (element != null) {
if (element.style && element.style.height) {
const computedStyle = window.getComputedStyle(element);
const height = tableHelper.getCssHeight(element, computedStyle.height);
if (height > 0) {
return height;
}
}
if (element && element.style && element.style.height) {
const computedStyle = window.getComputedStyle(element);
const height = tableHelper.getCssHeight(element, computedStyle.height);
if (height > 0) {
return height;
}
}
return 0;
}
static getContainer(element) {
if (element) {
const height = tableHelper.getNumericHeight(element);
if (height > 0) {
if (height > 0) {
return element;
}
const parent = this.getContainer(element.parentElement);
@ -199,11 +151,11 @@
return;
}
// 计算上面元素的总高度
const heightAbove = tableHelper.getTotalHeightAbove(container, bodyRef, rect.left, rect.right);
const heightAbove = tableHelper.getTotalHeightAbove(container, bodyRef);
//console.log('heightAbove:' + heightAbove);
// 计算下面元素的总高度
const heightBelow = tableHelper.getTotalHeightBelow(container, bodyRef, rect.left, rect.right);
const heightBelow = tableHelper.getTotalHeightBelow(container, bodyRef,0, rect.left, rect.right);
//console.log('heightBelow:' + heightBelow);
// 计算视口高度并减去滚动条的宽度

13
components/table/Table.razor.cs
Просмотреть файл

@ -831,7 +831,6 @@ namespace AntDesign
protected override void OnInitialized()
{
base.OnInitialized();
if (ColumnDefinitions != null)
{
ChildContent = ColumnDefinitions;
@ -859,11 +858,17 @@ namespace AntDesign
FieldFilterTypeResolver ??= InjectedFieldFilterTypeResolver;
}
public override async Task SetParametersAsync(ParameterView parameters)
{
await base.SetParametersAsync(parameters);
if (AutoHeight)
{
ScrollY = "0px";
}
}
protected override void OnParametersSet()
{
base.OnParametersSet();
if (_preventRender)
{
_shouldRender = false;
@ -1010,7 +1015,7 @@ namespace AntDesign
{
if (_afterFirstRender && !_isReloading)
{
if (ScrollY != null || ScrollX != null)
if (ScrollY != null || ScrollX != null || Resizable || AutoHeight)
{
await JsInvokeAsync(JSInteropConstants.UnbindTableScroll, _tableBodyRef);
}

3
site/AntDesign.Docs.Build.CLI/KnownChineseTranslations.json
Просмотреть файл

@ -4681,8 +4681,5 @@
},
"Overrides whether the clear icon is shown. When <see langword=\"null\" />, it is shown if and only if the input string is not empty.": {
"Translated": "覆盖是否显示清除图标。当 <see langword=“null” /> 时，当且仅当输入字符串不为空时，才会显示它。"
},
"Whether to enable virtualization feature or not, only works for .NET 5 and higher": {
"Translated": "是否启用虚拟化功能，仅适用于 .NET 5 及更高版本"
}
}