Client: fixed table bug with indexing mode
This commit is contained in:
parent
179a6c42f2
commit
cc644180a5
@ -363,9 +363,9 @@ class FilesTableHeader extends React.Component {
|
||||
key: "Index",
|
||||
title: "#",
|
||||
enable: this.props.indexColumnIsEnabled,
|
||||
minWidth: 75,
|
||||
minWidth: 60,
|
||||
resizable: false,
|
||||
shortColumn: true,
|
||||
isShort: true,
|
||||
onChange: this.onColumnChange,
|
||||
});
|
||||
}
|
||||
@ -583,6 +583,7 @@ class FilesTableHeader extends React.Component {
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
sectionWidth={sectionWidth}
|
||||
resetColumnsSize={resetColumnsSize}
|
||||
isIndexing={isIndexing}
|
||||
sortingVisible={isIndexing ? false : sortingVisible}
|
||||
isIndexEditingMode={isIndexEditingMode}
|
||||
infoPanelVisible={infoPanelVisible}
|
||||
|
@ -50,7 +50,7 @@ export type TTableColumn = {
|
||||
defaultSize?: number;
|
||||
default?: boolean;
|
||||
resizable?: boolean;
|
||||
shortColumn?: boolean;
|
||||
isShort?: boolean;
|
||||
checkbox?: {
|
||||
value: boolean;
|
||||
isIndeterminate: boolean;
|
||||
|
@ -1329,13 +1329,31 @@ class TableHeader extends React.Component<
|
||||
}
|
||||
|
||||
if (hideColumnsConst) {
|
||||
const shortColumnSize =
|
||||
columns.find((col) => col.isShort && col.enable)?.minWidth || 0;
|
||||
|
||||
tableInfoPanelContainer.forEach((item, index) => {
|
||||
const column = document.getElementById(`column_${index}`);
|
||||
|
||||
const isSettingColumn =
|
||||
Number(index) === tableInfoPanelContainer.length - 1;
|
||||
const isQuickButtonColumn =
|
||||
Number(index) === tableInfoPanelContainer.length - 2;
|
||||
|
||||
if (isIndexEditingMode && isSettingColumn) {
|
||||
gridTemplateColumns.push("75px");
|
||||
}
|
||||
|
||||
if (isIndexEditingMode && isQuickButtonColumn) {
|
||||
gridTemplateColumns.push("24px");
|
||||
}
|
||||
|
||||
if (column?.dataset?.minWidth && column?.dataset?.default) {
|
||||
gridTemplateColumns.push(
|
||||
`${containerWidth - defaultSize - settingsSize}px`,
|
||||
`${containerWidth - defaultSize - shortColumnSize - settingsSize}px`,
|
||||
);
|
||||
} else if (column?.dataset?.minWidth && column?.dataset?.shortColum) {
|
||||
gridTemplateColumns.push(`${column?.dataset?.minWidth}px`);
|
||||
} else if (
|
||||
item === `${defaultSize}px` ||
|
||||
item === `${settingsSize}px`
|
||||
@ -1501,6 +1519,8 @@ class TableHeader extends React.Component<
|
||||
(column ? column.dataset.enable === "true" : item !== "0px");
|
||||
const defaultColumnSize = column && column.dataset.defaultSize;
|
||||
const isSettingColumn = Number(index) === tableContainer.length - 1;
|
||||
const isQuickButtonColumn =
|
||||
Number(index) === tableContainer.length - 2;
|
||||
|
||||
const isActiveNow = item === "0px" && enable;
|
||||
if (isActiveNow && column) activeColumnIndex = index;
|
||||
@ -1525,6 +1545,8 @@ class TableHeader extends React.Component<
|
||||
} else if (item !== `${settingsSize}px` || isIndexEditingMode) {
|
||||
const percent = (getSubstring(item) / oldWidth) * 100;
|
||||
|
||||
let newSettingsSize = isIndexEditingMode ? 0 : settingsSize;
|
||||
|
||||
if (percent === 100) {
|
||||
const enableColumnsLength = columns.filter(
|
||||
(column) => !column.defaultSize && column.enable,
|
||||
@ -1543,7 +1565,7 @@ class TableHeader extends React.Component<
|
||||
: percent === 0
|
||||
? `${defaultMinColumnSize}px`
|
||||
: `${
|
||||
((containerWidth - defaultSize - settingsSize) *
|
||||
((containerWidth - defaultSize - newSettingsSize) *
|
||||
percent) /
|
||||
100
|
||||
}px`;
|
||||
@ -1567,6 +1589,14 @@ class TableHeader extends React.Component<
|
||||
newItemWidth = `${defaultMinColumnSize}px`;
|
||||
}
|
||||
|
||||
if (isIndexEditingMode && isSettingColumn) {
|
||||
newItemWidth = "75px";
|
||||
}
|
||||
|
||||
if (isIndexEditingMode && isQuickButtonColumn) {
|
||||
newItemWidth = `24px`;
|
||||
}
|
||||
|
||||
gridTemplateColumns.push(newItemWidth);
|
||||
} else {
|
||||
gridTemplateColumns.push(item);
|
||||
@ -1729,7 +1759,7 @@ class TableHeader extends React.Component<
|
||||
for (const col of columns) {
|
||||
if (col.default) {
|
||||
str += `${wideColumnSize} `;
|
||||
} else if (col.shortColumn) {
|
||||
} else if (col.isShort) {
|
||||
str += `${col.minWidth}px `;
|
||||
} else
|
||||
str += col.enable
|
||||
|
@ -55,6 +55,7 @@ const TableHeaderCell = ({
|
||||
withTagRef,
|
||||
default: isDefault,
|
||||
checkbox,
|
||||
isShort,
|
||||
} = column;
|
||||
|
||||
const isActive = (sortBy && column.sortBy === sortBy) || active;
|
||||
@ -82,6 +83,7 @@ const TableHeaderCell = ({
|
||||
data-default={isDefault}
|
||||
data-enable={enable}
|
||||
data-min-width={minWidth}
|
||||
data-short-colum={isShort}
|
||||
data-default-size={defaultSize}
|
||||
sortingVisible={sortingVisible}
|
||||
ref={tagRef}
|
||||
@ -120,6 +122,7 @@ const TableHeaderCell = ({
|
||||
id={`column_${index}`}
|
||||
data-enable={enable}
|
||||
data-default={isDefault}
|
||||
data-short-colum={isShort}
|
||||
data-min-width={minWidth}
|
||||
data-default-size={defaultSize}
|
||||
sortingVisible={sortingVisible}
|
||||
|
Loading…
Reference in New Issue
Block a user