fix: remove tooltip

Eyevinn · Dec 3, 2024 · e0e86d3 · e0e86d3
1 parent 002e7fa
commit e0e86d3
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 200 deletions.
diff --git a/src/components/manage-productions/line-table.tsx b/src/components/manage-productions/line-table.tsx
@@ -27,14 +27,7 @@ const Table = styled.table`
 `;
 
 const TableRow = styled.tr`
-  &:nth-of-type(even) {
-    background-color: #32383b;
-  }
-
-  &:nth-of-type(odd) {
-    background-color: #32383b;
-  }
-
+  background-color: #32383b;
   cursor: pointer;
 
   ${isMobile ? `position: relative;` : ""}
@@ -63,34 +56,14 @@ const TableHeaderCell = styled.th`
   font-size: 1.8rem;
 `;
 
-const Tooltip = styled.div`
-  position: fixed;
-  background: #32383b;
-  color: #d6d3d1;
-  padding: 1rem;
-  border: 0.1rem solid #6d6d6d;
-  border-radius: 0.5rem;
-  white-space: normal;
-  z-index: 200;
-  width: auto;
-  box-shadow: 0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.15);
-  visibility: ${({ isVisible }: { isVisible: boolean }) =>
-    isVisible ? "visible" : "hidden"};
-  opacity: ${({ isVisible }: { isVisible: boolean }) =>
-    isVisible ? "1" : "0"};
-  transition:
-    opacity 0.2s ease-in-out,
-    visibility 0.2s ease-in-out;
-`;
-
 const TruncatedTableCell = styled.td`
   padding: 1.8rem;
   border: 0.1rem solid #6d6d6d;
   border-left: none;
   border-right: none;
   text-align: left;
-  cursor: pointer;
   position: relative;
