From 95ea72a459f96d40ad583c5579cc72f0e128e5dd Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 17 Aug 2021 21:42:00 +0100
Subject: [PATCH] fix: prevent snap points lower than 0

---
 src/components/bottomSheet/types.d.ts |  2 +-
 src/hooks/usePropsValidator.ts        | 35 +++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index 4d3de2b59..c79f920bb 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -40,7 +40,7 @@ export interface BottomSheetProps
    * @example
    * snapPoints={[200, 500]}
    * snapPoints={[200, '%50']}
-   * snapPoints={[-1, '%100']}
+   * snapPoints={['%100']}
    * @type Array<string | number>
    */
   snapPoints:
diff --git a/src/hooks/usePropsValidator.ts b/src/hooks/usePropsValidator.ts
index ff0701f9b..ce6c400fa 100644
--- a/src/hooks/usePropsValidator.ts
+++ b/src/hooks/usePropsValidator.ts
@@ -1,26 +1,46 @@
 import { useMemo } from 'react';
 import invariant from 'invariant';
+import { INITIAL_SNAP_POINT } from '../components/bottomSheet/constants';
 import type { BottomSheetProps } from '../components/bottomSheet';
 
+/**
+ * @todo
+ * replace this with `prop-types`.
+ */
+
 export const usePropsValidator = ({
   index,
   snapPoints,
   topInset,
+  bottomInset,
 }: BottomSheetProps) => {
   useMemo(() => {
+    //#region snap points
     const _snapPoints = 'value' in snapPoints ? snapPoints.value : snapPoints;
-    // snap points
     invariant(
       _snapPoints,
       `'snapPoints' was not provided! please provide at least one snap point.`
     );
 
+    _snapPoints.map(snapPoint => {
+      const _snapPoint =
+        typeof snapPoint === 'number'
+          ? snapPoint
+          : parseInt(snapPoint.replace('%', ''), 10);
+
+      invariant(
+        _snapPoint > 0 || _snapPoint === INITIAL_SNAP_POINT,
+        `Snap point '${snapPoint}' is invalid. if you want to allow user to close the sheet, Please use 'enablePanDownToClose' prop.`
+      );
+    });
+
     invariant(
       'value' in _snapPoints || _snapPoints.length > 0,
       `'snapPoints' was provided with no points! please provide at least one snap point.`
     );
+    //#endregion
 
-    // index
+    //#region index
     invariant(
       typeof index === 'number' || typeof index === 'undefined',
       `'index' was provided but with wrong type ! expected type is a number.`
@@ -34,14 +54,19 @@ export const usePropsValidator = ({
         _snapPoints.length - 1
       }`
     );
+    //#endregion
 
-    // topInset
+    //#region insets
     invariant(
       typeof topInset === 'number' || typeof topInset === 'undefined',
       `'topInset' was provided but with wrong type ! expected type is a number.`
     );
+    invariant(
+      typeof bottomInset === 'number' || typeof bottomInset === 'undefined',
+      `'bottomInset' was provided but with wrong type ! expected type is a number.`
+    );
+    //#endregion
 
     // animations
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [index, snapPoints, topInset, bottomInset]);
 };