From e0e86d3af74c7d69240f2ac1cd563c340d283d10 Mon Sep 17 00:00:00 2001 From: Saelmala Date: Tue, 3 Dec 2024 15:38:56 +0100 Subject: [PATCH] fix: remove tooltip --- .../manage-productions/line-table.tsx | 78 +------------------ .../manage-productions/manage-lines.tsx | 20 ----- .../manage-productions/manage-productions.tsx | 45 ----------- .../manage-productions/production-table.tsx | 62 +-------------- 4 files changed, 5 insertions(+), 200 deletions(-) diff --git a/src/components/manage-productions/line-table.tsx b/src/components/manage-productions/line-table.tsx index d58b45ad..a3c33fa1 100644 --- 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>; setRemoveId: React.Dispatch>; - handleMouseEnter: ( - event: React.MouseEvent, - 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(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 ( @@ -235,11 +178,7 @@ export const LineTable = ({ if (el) rowRefs.current.set(parseInt(l.id, 10), el); }} > - 50} - onMouseEnter={(e) => handleMouseEnter(e, l.name)} - onMouseLeave={handleMouseLeave} - > + 50}> {l.name.length > 50 && !isMobile ? `${l.name.slice(0, 47)}...` : l.name} @@ -263,15 +202,6 @@ export const LineTable = ({ - - {tooltipText} - {confirmButtonPosition && verifyRemove && ( void; - handleMouseEnter: ( - event: React.MouseEvent, - 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(false); const [updateLines, setUpdateLines] = useState(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) => (
diff --git a/src/components/manage-productions/manage-productions.tsx b/src/components/manage-productions/manage-productions.tsx index 3a251b8c..380531b1 100644 --- 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 ); - 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, - 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} /> )} @@ -347,10 +310,6 @@ export const ManageProductions = () => { )} @@ -366,10 +325,6 @@ export const ManageProductions = () => { setShowDeleteDoneMessage(false); }} isSelectedProduction={cachedProduction} - handleMouseEnter={handleMouseEnter} - handleMouseLeave={handleMouseLeave} - tooltipText={tooltipText} - tooltipPosition={tooltipPosition} /> )} diff --git a/src/components/manage-productions/production-table.tsx b/src/components/manage-productions/production-table.tsx index d6926520..c0f8e08c 100644 --- 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,18 +115,6 @@ type TProductionTableProps = { setProductionId: (v: string) => void; error: Error | null; isSelectedProduction: TProduction | null; - handleMouseEnter: ( - event: React.MouseEvent, - fullText: string - ) => void; - handleMouseLeave: () => void; - tooltipText: string; - tooltipPosition: { - top: number; - left: number; - visibility: string; - opacity: number; - }; }; export const ProductionTable = ({ @@ -164,10 +122,6 @@ export const ProductionTable = ({ setProductionId, error, isSelectedProduction, - handleMouseEnter, - handleMouseLeave, - tooltipText, - tooltipPosition, }: TProductionTableProps) => { const [isOpen, setIsOpen] = useState(false); @@ -205,11 +159,7 @@ export const ProductionTable = ({ setProductionId(p.productionId); }} > - 50} - onMouseEnter={(e) => handleMouseEnter(e, p.name)} - onMouseLeave={handleMouseLeave} - > + 50}> {p.name.length > 50 && !isMobile ? `${p.name.slice(0, 47)}...` : p.name} @@ -220,16 +170,6 @@ export const ProductionTable = ({ - - {tooltipText} - )}