Task/htl 113692 limit dragging to header only (#1545)

* task(HTL-113692): Limit dragging behavior to header only * task(HTL-113692): Limit drawer drag interaction to header only * task(HTL-113692): Fix coverage
priceline · Jan 7, 2025 · 46130fe · 46130fe
1 parent 4e7ff04
commit 46130fe
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/...es/pcln-design-system/task-HTL-113692-limit-dragging-to-header-only_2025-01-07-05-13.json b/...es/pcln-design-system/task-HTL-113692-limit-dragging-to-header-only_2025-01-07-05-13.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Drawer is now draggable when user only drags the header, not the content",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Drawer/Drawer.stories.tsx b/packages/core/src/Drawer/Drawer.stories.tsx
@@ -245,7 +245,6 @@ function DrawerScrollable(props) {
       height='100vh'
       style={{ backgroundColor: 'grey', height: '100vh', position: 'relative' }}
     >
-      <Text>Note: Mobile only feature - Please test on browser iOS/android device emulator</Text>
       <Text>Previous position: {snapState.prevSnapPosition}</Text>
       <Text>Current position: {snapState.currSnapPosition}</Text>
       <Drawer heading='Header' isOpen={true} {...props} onSnapPositionChange={handleSnapStateChange}>

diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
@@ -4,7 +4,7 @@ import { Flex } from '../Flex/Flex'
 import { Text } from '../Text/Text'
 import { DrawerRoot, DrawerWrapper, HeaderButton } from './Drawer.styled'
 import { ChevronDown, Close } from 'pcln-icons'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion, useDragControls } from 'framer-motion'
 import { SpaceProps, LayoutProps } from 'styled-system'
 import { useScrollWithShadow } from '../useScrollWithShadows/useScrollWithShadow'
 import { theme } from '../theme'
@@ -72,6 +72,8 @@ export const Drawer: React.FC<DrawerProps> = ({
   const { boxShadow, onScrollHandler } = useScrollWithShadow()
   const { snapPosition, handleSnap } = useSnap(snapHeights, snapDimensions, onSnapPositionChange)
   const SnapContainer = snapHeights ? motion.div : 'div'
+  const headerRef = React.useRef(null)
+  const dragControls = useDragControls()
 
   return (
     <SnapContainer
@@ -92,6 +94,8 @@ export const Drawer: React.FC<DrawerProps> = ({
       dragConstraints={{ top: 0, bottom: 0 }}
       {...(snapHeights ? { onDragEnd: handleSnap } : {})}
       data-testid='snap-container'
+      dragControls={dragControls}
+      dragListener={false}
     >
       <AnimatePresence>
         {isOpen && (
@@ -124,7 +128,18 @@ export const Drawer: React.FC<DrawerProps> = ({
             >
               <Flex flexDirection='column'>
                 {(heading || onClose || onCollapse) && (
-                  <Flex flexDirection='column'>
+                  <Flex
+                    ref={headerRef}
+                    /* c8 ignore next */
+                    onPointerDown={(e) => {
+                      if (snapHeights) {
+                        dragControls.start(e)
+                      }
+                    }}
+                    flexDirection='column'
+                    style={{ touchAction: 'none' }}
+                    data-testid='drawer-header-container'
+                  >
                     <Flex flexDirection='row' p={3}>
                       {typeof heading === 'string' ? (
                         <Text width='100%' textStyle='heading4'>

diff --git a/packages/core/src/Drawer/hooks/useSnap.ts b/packages/core/src/Drawer/hooks/useSnap.ts
@@ -20,8 +20,6 @@ export function useSnap(snapHeights, snapDimensions, onSnapPositionChange) {
   const [snapPosition, setSnapPosition] = useState(MIDDLE)
 
   const handleSnap = (...args) => {
-    const pointerType = args?.[0]?.pointerType // mouse, touch, etc.
-    const type = args?.[0]?.type // click, pointerup (drag), pointercancel (scroll)
     const info = args?.[1]
     const scrollOffset = info.offset.y
 
@@ -45,29 +43,27 @@ export function useSnap(snapHeights, snapDimensions, onSnapPositionChange) {
      * container movement.
      */
 
-    if (pointerType === 'touch' && type === 'pointerup') {
-      // Scroll down logic
-      if (SCROLL_DOWN) {
-        if (snapPosition === TOP) {
-          setSnapPosition(MIDDLE)
-          onSnapPositionChange({ prevSnapPosition: 'TOP', currSnapPosition: 'MIDDLE' })
-        }
-        if (snapPosition === MIDDLE) {
-          setSnapPosition(BOTTOM)
-          onSnapPositionChange({ prevSnapPosition: 'MIDDLE', currSnapPosition: 'BOTTOM' })
-        }
+    // Scroll down logic
+    if (SCROLL_DOWN) {
+      if (snapPosition === TOP) {
+        setSnapPosition(MIDDLE)
+        onSnapPositionChange({ prevSnapPosition: 'TOP', currSnapPosition: 'MIDDLE' })
       }
+      if (snapPosition === MIDDLE) {
+        setSnapPosition(BOTTOM)
+        onSnapPositionChange({ prevSnapPosition: 'MIDDLE', currSnapPosition: 'BOTTOM' })
+      }
+    }
 
-      // Scroll up logic
-      else if (SCROLL_UP) {
-        if (snapPosition === BOTTOM) {
-          setSnapPosition(MIDDLE)
-          onSnapPositionChange({ prevSnapPosition: 'BOTTOM', currSnapPosition: 'MIDDLE' })
-        }
-        if (snapPosition === MIDDLE) {
-          setSnapPosition(TOP)
-          onSnapPositionChange({ prevSnapPosition: 'MIDDLE', currSnapPosition: 'TOP' })
-        }
+    // Scroll up logic
+    else if (SCROLL_UP) {
+      if (snapPosition === BOTTOM) {
+        setSnapPosition(MIDDLE)
+        onSnapPositionChange({ prevSnapPosition: 'BOTTOM', currSnapPosition: 'MIDDLE' })
+      }
+      if (snapPosition === MIDDLE) {
+        setSnapPosition(TOP)
+        onSnapPositionChange({ prevSnapPosition: 'MIDDLE', currSnapPosition: 'TOP' })
       }
     }
   }