From f9b0dba7fe746c6b23e35a365ccc8c4450c82974 Mon Sep 17 00:00:00 2001
From: Henry Paulino <corasan.dev@gmail.com>
Date: Wed, 22 May 2024 15:34:23 +0100
Subject: [PATCH] Fix: Modal Overextend (#28)

* chore: Update package-lock.json and ModalSheet components

* fix modal issues
---
 example/app/index.tsx                        |  4 ++--
 package-lock.json                            |  4 ++--
 src/Providers/ModalSheetInternalProvider.tsx |  5 -----
 src/components/ModalSheet.tsx                |  2 --
 src/components/ModalSheetChild.tsx           |  8 ++++----
 src/components/ModalSheetStack.tsx           | 13 +++++--------
 src/types.ts                                 |  2 --
 7 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/example/app/index.tsx b/example/app/index.tsx
index 3176422..72fbcac 100644
--- a/example/app/index.tsx
+++ b/example/app/index.tsx
@@ -19,9 +19,9 @@ export default function App() {
         }}
       />
       <Button
-        title="Modal 1 - expand(full: true)"
+        title="Modal 2 - open()"
         onPress={() => {
-          modal1.current?.expand('full')
+          modal2.current?.open()
         }}
       />
 
diff --git a/package-lock.json b/package-lock.json
index c4ef3c1..852fee5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@corasan/modal-sheet",
-  "version": "2.0.0-rc.12",
+  "version": "2.0.0-rc.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@corasan/modal-sheet",
-      "version": "2.0.0-rc.12",
+      "version": "2.0.0-rc.15",
       "license": "MIT",
       "dependencies": {
         "@gorhom/portal": "^1.0.14",
diff --git a/src/Providers/ModalSheetInternalProvider.tsx b/src/Providers/ModalSheetInternalProvider.tsx
index c52d144..4df0441 100644
--- a/src/Providers/ModalSheetInternalProvider.tsx
+++ b/src/Providers/ModalSheetInternalProvider.tsx
@@ -39,15 +39,11 @@ export function ModalSheetInternalProvider({ children }: PropsWithChildren) {
   const minimumHeight = useSharedValue(0)
   const y = useSharedValue(MAX_HEIGHT)
   const modalHeight = useSharedValue(0)
-  const disableSheetStackEffect = useSharedValue<1 | 0>(0)
   const backdropColor = useSharedValue('black')
   const backdropOpacity = useSharedValue(0.3)
   const activeIndex = useSharedValue(0)
   const drawerActiveIndex = useSharedValue(0)
   const childrenAanimatedStyles = useAnimatedStyle(() => {
-    if (disableSheetStackEffect.value === 1) {
-      return {}
-    }
     const borderRadius = interpolateClamp(
       modalHeight.value,
       [minimumHeight.value, MODAL_SHEET_HEIGHT],
@@ -142,7 +138,6 @@ export function ModalSheetInternalProvider({ children }: PropsWithChildren) {
         minimumHeight,
         backdropColor,
         backdropOpacity,
-        disableSheetStackEffect,
         updateModalHeight,
         registerDrawerSheet,
         addDrawerSheetToStack,
diff --git a/src/components/ModalSheet.tsx b/src/components/ModalSheet.tsx
index cde3d3f..052c2d5 100644
--- a/src/components/ModalSheet.tsx
+++ b/src/components/ModalSheet.tsx
@@ -18,8 +18,6 @@ import Animated, {
 import { animateClose, animateOpen, interpolateClamp, useConstants } from '../utils'
 import { ModalSheetProps, ModalSheetRef } from '../types'
 import { useInternal } from '../hooks/useInternal'
-import React from 'react'
-import { ModalSheetChild } from './ModalSheetChild'
 
 export const ModalSheet = forwardRef<ModalSheetRef, PropsWithChildren<ModalSheetProps>>(
   (
diff --git a/src/components/ModalSheetChild.tsx b/src/components/ModalSheetChild.tsx
index 654f67f..5281e6e 100644
--- a/src/components/ModalSheetChild.tsx
+++ b/src/components/ModalSheetChild.tsx
@@ -1,10 +1,10 @@
-import React, { useRef } from 'react'
+import { useRef, isValidElement, cloneElement, Children } from 'react'
 
 export const ModalSheetChild = ({ children, onLayoutChange }) => {
   const initialHeightRef = useRef(0)
-  return React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
+  return Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
         // @ts-ignore
         onLayout: (event) => {
           const { height } = event.nativeEvent.layout
diff --git a/src/components/ModalSheetStack.tsx b/src/components/ModalSheetStack.tsx
index 9b85f40..daf8854 100644
--- a/src/components/ModalSheetStack.tsx
+++ b/src/components/ModalSheetStack.tsx
@@ -25,7 +25,6 @@ export const ModalSheetStack = forwardRef<
       removeModalFromStack,
       activeIndex,
       modalStack,
-      disableSheetStackEffect,
       backdropColor: bckdropColor,
       backdropOpacity: bckdropOpacity,
       updateModalHeight,
@@ -45,9 +44,6 @@ export const ModalSheetStack = forwardRef<
         }
         const moveVal = SCREEN_HEIGHT - e.absoluteY
         modalHeight.value = moveVal
-        if (!disableSheetStackEffect.value && activeIndex.value === 1) {
-          updateModalHeight(SCREEN_HEIGHT - e.absoluteY)
-        }
         // Animate the modal behind if there is a stack of modals
         // When the current modal is dragged, the modal behind animates with it
         const behindModalRef = modalStack[activeIndex.value - 1]
@@ -65,14 +61,16 @@ export const ModalSheetStack = forwardRef<
           )
         }
       })
-      .onEnd((e) => {
-        if (e.translationY < 0) {
+      .onEnd((e) => {        
+        if (e.translationY < 80) {
           modalHeight.value = animateOpen(MODAL_SHEET_HEIGHT)
           showBackdrop.value = animateOpen(1)
           if (activeIndex.value === 0) {
             updateModalHeight(animateOpen(MODAL_SHEET_HEIGHT))
           }
-          runOnJS(addModalToStack)(name)
+          if (e.absoluteY < HEADER_HEIGHT) {
+            return
+          }
         } else {
           modalHeight.value = animateClose(0)
           showBackdrop.value = animateClose(0)
@@ -102,7 +100,6 @@ export const ModalSheetStack = forwardRef<
     })
 
     const open = () => {
-      disableSheetStackEffect.value = 0
       modalHeight.value = animateOpen(MODAL_SHEET_HEIGHT)
       showBackdrop.value = animateOpen(1)
       if (activeIndex.value === 0) {
diff --git a/src/types.ts b/src/types.ts
index 8327476..cb4a242 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -37,7 +37,6 @@ export interface ModalSheetRef {
   minimizedHeight?: number
   id: string
   children?: React.ReactNode
-  // onLayoutChange: (height: number) => void
 }
 export interface ModalSheetProps {
   name: string
@@ -79,7 +78,6 @@ export interface ModalSheetContextBaseType {
   minimumHeight: SharedValue<number>
   backdropColor: SharedValue<string>
   backdropOpacity: SharedValue<number>
-  disableSheetStackEffect: SharedValue<number>
   expand: (
     name: string,
     options?: { height?: number; disableSheetEffect?: boolean },