Web:Components:Table: add new logic for resize when info panel is open
This commit is contained in:
parent
1cf0be4369
commit
d3491c80b0
@ -19,7 +19,7 @@ class TableHeader extends React.Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = { columnIndex: null };
|
this.state = { columnIndex: null, hideColumns: false };
|
||||||
|
|
||||||
this.headerRef = React.createRef();
|
this.headerRef = React.createRef();
|
||||||
this.throttledResize = throttle(this.onResize, 300);
|
this.throttledResize = throttle(this.onResize, 300);
|
||||||
@ -42,10 +42,11 @@ class TableHeader extends React.Component {
|
|||||||
|
|
||||||
getNextColumn = (array, index) => {
|
getNextColumn = (array, index) => {
|
||||||
let i = 1;
|
let i = 1;
|
||||||
|
|
||||||
while (array.length !== i) {
|
while (array.length !== i) {
|
||||||
const item = array[index + i];
|
const item = array[index + i];
|
||||||
|
|
||||||
if (!item) return null;
|
if (!item || this.state.hideColumns) return null;
|
||||||
else if (!item.enable) i++;
|
else if (!item.enable) i++;
|
||||||
else return item;
|
else return item;
|
||||||
}
|
}
|
||||||
@ -194,9 +195,14 @@ class TableHeader extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMouseUp = () => {
|
onMouseUp = () => {
|
||||||
localStorage.setItem(
|
!this.props.infoPanelVisible
|
||||||
|
? localStorage.setItem(
|
||||||
this.props.columnStorageName,
|
this.props.columnStorageName,
|
||||||
this.props.containerRef.current.style.gridTemplateColumns
|
this.props.containerRef.current.style.gridTemplateColumns
|
||||||
|
)
|
||||||
|
: localStorage.setItem(
|
||||||
|
this.props.columnInfoPanelStorageName,
|
||||||
|
this.props.containerRef.current.style.gridTemplateColumns
|
||||||
);
|
);
|
||||||
|
|
||||||
window.removeEventListener("mousemove", this.onMouseMove);
|
window.removeEventListener("mousemove", this.onMouseMove);
|
||||||
@ -214,11 +220,16 @@ class TableHeader extends React.Component {
|
|||||||
const {
|
const {
|
||||||
containerRef,
|
containerRef,
|
||||||
columnStorageName,
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
resetColumnsSize,
|
resetColumnsSize,
|
||||||
sectionWidth,
|
sectionWidth,
|
||||||
infoPanelVisible,
|
infoPanelVisible,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
if (!infoPanelVisible && this.state.hideColumns) {
|
||||||
|
this.setState({ hideColumns: false });
|
||||||
|
}
|
||||||
|
|
||||||
let activeColumnIndex = null;
|
let activeColumnIndex = null;
|
||||||
|
|
||||||
const container = containerRef.current
|
const container = containerRef.current
|
||||||
@ -274,7 +285,156 @@ class TableHeader extends React.Component {
|
|||||||
|
|
||||||
if (tableContainer.length > 1) {
|
if (tableContainer.length > 1) {
|
||||||
const gridTemplateColumns = [];
|
const gridTemplateColumns = [];
|
||||||
|
let hideColumns = false;
|
||||||
|
|
||||||
|
if (infoPanelVisible) {
|
||||||
|
const storageInfoPanelSize = localStorage.getItem(
|
||||||
|
columnInfoPanelStorageName
|
||||||
|
);
|
||||||
|
|
||||||
|
const tableInfoPanelContainer = storageInfoPanelSize
|
||||||
|
? storageInfoPanelSize.split(" ")
|
||||||
|
: tableContainer;
|
||||||
|
|
||||||
|
let containerMinWidth = containerWidth - defaultSize - settingsSize;
|
||||||
|
|
||||||
|
tableInfoPanelContainer.forEach((item, index) => {
|
||||||
|
const column = document.getElementById("column_" + index);
|
||||||
|
const enable =
|
||||||
|
index == tableContainer.length - 1 ||
|
||||||
|
(column ? column.dataset.enable === "true" : item !== "0px");
|
||||||
|
|
||||||
|
if (
|
||||||
|
enable &&
|
||||||
|
item !== `${defaultSize}px` &&
|
||||||
|
item !== `${settingsSize}px`
|
||||||
|
) {
|
||||||
|
if (column?.dataset?.minWidth) {
|
||||||
|
containerMinWidth = containerMinWidth - column.dataset.minWidth;
|
||||||
|
} else {
|
||||||
|
containerMinWidth = containerMinWidth - defaultMinColumnSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (containerMinWidth < 0) {
|
||||||
|
hideColumns = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.hideColumns !== hideColumns) {
|
||||||
|
this.setState({ hideColumns: hideColumns });
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
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) {
|
for (let index in tableContainer) {
|
||||||
const item = tableContainer[index];
|
const item = tableContainer[index];
|
||||||
|
|
||||||
@ -309,7 +469,8 @@ class TableHeader extends React.Component {
|
|||||||
? `${defaultColumnSize}px`
|
? `${defaultColumnSize}px`
|
||||||
: percent === 0
|
: percent === 0
|
||||||
? `${minColumnSize}px`
|
? `${minColumnSize}px`
|
||||||
: ((containerWidth - defaultSize - settingsSize) * percent) / 100 +
|
: ((containerWidth - defaultSize - settingsSize) * percent) /
|
||||||
|
100 +
|
||||||
"px";
|
"px";
|
||||||
|
|
||||||
gridTemplateColumns.push(newItemWidth);
|
gridTemplateColumns.push(newItemWidth);
|
||||||
@ -326,11 +487,12 @@ class TableHeader extends React.Component {
|
|||||||
);
|
);
|
||||||
if (needReset) return;
|
if (needReset) return;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
str = gridTemplateColumns.join(" ");
|
str = gridTemplateColumns.join(" ");
|
||||||
} else {
|
} else {
|
||||||
this.resetColumns(true);
|
this.resetColumns(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (str) {
|
if (str) {
|
||||||
container.style.gridTemplateColumns = str;
|
container.style.gridTemplateColumns = str;
|
||||||
if (this.headerRef.current) {
|
if (this.headerRef.current) {
|
||||||
@ -338,12 +500,24 @@ class TableHeader extends React.Component {
|
|||||||
this.headerRef.current.style.width = containerWidth + "px";
|
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) => {
|
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)
|
const defaultSize = this.props.columns.find((col) => col.defaultSize)
|
||||||
?.defaultSize;
|
?.defaultSize;
|
||||||
|
|
||||||
@ -402,7 +576,11 @@ class TableHeader extends React.Component {
|
|||||||
this.headerRef.current.style.width = containerWidth + "px";
|
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();
|
this.onResize();
|
||||||
};
|
};
|
||||||
@ -451,7 +629,7 @@ class TableHeader extends React.Component {
|
|||||||
})}
|
})}
|
||||||
|
|
||||||
<div className="table-container_header-settings">
|
<div className="table-container_header-settings">
|
||||||
<TableSettings columns={columns} />
|
{!infoPanelVisible && <TableSettings columns={columns} />}
|
||||||
</div>
|
</div>
|
||||||
</StyledTableRow>
|
</StyledTableRow>
|
||||||
</StyledTableHeader>
|
</StyledTableHeader>
|
||||||
|
Loading…
Reference in New Issue
Block a user