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

Web: Components: Table: fixed imports

Browse Source
This commit is contained in:
Nikita Gopienko 2024-07-25 17:11:35 +03:00
parent a90aff601d
commit 38af49f027
7 changed files with 76 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/store/AccountsHotkeysStore.ts
View File

@ -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;

2
packages/client/src/store/HotkeyStore.js
View File

@ -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;

31
packages/shared/components/table/Table.constants.ts
View File

@ -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;

6
packages/shared/components/table/Table.utils.ts
View File

@ -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"

130
packages/shared/components/table/TableHeader.tsx
View File

@ -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 };

5
packages/shared/components/table/index.ts
View File

@ -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";

1
packages/shared/utils/device.ts
View File

@ -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";