Added changes from enesozturk/react-native-hold-menu#115

dmytro-ivonin · Jan 10, 2024 · f503595 · f503595
1 parent dd0150d
commit f503595
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -5,9 +5,19 @@
 [![npm](https://img.shields.io/badge/Types-included-blue?style=flat-square)](https://www.npmjs.com/package/@hadnet/react-native-hold-menu-no-expo)
 [![npm](https://img.shields.io/npm/dt/@hadnet/react-native-hold-menu-no-expo.svg?style=flat-square)](https://www.npmjs.com/package/@hadnet/react-native-hold-menu-no-expo)
 
+A performant, easy to use hold to open context menu for React Native CLI projects powered by Reanimated.
+
+# WARNING
+
+This is a fork of
+  https://github.com/hadnet/react-native-hold-menu-no-expo
+
+which is port of https://github.com/enesozturk/react-native-hold-menu but for React Native CLI (no EXPO).
+
+This particular fork is created to include fix of issue "Menu list items are pressable after close #76"
+https://github.com/enesozturk/react-native-hold-menu/pull/115
 
 
-A performant, easy to use hold to open context menu for React Native CLI projects powered by Reanimated.
 
 ## Dependencies
 

diff --git a/src/components/holdItem/HoldItem.tsx b/src/components/holdItem/HoldItem.tsx
@@ -332,12 +332,10 @@ const HoldItemComponent = ({
       disableMove
         ? 0
         : isActive.value
-        ? withSpring(tY, SPRING_CONFIGURATION)
-        : withTiming(-0.1, {duration: HOLD_ITEM_TRANSFORM_DURATION});
+          ? withSpring(tY, SPRING_CONFIGURATION)
+          : withTiming(-0.1, {duration: HOLD_ITEM_TRANSFORM_DURATION});
 
     return {
-      zIndex: 10,
-      position: 'absolute',
       top: itemRectY.value,
       left: itemRectX.value,
       width: itemRectWidth.value,
@@ -355,6 +353,7 @@ const HoldItemComponent = ({
       ],
     };
   });
+
   const portalContainerStyle = useMemo(
     () => [styles.holdItem, animatedPortalStyle],
     [animatedPortalStyle]

diff --git a/src/components/holdItem/styles.ts b/src/components/holdItem/styles.ts
@@ -1,7 +1,10 @@
 import {StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
-  holdItem: {zIndex: 10, position: 'absolute'},
+  holdItem: {
+    zIndex: 10,
+    position: 'absolute',
+  },
   portalOverlay: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 15,

diff --git a/src/components/menu/MenuList.tsx b/src/components/menu/MenuList.tsx
@@ -39,6 +39,7 @@ const MenuListComponent = () => {
   const {state, theme, menuProps, menuBgColors} = useInternal();
 
   const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);
+  const [isVisible, setIsVisible] = React.useState<boolean>(state.value === CONTEXT_MENU_STATE.ACTIVE);
 
   const menuHeight = useDerivedValue(() => {
     const itemsWithSeparator = menuProps.value.items.filter(
@@ -64,16 +65,20 @@ const MenuListComponent = () => {
     );
 
     const _leftPosition = leftOrRight(menuProps);
+    const isMenuActive = state.value === CONTEXT_MENU_STATE.ACTIVE
 
     const menuScaleAnimation = () =>
-      state.value === CONTEXT_MENU_STATE.ACTIVE
+      isMenuActive
         ? withSpring(1, SPRING_CONFIGURATION_MENU)
         : withTiming(0, {
-            duration: HOLD_ITEM_TRANSFORM_DURATION,
-          });
+          duration: HOLD_ITEM_TRANSFORM_DURATION,
+        }, finished => {
+          if (finished && !isMenuActive)
+            runOnJS(setIsVisible)(false)
+        });
 
     const opacityAnimation = () =>
-      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
+      withTiming(isMenuActive ? 1 : 0, {
         duration: HOLD_ITEM_TRANSFORM_DURATION,
       });
 
@@ -101,8 +106,8 @@ const MenuListComponent = () => {
             ? menuBgColors?.light ?? 'rgba(255, 255, 255, .75)'
             : menuBgColors?.light ?? 'rgba(255, 255, 255, .95)'
           : IS_IOS
-          ? menuBgColors?.dark ?? 'rgba(0,0,0,0.5)'
-          : menuBgColors?.dark ?? 'rgba(39, 39, 39, .8)',
+            ? menuBgColors?.dark ?? 'rgba(0,0,0,0.5)'
+            : menuBgColors?.dark ?? 'rgba(39, 39, 39, .8)',
     };
   }, [theme]);
 
@@ -115,6 +120,15 @@ const MenuListComponent = () => {
     prevList.value = items;
   };
 
+  useAnimatedReaction(
+    () => state.value === CONTEXT_MENU_STATE.ACTIVE,
+    isMenuActive => {
+      if (isMenuActive)
+        runOnJS(setIsVisible)(true)
+    },
+    [state]
+  )
+
   useAnimatedReaction(
     () => menuProps.value.items,
     _items => {
@@ -125,20 +139,27 @@ const MenuListComponent = () => {
     [menuProps]
   );
 
+  if (!isVisible)
+    return null
+
   return (
-    <AnimatedView
-      blurAmount={100}
-      animatedProps={animatedProps}
-      style={[styles.menuContainer, messageStyles]}>
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFillObject,
-          styles.menuInnerContainer,
-          animatedInnerContainerStyle,
-        ]}>
-        <MenuItems items={itemList} />
-      </Animated.View>
-    </AnimatedView>
+    <Animated.View style={[styles.menuContainer, messageStyles]}>
+      <AnimatedView
+        intensity={100}
+        animatedProps={animatedProps}
+        style={StyleSheet.absoluteFillObject}
+      >
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFillObject,
+            styles.menuInnerContainer,
+            animatedInnerContainerStyle,
+          ]}
+        >
+          <MenuItems items={itemList} />
+        </Animated.View>
+      </AnimatedView>
+    </Animated.View>
   );
 };
 

diff --git a/src/components/menu/styles.ts b/src/components/menu/styles.ts
@@ -18,7 +18,6 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
     overflow: 'hidden',
-    zIndex: 15,
   },
   menuInnerContainer: {
     display: 'flex',