Web: Files: Removed the jump to the beginning of the list when the re…

…covery process is over.
ONLYOFFICE · Nov 3, 2021 · 4160ddc · 4160ddc
1 parent 033b958
commit 4160ddc
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 89 deletions.
diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionList.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionList.js
@@ -0,0 +1,94 @@
+import styled from "styled-components";
+
+const StyledVersionList = styled.div`
+
+.row_context-menu-wrapper {
+    .expandButton {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+        touch-action: none;
+        pointer-events: none;
+        `}
+      svg {
+        path {
+          ${(props) =>
+            props.isRestoreProcess &&
+            `
+              fill: #d0d5da;
+            `};
+        }
+      }
+    }
+  
+  }
+
+  .row_content {
+
+    .version_link,
+    .version-link-file,
+    .version_content-length,
+    .version_link-action,
+    .row_context-menu-wrapper,
+    .version_text {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+          color: #d0d5da;
+          touch-action: none;
+          pointer-events: none;
+        `}
+    }
+
+    .versioned, .not-versioned {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+        touch-action: none;
+        pointer-events: none;
+        `}
+    }
+
+    .versioned { 
+        svg {
+            path {
+          ${(props) =>
+            props.isRestoreProcess &&
+            `
+              fill: #d0d5da;
+            `};
+        }
+      }
+    }
+
+    .not-versioned{
+        svg {
+            path {
+
+          ${(props) =>
+            props.isRestoreProcess &&
+            `
+              stroke: #d0d5da;
+            `};
+        }
+      }
+    }
+
+}
+    .icon-link {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+        touch-action: none;
+        pointer-events: none;
+        `}
+      svg {
+        path {
+          ${(props) => props.isRestoreProcess && " fill: #d0d5da"}
+        }
+      }
+    }
+  }
+`;
+
+export default StyledVersionList;
diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js
@@ -135,23 +135,7 @@ const StyledVersionRow = styled(Row)`
     display: none;
 
     right: 16px !important;
-    .expandButton {
-      ${(props) =>
-        props.isRestoreProcess &&
-        `
-        touch-action: none;
-        pointer-events: none;
-        `}
-      svg {
-        path {
-          ${(props) =>
-            props.isRestoreProcess &&
-            `
-              fill: #d0d5da;
-            `};
-        }
-      }
-    }
+
     @media ${tablet} {
       display: block;
       position: absolute;
@@ -162,54 +146,6 @@ const StyledVersionRow = styled(Row)`
 
   .row_content {
     display: block;
-
-    .version_link,
-    .version-link-file,
-    .version_content-length,
-    .version_link-action,
-    .row_context-menu-wrapper,
-    .version_text {
-      ${(props) =>
-        props.isRestoreProcess &&
-        `
-          color: #d0d5da;
-          touch-action: none;
-          pointer-events: none;
-        `}
-    }
-
-    .version_badge {
-      ${(props) =>
-        props.isRestoreProcess &&
-        `
-        touch-action: none;
-        pointer-events: none;
-        `}
-      svg {
-        path {
-          ${(props) =>
-            props.isVersion &&
-            props.isRestoreProcess &&
-            `
-              fill: #d0d5da;
-            `};
-        }
-      }
-    }
-
-    .icon-link {
-      ${(props) =>
-        props.isRestoreProcess &&
-        `
-        touch-action: none;
-        pointer-events: none;
-        `}
-      svg {
-        path {
-          ${(props) => props.isRestoreProcess && " fill: #d0d5da"}
-        }
-      }
-    }
   }
 
   .modal-dialog-aside-footer {

diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js
@@ -32,7 +32,6 @@ const VersionRow = (props) => {
     restoreVersion,
     updateCommentVersion,
     onSetRestoreProcess,
-    isRestoreProcess,
     isTabletView,
     onUpdateHeight,
     versionsListLength,
@@ -108,21 +107,21 @@ const VersionRow = (props) => {
     newRowHeight && onUpdateHeight(index, newRowHeight);
   }, [showEditPanel, versionsListLength]);
 
-  console.log("updating");
+  //console.log("updating");
 
   return (
     <StyledVersionRow
       showEditPanel={showEditPanel}
       contextOptions={contextOptions}
       canEdit={canEdit}
-      isRestoreProcess={isRestoreProcess}
-      isVersion={isVersion}
       isTabletView={isTabletView}
     >
       <div className={`version-row_${index}`}>
         <Box displayProp="flex">
           <VersionBadge
-            className="version_badge"
+            className={`version_badge ${
+              isVersion ? "versioned" : "not-versioned"
+            }`}
             isVersion={isVersion}
             index={index}
             versionGroup={info.versionGroup}

diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/index.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/index.js
@@ -6,7 +6,7 @@ import { inject, observer } from "mobx-react";
 import { VariableSizeList as List, areEqual } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
-
+import StyledVersionList from "./StyledVersionList";
 class SectionBodyContent extends React.Component {
   constructor(props) {
     super(props);
@@ -37,8 +37,6 @@ class SectionBodyContent extends React.Component {
   onSetRestoreProcess = (isRestoreProcess) => {
     console.log("onSetRestoreProcess", isRestoreProcess);
 
-    this.listKey += 1;
-
     this.setState({
       isRestoreProcess,
     });
@@ -62,14 +60,14 @@ class SectionBodyContent extends React.Component {
 
   renderRow = memo(({ index, style }) => {
     const { versions, culture } = this.props;
-    const { isRestoreProcess } = this.state;
 
     const prevVersion = versions[index > 0 ? index - 1 : index].versionGroup;
     let isVersion = true;
 
     if (index > 0 && prevVersion === versions[index].versionGroup) {
       isVersion = false;
     }
+    console.log("render row", this.state, "versions.length", versions.length);
 
     return (
       <div style={style}>
@@ -81,7 +79,6 @@ class SectionBodyContent extends React.Component {
           versionsListLength={versions.length}
           index={index}
           culture={culture}
-          isRestoreProcess={isRestoreProcess}
           onSetRestoreProcess={this.onSetRestoreProcess}
           onUpdateHeight={this.onUpdateHeight}
         />
@@ -92,23 +89,30 @@ class SectionBodyContent extends React.Component {
     const { versions, isLoading } = this.props;
 
     const renderList = ({ height, width }) => {
+      console.log(
+        "render list",
+        this.state,
+        "versions.length",
+        versions.length
+      );
       return (
-        <List
-          key={this.listKey}
-          ref={this.listRef}
-          className="List"
-          height={height}
-          width={width}
-          itemSize={this.getSize}
-          itemCount={versions.length}
-          itemData={versions}
-          outerElementType={CustomScrollbarsVirtualList}
-        >
-          {this.renderRow}
-        </List>
+        <StyledVersionList isRestoreProcess={this.state.isRestoreProcess}>
+          <List
+            ref={this.listRef}
+            className="List"
+            height={height}
+            width={width}
+            itemSize={this.getSize}
+            itemCount={versions.length}
+            itemData={versions}
+            outerElementType={CustomScrollbarsVirtualList}
+          >
+            {this.renderRow}
+          </List>
+        </StyledVersionList>
       );
     };
-
+    console.log("versions", versions);
     return versions && !isLoading ? (
       <div style={{ height: "100%", width: "100%" }}>
         <AutoSizer>{renderList}</AutoSizer>