From 9ca89604aca60cc8a6961fa7c9f0bdb426870433 Mon Sep 17 00:00:00 2001
From: DmitrySychugov <dmitry.sychugov@onlyoffice.com>
Date: Fri, 3 May 2024 19:25:35 +0500
Subject: [PATCH] Client: added index arrow to table view if edit index mode
 enabled

---
 .../Section/Body/TableView/TableContainer.js  |  1 +
 .../infinite-loader/InfiniteLoader.types.ts   |  1 +
 .../shared/components/table/Table.types.ts    |  2 +
 .../shared/components/table/TableBody.tsx     |  2 +
 packages/shared/components/table/TableRow.tsx | 64 +++++++++++++------
 5 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
index 14e28f9bc0..b59be02620 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -251,6 +251,7 @@ const Table = ({
         itemCount={filterTotal}
         useReactWindow={!withPaging}
         infoPanelVisible={infoPanelVisible}
+        isIndexEditingMode={isIndexEditingMode}
         columnInfoPanelStorageName={columnInfoPanelStorageName}
         itemHeight={48}
       >
diff --git a/packages/shared/components/infinite-loader/InfiniteLoader.types.ts b/packages/shared/components/infinite-loader/InfiniteLoader.types.ts
index d1203bddf7..a8a6220ceb 100644
--- a/packages/shared/components/infinite-loader/InfiniteLoader.types.ts
+++ b/packages/shared/components/infinite-loader/InfiniteLoader.types.ts
@@ -42,6 +42,7 @@ export interface InfiniteLoaderProps {
   className?: string;
   infoPanelVisible?: boolean;
   countTilesInRow?: number;
+  isIndexEditingMode: boolean;
 }
 
 export interface ListComponentProps extends InfiniteLoaderProps {
diff --git a/packages/shared/components/table/Table.types.ts b/packages/shared/components/table/Table.types.ts
index 6c42605476..e9b7cf576e 100644
--- a/packages/shared/components/table/Table.types.ts
+++ b/packages/shared/components/table/Table.types.ts
@@ -107,6 +107,7 @@ export interface TableBodyProps {
   useReactWindow: boolean;
   onScroll: () => void;
   infoPanelVisible: boolean;
+  isIndexEditingMode: boolean;
 }
 
 export interface TableRowProps {
@@ -120,6 +121,7 @@ export interface TableRowProps {
   title: string;
   getContextModel: () => ContextMenuModel[];
   badgeUrl: string;
+  isIndexEditingMode: boolean;
 }
 
 export interface TableCellProps {
diff --git a/packages/shared/components/table/TableBody.tsx b/packages/shared/components/table/TableBody.tsx
index 190f352ca5..b75c39ac1a 100644
--- a/packages/shared/components/table/TableBody.tsx
+++ b/packages/shared/components/table/TableBody.tsx
@@ -44,6 +44,7 @@ const TableBody = (props: TableBodyProps) => {
     useReactWindow = true,
     onScroll,
     infoPanelVisible = false,
+    isIndexEditingMode = false,
   } = props;
 
   return useReactWindow ? (
@@ -64,6 +65,7 @@ const TableBody = (props: TableBodyProps) => {
         itemSize={itemHeight}
         onScroll={onScroll}
         infoPanelVisible={infoPanelVisible}
+        isIndexEditingMode={isIndexEditingMode}
       >
         {children}
       </InfiniteLoaderComponent>
diff --git a/packages/shared/components/table/TableRow.tsx b/packages/shared/components/table/TableRow.tsx
index 77628213f3..b4e9e1d4d4 100644
--- a/packages/shared/components/table/TableRow.tsx
+++ b/packages/shared/components/table/TableRow.tsx
@@ -25,6 +25,7 @@
 // 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 { ContextMenu } from "../context-menu";
 import {
@@ -36,6 +37,7 @@ import { StyledTableRow } from "./Table.styled";
 import { TableRowProps } from "./Table.types";
 
 import { TableCell } from "./sub-components/TableCell";
+import { ColorTheme, ThemeId } from "../color-theme";
 
 const TableRow = (props: TableRowProps) => {
   const {
@@ -49,6 +51,7 @@ const TableRow = (props: TableRowProps) => {
     title,
     getContextModel,
     badgeUrl,
+    isIndexEditingMode,
     ...rest
   } = props;
 
@@ -96,27 +99,48 @@ const TableRow = (props: TableRowProps) => {
           forwardedRef={row}
           className={`${selectionProp?.className} table-container_row-context-menu-wrapper`}
         >
-          <ContextMenu
-            onHide={onHideContextMenu}
-            ref={cm}
-            model={contextOptions}
-            getContextModel={getContextModel}
-            withBackdrop
-            badgeUrl={badgeUrl}
-          />
-          {renderContext ? (
-            <ContextMenuButton
-              isFill
-              className="expandButton"
-              getData={getOptions}
-              directionX="right"
-              displayType={ContextMenuButtonDisplayType.toggle}
-              onClick={onContextMenu}
-              onClose={onHideContextMenu}
-              title={title}
-            />
+          {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>
+            <>
+              <ContextMenu
+                onHide={onHideContextMenu}
+                ref={cm}
+                model={contextOptions}
+                getContextModel={getContextModel}
+                withBackdrop
+                badgeUrl={badgeUrl}
+              />
+              {renderContext ? (
+                <ContextMenuButton
+                  isFill
+                  className="expandButton"
+                  getData={getOptions}
+                  directionX="right"
+                  displayType={ContextMenuButtonDisplayType.toggle}
+                  onClick={onContextMenu}
+                  onClose={onHideContextMenu}
+                  title={title}
+                />
+              ) : (
+                <div className="expandButton"> </div>
+              )}
+            </>
           )}
         </TableCell>
       </div>