From e4178cc97499b32ce1c81d7eea6faedd35132ba1 Mon Sep 17 00:00:00 2001
From: DmitrySychugov <dmitry.sychugov@onlyoffice.com>
Date: Fri, 3 May 2024 19:30:30 +0500
Subject: [PATCH] Client: added index arrow to row view

---
 .../Body/RowsView/FilesRowContainer.js        | 12 +++-
 .../Section/Body/RowsView/SimpleFilesRow.js   |  2 +
 packages/shared/components/row/Row.tsx        | 68 +++++++++++++------
 packages/shared/components/row/Row.types.tsx  |  1 +
 4 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
index b5f91a25fc..ed2f2a4004 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@@ -74,6 +74,7 @@ const FilesRowContainer = ({
   withPaging,
   highlightFile,
   currentDeviceType,
+  isIndexEditingMode,
 }) => {
   useViewEffect({
     view: viewAs,
@@ -96,6 +97,7 @@ const FilesRowContainer = ({
         isHighlight={
           highlightFile.id == item.id && highlightFile.isExst === !item.fileExst
         }
+        isIndexEditingMode={isIndexEditingMode}
       />
     ));
   }, [
@@ -124,7 +126,13 @@ const FilesRowContainer = ({
 };
 
 export default inject(
-  ({ filesStore, settingsStore, infoPanelStore, treeFoldersStore }) => {
+  ({
+    filesStore,
+    settingsStore,
+    infoPanelStore,
+    treeFoldersStore,
+    indexingStore,
+  }) => {
     const {
       filesList,
       viewAs,
@@ -138,6 +146,7 @@ export default inject(
     const { isVisible: infoPanelVisible } = infoPanelStore;
     const { isRoomsFolder, isArchiveFolder, isTrashFolder } = treeFoldersStore;
     const { withPaging, currentDeviceType } = settingsStore;
+    const { isIndexEditingMode } = indexingStore;
 
     const isRooms = isRoomsFolder || isArchiveFolder;
 
@@ -154,6 +163,7 @@ export default inject(
       withPaging,
       highlightFile,
       currentDeviceType,
+      isIndexEditingMode,
     };
   },
 )(observer(FilesRowContainer));
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
index e3ff511c35..df514810c1 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
@@ -362,6 +362,7 @@ const SimpleFilesRow = (props) => {
     itemIndex,
     badgeUrl,
     canDrag,
+    isIndexEditingMode,
   } = props;
 
   const isMobileDevice = isMobileUtile();
@@ -462,6 +463,7 @@ const SimpleFilesRow = (props) => {
           contextButtonSpacerWidth={displayShareButton}
           dragging={dragging && isDragging}
           isDragging={dragging}
+          isIndexEditingMode={isIndexEditingMode}
           isActive={isActive}
           inProgress={inProgress}
           isThirdPartyFolder={item.isThirdPartyFolder}
diff --git a/packages/shared/components/row/Row.tsx b/packages/shared/components/row/Row.tsx
index 4fdefb5f01..81018b2f7b 100644
--- a/packages/shared/components/row/Row.tsx
+++ b/packages/shared/components/row/Row.tsx
@@ -25,11 +25,13 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React, { useRef } from "react";
+import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow2.react.svg?url";
 
 import { isMobile } from "react-device-detect"; // TODO: isDesktop=true for IOS(Firefox & Safari)
 import { isMobile as isMobileUtils } from "../../utils/device";
 
 import { Checkbox } from "../checkbox";
+import { ColorTheme, ThemeId } from "../color-theme";
 import {
   ContextMenuButton,
   ContextMenuButtonDisplayType,
@@ -71,6 +73,7 @@ const Row = (props: RowProps) => {
     className,
     badgeUrl,
     isDisabled,
+    isIndexEditingMode,
   } = props;
 
   const cm = useRef<null | {
@@ -213,30 +216,51 @@ const Row = (props: RowProps) => {
         {renderContentElement && (
           <StyledContentElement>{contentElement}</StyledContentElement>
         )}
-        {renderContext ? (
-          <ContextMenuButton
-            isFill
-            className="expandButton"
-            getData={getOptions}
-            directionX="right"
-            displayType={ContextMenuButtonDisplayType.toggle}
-            onClick={onContextMenu}
-            title={contextTitle}
-          />
+        {isIndexEditingMode ? (
+          <>
+            <ColorTheme
+              themeId={ThemeId.IndexIconButton}
+              iconName={ArrowReactSvgUrl}
+              className="index-up-icon"
+              size="small"
+              // onClick={onClickShare}
+            />
+            <ColorTheme
+              themeId={ThemeId.IndexIconButton}
+              iconName={ArrowReactSvgUrl}
+              className="index-down-icon"
+              size="small"
+              // onClick={onClickShare}
+            />
+          </>
         ) : (
-          <div className="expandButton"> </div>
+          <>
+            {renderContext ? (
+              <ContextMenuButton
+                isFill
+                className="expandButton"
+                getData={getOptions}
+                directionX="right"
+                displayType={ContextMenuButtonDisplayType.toggle}
+                onClick={onContextMenu}
+                title={contextTitle}
+              />
+            ) : (
+              <div className="expandButton"> </div>
+            )}
+            <ContextMenu
+              getContextModel={getContextModel}
+              model={contextData.contextOptions || []}
+              ref={cm}
+              header={contextMenuHeader}
+              withBackdrop={isMobileUtils()}
+              onHide={rowContextClose}
+              isRoom={isRoom}
+              isArchive={isArchive}
+              badgeUrl={badgeUrl}
+            />
+          </>
         )}
-        <ContextMenu
-          getContextModel={getContextModel}
-          model={contextData.contextOptions || []}
-          ref={cm}
-          header={contextMenuHeader}
-          withBackdrop={isMobileUtils()}
-          onHide={rowContextClose}
-          isRoom={isRoom}
-          isArchive={isArchive}
-          badgeUrl={badgeUrl}
-        />
       </StyledOptionButton>
     </StyledRow>
   );
diff --git a/packages/shared/components/row/Row.types.tsx b/packages/shared/components/row/Row.types.tsx
index be55e48ecd..1f82d11ae7 100644
--- a/packages/shared/components/row/Row.types.tsx
+++ b/packages/shared/components/row/Row.types.tsx
@@ -69,6 +69,7 @@ export interface RowProps {
   mode?: TMode;
   /** Removes the borders */
   withoutBorder?: boolean;
+  isIndexEditingMode: boolean;
   isRoom?: boolean;
   contextTitle?: string;
   badgesComponent?: React.ReactNode;