From a51e21873e2806c5e57f0e3965f332292b873cec Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Wed, 7 Feb 2024 14:27:14 +0530
Subject: [PATCH] fix column shadow in spreadsheet for rendering rows

---
 .../issue-layouts/spreadsheet/issue-row.tsx   |  8 +++-
 .../spreadsheet/spreadsheet-table.tsx         | 39 ++++++++++++++++++-
 .../spreadsheet/spreadsheet-view.tsx          | 37 +-----------------
 3 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index f79c838d1..992a7154a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { MutableRefObject, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // icons
@@ -31,6 +31,7 @@ interface Props {
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
   nestingLevel: number;
   issueId: string;
+  isScrolled: MutableRefObject<boolean>;
 }
 
 export const SpreadsheetIssueRow = observer((props: Props) => {
@@ -43,6 +44,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     handleIssues,
     quickActions,
     canEditProperties,
+    isScrolled,
   } = props;
 
   // router
@@ -106,6 +108,9 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
           },
           {
             "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
+          },
+          {
+            "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
           }
         )}
       >
@@ -196,6 +201,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             isEstimateEnabled={isEstimateEnabled}
             handleIssues={handleIssues}
             portalElement={portalElement}
+            isScrolled={isScrolled}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 064517286..330b8f572 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
+import { MutableRefObject, useEffect, useRef } from "react";
 //types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
 import { EIssueActions } from "../types";
 //components
 import { SpreadsheetIssueRow } from "./issue-row";
 import { SpreadsheetHeader } from "./spreadsheet-header";
-import { MutableRefObject } from "react";
 import RenderIfVisible from "components/core/render-if-visible-HOC";
 
 type Props = {
@@ -39,6 +39,42 @@ export const SpreadsheetTable = observer((props: Props) => {
     containerRef,
   } = props;
 
+  // states
+  const isScrolled = useRef(false);
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    const scrollLeft = containerRef.current.scrollLeft;
+
+    const columnShadow = "8px 22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for regular columns
+    const headerShadow = "8px -22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for headers
+
+    //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
+    if (scrollLeft > 0 !== isScrolled.current) {
+      const firtColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
+
+      for (let i = 0; i < firtColumns.length; i++) {
+        const shadow = i === 0 ? headerShadow : columnShadow;
+        if (scrollLeft > 0) {
+          (firtColumns[i] as HTMLElement).style.boxShadow = shadow;
+        } else {
+          (firtColumns[i] as HTMLElement).style.boxShadow = "none";
+        }
+      }
+      isScrolled.current = scrollLeft > 0;
+    }
+  };
+
+  useEffect(() => {
+    const currentContainerRef = containerRef.current;
+
+    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
     <table className="overflow-y-auto">
       <SpreadsheetHeader
@@ -66,6 +102,7 @@ export const SpreadsheetTable = observer((props: Props) => {
               isEstimateEnabled={isEstimateEnabled}
               handleIssues={handleIssues}
               portalElement={portalElement}
+              isScrolled={isScrolled}
             />
           </RenderIfVisible>
         ))}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index f4a10da31..1ac815ced 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { Spinner } from "@plane/ui";
@@ -48,8 +48,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     enableQuickCreateIssue,
     disableIssueCreation,
   } = props;
-  // states
-  const isScrolled = useRef(false);
   // refs
   const containerRef = useRef<HTMLTableElement | null>(null);
   const portalRef = useRef<HTMLDivElement | null>(null);
@@ -58,39 +56,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
   const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
 
-  const handleScroll = () => {
-    if (!containerRef.current) return;
-    const scrollLeft = containerRef.current.scrollLeft;
-
-    const columnShadow = "8px 22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for regular columns
-    const headerShadow = "8px -22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for headers
-
-    //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
-    if (scrollLeft > 0 !== isScrolled.current) {
-      const firtColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
-
-      for (let i = 0; i < firtColumns.length; i++) {
-        const shadow = i === 0 ? headerShadow : columnShadow;
-        if (scrollLeft > 0) {
-          (firtColumns[i] as HTMLElement).style.boxShadow = shadow;
-        } else {
-          (firtColumns[i] as HTMLElement).style.boxShadow = "none";
-        }
-      }
-      isScrolled.current = scrollLeft > 0;
-    }
-  };
-
-  useEffect(() => {
-    const currentContainerRef = containerRef.current;
-
-    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
-
-    return () => {
-      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
   if (!issueIds || issueIds.length === 0)
     return (
       <div className="grid h-full w-full place-items-center">