Merge pull request #4743 from ParabolInc/prevent-drawer-transition

Prevent Poker drawer from jumping up
ParabolInc · Mar 15, 2021 · 1af3a3d · 1af3a3d
2 parents f6508f4 + ea943e7
commit 1af3a3d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/packages/client/components/DiscussionThread.tsx b/packages/client/components/DiscussionThread.tsx
@@ -22,8 +22,7 @@ const Wrapper = styled('div')<{isExpanded: boolean; isPokerMeeting?: boolean}>(
     overflow: 'hidden',
     width: isPokerMeeting ? '100%' : 'calc(100% - 16px)',
     [makeMinWidthMediaQuery(Breakpoint.SIDEBAR_LEFT)]: {
-      height:
-        isExpanded || isPokerMeeting ? '100%' : `calc(100% - ${MeetingControlBarEnum.HEIGHT}px)`,
+      height: isExpanded ? '100%' : `calc(100% - ${MeetingControlBarEnum.HEIGHT}px)`,
       width: DiscussionThreadEnum.WIDTH
     }
   })
@@ -55,9 +54,15 @@ const DiscussionThread = (props: Props) => {
   const listRef = useRef<HTMLDivElement>(null)
   const editorRef = useRef<HTMLTextAreaElement>(null)
   const ref = useRef<HTMLDivElement>(null)
-  // don't resize in a poker meeting as we do this in the parent
-  const coverableHeight = isPokerMeeting ? 0 : MeetingControlBarEnum.HEIGHT
-  const isExpanded = useCoverable('threads', ref, coverableHeight, meetingContentRef) || !!endedAt
+  const isExpanded =
+    useCoverable(
+      'threads',
+      ref,
+      MeetingControlBarEnum.HEIGHT,
+      meetingContentRef,
+      undefined,
+      meetingType
+    ) || !!endedAt
   return (
     <Wrapper isExpanded={isExpanded} isPokerMeeting={isPokerMeeting} ref={ref}>
       <DiscussionThreadList

diff --git a/packages/client/components/EstimatePhaseDiscussionDrawer.tsx b/packages/client/components/EstimatePhaseDiscussionDrawer.tsx
@@ -1,11 +1,10 @@
 import styled from '@emotion/styled'
-import React, {RefObject, useRef} from 'react'
+import React from 'react'
 import graphql from 'babel-plugin-relay/macro'
 import {createFragmentContainer} from 'react-relay'
-import {useCoverable} from '~/hooks/useControlBarCovers'
 import {desktopSidebarShadow} from '~/styles/elevation'
 import {EstimatePhaseDiscussionDrawer_meeting} from '~/__generated__/EstimatePhaseDiscussionDrawer_meeting.graphql'
-import {BezierCurve, DiscussionThreadEnum, MeetingControlBarEnum, ZIndex} from '../types/constEnums'
+import {BezierCurve, DiscussionThreadEnum, ZIndex} from '../types/constEnums'
 import DiscussionThreadRoot from './DiscussionThreadRoot'
 import {PALETTE} from '~/styles/paletteV2'
 import LabelHeading from './LabelHeading/LabelHeading'
@@ -77,32 +76,23 @@ interface Props {
   isOpen: boolean
   meeting: EstimatePhaseDiscussionDrawer_meeting
   onToggle: () => void
-  meetingContentRef: RefObject<HTMLDivElement>
 }
 
 const EstimatePhaseDiscussionDrawer = (props: Props) => {
-  const {isDesktop, isOpen, meeting, meetingContentRef, onToggle} = props
-  const {id: meetingId, endedAt, localStage} = meeting
+  const {isDesktop, isOpen, meeting, onToggle} = props
+  const {id: meetingId, localStage} = meeting
   const {serviceTaskId} = localStage
-  const ref = useRef<HTMLDivElement>(null)
-  const meetingControlBarBottom = 16
-  const coverableHeight = isDesktop ? MeetingControlBarEnum.HEIGHT + meetingControlBarBottom : 0
-  useCoverable('drawer', ref, coverableHeight, meetingContentRef) || !!endedAt
 
   return (
-    <Drawer isDesktop={isDesktop} isOpen={isOpen} ref={ref}>
+    <Drawer isDesktop={isDesktop} isOpen={isOpen}>
       <Header>
         <HeaderLabel>{'Discussion'}</HeaderLabel>
         <StyledCloseButton onClick={onToggle}>
           <CloseIcon>close</CloseIcon>
         </StyledCloseButton>
       </Header>
       <ThreadColumn>
-        <DiscussionThreadRoot
-          meetingId={meetingId}
-          threadSourceId={serviceTaskId!}
-          meetingContentRef={ref}
-        />
+        <DiscussionThreadRoot meetingId={meetingId} threadSourceId={serviceTaskId!} />
       </ThreadColumn>
     </Drawer>
   )

diff --git a/packages/client/components/PokerEstimatePhase.tsx b/packages/client/components/PokerEstimatePhase.tsx
@@ -1,5 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {useRef} from 'react'
+import React from 'react'
 import {createFragmentContainer} from 'react-relay'
 import {phaseLabelLookup} from '../utils/meetings/lookups'
 import {PokerEstimatePhase_meeting} from '../__generated__/PokerEstimatePhase_meeting.graphql'
@@ -44,11 +44,10 @@ const PokerEstimatePhase = (props: Props) => {
   } = meeting
   const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT)
   const toggleDrawer = useRightDrawer(meetingId)
-  const meetingContentRef = useRef<HTMLDivElement>(null)
   if (!localStage) return null
   const {service} = localStage
   return (
-    <MeetingContent ref={meetingContentRef}>
+    <MeetingContent>
       <StyledMeetingHeaderAndPhase isOpen={isRightDrawerOpen} hideBottomBar={!!endedAt}>
         <MeetingTopBar
           avatarGroup={avatarGroup}
@@ -72,7 +71,6 @@ const PokerEstimatePhase = (props: Props) => {
           isDesktop={isDesktop}
           isOpen={isRightDrawerOpen}
           meeting={meeting}
-          meetingContentRef={meetingContentRef}
           onToggle={toggleDrawer}
         />
       </ResponsiveDashSidebar>

diff --git a/packages/client/hooks/useControlBarCovers.ts b/packages/client/hooks/useControlBarCovers.ts
@@ -1,5 +1,6 @@
 import {RefObject, useEffect} from 'react'
 import {BezierCurve, Breakpoint, DiscussionThreadEnum, NavSidebar} from '~/types/constEnums'
+import {MeetingTypeEnum} from '../__generated__/SummarySheet_meeting.graphql'
 import useResizeObserver from './useResizeObserver'
 
 interface ControlBarCoverable {
@@ -40,9 +41,11 @@ export const useCoverable = (
   ref: RefObject<HTMLDivElement>,
   height: number,
   parentRef?: RefObject<HTMLDivElement>,
-  columnsRef?: RefObject<HTMLDivElement>
+  columnsRef?: RefObject<HTMLDivElement>,
+  meetingType?: MeetingTypeEnum
 ) => {
   const updateCoverables = () => {
+    if (meetingType === 'poker') return
     const el = ref.current
     if (!el) return
     if (window.innerWidth < Breakpoint.SINGLE_REFLECTION_COLUMN) return
@@ -78,6 +81,7 @@ export const useCoverable = (
     }
   }, [])
 
+  if (meetingType === 'poker') return true
   return coverables[id]?.isExpanded ?? false
 }