@trackunit/react-drawer 0.3.13 → 0.3.15

package/index.cjs.js

@@ -342,7 +342,7 @@ const isPassedThreshold = (dragDistance, threshold) => {
 /**
  * Hook for handling swipe events on the drawer.
  */
-const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, }) => {
+const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }) => {
     const [isDragging, setIsDragging] = react.useState(false);
     const [dragDistance, setDragDistance] = react.useState(0);
     const currentY = react.useRef(0);
@@ -360,6 +360,9 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
         },
         onSwiping: (e) => {
             const newY = currentY.current + e.deltaY;
+            if (constrainDrag && constrainDrag(e.deltaY)) {
+                return;
+            }
             if (newY >= 0) {
                 setDragDistance(newY);
             }
@@ -420,6 +423,12 @@ const SwipeableDrawer = react.forwardRef(({ open, onClose, onOpenGesture, onSnap
     react.useImperativeHandle(ref, () => drawerRef.current);
     const [activeSnapPoint, setActiveSnapPoint] = react.useState(activeSnapPointProp);
     const [snapPointOffsets, setSnapPointOffsets] = react.useState([]);
+    const isLastSnapPoint = react.useMemo(() => {
+        return activeSnapPoint === (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[snapPoints.length - 1]);
+    }, [activeSnapPoint, snapPoints]);
+    const isFirstSnapPoint = react.useMemo(() => {
+        return activeSnapPoint === (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0]);
+    }, [activeSnapPoint, snapPoints]);
     const activeSnapPointIndex = react.useMemo(() => { var _a; return (_a = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex(snapPoint => snapPoint === activeSnapPoint)) !== null && _a !== void 0 ? _a : -1; }, [snapPoints, activeSnapPoint]);
     const onHandleDragEnd = react.useCallback((draggedBy, velocity) => {
         var _a, _b, _c;
@@ -468,6 +477,15 @@ const SwipeableDrawer = react.forwardRef(({ open, onClose, onOpenGesture, onSnap
             }
         },
         onDragEnd: onHandleDragEnd,
+        constrainDrag: (y) => {
+            if (isLastSnapPoint) {
+                return y <= 0;
+            }
+            if (isFirstSnapPoint) {
+                return y >= 0;
+            }
+            return false;
+        },
     });
     useScrollBlock({ isDisabled: !open || isDragging });
     react.useEffect(() => {

package/index.esm.js

@@ -340,7 +340,7 @@ const isPassedThreshold = (dragDistance, threshold) => {
 /**
  * Hook for handling swipe events on the drawer.
  */
-const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, }) => {
+const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [dragDistance, setDragDistance] = useState(0);
     const currentY = useRef(0);
@@ -358,6 +358,9 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
         },
         onSwiping: (e) => {
             const newY = currentY.current + e.deltaY;
+            if (constrainDrag && constrainDrag(e.deltaY)) {
+                return;
+            }
             if (newY >= 0) {
                 setDragDistance(newY);
             }
@@ -418,6 +421,12 @@ const SwipeableDrawer = forwardRef(({ open, onClose, onOpenGesture, onSnapPointC
     useImperativeHandle(ref, () => drawerRef.current);
     const [activeSnapPoint, setActiveSnapPoint] = useState(activeSnapPointProp);
     const [snapPointOffsets, setSnapPointOffsets] = useState([]);
+    const isLastSnapPoint = useMemo(() => {
+        return activeSnapPoint === (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[snapPoints.length - 1]);
+    }, [activeSnapPoint, snapPoints]);
+    const isFirstSnapPoint = useMemo(() => {
+        return activeSnapPoint === (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0]);
+    }, [activeSnapPoint, snapPoints]);
     const activeSnapPointIndex = useMemo(() => { var _a; return (_a = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex(snapPoint => snapPoint === activeSnapPoint)) !== null && _a !== void 0 ? _a : -1; }, [snapPoints, activeSnapPoint]);
     const onHandleDragEnd = useCallback((draggedBy, velocity) => {
         var _a, _b, _c;
@@ -466,6 +475,15 @@ const SwipeableDrawer = forwardRef(({ open, onClose, onOpenGesture, onSnapPointC
             }
         },
         onDragEnd: onHandleDragEnd,
+        constrainDrag: (y) => {
+            if (isLastSnapPoint) {
+                return y <= 0;
+            }
+            if (isFirstSnapPoint) {
+                return y >= 0;
+            }
+            return false;
+        },
     });
     useScrollBlock({ isDisabled: !open || isDragging });
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/hooks/useSwipeHandlers.d.ts

@@ -5,6 +5,7 @@ interface UseSwipeHandlersProps {
     onCloseGesture?: () => void;
     onOpenGesture?: () => void;
     onDragEnd?: (dragDistance: number, velocity: number) => void;
+    constrainDrag?: (dragDistance: number) => boolean;
 }
 /**
  * Retrieves the Y-axis translation value of a given HTML element.
@@ -16,7 +17,7 @@ export declare const getElementYTranslation: (element?: HTMLElement | null) => n
 /**
  * Hook for handling swipe events on the drawer.
  */
-export declare const useSwipeHandlers: ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, }: UseSwipeHandlersProps) => {
+export declare const useSwipeHandlers: ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }: UseSwipeHandlersProps) => {
     handlers: import("react-swipeable").SwipeableHandlers;
     isDragging: boolean;
     dragDistance: number;