Merge pull request #2427 from habx/fix/APP-32572

APP-32572: fix(Drawer): update initial drawer step on device resize
habx · Oct 21, 2022 · b8deec1 · b8deec1
2 parents f9bec89 + 3fdd46f
commit b8deec1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/Drawer/Drawer.reducer.ts b/src/Drawer/Drawer.reducer.ts
@@ -58,11 +58,11 @@ export const reducer: React.Reducer<DrawerReducerState, DrawerActions> = (
       const drawerSteps = getStepHeights(action.containerHeight)
       const stepEntries = Object.entries(drawerSteps)
       const currentPos = action.containerHeight - (state.position ?? 0)
-      const closestStep = stepEntries.reduce((prev, curr) => {
-        return Math.abs(curr[1] - currentPos) < Math.abs(prev[1] - currentPos)
+      const closestStep = stepEntries.reduce((prev, curr) =>
+        Math.abs(curr[1] - currentPos) < Math.abs(prev[1] - currentPos)
           ? curr
           : prev
-      })
+      )
 
       return {
         ...state,

diff --git a/src/Drawer/Drawer.tsx b/src/Drawer/Drawer.tsx
@@ -1,3 +1,4 @@
+import { debounce } from 'lodash'
 import * as React from 'react'
 
 import { useMergedRef } from '../_internal/useMergedRef'
@@ -35,12 +36,23 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
     }, [state.drawerStep]) // eslint-disable-line react-hooks/exhaustive-deps
     React.useEffect(() => {
       if (stateProp && stateProp !== state.drawerStep) {
-        dispatch({
-          type: DrawerActionTypes.ChangeStep,
-          value: stateProp,
-          containerHeight: mergedRef.current?.clientHeight ?? 0,
-        })
+        const initializedStep = debounce(
+          () => {
+            dispatch({
+              type: DrawerActionTypes.ChangeStep,
+              value: stateProp,
+              containerHeight: mergedRef.current?.clientHeight ?? 0,
+            })
+          },
+          200,
+          { leading: true, trailing: false }
+        )
+        initializedStep()
         initialized.current = true
+        window.addEventListener('resize', initializedStep)
+        return () => {
+          window.removeEventListener('resize', initializedStep)
+        }
       }
     }, [stateProp]) // eslint-disable-line react-hooks/exhaustive-deps