+  cursor: pointer;
 
   ${({ isOverflowing }: { isOverflowing: boolean }) => `
     white-space: ${isMobile || !isOverflowing ? "normal" : "nowrap"};
@@ -99,16 +72,6 @@ const TruncatedTableCell = styled.td`
     text-overflow: ${isOverflowing && !isMobile ? "ellipsis" : "initial"};
     max-width: ${isOverflowing && !isMobile ? "20rem" : "none"};
     position: relative;
-    
-    ${
-      isOverflowing && !isMobile
-        ? `
-      &:hover .tooltip {
-        display: block;
-      }
-    `
-        : ""
-    }
   `}
 `;
 
@@ -147,18 +110,6 @@ type TLineTableProps = {
   verifyRemove: null | string;
   removeLine: React.Dispatch<React.SetStateAction<string | null>>;
   setRemoveId: React.Dispatch<React.SetStateAction<number | null>>;
-  handleMouseEnter: (
-    event: React.MouseEvent<HTMLTableCellElement>,
-    fullText: string
-  ) => void;
-  handleMouseLeave: () => void;
-  tooltipText: string;
-  tooltipPosition: {
-    top: number;
-    left: number;
-    visibility: string;
-    opacity: number;
-  };
 };
 
 interface ConfirmButtonPosition {
@@ -172,10 +123,6 @@ export const LineTable = ({
   verifyRemove,
   removeLine,
   setRemoveId,
-  handleMouseEnter,
-  handleMouseLeave,
-  tooltipText,
-  tooltipPosition,
 }: TLineTableProps) => {
   const confirmButtonRef = useRef<HTMLDivElement | null>(null);
   const [confirmButtonPosition, setConfirmButtonPosition] =
@@ -188,7 +135,7 @@ export const LineTable = ({
       if (targetRow) {
         const rect = targetRow.getBoundingClientRect();
         setConfirmButtonPosition({
-          top: isMobile ? rect.top : rect.top - 5,
+          top: isMobile ? rect.top : rect.top + 5,
           left: isMobile ? rect.left + 20 : rect.right + 10,
         });
       } else {
@@ -212,10 +159,6 @@ export const LineTable = ({
     };
   }, [removeLine]);
 
-  // TODO: Remove logs
-  console.log("TOOLTIP POSITION", tooltipPosition);
-  console.log("TOOLTIP TEXT:", tooltipText);
-
   return (
     <TableContainer lines={lines}>
       <TableBody>
@@ -235,11 +178,7 @@ export const LineTable = ({
                   if (el) rowRefs.current.set(parseInt(l.id, 10), el);
                 }}
               >
-                <TruncatedTableCell
-                  isOverflowing={l.name.length > 50}
-                  onMouseEnter={(e) => handleMouseEnter(e, l.name)}
-                  onMouseLeave={handleMouseLeave}
-                >
+                <TruncatedTableCell isOverflowing={l.name.length > 50}>
                   {l.name.length > 50 && !isMobile
                     ? `${l.name.slice(0, 47)}...`
                     : l.name}
@@ -263,15 +202,6 @@ export const LineTable = ({
           </tbody>
         </Table>
       </TableBody>
-      <Tooltip
-        isVisible={tooltipPosition.visibility === "visible"}
-        style={{
-          top: `${tooltipPosition.top}px`,
-          left: `${tooltipPosition.left}px`,
-        }}
-      >
-        {tooltipText}
-      </Tooltip>
       {confirmButtonPosition && verifyRemove && (
         <ConfirmButton
           ref={confirmButtonRef}

diff --git a/src/components/manage-productions/manage-lines.tsx b/src/components/manage-productions/manage-lines.tsx
@@ -22,18 +22,6 @@ import { isMobile } from "../../bowser";
 type TManageLines = {
   production: TProduction;
   setProductionIdToFetch: (A: number) => void;
-  handleMouseEnter: (
-    event: React.MouseEvent<HTMLTableCellElement>,
-    fullText: string
-  ) => void;
-  handleMouseLeave: () => void;
-  tooltipText: string;
-  tooltipPosition: {
-    top: number;
-    left: number;
-    visibility: string;
-    opacity: number;
-  };
 };
 
 type FormValues = {
@@ -80,10 +68,6 @@ const ButtonContainer = styled.div`
 export const ManageLines = ({
   production,
   setProductionIdToFetch,
-  handleMouseEnter,
-  handleMouseLeave,
-  tooltipText,
-  tooltipPosition,
 }: TManageLines) => {
   const [removeActive, setRemoveActive] = useState<boolean>(false);
   const [updateLines, setUpdateLines] = useState<FormValues | null>(null);
@@ -180,10 +164,6 @@ export const ManageLines = ({
         verifyRemove={verifyRemove}
         removeLine={setVerifyRemove}
         setRemoveId={setRemoveId}
-        handleMouseEnter={handleMouseEnter}
-        handleMouseLeave={handleMouseLeave}
-        tooltipPosition={tooltipPosition}
-        tooltipText={tooltipText}
       />
       {fields.map((field, index) => (
         <div key={field.id} ref={inputRef}>

diff --git a/src/components/manage-productions/manage-productions.tsx b/src/components/manage-productions/manage-productions.tsx
@@ -118,13 +118,6 @@ export const ManageProductions = () => {
   const [productionIdToFetch, setProductionIdToFetch] = useState<null | number>(
     null
   );
-  const [tooltipPosition, setTooltipPosition] = useState({
-    top: 0,
-    left: 0,
-    visibility: "hidden",
-    opacity: 0,
-  });
-  const [tooltipText, setTooltipText] = useState("");
 
   // Pagination
   const limit = "10";
@@ -161,32 +154,6 @@ export const ManageProductions = () => {
     successfullDelete,
   } = useDeleteProduction(removeId);
 
-  const handleMouseEnter = (
-    event: React.MouseEvent<HTMLTableCellElement>,
-    fullText: string
-  ) => {
-    if (fullText.length <= 50 || isMobile) return;
-
-    const rect = event.currentTarget.getBoundingClientRect();
-    setTooltipText(fullText);
-
-    setTooltipPosition({
-      top: rect.top + 5,
-      left: rect.left + 10,
-      visibility: "visible",
-      opacity: 1,
-    });
-  };
-
-  const handleMouseLeave = () => {
-    setTooltipText("");
-    setTooltipPosition({
-      ...tooltipPosition,
-      visibility: "hidden",
-      opacity: 0,
-    });
-  };
-
   useEffect(() => {
     if (formState.isSubmitSuccessful) {
       reset({
@@ -289,10 +256,6 @@ export const ManageProductions = () => {
                     setShowDeleteDoneMessage(false);
                   }}
                   isSelectedProduction={cachedProduction}
-                  handleMouseEnter={handleMouseEnter}
-                  handleMouseLeave={handleMouseLeave}
-                  tooltipText={tooltipText}
-                  tooltipPosition={tooltipPosition}
                 />
               )}
               <FormInputWrapper>
@@ -347,10 +310,6 @@ export const ManageProductions = () => {
               <ManageLines
                 production={cachedProduction}
                 setProductionIdToFetch={setProductionIdToFetch}
-                handleMouseEnter={handleMouseEnter}
-                handleMouseLeave={handleMouseLeave}
-                tooltipPosition={tooltipPosition}
-                tooltipText={tooltipText}
               />
             )}
           </SubFlexContainer>
@@ -366,10 +325,6 @@ export const ManageProductions = () => {
                 setShowDeleteDoneMessage(false);
               }}
               isSelectedProduction={cachedProduction}
-              handleMouseEnter={handleMouseEnter}
-              handleMouseLeave={handleMouseLeave}
-              tooltipText={tooltipText}
-              tooltipPosition={tooltipPosition}
             />
           )}
         </FlexContainer>

diff --git a/src/components/manage-productions/production-table.tsx b/src/components/manage-productions/production-table.tsx
@@ -80,26 +80,6 @@ const TableCell = styled.td`
   cursor: pointer;
 `;
 
-const Tooltip = styled.div`
-  position: fixed;
-  background: #32383b;
-  color: #d6d3d1;
-  padding: 1rem;
-  border: 0.1rem solid #6d6d6d;
-  border-radius: 0.5rem;
-  white-space: normal;
-  z-index: 200;
-  width: auto;
-  box-shadow: 0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.15);
-  visibility: ${({ isVisible }: { isVisible: boolean }) =>
-    isVisible ? "visible" : "hidden"};
-  opacity: ${({ isVisible }: { isVisible: boolean }) =>
-    isVisible ? "1" : "0"};
-  transition:
-    opacity 0.2s ease-in-out,
-    visibility 0.2s ease-in-out;
-`;
-
 const TruncatedTableCell = styled.td`
   padding: 1.8rem;
   border: 0.1rem solid #6d6d6d;
@@ -116,16 +96,6 @@ const TruncatedTableCell = styled.td`
     text-overflow: ${isOverflowing && !isMobile ? "ellipsis" : "initial"};
     max-width: ${isOverflowing && !isMobile ? "20rem" : "none"};
     position: relative;
-    
-    ${
-      isOverflowing && !isMobile
-        ? `
-      &:hover .tooltip {
-        display: block;
-      }
-    `
-        : ""
-    }
   `}
 `;
 
@@ -145,29 +115,13 @@ type TProductionTableProps = {
   setProductionId: (v: string) => void;
   error: Error | null;
   isSelectedProduction: TProduction | null;
-  handleMouseEnter: (
-    event: React.MouseEvent<HTMLTableCellElement>,
-    fullText: string
-  ) => void;
-  handleMouseLeave: () => void;
-  tooltipText: string;
-  tooltipPosition: {
-    top: number;
-    left: number;
-    visibility: string;
-    opacity: number;
-  };
 };
 
 export const ProductionTable = ({
   productions,
   setProductionId,
   error,
   isSelectedProduction,
-  handleMouseEnter,
-  handleMouseLeave,
-  tooltipText,
-  tooltipPosition,
 }: TProductionTableProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -205,11 +159,7 @@ export const ProductionTable = ({
                       setProductionId(p.productionId);
                     }}
                   >
-                    <TruncatedTableCell
-                      isOverflowing={p.name.length > 50}
-                      onMouseEnter={(e) => handleMouseEnter(e, p.name)}
-                      onMouseLeave={handleMouseLeave}
-                    >
+                    <TruncatedTableCell isOverflowing={p.name.length > 50}>
                       {p.name.length > 50 && !isMobile
                         ? `${p.name.slice(0, 47)}...`
                         : p.name}
@@ -220,16 +170,6 @@ export const ProductionTable = ({
               </tbody>
             </Table>
           </TableBody>
-          <Tooltip
-            isVisible={tooltipPosition.visibility === "visible"}
-            style={{
-              top: `${tooltipPosition.top}px`,
-              left: `${tooltipPosition.left}px`,
-              opacity: tooltipPosition.opacity,
-            }}
-          >
-            {tooltipText}
-          </Tooltip>
         </TableContainer>
       )}
     </>