Merge pull request #5 from nickoferrall/update-tooltip

Update naming and org file
ParabolInc · May 25, 2020 · f911a3b · f911a3b
2 parents 49aaf7c + 7943bdf
commit f911a3b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx
@@ -41,13 +41,13 @@ const DeleteIconButton = styled(IconButton)<{disabled?: boolean}>(({disabled}) =
 }))
 
 const IconBlock = styled('div')({
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
   justifyContent: 'center',
   marginRight: '4px',
   width: '2rem',
   '&:active': {
-    opacity: 0.8
+    opacity: 0.7
   },
   '&:hover': {
     cursor: 'pointer'
@@ -105,10 +105,10 @@ interface Props {
   activeMeetings: AgendaItem_activeMeetings
   agendaItem: AgendaItem_agendaItem
   gotoStageId: ReturnType<typeof useGotoStageId> | undefined
-  hoveringId: string
+  hoveringId: string | null
   isDragging: boolean
   meetingId?: string | null
-  updateHoveringId: (id: string) => void
+  updateHoveringId: (id: string | null) => void
 }
 
 const AgendaItem = (props: Props) => {
@@ -132,7 +132,7 @@ const AgendaItem = (props: Props) => {
   const {picture} = teamMember
   const atmosphere = useAtmosphere()
   const {viewerId} = atmosphere
-  const hovering = hoveringId === agendaItemId
+  const isHovering = hoveringId === agendaItemId
   const closedTooltipStatus = 4
   const ref = useRef<HTMLDivElement>(null)
   const {
@@ -151,8 +151,8 @@ const AgendaItem = (props: Props) => {
   useEffect(() => {
     // if the tooltip has closed and we're not hovering in a new item, remove hover
     // this is required because onMouseLeave isn't triggered if the cursor moves over the tooltip
-    if (tooltipStatus === closedTooltipStatus && hovering) {
-      updateHoveringId('')
+    if (tooltipStatus === closedTooltipStatus && isHovering) {
+      updateHoveringId(null)
     }
   }, [tooltipStatus])
 
@@ -169,27 +169,27 @@ const AgendaItem = (props: Props) => {
     RemoveAgendaItemMutation(atmosphere, {agendaItemId})
   }
 
-  const handleMouseMove = () => {
+  const handleMouseMoveItem = () => {
     // onMouseEnter isn't triggered if the cursor quickly moves over tooltip so check onMouseMove
-    if (!hovering) {
+    if (!isHovering) {
       updateHoveringId(agendaItemId)
     }
   }
 
   const handleMouseMoveIcon = () => {
-    if (hovering && tooltipStatus === closedTooltipStatus) {
+    if (isHovering && tooltipStatus === closedTooltipStatus) {
       openTooltip()
     }
   }
 
   const getIcon = () => {
-    if (pinned && hovering) return <SvgIcon alt='unpinIcon' src={unpinIcon} />
-    else if (!pinned && !hovering) return <Avatar hasBadge={false} picture={picture} size={24} />
+    if (pinned && isHovering) return <SvgIcon alt='unpinIcon' src={unpinIcon} />
+    else if (!pinned && !isHovering) return <Avatar hasBadge={false} picture={picture} size={24} />
     else return <SvgIcon alt='pinnedIcon' src={pinIcon} />
   }
 
   return (
-    <AgendaItemStyles onMouseMove={handleMouseMove}>
+    <AgendaItemStyles onMouseMove={handleMouseMoveItem}>
       <MeetingSubnavItem
         label={content}
         metaContent={

diff --git a/packages/client/modules/teamDashboard/components/AgendaList/AgendaList.tsx b/packages/client/modules/teamDashboard/components/AgendaList/AgendaList.tsx
@@ -41,7 +41,7 @@ interface Props {
 const AgendaList = (props: Props) => {
   const atmosphere = useAtmosphere()
   const {dashSearch, gotoStageId, meetingId, team} = props
-  const [hoveringId, setHoveringId] = useState('')
+  const [hoveringId, setHoveringId] = useState<string | null>(null)
   const {activeMeetings, agendaItems} = team
   const filteredAgendaItems = useMemo(() => {
     return dashSearch ? agendaItems.filter(({content}) => content.match(dashSearch)) : agendaItems
@@ -82,7 +82,7 @@ const AgendaList = (props: Props) => {
     setHoveringId('')
   }
 
-  const updateHoveringId = (id: string) => {
+  const updateHoveringId = (id: string | null) => {
     setHoveringId(id)
   }
 

diff --git a/packages/client/modules/userDashboard/components/OrgUserRow/OrgMemberRow.tsx b/packages/client/modules/userDashboard/components/OrgUserRow/OrgMemberRow.tsx
@@ -146,10 +146,20 @@ const OrgMemberRow = (props: Props) => {
       })
     }
   }
-
   const {tooltipPortal, openTooltip, closeTooltip, originRef: tooltipRef} = useTooltip<
     HTMLDivElement
   >(MenuPosition.LOWER_RIGHT)
+
+  const handleMouseOver = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    openTooltip()
+  }
+
+  const handleMouseOut = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    closeTooltip()
+  }
+
   return (
     <StyledRow>
       <AvatarBlock>
@@ -173,11 +183,9 @@ const OrgMemberRow = (props: Props) => {
       <RowActions>
         <ActionsBlock>
           {!isBillingLeader && viewerId === userId && (
-            <>
-              <StyledFlatButton onClick={toggleLeave} onMouseEnter={LeaveOrgModal.preload}>
-                Leave Organization
-              </StyledFlatButton>
-            </>
+            <StyledFlatButton onClick={toggleLeave} onMouseEnter={LeaveOrgModal.preload}>
+              Leave Organization
+            </StyledFlatButton>
           )}
           {isProTier && isViewerBillingLeader && (
             <ToggleBlock>
@@ -187,8 +195,8 @@ const OrgMemberRow = (props: Props) => {
           {isViewerLastBillingLeader && userId === viewerId && (
             <MenuToggleBlock
               onClick={closeTooltip}
-              onMouseEnter={openTooltip}
-              onMouseLeave={closeTooltip}
+              onMouseOver={handleMouseOver}
+              onMouseOut={handleMouseOut}
               ref={tooltipRef}
             >
               {tooltipPortal(