Web: Components: SelectionArea: added dashboard support

packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js

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

packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js

@@ -11,6 +11,7 @@ const SelectionArea = (props) => {
     getCountTilesInRow,
     isRooms,
     foldersLength,
+    filesLength,
     isInfoPanelVisible,
   } = props;
 
@@ -39,19 +40,11 @@ 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 getCountOfMissingFilesTiles = (itemsLength) => {
-  const division = foldersLength % countTilesInRow;
+    const division = itemsLength % countTilesInRow;
-  const countOfMissingTiles = division ? countTilesInRow - division : 0;
+    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;
 
   return isMobile || dragging ? (
     <></>
@@ -64,24 +57,43 @@ 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={[
+        {
+          type: "dash",
+          rowCount: 1,
+          rowGap: 12,
+          countOfMissingTiles: 3,
+        },
+        {
+          type: "file",
+          rowCount: Math.ceil(filesLength / countTilesInRow),
+          rowGap: 14,
+          countOfMissingTiles: getCountOfMissingFilesTiles(filesLength),
+        },
+        {
+          type: "folder",
+          rowCount: Math.ceil(foldersLength / countTilesInRow),
+          rowGap: 12,
+          countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength),
+        },
+      ]}
     />
   );
 };
 
 export default inject(({ auth, filesStore, treeFoldersStore }) => {
-  const { dragging, viewAs, setSelections, getCountTilesInRow, folders } =
+  const {
-    filesStore;
+    dragging,
+    viewAs,
+    setSelections,
+    getCountTilesInRow,
+    folders,
+    files,
+  } = filesStore;
   const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
   const { isVisible: isInfoPanelVisible } = auth.infoPanelStore;
 
@@ -94,6 +106,7 @@ export default inject(({ auth, filesStore, treeFoldersStore }) => {
     getCountTilesInRow,
     isRooms,
     foldersLength: folders.length,
+    filesLength: files.length,
     isInfoPanelVisible,
   };
 })(observer(SelectionArea));

packages/components/selection-area/SelectionArea.js

@@ -16,12 +16,20 @@ 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) {
+      console.log("aaaaaaaaaaaaaaaaaa");
+      this.arrayOfTypes = [];
+    }
+  }
+
   componentWillUnmount() {
     document.removeEventListener("mousedown", this.onTapStart);
   }
@@ -36,88 +44,76 @@ class SelectionArea extends React.Component {
   isIntersects = (itemIndex, itemType) => {
     const { right, left, bottom, top } = this.areaRect;
     const { scrollTop } = this.scrollElement;
-    const {
+    const { viewAs, countTilesInRow, defaultHeaderHeight, arrayTypes, theme } =
-      viewAs,
+      this.props;
-      countTilesInRow,
-      countOfMissingTiles,
-      countRowsOfFolders,
-      folderTileGap,
-      fileTileGap,
-      foldersTileHeight,
-      filesTileHeight,
-      filesHeaderHeight,
-      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;
+        itemBottom = itemTop + this.elemRect.height;
-      } 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;
       } else {
-        const rowIndex = Math.trunc(itemIndex / countTilesInRow);
+        const indexOfType = this.arrayOfTypes.findIndex(
+          (x) => x.type === itemType
+        );
+        const headersCount = indexOfType === 0 ? 0 : indexOfType;
 
-        itemTop =
+        itemTop = headersCount * defaultHeaderHeight;
-          this.elemRect.top +
+        const itemHeight = this.arrayOfTypes[indexOfType].itemHeight + itemGap;
-          (itemHeight + folderTileGap) * rowIndex -
+
-          scrollTop;
+        if (!headersCount) {
-        itemBottom = itemTop + itemHeight;
+          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 columnIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
-      let fileIndex = itemIndex % countTilesInRow;
-      if (itemType === "file") {
-        fileIndex = (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 +121,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 +216,13 @@ class SelectionArea extends React.Component {
       const itemType = splitItem[0];
       const itemIndex = splitItem[4];
 
-      // console.log("node", node);
+      //TODO: maybe do this line little bit better
-      // console.log("node", node.getBoundingClientRect());
+      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 +340,12 @@ class SelectionArea extends React.Component {
       this.elemRect.left = scroll.scrollLeft + itemsContainerRect.left;
     }
 
-    if (viewAs === "tile") {
+    const elemRect = itemsContainer[0]
-      const elemRect = itemsContainer[0]
+      .getElementsByClassName(selectableClass)[0]
-        .getElementsByClassName(selectableClass)[0]
+      .getBoundingClientRect();
-        .getBoundingClientRect();
 
-      this.elemRect.width = elemRect.width;
+    this.elemRect.width = elemRect.width;
-      this.elemRect.height = elemRect.height;
+    this.elemRect.height = elemRect.height;
-    }
   };
 
   onMove = (e) => {