IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components:Table: add new logic for resize when info panel is open

Browse Source
This commit is contained in:
Timofey Boyko 2022-05-17 10:42:42 +03:00
parent 1cf0be4369
commit d3491c80b0
1 changed files with 229 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
packages/asc-web-components/table-container/TableHeader.js
View File

@ -19,7 +19,7 @@ class TableHeader extends React.Component {
constructor(props) {
super(props);
this.state = { columnIndex: null };
this.state = { columnIndex: null, hideColumns: false };
this.headerRef = React.createRef();
this.throttledResize = throttle(this.onResize, 300);
@ -42,10 +42,11 @@ class TableHeader extends React.Component {
getNextColumn = (array, index) => {
let i = 1;
while (array.length !== i) {
const item = array[index + i];
if (!item) return null;
if (!item || this.state.hideColumns) return null;
else if (!item.enable) i++;
else return item;
}
@ -194,10 +195,15 @@ class TableHeader extends React.Component {
};
onMouseUp = () => {
localStorage.setItem(
this.props.columnStorageName,
this.props.containerRef.current.style.gridTemplateColumns
);
!this.props.infoPanelVisible
? localStorage.setItem(
this.props.columnStorageName,
this.props.containerRef.current.style.gridTemplateColumns
)
: localStorage.setItem(
this.props.columnInfoPanelStorageName,
this.props.containerRef.current.style.gridTemplateColumns
);
window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp);
@ -214,11 +220,16 @@ class TableHeader extends React.Component {
const {
containerRef,
columnStorageName,
columnInfoPanelStorageName,
resetColumnsSize,
sectionWidth,
infoPanelVisible,
} = this.props;
if (!infoPanelVisible && this.state.hideColumns) {
this.setState({ hideColumns: false });
}
let activeColumnIndex = null;
const container = containerRef.current
@ -274,63 +285,214 @@ class TableHeader extends React.Component {
if (tableContainer.length > 1) {
const gridTemplateColumns = [];
let hideColumns = false;
for (let index in tableContainer) {
const item = tableContainer[index];
if (infoPanelVisible) {
const storageInfoPanelSize = localStorage.getItem(
columnInfoPanelStorageName
);
const column = document.getElementById("column_" + index);
const enable =
index == tableContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
const tableInfoPanelContainer = storageInfoPanelSize
? storageInfoPanelSize.split(" ")
: tableContainer;
const isActiveNow = item === "0px" && enable;
if (isActiveNow && column) activeColumnIndex = index;
let containerMinWidth = containerWidth - defaultSize - settingsSize;
if (!enable) {
gridTemplateColumns.push("0px");
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById("column_" + index);
const enable =
index == tableContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
let colIndex = 1;
let leftEnableColumn = gridTemplateColumns[index - colIndex];
while (leftEnableColumn === "0px") {
colIndex++;
leftEnableColumn = gridTemplateColumns[index - colIndex];
if (
enable &&
item !== `${defaultSize}px` &&
item !== `${settingsSize}px`
) {
if (column?.dataset?.minWidth) {
containerMinWidth = containerMinWidth - column.dataset.minWidth;
} else {
containerMinWidth = containerMinWidth - defaultMinColumnSize;
}
}
});
//added the size of the disabled column to the left column
gridTemplateColumns[index - colIndex] =
this.getSubstring(gridTemplateColumns[index - colIndex]) +
this.getSubstring(item) +
"px";
} else if (item !== `${settingsSize}px`) {
const percent = (this.getSubstring(item) / oldWidth) * 100;
if (containerMinWidth < 0) {
hideColumns = true;
}
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: percent === 0
? `${minColumnSize}px`
: ((containerWidth - defaultSize - settingsSize) * percent) / 100 +
"px";
if (this.state.hideColumns !== hideColumns) {
this.setState({ hideColumns: hideColumns });
}
gridTemplateColumns.push(newItemWidth);
if (hideColumns) {
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById("column_" + index);
if (column?.dataset?.minWidth) {
gridTemplateColumns.push(
`${containerWidth - defaultSize - settingsSize}px`
);
} else if (
item === `${defaultSize}px` ||
item === `${settingsSize}px`
) {
gridTemplateColumns.push(item);
} else {
gridTemplateColumns.push("0px");
}
});
} else {
gridTemplateColumns.push(item);
let contentWidth = containerWidth - defaultSize - settingsSize;
let enabledColumnsCount = 0;
tableInfoPanelContainer.forEach((item, index) => {
if (
index != 0 &&
item !== "0px" &&
item !== `${defaultSize}px` &&
item !== `${settingsSize}px`
) {
enabledColumnsCount++;
}
});
const newOldWidth =
tableInfoPanelContainer
.map((column) => this.getSubstring(column))
.reduce((x, y) => x + y) -
defaultSize -
settingsSize;
if (
contentWidth - enabledColumnsCount * defaultMinColumnSize >
this.getSubstring(tableInfoPanelContainer[0])
) {
const currentContentWidth =
contentWidth - +this.getSubstring(tableInfoPanelContainer[0]);
tableInfoPanelContainer.forEach((item, index) => {
if (index == 0) {
gridTemplateColumns.push(item);
} else {
const column = document.getElementById("column_" + index);
const enable =
index == tableInfoPanelContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
if (!enable) {
gridTemplateColumns.push("0px");
} else if (item !== `${settingsSize}px`) {
const percent =
(this.getSubstring(item) /
(newOldWidth -
+this.getSubstring(tableInfoPanelContainer[0]))) *
100;
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: (currentContentWidth * percent) / 100 >
defaultMinColumnSize
? (currentContentWidth * percent) / 100 + "px"
: defaultMinColumnSize + "px";
gridTemplateColumns.push(newItemWidth);
} else {
gridTemplateColumns.push(item);
}
}
});
} else {
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById("column_" + index);
const enable =
index == tableInfoPanelContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
if (!enable) {
gridTemplateColumns.push("0px");
} else if (item !== `${settingsSize}px`) {
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: index == 0
? `${
contentWidth - enabledColumnsCount * defaultMinColumnSize
}px`
: `${defaultMinColumnSize}px`;
gridTemplateColumns.push(newItemWidth);
} else {
gridTemplateColumns.push(item);
}
});
}
}
} else {
for (let index in tableContainer) {
const item = tableContainer[index];
const column = document.getElementById("column_" + index);
const enable =
index == tableContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
const isActiveNow = item === "0px" && enable;
if (isActiveNow && column) activeColumnIndex = index;
if (!enable) {
gridTemplateColumns.push("0px");
let colIndex = 1;
let leftEnableColumn = gridTemplateColumns[index - colIndex];
while (leftEnableColumn === "0px") {
colIndex++;
leftEnableColumn = gridTemplateColumns[index - colIndex];
}
//added the size of the disabled column to the left column
gridTemplateColumns[index - colIndex] =
this.getSubstring(gridTemplateColumns[index - colIndex]) +
this.getSubstring(item) +
"px";
} else if (item !== `${settingsSize}px`) {
const percent = (this.getSubstring(item) / oldWidth) * 100;
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: percent === 0
? `${minColumnSize}px`
: ((containerWidth - defaultSize - settingsSize) * percent) /
100 +
"px";
gridTemplateColumns.push(newItemWidth);
} else {
gridTemplateColumns.push(item);
}
}
if (activeColumnIndex) {
const needReset = this.addNewColumns(
gridTemplateColumns,
activeColumnIndex,
containerWidth
);
if (needReset) return;
}
}
if (activeColumnIndex) {
const needReset = this.addNewColumns(
gridTemplateColumns,
activeColumnIndex,
containerWidth
);
if (needReset) return;
}
str = gridTemplateColumns.join(" ");
} else {
this.resetColumns(true);
}
if (str) {
container.style.gridTemplateColumns = str;
if (this.headerRef.current) {
@ -338,12 +500,24 @@ class TableHeader extends React.Component {
this.headerRef.current.style.width = containerWidth + "px";
}
localStorage.setItem(columnStorageName, str);
infoPanelVisible
? localStorage.setItem(columnInfoPanelStorageName, str)
: localStorage.setItem(columnStorageName, str);
if (!infoPanelVisible) {
localStorage.removeItem(columnInfoPanelStorageName);
}
}
};
resetColumns = (resetToDefault = false) => {
const { containerRef, columnStorageName, columns } = this.props;
const {
containerRef,
columnStorageName,
columnInfoPanelStorageName,
columns,
infoPanelVisible,
} = this.props;
const defaultSize = this.props.columns.find((col) => col.defaultSize)
?.defaultSize;
@ -402,7 +576,11 @@ class TableHeader extends React.Component {
this.headerRef.current.style.width = containerWidth + "px";
}
str && localStorage.setItem(columnStorageName, str);
str
? !infoPanelVisible
? localStorage.setItem(columnStorageName, str)
: localStorage.setItem(columnInfoPanelStorageName, str)
: null;
this.onResize();
};
@ -451,7 +629,7 @@ class TableHeader extends React.Component {
})}
<div className="table-container_header-settings">
<TableSettings columns={columns} />
{!infoPanelVisible && <TableSettings columns={columns} />}
</div>
</StyledTableRow>
</StyledTableHeader>