fix: typescript strict on to prevent null calls (#477)

* fix: typescript strict on to prevent null calls * fix: restore original code * fix: restore original code * fix: onRelease event nullable
emilkowalski · Oct 13, 2024 · 1a8d000 · 1a8d000
1 parent 2d12d85
commit 1a8d000
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/src/context.ts b/src/context.ts
@@ -5,7 +5,7 @@ interface DrawerContextValue {
   drawerRef: React.RefObject<HTMLDivElement>;
   overlayRef: React.RefObject<HTMLDivElement>;
   onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
-  onRelease: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
   onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
   onNestedDrag: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
   onNestedOpenChange: (o: boolean) => void;
@@ -23,7 +23,7 @@ interface DrawerContextValue {
   closeDrawer: () => void;
   openProp?: boolean;
   onOpenChange?: (o: boolean) => void;
-  direction?: DrawerDirection;
+  direction: DrawerDirection;
   shouldScaleBackground: boolean;
   setBackgroundColorOnScale: boolean;
   noBodyStyles: boolean;

diff --git a/src/index.tsx b/src/index.tsx
@@ -155,7 +155,7 @@ export function Root({
   modal = true,
   onClose,
   nested,
-  noBodyStyles,
+  noBodyStyles = false,
   direction = 'bottom',
   defaultOpen = false,
   disablePreventScroll = true,
@@ -247,7 +247,7 @@ export function Root({
   const { restorePositionSetting } = usePositionFixed({
     isOpen,
     modal,
-    nested,
+    nested: nested ?? false,
     hasBeenOpened,
     preventScrollRestoration,
     noBodyStyles,
@@ -307,7 +307,11 @@ export function Root({
     }
 
     // Disallow dragging if drawer was scrolled within `scrollLockTimeout`
-    if (date.getTime() - lastTimeDragPrevented.current?.getTime() < scrollLockTimeout && swipeAmount === 0) {
+    if (
+      lastTimeDragPrevented.current &&
+      date.getTime() - lastTimeDragPrevented.current.getTime() < scrollLockTimeout &&
+      swipeAmount === 0
+    ) {
       lastTimeDragPrevented.current = date;
       return false;
     }
@@ -581,7 +585,7 @@ export function Root({
     dragEndTime.current = new Date();
   }
 
-  function onRelease(event: React.PointerEvent<HTMLDivElement>) {
+  function onRelease(event: React.PointerEvent<HTMLDivElement> | null) {
     if (!isDragging || !drawerRef.current) return;
 
     drawerRef.current.classList.remove(DRAG_CLASS);
@@ -590,7 +594,7 @@ export function Root({
     dragEndTime.current = new Date();
     const swipeAmount = getTranslate(drawerRef.current, direction);
 
-    if (!shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return;
+    if (!event || !shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return;
 
     if (dragStartTime.current === null) return;
 
@@ -790,9 +794,11 @@ export const Overlay = React.forwardRef<HTMLDivElement, React.ComponentPropsWith
       return null;
     }
 
+    const onMouseUp = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => onRelease(event), [onRelease]);
+
     return (
       <DialogPrimitive.Overlay
-        onMouseUp={onRelease}
+        onMouseUp={onMouseUp}
         ref={composedRef}
         data-vaul-overlay=""
         data-vaul-snap-points={isOpen && hasSnapPoints ? 'true' : 'false'}
@@ -867,7 +873,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
     }
   }, []);
 
-  function handleOnPointerUp(event: React.PointerEvent<HTMLDivElement>) {
+  function handleOnPointerUp(event: React.PointerEvent<HTMLDivElement> | null) {
     pointerStartRef.current = null;
     wasBeyondThePointRef.current = false;
     onRelease(event);
@@ -1005,8 +1011,10 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(function (
     // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
     handleCancelInteraction();
 
-    if ((!snapPoints || snapPoints.length === 0) && dismissible) {
-      closeDrawer();
+    if (!snapPoints || snapPoints.length === 0) {
+      if (!dismissible) {
+        closeDrawer();
+      }
       return;
     }
 
@@ -1031,7 +1039,9 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(function (
   }
 
   function handleCancelInteraction() {
-    window.clearTimeout(closeTimeoutIdRef.current);
+    if (closeTimeoutIdRef.current) {
+      window.clearTimeout(closeTimeoutIdRef.current);
+    }
     shouldCancelInteractionRef.current = false;
   }
 

diff --git a/src/use-prevent-scroll.ts b/src/use-prevent-scroll.ts
@@ -267,11 +267,15 @@ function preventScrollMobileSafari() {
 }
 
 // Sets a CSS property on an element, and returns a function to revert it to the previous value.
-function setStyle(element: HTMLElement, style: string, value: string) {
+function setStyle(element: HTMLElement, style: keyof React.CSSProperties, value: string) {
+  // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
+  // @ts-ignore
   let cur = element.style[style];
+  // @ts-ignore
   element.style[style] = value;
 
   return () => {
+    // @ts-ignore
     element.style[style] = cur;
   };
 }

diff --git a/src/use-snap-points.ts b/src/use-snap-points.ts
@@ -60,7 +60,7 @@ export function useSnapPoints({
   );
 
   const activeSnapPointIndex = React.useMemo(
-    () => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint),
+    () => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint) ?? null,
     [snapPoints, activeSnapPoint],
   );
 
@@ -126,6 +126,7 @@ export function useSnapPoints({
       if (
         snapPointsOffset &&
         newSnapPointIndex !== snapPointsOffset.length - 1 &&
+        fadeFromIndex !== undefined &&
         newSnapPointIndex !== fadeFromIndex &&
         newSnapPointIndex < fadeFromIndex
       ) {
@@ -205,7 +206,7 @@ export function useSnapPoints({
       const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
 
       // Don't do anything if we swipe upwards while being on the last snap point
-      if (dragDirection > 0 && isLastSnapPoint) {
+      if (dragDirection > 0 && isLastSnapPoint && snapPoints) {
         snapToPoint(snapPointsOffset[snapPoints.length - 1]);
         return;
       }

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,7 +4,8 @@
     "target": "es2018",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "lib": ["es2015", "dom"]
+    "lib": ["es2015", "dom"],
+    "strict": true
   },
   "include": ["src"],
 }