Merge branch 'release/v1.2' into feature/inifinite-scroll

products/ASC.Files/Client/src/pages/Home/MediaViewer/index.js

@@ -31,7 +31,7 @@ const FilesMediaViewer = (props) => {
     expandedKeys,
     setScrollToItem,
     setCurrentId,
-    setSelection,
+    setBufferSelection,
   } = props;
 
   useEffect(() => {
@@ -126,7 +126,7 @@ const FilesMediaViewer = (props) => {
           setIsLoading(false);
           setFirstLoad(false);
           setScrollToItem({ id: previewFile.id, type: "file" });
-          setSelection([previewFile]);
+          setBufferSelection(previewFile);
           setToPreviewFile(null);
         });
     }
@@ -142,7 +142,7 @@ const FilesMediaViewer = (props) => {
 
       setScrollToItem({ id: currentMediaFileId, type: "file" });
       const targetFile = files.find((item) => item.id === currentMediaFileId);
-      if (targetFile) setSelection([targetFile]);
+      if (targetFile) setBufferSelection(targetFile);
 
       window.history.replaceState(null, null, url);
     }
@@ -189,7 +189,7 @@ export default inject(
       setIsLoading,
       setFirstLoad,
       setScrollToItem,
-      setSelection,
+      setBufferSelection,
     } = filesStore;
     const {
       visible,
@@ -225,7 +225,7 @@ export default inject(
       expandedKeys,
       setScrollToItem,
       setCurrentId,
-      setSelection,
+      setBufferSelection,
     };
   }
 )(

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -93,6 +93,7 @@ const FilesRowContainer = ({
     >
       {filesList.map((item, index) => (
         <SimpleFilesRow
+          id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
           key={`${item.id}_${index}`}
           item={item}
           sectionWidth={sectionWidth}

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -220,6 +220,7 @@ const SimpleFilesRow = (props) => {
     isAdmin,
     getContextModel,
     showHotkeyBorder,
+    id,
   } = props;
 
   const withAccess = isAdmin || item.access === 0;
@@ -231,6 +232,7 @@ const SimpleFilesRow = (props) => {
 
   return (
     <StyledWrapper
+      id={id}
       className={`row-wrapper ${
         showHotkeyBorder
           ? "row-hotkey-border"

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -155,6 +155,7 @@ const Table = ({
       <TableBody>
         {filesList.map((item, index) => (
           <TableRow
+            id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
             key={`${item.id}_${index}`}
             item={item}
             index={index}

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -270,6 +270,7 @@ const FilesTableRow = (props) => {
     getContextModel,
     showHotkeyBorder,
     tableColumns,
+    id,
   } = props;
   const { acceptBackground, background } = theme.dragAndDrop;
 
@@ -341,6 +342,7 @@ const FilesTableRow = (props) => {
 
   return (
     <StyledDragAndDrop
+      id={id}
       data-title={item.title}
       value={value}
       className={`files-item ${className} ${item.id}_${item.fileExst} ${

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -41,6 +41,7 @@ const FileTile = (props) => {
     onHideContextMenu,
     thumbSize,
     setSelection,
+    id,
   } = props;
 
   const temporaryExtension =
@@ -59,7 +60,7 @@ const FileTile = (props) => {
   );
 
   return (
-    <div ref={props.selectableRef}>
+    <div ref={props.selectableRef} id={id}>
       <DragAndDrop
         data-title={item.title}
         value={value}

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js

@@ -76,6 +76,7 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => {
       {filesList.map((item, index) => {
         return index == 0 ? (
           <FileTile
+            id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
             key={`${item.id}_${index}`}
             item={item}
             sectionWidth={sectionWidth}
@@ -84,6 +85,7 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => {
           />
         ) : (
           <FileTile
+            id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
             key={`${item.id}_${index}`}
             item={item}
             sectionWidth={sectionWidth}

products/ASC.Files/Client/src/pages/Home/Section/Body/index.js

@@ -82,9 +82,7 @@ const SectionBodyContent = (props) => {
     if (scrollToItem) {
       const { type, id } = scrollToItem;
 
-      const targetElement = document.querySelector(
-        `div[value='${type}_${id}_draggable']`
-      );
+      const targetElement = document.getElementById(`${type}_${id}`);
 
       if (!targetElement) return;
 
@@ -92,12 +90,12 @@ const SectionBodyContent = (props) => {
 
       if (!isInViewport || viewAs === "table") {
         const bodyScroll = isMobileOnly
-          ? document.querySelector("#customScrollBar > div")
+          ? document.querySelector("#customScrollBar > .scroll-body")
           : document.querySelector(".section-scroll");
 
         const count =
           filesList.findIndex((elem) => elem.id === scrollToItem.id) *
-          (isMobileOnly ? 57 : 48);
+          (isMobileOnly ? 57 : viewAs === "table" ? 40 : 48);
 
         bodyScroll.scrollTo(0, count);
       }

products/ASC.Files/Client/src/store/FilesStore.js

@@ -694,7 +694,7 @@ class FilesStore {
             );
 
             if (newItem) {
-              this.setSelection([newItem]);
+              this.setBufferSelection(newItem);
               this.setScrollToItem({
                 id: newItem.id,
                 type: this.createdItem.type,