From 38af49f027291d73e1157a41e9d1a782169d736e Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 25 Jul 2024 17:11:35 +0300 Subject: [PATCH] Web: Components: Table: fixed imports --- .../client/src/store/AccountsHotkeysStore.ts | 2 +- packages/client/src/store/HotkeyStore.js | 2 +- .../components/table/Table.constants.ts | 31 ----- .../shared/components/table/Table.utils.ts | 6 +- .../shared/components/table/TableHeader.tsx | 130 +++++++++--------- packages/shared/components/table/index.ts | 5 +- packages/shared/utils/device.ts | 1 + 7 files changed, 76 insertions(+), 101 deletions(-) delete mode 100644 packages/shared/components/table/Table.constants.ts diff --git a/packages/client/src/store/AccountsHotkeysStore.ts b/packages/client/src/store/AccountsHotkeysStore.ts index d8a669658c..6320e49d08 100644 --- a/packages/client/src/store/AccountsHotkeysStore.ts +++ b/packages/client/src/store/AccountsHotkeysStore.ts @@ -28,7 +28,7 @@ import { makeAutoObservable } from "mobx"; import { isMobile } from "@docspace/shared/utils"; import { checkDialogsOpen } from "@docspace/shared/utils/checkDialogsOpen"; import { TUser, TUserGroup } from "@docspace/shared/api/people/types"; -import { TABLE_HEADER_HEIGHT } from "@docspace/shared/components/table/Table.constants"; +import { TABLE_HEADER_HEIGHT } from "@docspace/shared/utils/device"; type AccountsType = TUser | TUserGroup; diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js index 4976a22ffa..46ed343cdb 100644 --- a/packages/client/src/store/HotkeyStore.js +++ b/packages/client/src/store/HotkeyStore.js @@ -37,7 +37,7 @@ import getFilesFromEvent from "@docspace/shared/components/drag-and-drop/get-fil import config from "PACKAGE_FILE"; import { getCategoryUrl } from "SRC_DIR/helpers/utils"; import { encryptionUploadDialog } from "../helpers/encryptionUploadDialog"; -import { TABLE_HEADER_HEIGHT } from "@docspace/shared/components/table/Table.constants"; +import { TABLE_HEADER_HEIGHT } from "@docspace/shared/utils/device"; class HotkeyStore { filesStore; diff --git a/packages/shared/components/table/Table.constants.ts b/packages/shared/components/table/Table.constants.ts deleted file mode 100644 index eded7701d4..0000000000 --- a/packages/shared/components/table/Table.constants.ts +++ /dev/null @@ -1,31 +0,0 @@ -// (c) Copyright Ascensio System SIA 2009-2024 -// -// This program is a free software product. -// You can redistribute it and/or modify it under the terms -// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software -// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended -// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of -// any third-party rights. -// -// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty -// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see -// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html -// -// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. -// -// The interactive user interfaces in modified source and object code versions of the Program must -// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. -// -// Pursuant to Section 7(b) of the License you must retain the original Product logo when -// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under -// trademark law for use of our trademarks. -// -// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing -// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 -// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode - -export const DEFAULT_MIN_COLUMN_SIZE = 110; -export const SETTINGS_SIZE = 24; -export const CONTAINER_MARGIN = 25; -export const MIN_SIZE_FIRST_COLUMN = 210; -export const TABLE_HEADER_HEIGHT = 40; diff --git a/packages/shared/components/table/Table.utils.ts b/packages/shared/components/table/Table.utils.ts index 06222a1f04..04957826d9 100644 --- a/packages/shared/components/table/Table.utils.ts +++ b/packages/shared/components/table/Table.utils.ts @@ -24,7 +24,10 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import { SETTINGS_SIZE } from "./Table.constants"; +export const MIN_SIZE_FIRST_COLUMN = 210; +export const DEFAULT_MIN_COLUMN_SIZE = 110; +export const SETTINGS_SIZE = 24; +export const HANDLE_OFFSET = 8; export const getSubstring = (str: string) => +str.substring(0, str.length - 2); @@ -33,7 +36,6 @@ export const checkingForUnfixedSize = ( defaultColumnSize: number, ) => { return ( - item !== "24px" && // TODO: SETTINGS_SIZE is not imported item !== `${SETTINGS_SIZE}px` && item !== `${defaultColumnSize}px` && item !== "0px" diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index c49ab493be..ba81a9db19 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -38,16 +38,17 @@ import { import { TTableColumn, TableHeaderProps } from "./Table.types"; import { TableSettings } from "./sub-components/TableSettings"; import { TableHeaderCell } from "./sub-components/TableHeaderCell"; -import { checkingForUnfixedSize, getSubstring } from "./Table.utils"; +import { + DEFAULT_MIN_COLUMN_SIZE, + MIN_SIZE_FIRST_COLUMN, + SETTINGS_SIZE, + HANDLE_OFFSET, + checkingForUnfixedSize, + getSubstring, +} from "./Table.utils"; import { isDesktop } from "../../utils"; -const defaultMinColumnSize = 110; -const settingsSize = 24; - -const minSizeFirstColumn = 210; -const handleOffset = 8; - -class TableHeader extends React.Component< +class TableHeaderComponent extends React.Component< TableHeaderProps, { hideColumns: boolean; columnIndex: null | number } > { @@ -137,7 +138,7 @@ class TableHeader extends React.Component< if (leftColumn) { const minSize = leftColumn.dataset.minWidth ? leftColumn.dataset.minWidth - : defaultMinColumnSize; + : DEFAULT_MIN_COLUMN_SIZE; if (leftColumn.getBoundingClientRect().width <= +minSize) { if (colIndex < 0) return false; @@ -185,17 +186,17 @@ class TableHeader extends React.Component< const defaultColumn = document.getElementById(`column_${colIndex}`); if (!defaultColumn || defaultColumn.dataset.defaultSize) return; - if (column2Width + offset - handleOffset >= defaultMinColumnSize) { - widths[+columnIndex] = `${newWidth + handleOffset}px`; - widths[colIndex] = `${column2Width + offset - handleOffset}px`; - } else if (column2Width !== defaultMinColumnSize) { + if (column2Width + offset - HANDLE_OFFSET >= DEFAULT_MIN_COLUMN_SIZE) { + widths[+columnIndex] = `${newWidth + HANDLE_OFFSET}px`; + widths[colIndex] = `${column2Width + offset - HANDLE_OFFSET}px`; + } else if (column2Width !== DEFAULT_MIN_COLUMN_SIZE) { const width = getSubstring(widths[+columnIndex]) + getSubstring(widths[+colIndex]) - - defaultMinColumnSize; + DEFAULT_MIN_COLUMN_SIZE; widths[+columnIndex] = `${width}px`; - widths[colIndex] = `${defaultMinColumnSize}px`; + widths[colIndex] = `${DEFAULT_MIN_COLUMN_SIZE}px`; } else { if (colIndex === columns.length) return false; this.moveToRight(widths, newWidth, colIndex + 1); @@ -229,7 +230,7 @@ class TableHeader extends React.Component< )?.defaultSize; const widthColumns = - containerWidth - settingsSize - (defaultSizeColumn || 0); + containerWidth - SETTINGS_SIZE - (defaultSizeColumn || 0); const newColumnSize = defaultSize || widthColumns / allColumnsLength; @@ -247,9 +248,9 @@ class TableHeader extends React.Component< }; if ( - (indexOfMaxSize === 0 && newSizeMaxColumn < minSizeFirstColumn) || - (indexOfMaxSize !== 0 && newSizeMaxColumn < defaultMinColumnSize) || - newColumnSize < defaultMinColumnSize || + (indexOfMaxSize === 0 && newSizeMaxColumn < MIN_SIZE_FIRST_COLUMN) || + (indexOfMaxSize !== 0 && newSizeMaxColumn < DEFAULT_MIN_COLUMN_SIZE) || + newColumnSize < DEFAULT_MIN_COLUMN_SIZE || enableColumnsLength === 1 ) return ResetColumnsSize(); @@ -277,14 +278,14 @@ class TableHeader extends React.Component< const minSize = column.dataset.minWidth ? column.dataset.minWidth - : defaultMinColumnSize; + : DEFAULT_MIN_COLUMN_SIZE; - if (newWidth <= +minSize - handleOffset) { + if (newWidth <= +minSize - HANDLE_OFFSET) { const currentWidth = getSubstring(widths[+columnIndex]); // Move left if (currentWidth !== +minSize) { - newWidth = +minSize - handleOffset; + newWidth = +minSize - HANDLE_OFFSET; this.moveToRight(widths, newWidth); } else this.moveToLeft(widths, newWidth); } else { @@ -368,7 +369,7 @@ class TableHeader extends React.Component< if (storageSize) { const splitStorage = storageSize.split(" "); - if (getSubstring(splitStorage[0]) <= defaultMinColumnSize) { + if (getSubstring(splitStorage[0]) <= DEFAULT_MIN_COLUMN_SIZE) { localStorage.removeItem(columnStorageName); this.onResize(); return; @@ -406,7 +407,7 @@ class TableHeader extends React.Component< .map((column) => getSubstring(column)) .reduce((x, y) => x + y); - const oldWidth = defaultWidth - defaultSize - settingsSize; + const oldWidth = defaultWidth - defaultSize - SETTINGS_SIZE; let str = ""; let gridTemplateColumnsWithoutOverfilling: string[] = []; @@ -423,7 +424,7 @@ class TableHeader extends React.Component< ? storageInfoPanelSize.split(" ") : tableContainer; - let containerMinWidth = containerWidth - defaultSize - settingsSize; + let containerMinWidth = containerWidth - defaultSize - SETTINGS_SIZE; tableInfoPanelContainer.forEach((item, index) => { const column = document.getElementById(`column_${index}`); @@ -435,12 +436,12 @@ class TableHeader extends React.Component< if ( enable && (item !== `${defaultSize}px` || `${defaultSize}px` === `0px`) && - item !== `${settingsSize}px` + item !== `${SETTINGS_SIZE}px` ) { if (column?.dataset?.minWidth) { containerMinWidth -= +column.dataset.minWidth; } else { - containerMinWidth -= defaultMinColumnSize; + containerMinWidth -= DEFAULT_MIN_COLUMN_SIZE; } } }); @@ -460,11 +461,11 @@ class TableHeader extends React.Component< if (column?.dataset?.minWidth && column?.dataset?.default) { gridTemplateColumns.push( - `${containerWidth - defaultSize - settingsSize}px`, + `${containerWidth - defaultSize - SETTINGS_SIZE}px`, ); } else if ( item === `${defaultSize}px` || - item === `${settingsSize}px` + item === `${SETTINGS_SIZE}px` ) { gridTemplateColumns.push(item); } else { @@ -476,7 +477,7 @@ class TableHeader extends React.Component< let hasGridTemplateColumnsWithoutOverfilling = false; if (infoPanelVisible) { if (!hideColumns) { - const contentWidth = containerWidth - defaultSize - settingsSize; + const contentWidth = containerWidth - defaultSize - SETTINGS_SIZE; let enabledColumnsCount = 0; @@ -485,7 +486,7 @@ class TableHeader extends React.Component< index !== 0 && item !== "0px" && item !== `${defaultSize}px` && - item !== `${settingsSize}px` + item !== `${SETTINGS_SIZE}px` ) { enabledColumnsCount += 1; } @@ -496,10 +497,10 @@ class TableHeader extends React.Component< .map((column) => getSubstring(column)) .reduce((x, y) => x + y) - defaultSize - - settingsSize; + SETTINGS_SIZE; if ( - contentWidth - enabledColumnsCount * defaultMinColumnSize > + contentWidth - enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE > getSubstring(tableInfoPanelContainer[0]) ) { const currentContentWidth = @@ -523,7 +524,7 @@ class TableHeader extends React.Component< if (!enable) { gridTemplateColumns.push("0px"); - } else if (item !== `${settingsSize}px`) { + } else if (item !== `${SETTINGS_SIZE}px`) { const percent = enabledColumnsCount === 0 ? 100 @@ -535,17 +536,17 @@ class TableHeader extends React.Component< const newItemWidth = defaultColumnSize ? `${defaultColumnSize}px` : (currentContentWidth * percent) / 100 > - defaultMinColumnSize + DEFAULT_MIN_COLUMN_SIZE ? `${(currentContentWidth * percent) / 100}px` - : `${defaultMinColumnSize}px`; + : `${DEFAULT_MIN_COLUMN_SIZE}px`; if ( (currentContentWidth * percent) / 100 < - defaultMinColumnSize && + DEFAULT_MIN_COLUMN_SIZE && !defaultColumnSize ) { overWidth += - defaultMinColumnSize - + DEFAULT_MIN_COLUMN_SIZE - (currentContentWidth * percent) / 100; } @@ -564,10 +565,10 @@ class TableHeader extends React.Component< index !== 0 && column !== "0px" && column !== `${defaultSize}px` && - column !== `${settingsSize}px` && - columnWidth > defaultMinColumnSize + column !== `${SETTINGS_SIZE}px` && + columnWidth > DEFAULT_MIN_COLUMN_SIZE ) { - const availableWidth = columnWidth - defaultMinColumnSize; + const availableWidth = columnWidth - DEFAULT_MIN_COLUMN_SIZE; if (availableWidth < Math.abs(overWidth)) { overWidth = Math.abs(overWidth) - availableWidth; @@ -597,15 +598,15 @@ class TableHeader extends React.Component< if (!enable) { gridTemplateColumns.push("0px"); - } else if (item !== `${settingsSize}px`) { + } else if (item !== `${SETTINGS_SIZE}px`) { const newItemWidth = defaultColumnSize ? `${defaultColumnSize}px` : index === 0 ? `${ contentWidth - - enabledColumnsCount * defaultMinColumnSize + enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE }px` - : `${defaultMinColumnSize}px`; + : `${DEFAULT_MIN_COLUMN_SIZE}px`; gridTemplateColumns.push(newItemWidth); } else { @@ -645,7 +646,7 @@ class TableHeader extends React.Component< getSubstring(gridTemplateColumns[+index - colIndex]) + getSubstring(item) }px`; - } else if (item !== `${settingsSize}px`) { + } else if (item !== `${SETTINGS_SIZE}px`) { const percent = (getSubstring(item) / oldWidth) * 100; if (percent === 100) { @@ -662,30 +663,31 @@ class TableHeader extends React.Component< let newItemWidth = defaultColumnSize ? `${defaultColumnSize}px` : percent === 0 - ? `${defaultMinColumnSize}px` + ? `${DEFAULT_MIN_COLUMN_SIZE}px` : `${ - ((containerWidth - defaultSize - settingsSize) * + ((containerWidth - defaultSize - SETTINGS_SIZE) * percent) / 100 }px`; const minWidth = column?.dataset?.minWidth; - const minSize = minWidth ? +minWidth : minSizeFirstColumn; + 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 += minSizeFirstColumn - getSubstring(newItemWidth); - newItemWidth = `${minSizeFirstColumn}px`; + 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) < defaultMinColumnSize + getSubstring(newItemWidth) < DEFAULT_MIN_COLUMN_SIZE ) { - overWidth += defaultMinColumnSize - getSubstring(newItemWidth); - newItemWidth = `${defaultMinColumnSize}px`; + overWidth += + DEFAULT_MIN_COLUMN_SIZE - getSubstring(newItemWidth); + newItemWidth = `${DEFAULT_MIN_COLUMN_SIZE}px`; } gridTemplateColumns.push(newItemWidth); @@ -778,9 +780,11 @@ class TableHeader extends React.Component< const column = document.getElementById(`column_${index}`); const minWidth = column?.dataset?.minWidth; - const minSize = minWidth ? +minWidth : minSizeFirstColumn; + const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN; - if ((index === 0 ? minSize : defaultMinColumnSize) !== getSubstring(item)) + if ( + (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) !== getSubstring(item) + ) countColumns += 1; }); @@ -792,21 +796,21 @@ class TableHeader extends React.Component< const column = document.getElementById(`column_${index}`); const minWidth = column?.dataset?.minWidth; - const minSize = minWidth ? +minWidth : minSizeFirstColumn; + const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN; const itemSubstring = getSubstring(item); - if ((index === 0 ? minSize : defaultMinColumnSize) === itemSubstring) + if ((index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) === itemSubstring) return; const differenceWithMinimum = - itemSubstring - (index === 0 ? minSize : defaultMinColumnSize); + itemSubstring - (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE); if (differenceWithMinimum >= addWidth) { newGridTemplateColumns[index] = `${itemSubstring - addWidth}px`; } else { newGridTemplateColumns[index] = `${ - index === 0 ? minSize : defaultMinColumnSize + index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE }px`; } }); @@ -857,7 +861,7 @@ class TableHeader extends React.Component< columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0; const containerWidth = - container.clientWidth - defaultColumnSize - settingsSize; + container.clientWidth - defaultColumnSize - SETTINGS_SIZE; const firstColumnPercent = enableColumns.length > 0 ? 40 : 100; const percent = enableColumns.length > 0 ? 60 / enableColumns.length : 0; @@ -877,7 +881,7 @@ class TableHeader extends React.Component< } } - str += `${settingsSize}px`; + str += `${SETTINGS_SIZE}px`; if (container) container.style.gridTemplateColumns = str; if (this.headerRef && this.headerRef.current) { @@ -965,4 +969,6 @@ class TableHeader extends React.Component< } } -export default withTheme(TableHeader); +const TableHeader = withTheme(TableHeaderComponent); + +export { TableHeader }; diff --git a/packages/shared/components/table/index.ts b/packages/shared/components/table/index.ts index 63c5607549..3165c4d901 100644 --- a/packages/shared/components/table/index.ts +++ b/packages/shared/components/table/index.ts @@ -24,13 +24,10 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import TableHeader from "./TableHeader"; - -export { TableHeader }; export { TableContainer } from "./TableContainer"; export { TableBody } from "./TableBody"; export { TableRow } from "./TableRow"; -// export { TableHeader } from "./TableHeader"; +export { TableHeader } from "./TableHeader"; export { TableGroupMenu } from "./TableGroupMenu"; export { TableCell } from "./sub-components/TableCell"; diff --git a/packages/shared/utils/device.ts b/packages/shared/utils/device.ts index 158b647ce7..1900a6a3cf 100644 --- a/packages/shared/utils/device.ts +++ b/packages/shared/utils/device.ts @@ -25,6 +25,7 @@ // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode export const INFO_PANEL_WIDTH = 400; +export const TABLE_HEADER_HEIGHT = 40; export function checkIsSSR() { return typeof window === "undefined";