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

Merge branch 'develop' into bugfix/public-room-link

Browse Source
This commit is contained in:
Ilya Oleshko 2023-09-07 14:38:30 +03:00
commit 778146ef75
4 changed files with 126 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js
View File

@ -10,8 +10,6 @@ const SelectionArea = (props) => {
setSelections(added, removed, clear);
};
const itemHeight = viewAs === "table" ? 49 : 59;
return isMobile ? (
<></>
) : (
@ -23,7 +21,6 @@ const SelectionArea = (props) => {
itemClass="user-item"
onMove={onMove}
viewAs={viewAs}
itemHeight={itemHeight}
/>
);
};

51
packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js
View File

@ -11,6 +11,7 @@ const SelectionArea = (props) => {
getCountTilesInRow,
isRooms,
foldersLength,
filesLength,
isInfoPanelVisible,
} = props;
@ -39,19 +40,26 @@ const SelectionArea = (props) => {
};
const selectableClass = viewAs === "tile" ? "files-item" : "window-item";
const itemHeight = viewAs === "table" ? 49 : viewAs === "row" ? 59 : null;
const countRowsOfFolders = Math.ceil(foldersLength / countTilesInRow);
const division = foldersLength % countTilesInRow;
const countOfMissingTiles = division ? countTilesInRow - division : 0;
const getCountOfMissingFilesTiles = (itemsLength) => {
const division = itemsLength % countTilesInRow;
return division ? countTilesInRow - division : 0;
};
// const itemsContainer = document.getElementsByClassName(itemsContainerClass);
// const folderHeaderHeight = itemsContainer[0]
// .getElementsByClassName("folder_header")[0]
// .parentElement.getBoundingClientRect().height;
// const filesHeaderHeight = itemsContainer[0]
// .getElementsByClassName("files_header")[0]
// .parentElement.getBoundingClientRect().height;
const arrayTypes = [
{
type: "file",
rowCount: Math.ceil(filesLength / countTilesInRow),
rowGap: 14,
countOfMissingTiles: getCountOfMissingFilesTiles(filesLength),
},
{
type: "folder",
rowCount: Math.ceil(foldersLength / countTilesInRow),
rowGap: 12,
countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength),
},
];
return isMobile || dragging ? (
<></>
@ -64,24 +72,24 @@ const SelectionArea = (props) => {
itemClass="files-item"
onMove={onMove}
viewAs={viewAs}
itemHeight={itemHeight}
countTilesInRow={countTilesInRow}
isRooms={isRooms}
countRowsOfFolders={countRowsOfFolders}
countOfMissingTiles={countOfMissingTiles}
folderTileGap={12}
fileTileGap={14}
foldersTileHeight={66}
filesTileHeight={222}
folderHeaderHeight={35}
filesHeaderHeight={countRowsOfFolders ? 46 : 0}
defaultHeaderHeight={46}
arrayTypes={arrayTypes}
/>
);
};
export default inject(({ auth, filesStore, treeFoldersStore }) => {
const { dragging, viewAs, setSelections, getCountTilesInRow, folders } =
filesStore;
const {
dragging,
viewAs,
setSelections,
getCountTilesInRow,
folders,
files,
} = filesStore;
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
const { isVisible: isInfoPanelVisible } = auth.infoPanelStore;
@ -94,6 +102,7 @@ export default inject(({ auth, filesStore, treeFoldersStore }) => {
getCountTilesInRow,
isRooms,
foldersLength: folders.length,
filesLength: files.length,
isInfoPanelVisible,
};
})(observer(SelectionArea));

37
packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
View File

@ -170,18 +170,25 @@ const BackupListModalDialog = (props) => {
setState((val) => ({ ...val, isChecked: !val.isChecked }));
};
const { onModalClose, isVisibleDialog, t, isCopyingToLocal, theme, standalone } = props;
const {
onModalClose,
isVisibleDialog,
t,
isCopyingToLocal,
theme,
standalone,
} = props;
const { filesList, isLoading, selectedFileIndex, isChecked } = state;
const helpContent = () => (
<>
<Text className="restore-backup_warning-description">
{t("RestoreBackupWarningText")}{" "}
{!standalone && (
<Text as="span" className="restore-backup_warning-link">
{t("RestoreBackupResetInfoWarningText")}
</Text>
)}
const helpContent = () => (
<>
<Text className="restore-backup_warning-description">
{t("RestoreBackupWarningText")}{" "}
{!standalone && (
<Text as="span" className="restore-backup_warning-link">
{t("RestoreBackupResetInfoWarningText")}
</Text>
)}
</Text>
</>
);
@ -212,7 +219,7 @@ const BackupListModalDialog = (props) => {
</Text>
<Link
id="delete-backups"
onClick={this.onCleanBackupList}
onClick={onCleanBackupList}
fontWeight={600}
style={{ textDecoration: "underline dotted" }}
>
@ -226,8 +233,8 @@ const BackupListModalDialog = (props) => {
filesList.length > 0 ? (
<BackupListBody
filesList={filesList}
onDeleteBackup={this.onDeleteBackup}
onSelectFile={this.onSelectFile}
onDeleteBackup={onDeleteBackup}
onSelectFile={onSelectFile}
selectedFileIndex={selectedFileIndex}
/>
) : (
@ -255,7 +262,7 @@ const BackupListModalDialog = (props) => {
<Checkbox
truncate
className="backup-list_checkbox"
onChange={this.onChangeCheckbox}
onChange={onChangeCheckbox}
isChecked={isChecked}
/>
<Text as="span" className="backup-list_agreement-text">
@ -276,7 +283,7 @@ const BackupListModalDialog = (props) => {
primary
size="normal"
label={t("Common:Restore")}
onClick={this.onRestorePortal}
onClick={onRestorePortal}
isDisabled={isCopyingToLocal || !isChecked}
/>
<Button

141
packages/components/selection-area/SelectionArea.js
View File

@ -16,12 +16,19 @@ class SelectionArea extends React.Component {
this.selectableNodes = new Set();
this.elemRect = {};
this.arrayOfTypes = [];
}
componentDidMount() {
document.addEventListener("mousedown", this.onTapStart);
}
componentDidUpdate(prevProps) {
if (this.props.isRooms !== prevProps.isRooms) {
this.arrayOfTypes = [];
}
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.onTapStart);
}
@ -36,88 +43,76 @@ class SelectionArea extends React.Component {
isIntersects = (itemIndex, itemType) => {
const { right, left, bottom, top } = this.areaRect;
const { scrollTop } = this.scrollElement;
const {
viewAs,
countTilesInRow,
countOfMissingTiles,
countRowsOfFolders,
folderTileGap,
fileTileGap,
foldersTileHeight,
filesTileHeight,
filesHeaderHeight,
theme,
} = this.props;
const { viewAs, countTilesInRow, defaultHeaderHeight, arrayTypes, theme } =
this.props;
const isRtl = theme.interfaceDirection === "rtl";
const itemHeight = this.props.itemHeight ?? this.elemRect.height;
let itemTop, itemBottom, itemLeft, itemRight;
// Tile view
if (viewAs === "tile") {
let countOfMissingTiles = 0;
const itemGap = arrayTypes.find((x) => x.type === itemType).rowGap;
// TOP/BOTTOM item position
if (itemIndex === 0) {
itemTop = this.elemRect.top - scrollTop;
itemBottom = itemTop + itemHeight;
} else if (itemType === "file") {
const folderHeight = foldersTileHeight + folderTileGap;
const fileHeight = filesTileHeight + fileTileGap;
const nextRow = Math.floor(
(itemIndex + countOfMissingTiles) / countTilesInRow
);
itemTop =
this.elemRect.top +
folderHeight * countRowsOfFolders +
filesHeaderHeight +
fileHeight * (nextRow - countRowsOfFolders) -
scrollTop;
itemBottom = itemTop + fileHeight - folderTileGap;
itemBottom = itemTop + this.elemRect.height;
} else {
const rowIndex = Math.trunc(itemIndex / countTilesInRow);
const indexOfType = this.arrayOfTypes.findIndex(
(x) => x.type === itemType
);
const headersCount = indexOfType === 0 ? 0 : indexOfType;
itemTop =
this.elemRect.top +
(itemHeight + folderTileGap) * rowIndex -
scrollTop;
itemBottom = itemTop + itemHeight;
itemTop = headersCount * defaultHeaderHeight;
const itemHeight = this.arrayOfTypes[indexOfType].itemHeight + itemGap;
if (!headersCount) {
const rowIndex = Math.trunc(itemIndex / countTilesInRow);
itemTop += this.elemRect.top + itemHeight * rowIndex - scrollTop;
itemBottom = itemTop + itemHeight - itemGap;
} else {
let prevRowsCount = 0;
for (let i = 0; i < indexOfType; i++) {
const item = arrayTypes.find(
(x) => x.type === this.arrayOfTypes[i].type
);
countOfMissingTiles += item.countOfMissingTiles;
prevRowsCount += item.rowCount;
itemTop +=
(this.arrayOfTypes[i].itemHeight + item.rowGap) * item.rowCount;
}
const nextRow =
Math.floor((itemIndex + countOfMissingTiles) / countTilesInRow) -
prevRowsCount;
itemTop += this.elemRect.top + itemHeight * nextRow - scrollTop;
itemBottom = itemTop + itemHeight - itemGap;
}
}
// Set left/right for item
let fileIndex = itemIndex % countTilesInRow;
if (itemType === "file") {
fileIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
}
let columnIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
// Mirror fileIndex for RTL interface (2, 1, 0 => 0, 1, 2)
if (isRtl && viewAs === "tile") {
fileIndex = countTilesInRow - 1 - fileIndex;
columnIndex = countTilesInRow - 1 - columnIndex;
}
if (fileIndex == 0) {
// LEFT/RIGHT item position
if (columnIndex == 0) {
itemLeft = this.elemRect.left;
itemRight = itemLeft + this.elemRect.width;
} else {
itemLeft =
this.elemRect.left + (this.elemRect.width + fileTileGap) * fileIndex;
this.elemRect.left + (this.elemRect.width + itemGap) * columnIndex;
itemRight = itemLeft + this.elemRect.width;
}
} else {
// Table/row view
if (itemIndex === 0) {
itemTop = this.elemRect.top - scrollTop;
itemBottom = itemTop + itemHeight;
} else {
itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
itemBottom = itemTop + itemHeight;
}
}
if (viewAs === "tile") {
return (
right > itemLeft &&
left < itemRight &&
@ -125,6 +120,15 @@ class SelectionArea extends React.Component {
top < itemBottom
);
} else {
const itemHeight = this.elemRect.height;
if (itemIndex === 0) {
itemTop = this.elemRect.top - scrollTop;
itemBottom = itemTop + itemHeight;
} else {
itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
itemBottom = itemTop + itemHeight;
}
return bottom > itemTop && top < itemBottom;
}
};
@ -211,8 +215,13 @@ class SelectionArea extends React.Component {
const itemType = splitItem[0];
const itemIndex = splitItem[4];
// console.log("node", node);
// console.log("node", node.getBoundingClientRect());
//TODO: maybe do this line little bit better
if (this.arrayOfTypes.findIndex((x) => x.type === itemType) === -1) {
this.arrayOfTypes.push({
type: itemType,
itemHeight: node.getBoundingClientRect().height,
});
}
const isIntersects = this.isIntersects(+itemIndex, itemType);
@ -330,14 +339,12 @@ class SelectionArea extends React.Component {
this.elemRect.left = scroll.scrollLeft + itemsContainerRect.left;
}
if (viewAs === "tile") {
const elemRect = itemsContainer[0]
.getElementsByClassName(selectableClass)[0]
.getBoundingClientRect();
const elemRect = itemsContainer[0]
.getElementsByClassName(selectableClass)[0]
.getBoundingClientRect();
this.elemRect.width = elemRect.width;
this.elemRect.height = elemRect.height;
}
this.elemRect.width = elemRect.width;
this.elemRect.height = elemRect.height;
};
onMove = (e) => {