From 7c840602e0d7cd5f6f6defb41f54357457314b78 Mon Sep 17 00:00:00 2001
From: Kesha Antonov <innokenty.longway@gmail.com>
Date: Wed, 5 Apr 2023 11:34:00 +0300
Subject: [PATCH] Provider: add onOpen/onClose callbacks (#84)

---
 example/src/App.tsx                  | 10 ++++++++++
 src/components/provider/Provider.tsx | 23 ++++++++++++++++++++++-
 src/components/provider/types.d.ts   |  3 +++
 website/docs/props.md                | 28 ++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index effd26b..f5b9431 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -54,6 +54,14 @@ const App = () => {
     };
   }, [state]);
 
+  const onOpen = useCallback(() => {
+    console.log('App onOpen')
+  }, []);
+
+  const onClose = useCallback(() => {
+    console.log('App onClose')
+  }, []);
+
   return (
     <>
       <AppContext.Provider value={appContextVariables}>
@@ -64,6 +72,8 @@ const App = () => {
           iconComponent={FeatherIcon}
           theme={state.theme}
           safeAreaInsets={safeAreaInsets}
+          onOpen={onOpen}
+          onClose={onClose}
         >
           <NavigationContainer>
             <Stack.Navigator
diff --git a/src/components/provider/Provider.tsx b/src/components/provider/Provider.tsx
index b2f8195..234ecf8 100644
--- a/src/components/provider/Provider.tsx
+++ b/src/components/provider/Provider.tsx
@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useMemo } from 'react';
 import { PortalProvider } from '@gorhom/portal';
-import Animated, { useSharedValue } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 // Components
@@ -26,6 +26,8 @@ const ProviderComponent = ({
   theme: selectedTheme,
   iconComponent,
   safeAreaInsets,
+  onOpen,
+  onClose,
 }: HoldMenuProviderProps) => {
   if (iconComponent)
     AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
@@ -51,6 +53,25 @@ const ProviderComponent = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTheme]);
 
+  useAnimatedReaction(
+    () => state.value,
+    state => {
+      switch (state) {
+        case CONTEXT_MENU_STATE.ACTIVE: {
+          if (onOpen)
+            runOnJS(onOpen)();
+          break
+        }
+        case CONTEXT_MENU_STATE.END: {
+          if (onClose)
+            runOnJS(onClose)();
+          break
+        }
+      }
+    },
+    [state]
+  );
+
   const internalContextVariables = useMemo(
     () => ({
       state,
diff --git a/src/components/provider/types.d.ts b/src/components/provider/types.d.ts
index 33e2cac..3ed79c8 100644
--- a/src/components/provider/types.d.ts
+++ b/src/components/provider/types.d.ts
@@ -27,4 +27,7 @@ export interface HoldMenuProviderProps {
     bottom: number;
     left: number;
   };
+
+  onOpen?: function;
+  onClose?: function;
 }
diff --git a/website/docs/props.md b/website/docs/props.md
index ffdca34..6e1548e 100644
--- a/website/docs/props.md
+++ b/website/docs/props.md
@@ -48,6 +48,34 @@ const safeAreaInsets = useSafeAreaProvider();
 <HoldMenuProvider safeAreaInsets={safeAreaInsets} />;
 ```
 
+### `onOpen`
+
+Fires callback when menu is opened
+
+#### Example
+
+```tsx
+const onOpen = useCallback(() => {
+  console.log('App onOpen')
+}, []);
+
+<HoldMenuProvider onOpen={onOpen} />;
+```
+
+### `onClose`
+
+Fires callback when menu is opened
+
+#### Example
+
+```tsx
+const onClose = useCallback(() => {
+  console.log('App onClose')
+}, []);
+
+<HoldMenuProvider onClose={onClose} />;
+```
+
 ## HoldItem
 
 ### `items`