1791 lines
56 KiB
TypeScript
1791 lines
56 KiB
TypeScript
/* eslint-disable no-restricted-syntax */
|
|
import React from "react";
|
|
import { DebouncedFunc } from "lodash";
|
|
import throttle from "lodash/throttle";
|
|
import { withTheme } from "styled-components";
|
|
import {
|
|
StyledTableHeader,
|
|
StyledTableRow,
|
|
StyledEmptyTableContainer,
|
|
} from "./Table.styled";
|
|
|
|
import { TTableColumn, TableHeaderProps } from "./Table.types";
|
|
import { TableSettings } from "./sub-components/TableSettings";
|
|
import { TableHeaderCell } from "./sub-components/TableHeaderCell";
|
|
// import {
|
|
// DEFAULT_MIN_COLUMN_SIZE,
|
|
// MIN_SIZE_FIRST_COLUMN,
|
|
// SETTINGS_SIZE,
|
|
// } from "./Table.constants";
|
|
import { checkingForUnfixedSize, getSubstring } from "./Table.utils";
|
|
|
|
// function TableHeader({
|
|
// containerRef,
|
|
// columnStorageName,
|
|
// columnInfoPanelStorageName,
|
|
// resetColumnsSize,
|
|
|
|
// columns,
|
|
// setHideColumns,
|
|
|
|
// sortBy,
|
|
// sorted,
|
|
// isLengthenHeader,
|
|
|
|
// tagRef,
|
|
// settingsTitle,
|
|
// sortingVisible = true,
|
|
// infoPanelVisible = false,
|
|
// useReactWindow = false,
|
|
// showSettings = true,
|
|
// ...rest
|
|
// }: TableHeaderProps) {
|
|
// const headerRef = React.useRef<HTMLDivElement | null>(null);
|
|
// const throttledResize = React.useRef<null | DebouncedFunc<() => void>>(null);
|
|
// const resizeRef = React.useRef<null | (() => void)>(null);
|
|
// const theme = useTheme();
|
|
|
|
// const [state, setState] = React.useState<{
|
|
// columnIndex: number;
|
|
// hideColumns: boolean;
|
|
// }>({ columnIndex: 0, hideColumns: false });
|
|
|
|
// const resetColumns = React.useCallback<
|
|
// (resetToDefault?: boolean) => void
|
|
// >(() => {
|
|
// let str = "";
|
|
|
|
// const enableColumns = columns
|
|
// .filter((x: TTableColumn) => x.enable)
|
|
// .filter((x: TTableColumn) => !x.defaultSize)
|
|
// .filter((x: TTableColumn) => !x.default);
|
|
|
|
// const container = containerRef.current
|
|
// ? containerRef.current
|
|
// : document.getElementById("table-container");
|
|
// const containerWidth = container ? +container.clientWidth : 0;
|
|
|
|
// const firstColumnPercent = 40;
|
|
// const percent = 60 / enableColumns.length;
|
|
|
|
// const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`;
|
|
// const otherColumns = `${(containerWidth * percent) / 100}px`;
|
|
|
|
// columns.forEach((col: TTableColumn) => {
|
|
// if (col.default) {
|
|
// str += `${wideColumnSize} `;
|
|
// } else
|
|
// str += col.enable
|
|
// ? col.defaultSize
|
|
// ? `${col.defaultSize}px `
|
|
// : `${otherColumns} `
|
|
// : "0px ";
|
|
// });
|
|
|
|
// str += `${SETTINGS_SIZE}px`;
|
|
// if (container) container.style.gridTemplateColumns = str;
|
|
|
|
// if (headerRef.current) {
|
|
// headerRef.current.style.gridTemplateColumns = str;
|
|
// headerRef.current.style.width = `${containerWidth}px`;
|
|
// }
|
|
|
|
// if (str) {
|
|
// if (!infoPanelVisible) localStorage.setItem(columnStorageName, str);
|
|
// else localStorage.setItem(columnInfoPanelStorageName, str);
|
|
// }
|
|
|
|
// if (resizeRef.current) resizeRef.current();
|
|
// }, [
|
|
// columnInfoPanelStorageName,
|
|
// columnStorageName,
|
|
// columns,
|
|
// containerRef,
|
|
// infoPanelVisible,
|
|
// ]);
|
|
|
|
// const distributionOverWidth = React.useCallback(
|
|
// (overWidth: number, gridTemplateColumns: string[]) => {
|
|
// const newGridTemplateColumns: string[] = JSON.parse(
|
|
// JSON.stringify(gridTemplateColumns),
|
|
// );
|
|
|
|
// let countColumns = 0;
|
|
// const defaultColumnSize =
|
|
// columns.find((col) => col.defaultSize)?.defaultSize || 0;
|
|
|
|
// newGridTemplateColumns.forEach((item: string, index: number) => {
|
|
// const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
|
|
// if (!unfixedSize) return;
|
|
|
|
// const column = document.getElementById(`column_${index}`);
|
|
// const minWidth = column?.dataset?.minWidth;
|
|
// const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN;
|
|
|
|
// if (
|
|
// (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) !==
|
|
// getSubstring(item)
|
|
// )
|
|
// countColumns += 1;
|
|
// });
|
|
|
|
// const addWidth = overWidth / countColumns;
|
|
|
|
// newGridTemplateColumns.forEach((item, index) => {
|
|
// const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
|
|
// if (!unfixedSize) return;
|
|
|
|
// const column = document.getElementById(`column_${index}`);
|
|
// const minWidth = column?.dataset?.minWidth;
|
|
// const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN;
|
|
|
|
// const itemSubstring = getSubstring(item);
|
|
|
|
// if ((index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) === itemSubstring)
|
|
// return;
|
|
|
|
// const differenceWithMinimum =
|
|
// itemSubstring - (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE);
|
|
|
|
// if (differenceWithMinimum >= addWidth) {
|
|
// newGridTemplateColumns[index] = `${itemSubstring - addWidth}px`;
|
|
// } else {
|
|
// newGridTemplateColumns[index] = `${
|
|
// index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE
|
|
// }px`;
|
|
// }
|
|
// });
|
|
|
|
// return newGridTemplateColumns;
|
|
// },
|
|
// [columns],
|
|
// );
|
|
|
|
// const addNewColumns = React.useCallback<
|
|
// (
|
|
// gridTemplateColumns: string[],
|
|
// activeColumnIndex: number,
|
|
// containerWidth: number,
|
|
// ) => boolean
|
|
// >(
|
|
// (gridTemplateColumns, activeColumnIndex, containerWidth) => {
|
|
// const clearSize = gridTemplateColumns.map((c) => getSubstring(c));
|
|
// const maxSize = Math.max(...clearSize);
|
|
|
|
// const defaultSize = columns[activeColumnIndex - 1].defaultSize || 0;
|
|
// const indexOfMaxSize = clearSize.findLastIndex((s) => s === maxSize);
|
|
|
|
// const addedColumn = 1;
|
|
// const enableColumnsLength =
|
|
// columns.filter((column) => !column.defaultSize && column.enable)
|
|
// .length - addedColumn;
|
|
// const allColumnsLength = columns.filter(
|
|
// (column) => !column.defaultSize,
|
|
// ).length;
|
|
|
|
// const defaultSizeColumn =
|
|
// columns.find((column) => column.defaultSize)?.defaultSize || 0;
|
|
|
|
// const widthColumns = containerWidth - SETTINGS_SIZE - defaultSizeColumn;
|
|
|
|
// const newColumnSize = defaultSize || widthColumns / allColumnsLength;
|
|
|
|
// const newSizeMaxColumn = maxSize - newColumnSize;
|
|
|
|
// if (
|
|
// (indexOfMaxSize === 0 && newSizeMaxColumn < MIN_SIZE_FIRST_COLUMN) ||
|
|
// (indexOfMaxSize !== 0 && newSizeMaxColumn < DEFAULT_MIN_COLUMN_SIZE) ||
|
|
// newColumnSize < DEFAULT_MIN_COLUMN_SIZE ||
|
|
// enableColumnsLength === 1
|
|
// ) {
|
|
// localStorage.removeItem(columnStorageName);
|
|
// resetColumns();
|
|
// return true;
|
|
// }
|
|
|
|
// gridTemplateColumns[indexOfMaxSize] = `${newSizeMaxColumn}px`;
|
|
// gridTemplateColumns[activeColumnIndex] = `${newColumnSize}px`;
|
|
// return false;
|
|
// },
|
|
// [columnStorageName, columns, resetColumns],
|
|
// );
|
|
|
|
// const updateTableRows = React.useCallback<(str: string) => void>(
|
|
// (str: string) => {
|
|
// if (!useReactWindow) return;
|
|
|
|
// const rows = document.querySelectorAll(
|
|
// ".table-row, .table-list-item",
|
|
// ) as NodeListOf<HTMLElement>;
|
|
|
|
// if (rows?.length) {
|
|
// for (let i = 0; i < rows.length; i += 1) {
|
|
// rows[i].style.gridTemplateColumns = str;
|
|
// }
|
|
// }
|
|
// },
|
|
// [useReactWindow],
|
|
// );
|
|
|
|
// const onResize = React.useCallback<() => void>(() => {
|
|
// let activeColumnIndex = null;
|
|
|
|
// const container = containerRef.current
|
|
// ? containerRef.current
|
|
// : document.getElementById("table-container");
|
|
|
|
// if (!container) return;
|
|
|
|
// const storageSize =
|
|
// !resetColumnsSize && localStorage.getItem(columnStorageName);
|
|
|
|
// const defaultSize =
|
|
// columns.find((col: TTableColumn) => col.defaultSize)?.defaultSize || 0;
|
|
|
|
// if (storageSize) {
|
|
// const splitStorage = storageSize.split(" ");
|
|
|
|
// const isInvalid = splitStorage.some((s) => s === "NaNpx");
|
|
|
|
// if (
|
|
// (defaultSize &&
|
|
// splitStorage[splitStorage.length - 2] !== `${defaultSize}px`) ||
|
|
// getSubstring(splitStorage[0]) <= DEFAULT_MIN_COLUMN_SIZE ||
|
|
// isInvalid
|
|
// ) {
|
|
// localStorage.removeItem(columnStorageName);
|
|
// onResize();
|
|
// return;
|
|
// }
|
|
// }
|
|
|
|
// const containerGridTemplateColumns =
|
|
// container.style.gridTemplateColumns.split(" ");
|
|
|
|
// const tableContainer = storageSize
|
|
// ? storageSize.split(" ")
|
|
// : containerGridTemplateColumns;
|
|
|
|
// if (
|
|
// containerGridTemplateColumns.length === 1 &&
|
|
// !state.hideColumns &&
|
|
// storageSize
|
|
// ) {
|
|
// const hasContent = !!storageSize.split(" ").find((item, index) => {
|
|
// if (index === 0) return;
|
|
// return checkingForUnfixedSize(item, defaultSize);
|
|
// });
|
|
|
|
// // If content column sizes are calculated as empty after changing view
|
|
// if (!hasContent) {
|
|
// resetColumns();
|
|
// return;
|
|
// }
|
|
// }
|
|
|
|
// // columns.length + 1 - its settings column
|
|
// if (tableContainer.length !== columns.length + 1) {
|
|
// resetColumns();
|
|
// return;
|
|
// }
|
|
|
|
// if (!container) return;
|
|
|
|
// const containerWidth = +container.clientWidth;
|
|
|
|
// const oldWidth =
|
|
// tableContainer
|
|
// .map((column: string) => getSubstring(column))
|
|
// .reduce((x: number, y: number) => x + y) -
|
|
// defaultSize -
|
|
// SETTINGS_SIZE;
|
|
|
|
// let str = "";
|
|
// let gridTemplateColumnsWithoutOverfilling: string[] = [];
|
|
|
|
// if (tableContainer.length > 1) {
|
|
// const gridTemplateColumns: string[] = [];
|
|
// let hideColumns = false;
|
|
|
|
// let contentColumnsCount = 0;
|
|
// let contentColumnsCountInfoPanel = 0;
|
|
|
|
// const storageInfoPanelSize = localStorage.getItem(
|
|
// columnInfoPanelStorageName,
|
|
// );
|
|
|
|
// if (storageInfoPanelSize) {
|
|
// contentColumnsCountInfoPanel = storageInfoPanelSize
|
|
// .split(" ")
|
|
// .filter((item) => checkingForUnfixedSize(item, defaultSize)).length;
|
|
|
|
// contentColumnsCount = tableContainer.filter((item) =>
|
|
// checkingForUnfixedSize(item, defaultSize),
|
|
// ).length;
|
|
// }
|
|
|
|
// const incorrectNumberColumns =
|
|
// contentColumnsCountInfoPanel < contentColumnsCount &&
|
|
// !state.hideColumns;
|
|
|
|
// const tableInfoPanelContainer =
|
|
// storageInfoPanelSize && !incorrectNumberColumns
|
|
// ? storageInfoPanelSize.split(" ")
|
|
// : tableContainer;
|
|
|
|
// let containerMinWidth = containerWidth - defaultSize - SETTINGS_SIZE;
|
|
|
|
// 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` || `${defaultSize}px` === `0px`) &&
|
|
// item !== `${SETTINGS_SIZE}px`
|
|
// ) {
|
|
// if (column?.dataset?.minWidth) {
|
|
// containerMinWidth -= +column.dataset.minWidth;
|
|
// } else {
|
|
// containerMinWidth -= DEFAULT_MIN_COLUMN_SIZE;
|
|
// }
|
|
// }
|
|
// });
|
|
|
|
// if (containerMinWidth < 0) {
|
|
// hideColumns = true;
|
|
// }
|
|
|
|
// if (state.hideColumns !== hideColumns) {
|
|
// setState((s) => ({ ...s, hideColumns }));
|
|
// setHideColumns(hideColumns);
|
|
// }
|
|
|
|
// if (hideColumns) {
|
|
// tableInfoPanelContainer.forEach((item, index) => {
|
|
// const column = document.getElementById(`column_${index}`);
|
|
|
|
// if (column?.dataset?.minWidth) {
|
|
// gridTemplateColumns.push(
|
|
// `${containerWidth - defaultSize - SETTINGS_SIZE}px`,
|
|
// );
|
|
// } else if (
|
|
// item === `${defaultSize}px` ||
|
|
// item === `${SETTINGS_SIZE}px`
|
|
// ) {
|
|
// gridTemplateColumns.push(item);
|
|
// } else {
|
|
// gridTemplateColumns.push("0px");
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
// let hasGridTemplateColumnsWithoutOverfilling = false;
|
|
// if (infoPanelVisible) {
|
|
// if (!hideColumns) {
|
|
// const contentWidth = containerWidth - defaultSize - SETTINGS_SIZE;
|
|
|
|
// let enabledColumnsCount = 0;
|
|
|
|
// tableInfoPanelContainer.forEach((item: string, index: number) => {
|
|
// if (
|
|
// index !== 0 &&
|
|
// item !== "0px" &&
|
|
// item !== `${defaultSize}px` &&
|
|
// item !== `${SETTINGS_SIZE}px`
|
|
// ) {
|
|
// enabledColumnsCount += 1;
|
|
// }
|
|
// });
|
|
|
|
// const changedWidth =
|
|
// tableInfoPanelContainer
|
|
// .map((column: string) => getSubstring(column))
|
|
// .reduce((x: number, y: number) => x + y) -
|
|
// defaultSize -
|
|
// SETTINGS_SIZE;
|
|
|
|
// if (
|
|
// contentWidth - enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE >
|
|
// getSubstring(tableInfoPanelContainer[0])
|
|
// ) {
|
|
// const currentContentWidth =
|
|
// contentWidth - +getSubstring(tableInfoPanelContainer[0]);
|
|
|
|
// let overWidth = 0;
|
|
|
|
// tableInfoPanelContainer.forEach((item: string, index: number) => {
|
|
// 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 !== `${SETTINGS_SIZE}px`) {
|
|
// const percent =
|
|
// (getSubstring(item) /
|
|
// (changedWidth -
|
|
// +getSubstring(tableInfoPanelContainer[0]))) *
|
|
// 100;
|
|
|
|
// const newItemWidth = defaultColumnSize
|
|
// ? `${defaultColumnSize}px`
|
|
// : (currentContentWidth * percent) / 100 >
|
|
// DEFAULT_MIN_COLUMN_SIZE
|
|
// ? `${(currentContentWidth * percent) / 100}px`
|
|
// : `${DEFAULT_MIN_COLUMN_SIZE}px`;
|
|
|
|
// if (
|
|
// (currentContentWidth * percent) / 100 <
|
|
// DEFAULT_MIN_COLUMN_SIZE &&
|
|
// !defaultColumnSize
|
|
// ) {
|
|
// overWidth +=
|
|
// DEFAULT_MIN_COLUMN_SIZE -
|
|
// (currentContentWidth * percent) / 100;
|
|
// }
|
|
|
|
// gridTemplateColumns.push(newItemWidth);
|
|
// } else {
|
|
// gridTemplateColumns.push(item);
|
|
// }
|
|
// }
|
|
// });
|
|
|
|
// if (overWidth > 0) {
|
|
// gridTemplateColumns.forEach((column, index) => {
|
|
// const columnWidth = getSubstring(column);
|
|
|
|
// if (
|
|
// index !== 0 &&
|
|
// column !== "0px" &&
|
|
// column !== `${defaultSize}px` &&
|
|
// column !== `${SETTINGS_SIZE}px` &&
|
|
// columnWidth > DEFAULT_MIN_COLUMN_SIZE
|
|
// ) {
|
|
// const availableWidth = columnWidth - DEFAULT_MIN_COLUMN_SIZE;
|
|
|
|
// if (availableWidth < Math.abs(overWidth)) {
|
|
// overWidth = Math.abs(overWidth) - availableWidth;
|
|
// return (gridTemplateColumns[index] = `${
|
|
// columnWidth - availableWidth
|
|
// }px`);
|
|
// }
|
|
// const temp = overWidth;
|
|
|
|
// overWidth = 0;
|
|
|
|
// return (gridTemplateColumns[index] = `${
|
|
// columnWidth - Math.abs(temp)
|
|
// }px`);
|
|
// }
|
|
// });
|
|
// }
|
|
// } else {
|
|
// tableInfoPanelContainer.forEach((item: string, index: number) => {
|
|
// 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 !== `${SETTINGS_SIZE}px`) {
|
|
// const newItemWidth = defaultColumnSize
|
|
// ? `${defaultColumnSize}px`
|
|
// : index === 0
|
|
// ? `${
|
|
// contentWidth -
|
|
// enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE
|
|
// }px`
|
|
// : `${DEFAULT_MIN_COLUMN_SIZE}px`;
|
|
|
|
// gridTemplateColumns.push(newItemWidth);
|
|
// } else {
|
|
// gridTemplateColumns.push(item);
|
|
// }
|
|
// });
|
|
// }
|
|
// }
|
|
// } else {
|
|
// let overWidth = 0;
|
|
// if (!hideColumns) {
|
|
// tableContainer.forEach((i: string, index: number) => {
|
|
// 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 += 1;
|
|
// leftEnableColumn = gridTemplateColumns[index - colIndex];
|
|
// }
|
|
|
|
// // added the size of the disabled column to the left column
|
|
// gridTemplateColumns[index - colIndex] = `${
|
|
// getSubstring(gridTemplateColumns[index - colIndex]) +
|
|
// getSubstring(item)
|
|
// }
|
|
// px`;
|
|
// } else if (item !== `${SETTINGS_SIZE}px`) {
|
|
// const percent = (getSubstring(item) / oldWidth) * 100;
|
|
|
|
// let newItemWidth = defaultColumnSize
|
|
// ? `${defaultColumnSize}px`
|
|
// : percent === 0
|
|
// ? `${DEFAULT_MIN_COLUMN_SIZE}px`
|
|
// : `${
|
|
// ((containerWidth - defaultSize - SETTINGS_SIZE) *
|
|
// percent) /
|
|
// 100
|
|
// }
|
|
// px`;
|
|
|
|
// const minWidth = column?.dataset?.minWidth;
|
|
// const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN;
|
|
|
|
// // Checking whether the first column is less than the minimum width
|
|
// if (+index === 0 && getSubstring(newItemWidth) < minSize) {
|
|
// overWidth += MIN_SIZE_FIRST_COLUMN - getSubstring(newItemWidth);
|
|
// newItemWidth = `${MIN_SIZE_FIRST_COLUMN}px`;
|
|
// }
|
|
|
|
// // Checking whether columns are smaller than the minimum width
|
|
// if (
|
|
// +index !== 0 &&
|
|
// !defaultColumnSize &&
|
|
// getSubstring(newItemWidth) < DEFAULT_MIN_COLUMN_SIZE
|
|
// ) {
|
|
// overWidth +=
|
|
// DEFAULT_MIN_COLUMN_SIZE - getSubstring(newItemWidth);
|
|
// newItemWidth = `${DEFAULT_MIN_COLUMN_SIZE}px`;
|
|
// }
|
|
|
|
// gridTemplateColumns.push(newItemWidth);
|
|
// } else {
|
|
// gridTemplateColumns.push(item);
|
|
// }
|
|
// });
|
|
|
|
// if (overWidth > 0) {
|
|
// gridTemplateColumnsWithoutOverfilling = distributionOverWidth(
|
|
// overWidth,
|
|
// gridTemplateColumns,
|
|
// );
|
|
// }
|
|
|
|
// hasGridTemplateColumnsWithoutOverfilling =
|
|
// gridTemplateColumnsWithoutOverfilling &&
|
|
// gridTemplateColumnsWithoutOverfilling.length > 0;
|
|
|
|
// if (activeColumnIndex) {
|
|
// const gridColumns = hasGridTemplateColumnsWithoutOverfilling
|
|
// ? gridTemplateColumnsWithoutOverfilling
|
|
// : gridTemplateColumns;
|
|
|
|
// const needReset = addNewColumns(
|
|
// gridColumns,
|
|
// activeColumnIndex,
|
|
// containerWidth,
|
|
// );
|
|
// if (needReset) return;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// str = hasGridTemplateColumnsWithoutOverfilling
|
|
// ? gridTemplateColumnsWithoutOverfilling.join(" ")
|
|
// : gridTemplateColumns.join(" ");
|
|
// } else {
|
|
// resetColumns();
|
|
// }
|
|
|
|
// if (str) {
|
|
// container.style.gridTemplateColumns = str;
|
|
|
|
// updateTableRows(str);
|
|
|
|
// if (headerRef.current) {
|
|
// headerRef.current.style.gridTemplateColumns = str;
|
|
// headerRef.current.style.width = `${containerWidth}px`;
|
|
// }
|
|
|
|
// if (infoPanelVisible)
|
|
// localStorage.setItem(columnInfoPanelStorageName, str);
|
|
|
|
// if (!infoPanelVisible) {
|
|
// localStorage.setItem(columnStorageName, str);
|
|
// localStorage.removeItem(columnInfoPanelStorageName);
|
|
// }
|
|
// }
|
|
// }, [
|
|
// addNewColumns,
|
|
// columnInfoPanelStorageName,
|
|
// columnStorageName,
|
|
// columns,
|
|
// containerRef,
|
|
// distributionOverWidth,
|
|
// infoPanelVisible,
|
|
// resetColumns,
|
|
// resetColumnsSize,
|
|
// setHideColumns,
|
|
// state.hideColumns,
|
|
// updateTableRows,
|
|
// ]);
|
|
|
|
// React.useEffect(() => {
|
|
// resizeRef.current = onResize;
|
|
// onResize();
|
|
// throttledResize.current = throttle(onResize, 300);
|
|
// if (throttledResize.current) {
|
|
// window.addEventListener("resize", throttledResize.current);
|
|
// }
|
|
|
|
// return () => {
|
|
// if (throttledResize.current)
|
|
// window.removeEventListener("resize", throttledResize.current);
|
|
// };
|
|
// }, [onResize]);
|
|
|
|
// const getNextColumn = React.useCallback(
|
|
// (array: TTableColumn[], index: number) => {
|
|
// let i = 1;
|
|
|
|
// while (array.length !== i) {
|
|
// const item = array[index + i];
|
|
|
|
// if (!item || state.hideColumns) return null;
|
|
|
|
// if (!item.enable) i += 1;
|
|
// else return item;
|
|
// }
|
|
// },
|
|
// [state.hideColumns],
|
|
// );
|
|
|
|
// // const getColumn = React.useCallback((array: string[], index: number) => {
|
|
// // let i = 1;
|
|
// // while (array.length !== i) {
|
|
// // const item = array[index + i];
|
|
// // if (!item) return [0, i];
|
|
// // if (item === "0px") i += 1;
|
|
// // else return [getSubstring(item), i];
|
|
// // }
|
|
// // }, []);
|
|
|
|
// const moveToLeft = (widths: string[], newWidth: number, index?: number) => {
|
|
// let leftColumn;
|
|
// let colIndex = index !== undefined ? index : state.columnIndex - 1;
|
|
|
|
// if (colIndex < 0) return;
|
|
|
|
// while (colIndex >= 0) {
|
|
// leftColumn = document.getElementById(`column_${colIndex}`);
|
|
// if (leftColumn) {
|
|
// if (leftColumn.dataset.enable === "true") break;
|
|
// else colIndex -= 1;
|
|
// } else return false;
|
|
// }
|
|
|
|
// const minSize =
|
|
// leftColumn && leftColumn.dataset.minWidth
|
|
// ? +leftColumn.dataset.minWidth
|
|
// : DEFAULT_MIN_COLUMN_SIZE;
|
|
|
|
// if (leftColumn && leftColumn.clientWidth <= minSize) {
|
|
// if (colIndex < 0) return false;
|
|
// moveToLeft(widths, newWidth, colIndex - 1);
|
|
|
|
// return;
|
|
// }
|
|
|
|
// const offset = getSubstring(widths[+state.columnIndex]) - newWidth;
|
|
|
|
// const column2Width = getSubstring(widths[colIndex]);
|
|
|
|
// const leftColumnWidth = column2Width - offset;
|
|
// const newLeftWidth = leftColumnWidth < minSize ? minSize : leftColumnWidth;
|
|
|
|
// widths[colIndex] = `${newLeftWidth}px`;
|
|
|
|
// widths[+state.columnIndex] = `${
|
|
// getSubstring(widths[+state.columnIndex]) +
|
|
// (offset - (newLeftWidth - leftColumnWidth))
|
|
// }px`;
|
|
// };
|
|
|
|
// const moveToRight = (widths: string[], newWidth: number, index?: number) => {
|
|
// let rightColumn;
|
|
// let colIndex = index || +state.columnIndex + 1;
|
|
|
|
// while (colIndex !== columns.length) {
|
|
// rightColumn = document.getElementById(`column_${colIndex}`);
|
|
// if (rightColumn) {
|
|
// if (rightColumn.dataset.enable === "true") break;
|
|
// else colIndex += 1;
|
|
// } else return false;
|
|
// }
|
|
|
|
// const offset = getSubstring(widths[+state.columnIndex]) - newWidth;
|
|
// const column2Width = getSubstring(widths[colIndex]);
|
|
|
|
// const defaultColumn = document.getElementById(`column_${colIndex}`);
|
|
// if (!defaultColumn || defaultColumn.dataset.defaultSize) return;
|
|
|
|
// const handleOffset = 8;
|
|
|
|
// if (column2Width + offset - handleOffset >= DEFAULT_MIN_COLUMN_SIZE) {
|
|
// widths[+state.columnIndex] = `${newWidth + handleOffset}px`;
|
|
// widths[colIndex] = `${column2Width + offset - handleOffset}px`;
|
|
// } else {
|
|
// if (colIndex === columns.length) return false;
|
|
// moveToRight(widths, newWidth, colIndex + 1);
|
|
// }
|
|
// };
|
|
|
|
// const onMouseMove = (e: MouseEvent) => {
|
|
// const isRtl = theme?.interfaceDirection === "rtl";
|
|
|
|
// // if (!state.columnIndex) return;
|
|
// const column = document.getElementById(
|
|
// `column_${state.columnIndex}`,
|
|
// ) as HTMLElement;
|
|
|
|
// const columnSize = column?.getBoundingClientRect();
|
|
// const newWidth = isRtl
|
|
// ? columnSize.right - e.clientX
|
|
// : e.clientX - columnSize.left;
|
|
|
|
// const tableContainer = containerRef.current.style.gridTemplateColumns;
|
|
// const widths = tableContainer.split(" ");
|
|
|
|
// const minSize = column.dataset.minWidth
|
|
// ? +column.dataset.minWidth
|
|
// : DEFAULT_MIN_COLUMN_SIZE;
|
|
|
|
// if (newWidth <= minSize) {
|
|
// const columnChanged = moveToLeft(widths, newWidth);
|
|
|
|
// if (!columnChanged) {
|
|
// widths[+state.columnIndex] = widths[+state.columnIndex];
|
|
// }
|
|
// } else {
|
|
// moveToRight(widths, newWidth);
|
|
// }
|
|
|
|
// const str = widths.join(" ");
|
|
|
|
// containerRef.current.style.gridTemplateColumns = str;
|
|
// if (headerRef.current) headerRef.current.style.gridTemplateColumns = str;
|
|
|
|
// updateTableRows(str);
|
|
// };
|
|
|
|
// const onMouseUp = () => {
|
|
// if (!infoPanelVisible) {
|
|
// localStorage.setItem(
|
|
// columnStorageName,
|
|
// containerRef.current.style.gridTemplateColumns,
|
|
// );
|
|
// } else {
|
|
// localStorage.setItem(
|
|
// columnInfoPanelStorageName,
|
|
// containerRef.current.style.gridTemplateColumns,
|
|
// );
|
|
// }
|
|
|
|
// window.removeEventListener("mousemove", onMouseMove);
|
|
// window.removeEventListener("mouseup", onMouseUp);
|
|
// };
|
|
|
|
// const onMouseDown = (event: React.MouseEvent) => {
|
|
// const target = event.target as HTMLDivElement;
|
|
// const column = target?.dataset?.column ? +target.dataset.column : 0;
|
|
|
|
// setState((s) => ({ ...s, columnIndex: column }));
|
|
|
|
// window.addEventListener("mousemove", onMouseMove);
|
|
// window.addEventListener("mouseup", onMouseUp);
|
|
// };
|
|
|
|
// return (
|
|
// <>
|
|
// <StyledTableHeader
|
|
// id="table-container_caption-header"
|
|
// className={`${
|
|
// isLengthenHeader ? "lengthen-header" : ""
|
|
// } table-container_header`}
|
|
// ref={headerRef}
|
|
// {...rest}
|
|
// >
|
|
// <StyledTableRow>
|
|
// {columns.map((column, index) => {
|
|
// const nextColumn = getNextColumn(columns, index);
|
|
// const resizable = nextColumn ? nextColumn.resizable : false;
|
|
|
|
// return (
|
|
// <TableHeaderCell
|
|
// key={column.key ?? "empty-cell"}
|
|
// index={index}
|
|
// column={column}
|
|
// sorted={sorted}
|
|
// sortBy={sortBy}
|
|
// resizable={resizable}
|
|
// defaultSize={column.defaultSize}
|
|
// onMouseDown={onMouseDown}
|
|
// sortingVisible={sortingVisible}
|
|
// tagRef={tagRef}
|
|
// />
|
|
// );
|
|
// })}
|
|
|
|
// {showSettings && (
|
|
// <div
|
|
// className="table-container_header-settings"
|
|
// title={settingsTitle}
|
|
// >
|
|
// <TableSettings
|
|
// columns={columns}
|
|
// disableSettings={infoPanelVisible || state.hideColumns}
|
|
// />
|
|
// </div>
|
|
// )}
|
|
// </StyledTableRow>
|
|
// </StyledTableHeader>
|
|
|
|
// <StyledEmptyTableContainer />
|
|
// </>
|
|
// );
|
|
// }
|
|
|
|
const defaultMinColumnSize = 110;
|
|
const settingsSize = 24;
|
|
|
|
const minSizeFirstColumn = 210;
|
|
|
|
class TableHeader extends React.Component<
|
|
TableHeaderProps,
|
|
{ hideColumns: boolean; columnIndex: null | number }
|
|
> {
|
|
headerRef: null | React.RefObject<HTMLDivElement> = null;
|
|
|
|
throttledResize: null | DebouncedFunc<() => void> = null;
|
|
|
|
constructor(props: TableHeaderProps) {
|
|
super(props);
|
|
|
|
this.state = { columnIndex: null, hideColumns: false };
|
|
|
|
this.headerRef = React.createRef();
|
|
this.throttledResize = throttle(this.onResize, 300);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.onResize();
|
|
if (this.throttledResize)
|
|
window.addEventListener("resize", this.throttledResize);
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.onResize();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.throttledResize)
|
|
window.removeEventListener("resize", this.throttledResize);
|
|
}
|
|
|
|
getNextColumn = (array: TTableColumn[], index: number) => {
|
|
let i = 1;
|
|
|
|
const { hideColumns } = this.state;
|
|
|
|
while (array.length !== i) {
|
|
const item = array[index + i];
|
|
|
|
if (!item || hideColumns) return null;
|
|
if (!item.enable) i += 1;
|
|
else return item;
|
|
}
|
|
};
|
|
|
|
// getColumn = (array: string[], index: number) => {
|
|
// let i = 1;
|
|
// while (array.length !== i) {
|
|
// const item = array[index + i];
|
|
// if (!item) return [0, i];
|
|
// if (item === "0px") i += 1;
|
|
// else return [getSubstring(item), i];
|
|
// }
|
|
// };
|
|
|
|
moveToLeft = (widths: string[], newWidth: number, index?: number) => {
|
|
const { columnIndex } = this.state;
|
|
|
|
let leftColumn;
|
|
let colIndex =
|
|
index !== undefined ? index : columnIndex ? columnIndex - 1 : 0;
|
|
|
|
if (colIndex < 0) return;
|
|
|
|
while (colIndex >= 0) {
|
|
leftColumn = document.getElementById(`column_${colIndex}`);
|
|
if (leftColumn) {
|
|
if (leftColumn.dataset.enable === "true") break;
|
|
else colIndex -= 1;
|
|
} else return false;
|
|
}
|
|
|
|
if (leftColumn) {
|
|
const minSize = leftColumn.dataset.minWidth
|
|
? leftColumn.dataset.minWidth
|
|
: defaultMinColumnSize;
|
|
|
|
if (leftColumn.clientWidth <= +minSize) {
|
|
if (colIndex < 0) return false;
|
|
this.moveToLeft(widths, newWidth, colIndex - 1);
|
|
return;
|
|
}
|
|
if (columnIndex !== null) {
|
|
const offset = getSubstring(widths[+columnIndex]) - newWidth;
|
|
const column2Width = getSubstring(widths[colIndex]);
|
|
|
|
const leftColumnWidth = column2Width - offset;
|
|
const newLeftWidth =
|
|
leftColumnWidth < +minSize ? minSize : leftColumnWidth;
|
|
|
|
widths[colIndex] = `${newLeftWidth}px`;
|
|
const width =
|
|
getSubstring(widths[+columnIndex]) +
|
|
(offset - (+newLeftWidth - leftColumnWidth));
|
|
|
|
widths[+columnIndex] = `${width}px`;
|
|
}
|
|
}
|
|
};
|
|
|
|
moveToRight = (widths: string[], newWidth: number, index?: number) => {
|
|
const { columnIndex } = this.state;
|
|
const { columns } = this.props;
|
|
|
|
if (columnIndex === null) return;
|
|
|
|
let rightColumn;
|
|
let colIndex = index || +columnIndex + 1;
|
|
|
|
while (colIndex !== columns.length) {
|
|
rightColumn = document.getElementById(`column_${colIndex}`);
|
|
if (rightColumn) {
|
|
if (rightColumn.dataset.enable === "true") break;
|
|
else colIndex += 1;
|
|
} else return false;
|
|
}
|
|
|
|
const offset = getSubstring(widths[+columnIndex]) - newWidth;
|
|
const column2Width = getSubstring(widths[colIndex]);
|
|
|
|
const defaultColumn = document.getElementById(`column_${colIndex}`);
|
|
if (!defaultColumn || defaultColumn.dataset.defaultSize) return;
|
|
|
|
const handleOffset = 8;
|
|
|
|
if (column2Width + offset - handleOffset >= defaultMinColumnSize) {
|
|
widths[+columnIndex] = `${newWidth + handleOffset}px`;
|
|
widths[colIndex] = `${column2Width + offset - handleOffset}px`;
|
|
} else {
|
|
if (colIndex === columns.length) return false;
|
|
this.moveToRight(widths, newWidth, colIndex + 1);
|
|
}
|
|
};
|
|
|
|
addNewColumns = (
|
|
gridTemplateColumns: string[],
|
|
activeColumnIndex: number,
|
|
containerWidth: number,
|
|
) => {
|
|
const { columns, columnStorageName } = this.props;
|
|
const clearSize = gridTemplateColumns.map((c) => getSubstring(c));
|
|
// eslint-disable-next-line prefer-spread
|
|
const maxSize = Math.max.apply(Math, clearSize);
|
|
|
|
const defaultSize = columns[activeColumnIndex - 1].defaultSize;
|
|
const indexOfMaxSize = clearSize.findLastIndex((s) => s === maxSize);
|
|
|
|
const addedColumn = 1;
|
|
const enableColumnsLength =
|
|
columns.filter((column) => !column.defaultSize && column.enable).length -
|
|
addedColumn;
|
|
|
|
const allColumnsLength = columns.filter(
|
|
(column) => !column.defaultSize,
|
|
).length;
|
|
|
|
const defaultSizeColumn = columns.find(
|
|
(column) => column.defaultSize,
|
|
)?.defaultSize;
|
|
|
|
const widthColumns =
|
|
containerWidth - settingsSize - (defaultSizeColumn || 0);
|
|
|
|
const newColumnSize = defaultSize || widthColumns / allColumnsLength;
|
|
|
|
const newSizeMaxColumn = maxSize - newColumnSize;
|
|
|
|
const AddColumn = () => {
|
|
gridTemplateColumns[indexOfMaxSize] = `${newSizeMaxColumn}px`;
|
|
gridTemplateColumns[activeColumnIndex] = `${newColumnSize}px`;
|
|
return false;
|
|
};
|
|
|
|
const ResetColumnsSize = () => {
|
|
localStorage.removeItem(columnStorageName);
|
|
this.resetColumns();
|
|
return true;
|
|
};
|
|
|
|
if (
|
|
(indexOfMaxSize === 0 && newSizeMaxColumn < minSizeFirstColumn) ||
|
|
(indexOfMaxSize !== 0 && newSizeMaxColumn < defaultMinColumnSize) ||
|
|
newColumnSize < defaultMinColumnSize ||
|
|
enableColumnsLength === 1
|
|
)
|
|
return ResetColumnsSize();
|
|
|
|
AddColumn();
|
|
};
|
|
|
|
onMouseMove = (e: MouseEvent) => {
|
|
const { columnIndex } = this.state;
|
|
const { containerRef, theme } = this.props;
|
|
const isRtl = theme.interfaceDirection === "rtl";
|
|
|
|
if (columnIndex === null) return;
|
|
const column = document.getElementById(`column_${columnIndex}`);
|
|
|
|
if (!column) return;
|
|
|
|
const columnSize = column.getBoundingClientRect();
|
|
const newWidth = isRtl
|
|
? columnSize.right - e.clientX
|
|
: e.clientX - columnSize.left;
|
|
|
|
const tableContainer = containerRef.current.style.gridTemplateColumns;
|
|
const widths = tableContainer.split(" ");
|
|
|
|
const minSize = column.dataset.minWidth
|
|
? column.dataset.minWidth
|
|
: defaultMinColumnSize;
|
|
|
|
if (newWidth <= +minSize) {
|
|
const columnChanged = this.moveToLeft(widths, newWidth);
|
|
|
|
if (!columnChanged) {
|
|
widths[+columnIndex] = widths[+columnIndex];
|
|
}
|
|
} else {
|
|
this.moveToRight(widths, newWidth);
|
|
}
|
|
|
|
const str = widths.join(" ");
|
|
|
|
containerRef.current.style.gridTemplateColumns = str;
|
|
if (this.headerRef?.current)
|
|
this.headerRef.current.style.gridTemplateColumns = str;
|
|
|
|
this.updateTableRows(str);
|
|
};
|
|
|
|
onMouseUp = () => {
|
|
const {
|
|
infoPanelVisible = false,
|
|
columnStorageName,
|
|
columnInfoPanelStorageName,
|
|
containerRef,
|
|
} = this.props;
|
|
|
|
if (!infoPanelVisible) {
|
|
localStorage.setItem(
|
|
columnStorageName,
|
|
containerRef.current.style.gridTemplateColumns,
|
|
);
|
|
} else {
|
|
localStorage.setItem(
|
|
columnInfoPanelStorageName,
|
|
containerRef.current.style.gridTemplateColumns,
|
|
);
|
|
}
|
|
|
|
window.removeEventListener("mousemove", this.onMouseMove);
|
|
window.removeEventListener("mouseup", this.onMouseUp);
|
|
};
|
|
|
|
onMouseDown = (event: React.MouseEvent) => {
|
|
if (event.target) {
|
|
const target = event.target as HTMLDivElement;
|
|
|
|
if (target.dataset.column)
|
|
this.setState({ columnIndex: +target.dataset.column });
|
|
}
|
|
window.addEventListener("mousemove", this.onMouseMove);
|
|
window.addEventListener("mouseup", this.onMouseUp);
|
|
};
|
|
|
|
onResize = () => {
|
|
const {
|
|
containerRef,
|
|
columnStorageName,
|
|
columnInfoPanelStorageName,
|
|
resetColumnsSize,
|
|
|
|
infoPanelVisible = false,
|
|
columns,
|
|
setHideColumns,
|
|
} = this.props;
|
|
|
|
let activeColumnIndex = null;
|
|
|
|
const container = containerRef.current
|
|
? containerRef.current
|
|
: document.getElementById("table-container");
|
|
|
|
if (!container) return;
|
|
|
|
const storageSize =
|
|
!resetColumnsSize && localStorage.getItem(columnStorageName);
|
|
|
|
// TODO: If defaultSize(75px) is less than defaultMinColumnSize(110px) the calculations work correctly
|
|
const defaultSize =
|
|
columns.find((col) => col.defaultSize)?.defaultSize || 0;
|
|
|
|
// TODO: Fixed columns size if something went wrong
|
|
if (storageSize) {
|
|
const splitStorage = storageSize.split(" ");
|
|
|
|
const isInvalid = splitStorage.some((s) => s === "NaNpx");
|
|
|
|
if (
|
|
(defaultSize &&
|
|
splitStorage[splitStorage.length - 2] !== `${defaultSize}px`) ||
|
|
getSubstring(splitStorage[0]) <= defaultMinColumnSize ||
|
|
isInvalid
|
|
) {
|
|
localStorage.removeItem(columnStorageName);
|
|
this.onResize();
|
|
return;
|
|
}
|
|
}
|
|
|
|
const containerGridTemplateColumns =
|
|
container.style.gridTemplateColumns.split(" ");
|
|
|
|
const tableContainer = storageSize
|
|
? storageSize.split(" ")
|
|
: containerGridTemplateColumns;
|
|
|
|
const { hideColumns } = this.state;
|
|
|
|
if (
|
|
containerGridTemplateColumns.length === 1 &&
|
|
!hideColumns &&
|
|
storageSize
|
|
) {
|
|
const hasContent = !!storageSize.split(" ").find((item, index) => {
|
|
if (index === 0) return;
|
|
return checkingForUnfixedSize(item, defaultSize);
|
|
});
|
|
|
|
// If content column sizes are calculated as empty after changing view
|
|
if (!hasContent) return this.resetColumns();
|
|
}
|
|
|
|
// columns.length + 1 - its settings column
|
|
if (tableContainer.length !== columns.length + 1) {
|
|
return this.resetColumns();
|
|
}
|
|
|
|
if (!container) return;
|
|
|
|
const containerWidth = +container.clientWidth;
|
|
|
|
const oldWidth =
|
|
tableContainer
|
|
.map((column) => getSubstring(column))
|
|
.reduce((x, y) => x + y) -
|
|
defaultSize -
|
|
settingsSize;
|
|
|
|
let str = "";
|
|
let gridTemplateColumnsWithoutOverfilling: string[] = [];
|
|
|
|
if (tableContainer.length > 1) {
|
|
const gridTemplateColumns: string[] = [];
|
|
let hideColumnsConst = false;
|
|
|
|
let contentColumnsCount = 0;
|
|
let contentColumnsCountInfoPanel = 0;
|
|
|
|
const storageInfoPanelSize = localStorage.getItem(
|
|
columnInfoPanelStorageName,
|
|
);
|
|
|
|
if (storageInfoPanelSize) {
|
|
contentColumnsCountInfoPanel = storageInfoPanelSize
|
|
.split(" ")
|
|
.filter((item) => checkingForUnfixedSize(item, defaultSize)).length;
|
|
|
|
contentColumnsCount = tableContainer.filter((item) =>
|
|
checkingForUnfixedSize(item, defaultSize),
|
|
).length;
|
|
}
|
|
|
|
const incorrectNumberColumns =
|
|
contentColumnsCountInfoPanel < contentColumnsCount && !hideColumns;
|
|
|
|
const tableInfoPanelContainer =
|
|
storageInfoPanelSize && !incorrectNumberColumns
|
|
? 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` || `${defaultSize}px` === `0px`) &&
|
|
item !== `${settingsSize}px`
|
|
) {
|
|
if (column?.dataset?.minWidth) {
|
|
containerMinWidth -= +column.dataset.minWidth;
|
|
} else {
|
|
containerMinWidth -= defaultMinColumnSize;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (containerMinWidth < 0) {
|
|
hideColumnsConst = true;
|
|
}
|
|
|
|
if (hideColumns !== hideColumnsConst) {
|
|
this.setState({ hideColumns: hideColumnsConst });
|
|
setHideColumns(hideColumnsConst);
|
|
}
|
|
|
|
if (hideColumnsConst) {
|
|
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");
|
|
}
|
|
});
|
|
}
|
|
|
|
let hasGridTemplateColumnsWithoutOverfilling = false;
|
|
if (infoPanelVisible) {
|
|
if (!hideColumns) {
|
|
const contentWidth = containerWidth - defaultSize - settingsSize;
|
|
|
|
let enabledColumnsCount = 0;
|
|
|
|
tableInfoPanelContainer.forEach((item, index) => {
|
|
if (
|
|
index !== 0 &&
|
|
item !== "0px" &&
|
|
item !== `${defaultSize}px` &&
|
|
item !== `${settingsSize}px`
|
|
) {
|
|
enabledColumnsCount += 1;
|
|
}
|
|
});
|
|
|
|
const changedWidth =
|
|
tableInfoPanelContainer
|
|
.map((column) => getSubstring(column))
|
|
.reduce((x, y) => x + y) -
|
|
defaultSize -
|
|
settingsSize;
|
|
|
|
if (
|
|
contentWidth - enabledColumnsCount * defaultMinColumnSize >
|
|
getSubstring(tableInfoPanelContainer[0])
|
|
) {
|
|
const currentContentWidth =
|
|
contentWidth - +getSubstring(tableInfoPanelContainer[0]);
|
|
|
|
let overWidth = 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 =
|
|
(getSubstring(item) /
|
|
(changedWidth -
|
|
+getSubstring(tableInfoPanelContainer[0]))) *
|
|
100;
|
|
|
|
const newItemWidth = defaultColumnSize
|
|
? `${defaultColumnSize}px`
|
|
: (currentContentWidth * percent) / 100 >
|
|
defaultMinColumnSize
|
|
? `${(currentContentWidth * percent) / 100}px`
|
|
: `${defaultMinColumnSize}px`;
|
|
|
|
if (
|
|
(currentContentWidth * percent) / 100 <
|
|
defaultMinColumnSize &&
|
|
!defaultColumnSize
|
|
) {
|
|
overWidth +=
|
|
defaultMinColumnSize -
|
|
(currentContentWidth * percent) / 100;
|
|
}
|
|
|
|
gridTemplateColumns.push(newItemWidth);
|
|
} else {
|
|
gridTemplateColumns.push(item);
|
|
}
|
|
}
|
|
});
|
|
|
|
if (overWidth > 0) {
|
|
gridTemplateColumns.forEach((column, index) => {
|
|
const columnWidth = getSubstring(column);
|
|
|
|
if (
|
|
index !== 0 &&
|
|
column !== "0px" &&
|
|
column !== `${defaultSize}px` &&
|
|
column !== `${settingsSize}px` &&
|
|
columnWidth > defaultMinColumnSize
|
|
) {
|
|
const availableWidth = columnWidth - defaultMinColumnSize;
|
|
|
|
if (availableWidth < Math.abs(overWidth)) {
|
|
overWidth = Math.abs(overWidth) - availableWidth;
|
|
return (gridTemplateColumns[index] = `${
|
|
columnWidth - availableWidth
|
|
}px`);
|
|
}
|
|
const temp = overWidth;
|
|
|
|
overWidth = 0;
|
|
|
|
return (gridTemplateColumns[index] = `${
|
|
columnWidth - Math.abs(temp)
|
|
}px`);
|
|
}
|
|
});
|
|
}
|
|
} 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 {
|
|
let overWidth = 0;
|
|
if (!hideColumns) {
|
|
// eslint-disable-next-line guard-for-in, no-restricted-syntax
|
|
for (const 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 += 1;
|
|
leftEnableColumn = gridTemplateColumns[+index - colIndex];
|
|
}
|
|
|
|
// added the size of the disabled column to the left column
|
|
gridTemplateColumns[+index - colIndex] = `${
|
|
getSubstring(gridTemplateColumns[+index - colIndex]) +
|
|
getSubstring(item)
|
|
}px`;
|
|
} else if (item !== `${settingsSize}px`) {
|
|
const percent = (getSubstring(item) / oldWidth) * 100;
|
|
|
|
let newItemWidth = defaultColumnSize
|
|
? `${defaultColumnSize}px`
|
|
: percent === 0
|
|
? `${defaultMinColumnSize}px`
|
|
: `${
|
|
((containerWidth - defaultSize - settingsSize) *
|
|
percent) /
|
|
100
|
|
}px`;
|
|
|
|
const minWidth = column?.dataset?.minWidth;
|
|
const minSize = minWidth ? +minWidth : minSizeFirstColumn;
|
|
|
|
// Checking whether the first column is less than the minimum width
|
|
if (+index === 0 && getSubstring(newItemWidth) < minSize) {
|
|
overWidth += minSizeFirstColumn - getSubstring(newItemWidth);
|
|
newItemWidth = `${minSizeFirstColumn}px`;
|
|
}
|
|
|
|
// Checking whether columns are smaller than the minimum width
|
|
if (
|
|
+index !== 0 &&
|
|
!defaultColumnSize &&
|
|
getSubstring(newItemWidth) < defaultMinColumnSize
|
|
) {
|
|
overWidth += defaultMinColumnSize - getSubstring(newItemWidth);
|
|
newItemWidth = `${defaultMinColumnSize}px`;
|
|
}
|
|
|
|
gridTemplateColumns.push(newItemWidth);
|
|
} else {
|
|
gridTemplateColumns.push(item);
|
|
}
|
|
}
|
|
|
|
if (overWidth > 0) {
|
|
gridTemplateColumnsWithoutOverfilling = this.distributionOverWidth(
|
|
overWidth,
|
|
gridTemplateColumns,
|
|
);
|
|
}
|
|
|
|
hasGridTemplateColumnsWithoutOverfilling =
|
|
gridTemplateColumnsWithoutOverfilling &&
|
|
gridTemplateColumnsWithoutOverfilling.length > 0;
|
|
|
|
if (activeColumnIndex) {
|
|
const gridColumns = hasGridTemplateColumnsWithoutOverfilling
|
|
? gridTemplateColumnsWithoutOverfilling
|
|
: gridTemplateColumns;
|
|
|
|
const needReset = this.addNewColumns(
|
|
gridColumns,
|
|
+activeColumnIndex,
|
|
containerWidth,
|
|
);
|
|
if (needReset) return;
|
|
}
|
|
}
|
|
}
|
|
|
|
str = hasGridTemplateColumnsWithoutOverfilling
|
|
? gridTemplateColumnsWithoutOverfilling.join(" ")
|
|
: gridTemplateColumns.join(" ");
|
|
} else {
|
|
this.resetColumns();
|
|
}
|
|
|
|
if (str) {
|
|
container.style.gridTemplateColumns = str;
|
|
|
|
this.updateTableRows(str);
|
|
|
|
if (this.headerRef && this.headerRef.current) {
|
|
this.headerRef.current.style.gridTemplateColumns = str;
|
|
this.headerRef.current.style.width = `${containerWidth}px`;
|
|
}
|
|
|
|
if (infoPanelVisible)
|
|
localStorage.setItem(columnInfoPanelStorageName, str);
|
|
else localStorage.setItem(columnStorageName, str);
|
|
|
|
if (!infoPanelVisible) {
|
|
localStorage.removeItem(columnInfoPanelStorageName);
|
|
}
|
|
}
|
|
};
|
|
|
|
distributionOverWidth = (
|
|
overWidth: number,
|
|
gridTemplateColumns: string[],
|
|
) => {
|
|
const newGridTemplateColumns: string[] = JSON.parse(
|
|
JSON.stringify(gridTemplateColumns),
|
|
);
|
|
|
|
const { columns } = this.props;
|
|
|
|
let countColumns = 0;
|
|
const defaultColumnSize =
|
|
columns.find((col) => col.defaultSize)?.defaultSize || 0;
|
|
|
|
newGridTemplateColumns.forEach((item, index) => {
|
|
const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
|
|
if (!unfixedSize) return;
|
|
|
|
const column = document.getElementById(`column_${index}`);
|
|
const minWidth = column?.dataset?.minWidth;
|
|
const minSize = minWidth ? +minWidth : minSizeFirstColumn;
|
|
|
|
if ((index === 0 ? minSize : defaultMinColumnSize) !== getSubstring(item))
|
|
countColumns += 1;
|
|
});
|
|
|
|
const addWidth = overWidth / countColumns;
|
|
|
|
newGridTemplateColumns.forEach((item, index) => {
|
|
const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
|
|
if (!unfixedSize) return;
|
|
|
|
const column = document.getElementById(`column_${index}`);
|
|
const minWidth = column?.dataset?.minWidth;
|
|
const minSize = minWidth ? +minWidth : minSizeFirstColumn;
|
|
|
|
const itemSubstring = getSubstring(item);
|
|
|
|
if ((index === 0 ? minSize : defaultMinColumnSize) === itemSubstring)
|
|
return;
|
|
|
|
const differenceWithMinimum =
|
|
itemSubstring - (index === 0 ? minSize : defaultMinColumnSize);
|
|
|
|
if (differenceWithMinimum >= addWidth) {
|
|
newGridTemplateColumns[index] = `${itemSubstring - addWidth}px`;
|
|
} else {
|
|
newGridTemplateColumns[index] = `${
|
|
index === 0 ? minSize : defaultMinColumnSize
|
|
}px`;
|
|
}
|
|
});
|
|
|
|
return newGridTemplateColumns;
|
|
};
|
|
|
|
updateTableRows = (str: string) => {
|
|
const { useReactWindow = false } = this.props;
|
|
if (!useReactWindow) return;
|
|
|
|
const rows = document.querySelectorAll(".table-row, .table-list-item");
|
|
|
|
if (rows?.length) {
|
|
for (let i = 0; i < rows.length; i += 1) {
|
|
const row = rows[i] as HTMLElement;
|
|
row.style.gridTemplateColumns = str;
|
|
}
|
|
}
|
|
};
|
|
|
|
resetColumns = () => {
|
|
const {
|
|
containerRef,
|
|
columnStorageName,
|
|
columnInfoPanelStorageName,
|
|
columns,
|
|
infoPanelVisible,
|
|
} = this.props;
|
|
|
|
let str = "";
|
|
|
|
const enableColumns = columns
|
|
.filter((x) => x.enable)
|
|
.filter((x) => !x.defaultSize)
|
|
.filter((x) => !x.default);
|
|
|
|
const container = containerRef.current
|
|
? containerRef.current
|
|
: document.getElementById("table-container");
|
|
const containerWidth = container ? container.clientWidth : 0;
|
|
|
|
const firstColumnPercent = 40;
|
|
const percent = 60 / enableColumns.length;
|
|
|
|
const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`;
|
|
const otherColumns = `${(containerWidth * percent) / 100}px`;
|
|
|
|
for (const col of columns) {
|
|
if (col.default) {
|
|
str += `${wideColumnSize} `;
|
|
} else
|
|
str += col.enable
|
|
? col.defaultSize
|
|
? `${col.defaultSize}px `
|
|
: `${otherColumns} `
|
|
: "0px ";
|
|
}
|
|
|
|
str += `${settingsSize}px`;
|
|
|
|
if (container) container.style.gridTemplateColumns = str;
|
|
if (this.headerRef && this.headerRef.current) {
|
|
this.headerRef.current.style.gridTemplateColumns = str;
|
|
this.headerRef.current.style.width = `${containerWidth}px`;
|
|
}
|
|
|
|
if (str)
|
|
if (!infoPanelVisible) localStorage.setItem(columnStorageName, str);
|
|
else localStorage.setItem(columnInfoPanelStorageName, str);
|
|
|
|
this.onResize();
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
columns,
|
|
sortBy,
|
|
sorted,
|
|
isLengthenHeader,
|
|
sortingVisible = true,
|
|
infoPanelVisible = false,
|
|
showSettings = true,
|
|
tagRef,
|
|
settingsTitle,
|
|
...rest
|
|
} = this.props;
|
|
|
|
const { hideColumns } = this.state;
|
|
|
|
// console.log("TABLE HEADER RENDER", columns);
|
|
|
|
return (
|
|
<>
|
|
<StyledTableHeader
|
|
id="table-container_caption-header"
|
|
className={`${
|
|
isLengthenHeader ? "lengthen-header" : ""
|
|
} table-container_header`}
|
|
ref={this.headerRef}
|
|
{...rest}
|
|
>
|
|
<StyledTableRow>
|
|
{columns.map((column, index) => {
|
|
const nextColumn = this.getNextColumn(columns, index);
|
|
const resizable = nextColumn ? nextColumn.resizable : false;
|
|
|
|
return (
|
|
<TableHeaderCell
|
|
key={column.key ?? "empty-cell"}
|
|
index={index}
|
|
column={column}
|
|
sorted={sorted}
|
|
sortBy={sortBy}
|
|
resizable={resizable}
|
|
defaultSize={column.defaultSize}
|
|
onMouseDown={this.onMouseDown}
|
|
sortingVisible={sortingVisible}
|
|
tagRef={tagRef}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{showSettings && (
|
|
<div
|
|
className="table-container_header-settings"
|
|
title={settingsTitle}
|
|
>
|
|
<TableSettings
|
|
columns={columns}
|
|
disableSettings={infoPanelVisible || hideColumns}
|
|
/>
|
|
</div>
|
|
)}
|
|
</StyledTableRow>
|
|
</StyledTableHeader>
|
|
|
|
<StyledEmptyTableContainer />
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
// TableHeader.propTypes = {
|
|
// containerRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
|
|
// columns: PropTypes.array.isRequired,
|
|
// sortBy: PropTypes.string,
|
|
// sorted: PropTypes.bool,
|
|
// columnStorageName: PropTypes.string,
|
|
// sectionWidth: PropTypes.number,
|
|
// onClick: PropTypes.func,
|
|
// resetColumnsSize: PropTypes.bool,
|
|
// isLengthenHeader: PropTypes.bool,
|
|
// sortingVisible: PropTypes.bool,
|
|
// infoPanelVisible: PropTypes.bool,
|
|
// useReactWindow: PropTypes.bool,
|
|
// showSettings: PropTypes.bool,
|
|
// };
|
|
|
|
export default withTheme(TableHeader);
|