react-native-hold-menu-actions 0.1.6

package/lib/commonjs/components/holdItem/HoldItem.js

@@ -0,0 +1,369 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _portal = require("@gorhom/portal");
+
+var _nonSecure = require("nanoid/non-secure");
+
+var Haptics = _interopRequireWildcard(require("expo-haptics"));
+
+var _calculations = require("../../utils/calculations");
+
+var _constants = require("../../constants");
+
+var _hooks = require("../../hooks");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _styleGuide = _interopRequireDefault(require("../../styleGuide"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+//#region reanimated & gesture handler
+//#endregion
+//#region dependencies
+// @ts-ignore
+//#endregion
+//#region utils & types
+const HoldItemComponent = ({
+  items,
+  bottom,
+  containerStyles,
+  disableMove,
+  menuAnchorPosition,
+  activateOn,
+  hapticFeedback,
+  actionParams,
+  closeOnTap,
+  longPressMinDurationMs = 150,
+  children
+}) => {
+  //#region hooks
+  const {
+    state,
+    menuProps,
+    safeAreaInsets
+  } = (0, _hooks.useInternal)();
+  const deviceOrientation = (0, _hooks.useDeviceOrientation)(); //#endregion
+  //#region variables
+
+  const isActive = (0, _reactNativeReanimated.useSharedValue)(false);
+  const isAnimationStarted = (0, _reactNativeReanimated.useSharedValue)(false);
+  const itemRectY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const itemRectX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const itemRectWidth = (0, _reactNativeReanimated.useSharedValue)(0);
+  const itemRectHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const itemScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const transformValue = (0, _reactNativeReanimated.useSharedValue)(0);
+  const transformOrigin = (0, _reactNativeReanimated.useSharedValue)(menuAnchorPosition || 'top-right');
+  const key = (0, _react.useMemo)(() => `hold-item-${(0, _nonSecure.nanoid)()}`, []);
+  const menuHeight = (0, _react.useMemo)(() => {
+    const itemsWithSeparator = items.filter(item => item.withSeparator);
+    return (0, _calculations.calculateMenuHeight)(items.length, itemsWithSeparator.length);
+  }, [items]);
+  const isHold = !activateOn || activateOn === 'hold'; //#endregion
+  //#region refs
+
+  const containerRef = (0, _reactNativeReanimated.useAnimatedRef)(); //#endregion
+  //#region functions
+
+  const hapticResponse = () => {
+    const style = !hapticFeedback ? 'Medium' : hapticFeedback;
+
+    switch (style) {
+      case `Selection`:
+        Haptics.selectionAsync();
+        break;
+
+      case `Light`:
+      case `Medium`:
+      case `Heavy`:
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle[style]);
+        break;
+
+      case `Success`:
+      case `Warning`:
+      case `Error`:
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType[style]);
+        break;
+
+      default:
+    }
+  }; //#endregion
+  //#region worklet functions
+
+
+  const activateAnimation = ctx => {
+    'worklet';
+
+    if (!ctx.didMeasureLayout) {
+      const measured = (0, _reactNativeReanimated.measure)(containerRef);
+      itemRectY.value = measured.pageY;
+      itemRectX.value = measured.pageX;
+      itemRectHeight.value = measured.height;
+      itemRectWidth.value = measured.width;
+
+      if (!menuAnchorPosition) {
+        const position = (0, _calculations.getTransformOrigin)(measured.pageX, itemRectWidth.value, deviceOrientation === 'portrait' ? _constants.WINDOW_WIDTH : _constants.WINDOW_HEIGHT, bottom);
+        transformOrigin.value = position;
+      }
+    }
+  };
+
+  const calculateTransformValue = () => {
+    'worklet';
+
+    const height = deviceOrientation === 'portrait' ? _constants.WINDOW_HEIGHT : _constants.WINDOW_WIDTH;
+    const isAnchorPointTop = transformOrigin.value.includes('top');
+    let tY = 0;
+
+    if (!disableMove) {
+      if (isAnchorPointTop) {
+        const topTransform = itemRectY.value + itemRectHeight.value + menuHeight + _styleGuide.default.spacing + ((safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0);
+        tY = topTransform > height ? height - topTransform : 0;
+      } else {
+        const bottomTransform = itemRectY.value - menuHeight - ((safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0);
+        tY = bottomTransform < 0 ? -bottomTransform + _styleGuide.default.spacing * 2 : 0;
+      }
+    }
+
+    return tY;
+  };
+
+  const setMenuProps = () => {
+    'worklet';
+
+    menuProps.value = {
+      itemHeight: itemRectHeight.value,
+      itemWidth: itemRectWidth.value,
+      itemY: itemRectY.value,
+      itemX: itemRectX.value,
+      anchorPosition: transformOrigin.value,
+      menuHeight: menuHeight,
+      items,
+      transformValue: transformValue.value,
+      actionParams: actionParams || {}
+    };
+  };
+
+  const scaleBack = () => {
+    'worklet';
+
+    itemScale.value = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: _constants.HOLD_ITEM_TRANSFORM_DURATION / 2
+    });
+  };
+
+  const onCompletion = isFinised => {
+    'worklet';
+
+    const isListValid = items && items.length > 0;
+
+    if (isFinised && isListValid) {
+      state.value = _constants.CONTEXT_MENU_STATE.ACTIVE;
+      isActive.value = true;
+      scaleBack();
+
+      if (hapticFeedback !== 'None') {
+        (0, _reactNativeReanimated.runOnJS)(hapticResponse)();
+      }
+    }
+
+    isAnimationStarted.value = false; // TODO: Warn user if item list is empty or not given
+  };
+
+  const scaleHold = () => {
+    'worklet';
+
+    itemScale.value = (0, _reactNativeReanimated.withTiming)(_constants.HOLD_ITEM_SCALE_DOWN_VALUE, {
+      duration: _constants.HOLD_ITEM_SCALE_DOWN_DURATION
+    }, onCompletion);
+  };
+
+  const scaleTap = () => {
+    'worklet';
+
+    isAnimationStarted.value = true;
+    itemScale.value = (0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withTiming)(_constants.HOLD_ITEM_SCALE_DOWN_VALUE, {
+      duration: _constants.HOLD_ITEM_SCALE_DOWN_DURATION
+    }), (0, _reactNativeReanimated.withTiming)(1, {
+      duration: _constants.HOLD_ITEM_TRANSFORM_DURATION / 2
+    }, onCompletion));
+  };
+  /**
+   * When use tap activation ("tap") and trying to tap multiple times,
+   * scale animation is called again despite it is started. This causes a bug.
+   * To prevent this, it is better to check is animation already started.
+   */
+
+
+  const canCallActivateFunctions = () => {
+    'worklet';
+
+    const willActivateWithTap = activateOn === 'double-tap' || activateOn === 'tap';
+    return willActivateWithTap && !isAnimationStarted.value || !willActivateWithTap;
+  }; //#endregion
+  //#region gesture events
+
+
+  const gestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
+    onActive: (_, context) => {
+      if (canCallActivateFunctions()) {
+        if (!context.didMeasureLayout) {
+          activateAnimation(context);
+          transformValue.value = calculateTransformValue();
+          setMenuProps();
+          context.didMeasureLayout = true;
+        }
+
+        if (!isActive.value) {
+          if (isHold) {
+            scaleHold();
+          } else {
+            scaleTap();
+          }
+        }
+      }
+    },
+    onFinish: (_, context) => {
+      context.didMeasureLayout = false;
+
+      if (isHold) {
+        scaleBack();
+      }
+    }
+  });
+  const overlayGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
+    onActive: _ => {
+      if (closeOnTap) state.value = _constants.CONTEXT_MENU_STATE.END;
+    }
+  }); //#endregion
+  //#region animated styles & props
+
+  const animatedContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const animateOpacity = () => (0, _reactNativeReanimated.withDelay)(_constants.HOLD_ITEM_TRANSFORM_DURATION, (0, _reactNativeReanimated.withTiming)(1, {
+      duration: 0
+    }));
+
+    return {
+      opacity: isActive.value ? 0 : animateOpacity(),
+      transform: [{
+        scale: isActive.value ? (0, _reactNativeReanimated.withTiming)(1, {
+          duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
+        }) : itemScale.value
+      }]
+    };
+  });
+
+  const containerStyle = _react.default.useMemo(() => [containerStyles, animatedContainerStyle], [containerStyles, animatedContainerStyle]);
+
+  const animatedPortalStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const animateOpacity = () => (0, _reactNativeReanimated.withDelay)(_constants.HOLD_ITEM_TRANSFORM_DURATION, (0, _reactNativeReanimated.withTiming)(0, {
+      duration: 0
+    }));
+
+    let tY = calculateTransformValue();
+
+    const transformAnimation = () => disableMove ? 0 : isActive.value ? (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION) : (0, _reactNativeReanimated.withTiming)(-0.1, {
+      duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
+    });
+
+    return {
+      zIndex: 10,
+      position: 'absolute',
+      top: itemRectY.value,
+      left: itemRectX.value,
+      width: itemRectWidth.value,
+      height: itemRectHeight.value,
+      opacity: isActive.value ? 1 : animateOpacity(),
+      transform: [{
+        translateY: transformAnimation()
+      }, {
+        scale: isActive.value ? (0, _reactNativeReanimated.withTiming)(1, {
+          duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
+        }) : itemScale.value
+      }]
+    };
+  });
+  const portalContainerStyle = (0, _react.useMemo)(() => [_styles.default.holdItem, animatedPortalStyle], [animatedPortalStyle]);
+  const animatedPortalProps = (0, _reactNativeReanimated.useAnimatedProps)(() => ({
+    pointerEvents: isActive.value ? 'auto' : 'none'
+  })); //#endregion
+  //#region animated effects
+
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => state.value, _state => {
+    if (_state === _constants.CONTEXT_MENU_STATE.END) {
+      isActive.value = false;
+    }
+  }); //#endregion
+  //#region components
+
+  const GestureHandler = (0, _react.useMemo)(() => {
+    switch (activateOn) {
+      case `double-tap`:
+        return ({
+          children: handlerChildren
+        }) => /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+          numberOfTaps: 2,
+          onHandlerStateChange: gestureEvent
+        }, handlerChildren);
+
+      case `tap`:
+        return ({
+          children: handlerChildren
+        }) => /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+          numberOfTaps: 1,
+          onHandlerStateChange: gestureEvent
+        }, handlerChildren);
+      // default is hold
+
+      default:
+        return ({
+          children: handlerChildren
+        }) => /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.LongPressGestureHandler, {
+          minDurationMs: longPressMinDurationMs,
+          onHandlerStateChange: gestureEvent
+        }, handlerChildren);
+    }
+  }, [activateOn, gestureEvent]);
+  const PortalOverlay = (0, _react.useMemo)(() => {
+    return () => /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+      numberOfTaps: 1,
+      onHandlerStateChange: overlayGestureEvent
+    }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+      style: _styles.default.portalOverlay
+    }));
+  }, [overlayGestureEvent]); //#endregion
+  //#region render
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GestureHandler, null, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    ref: containerRef,
+    style: containerStyle
+  }, children)), /*#__PURE__*/_react.default.createElement(_portal.Portal, {
+    key: key,
+    name: key
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    key: key,
+    style: portalContainerStyle,
+    animatedProps: animatedPortalProps
+  }, /*#__PURE__*/_react.default.createElement(PortalOverlay, null), children))); //#endregion
+};
+
+const HoldItem = /*#__PURE__*/(0, _react.memo)(HoldItemComponent);
+var _default = HoldItem;
+exports.default = _default;
+//# sourceMappingURL=HoldItem.js.map

package/lib/commonjs/components/holdItem/HoldItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HoldItem.tsx"],"names":["HoldItemComponent","items","bottom","containerStyles","disableMove","menuAnchorPosition","activateOn","hapticFeedback","actionParams","closeOnTap","longPressMinDurationMs","children","state","menuProps","safeAreaInsets","deviceOrientation","isActive","isAnimationStarted","itemRectY","itemRectX","itemRectWidth","itemRectHeight","itemScale","transformValue","transformOrigin","key","menuHeight","itemsWithSeparator","filter","item","withSeparator","length","isHold","containerRef","hapticResponse","style","Haptics","selectionAsync","impactAsync","ImpactFeedbackStyle","notificationAsync","NotificationFeedbackType","activateAnimation","ctx","didMeasureLayout","measured","value","pageY","pageX","height","width","position","WINDOW_WIDTH","WINDOW_HEIGHT","calculateTransformValue","isAnchorPointTop","includes","tY","topTransform","styleGuide","spacing","bottomTransform","top","setMenuProps","itemHeight","itemWidth","itemY","itemX","anchorPosition","scaleBack","duration","HOLD_ITEM_TRANSFORM_DURATION","onCompletion","isFinised","isListValid","CONTEXT_MENU_STATE","ACTIVE","scaleHold","HOLD_ITEM_SCALE_DOWN_VALUE","HOLD_ITEM_SCALE_DOWN_DURATION","scaleTap","canCallActivateFunctions","willActivateWithTap","gestureEvent","onActive","_","context","onFinish","overlayGestureEvent","END","animatedContainerStyle","animateOpacity","opacity","transform","scale","containerStyle","React","useMemo","animatedPortalStyle","transformAnimation","SPRING_CONFIGURATION","zIndex","left","translateY","portalContainerStyle","styles","holdItem","animatedPortalProps","pointerEvents","_state","GestureHandler","handlerChildren","PortalOverlay","portalOverlay","HoldItem"],"mappings":"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","sourcesContent":["import React, { memo, useMemo } from 'react';\nimport { ViewProps } from 'react-native';\n\n//#region reanimated & gesture handler\nimport {\n  TapGestureHandler,\n  LongPressGestureHandler,\n  TapGestureHandlerGestureEvent,\n  LongPressGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n  measure,\n  runOnJS,\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedRef,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withTiming,\n  withSequence,\n  withSpring,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n//#endregion\n\n//#region dependencies\nimport { Portal } from '@gorhom/portal';\nimport { nanoid } from 'nanoid/non-secure';\n// @ts-ignore\nimport * as Haptics from 'expo-haptics';\n//#endregion\n\n//#region utils & types\nimport {\n  TransformOriginAnchorPosition,\n  getTransformOrigin,\n  calculateMenuHeight,\n} from '../../utils/calculations';\nimport {\n  HOLD_ITEM_TRANSFORM_DURATION,\n  HOLD_ITEM_SCALE_DOWN_DURATION,\n  HOLD_ITEM_SCALE_DOWN_VALUE,\n  SPRING_CONFIGURATION,\n  WINDOW_HEIGHT,\n  WINDOW_WIDTH,\n  CONTEXT_MENU_STATE,\n} from '../../constants';\nimport { useDeviceOrientation } from '../../hooks';\nimport styles from './styles';\n\nimport type { HoldItemProps, GestureHandlerProps } from './types';\nimport styleGuide from '../../styleGuide';\nimport { useInternal } from '../../hooks';\n//#endregion\n\ntype Context = { didMeasureLayout: boolean };\n\nconst HoldItemComponent = ({\n  items,\n  bottom,\n  containerStyles,\n  disableMove,\n  menuAnchorPosition,\n  activateOn,\n  hapticFeedback,\n  actionParams,\n  closeOnTap,\n  longPressMinDurationMs = 150,\n  children,\n}: HoldItemProps) => {\n  //#region hooks\n  const { state, menuProps, safeAreaInsets } = useInternal();\n  const deviceOrientation = useDeviceOrientation();\n  //#endregion\n\n  //#region variables\n  const isActive = useSharedValue(false);\n  const isAnimationStarted = useSharedValue(false);\n\n  const itemRectY = useSharedValue<number>(0);\n  const itemRectX = useSharedValue<number>(0);\n  const itemRectWidth = useSharedValue<number>(0);\n  const itemRectHeight = useSharedValue<number>(0);\n  const itemScale = useSharedValue<number>(1);\n  const transformValue = useSharedValue<number>(0);\n\n  const transformOrigin = useSharedValue<TransformOriginAnchorPosition>(\n    menuAnchorPosition || 'top-right'\n  );\n\n  const key = useMemo(() => `hold-item-${nanoid()}`, []);\n  const menuHeight = useMemo(() => {\n    const itemsWithSeparator = items.filter(item => item.withSeparator);\n    return calculateMenuHeight(items.length, itemsWithSeparator.length);\n  }, [items]);\n\n  const isHold = !activateOn || activateOn === 'hold';\n  //#endregion\n\n  //#region refs\n  const containerRef = useAnimatedRef<Animated.View>();\n  //#endregion\n\n  //#region functions\n  const hapticResponse = () => {\n    const style = !hapticFeedback ? 'Medium' : hapticFeedback;\n    switch (style) {\n      case `Selection`:\n        Haptics.selectionAsync();\n        break;\n      case `Light`:\n      case `Medium`:\n      case `Heavy`:\n        Haptics.impactAsync(Haptics.ImpactFeedbackStyle[style]);\n        break;\n      case `Success`:\n      case `Warning`:\n      case `Error`:\n        Haptics.notificationAsync(Haptics.NotificationFeedbackType[style]);\n        break;\n      default:\n    }\n  };\n  //#endregion\n\n  //#region worklet functions\n  const activateAnimation = (ctx: any) => {\n    'worklet';\n    if (!ctx.didMeasureLayout) {\n      const measured = measure(containerRef);\n\n      itemRectY.value = measured.pageY;\n      itemRectX.value = measured.pageX;\n      itemRectHeight.value = measured.height;\n      itemRectWidth.value = measured.width;\n\n      if (!menuAnchorPosition) {\n        const position = getTransformOrigin(\n          measured.pageX,\n          itemRectWidth.value,\n          deviceOrientation === 'portrait' ? WINDOW_WIDTH : WINDOW_HEIGHT,\n          bottom\n        );\n        transformOrigin.value = position;\n      }\n    }\n  };\n\n  const calculateTransformValue = () => {\n    'worklet';\n\n    const height =\n      deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;\n\n    const isAnchorPointTop = transformOrigin.value.includes('top');\n\n    let tY = 0;\n    if (!disableMove) {\n      if (isAnchorPointTop) {\n        const topTransform =\n          itemRectY.value +\n          itemRectHeight.value +\n          menuHeight +\n          styleGuide.spacing +\n          (safeAreaInsets?.bottom || 0);\n\n        tY = topTransform > height ? height - topTransform : 0;\n      } else {\n        const bottomTransform =\n          itemRectY.value - menuHeight - (safeAreaInsets?.top || 0);\n        tY =\n          bottomTransform < 0 ? -bottomTransform + styleGuide.spacing * 2 : 0;\n      }\n    }\n    return tY;\n  };\n\n  const setMenuProps = () => {\n    'worklet';\n\n    menuProps.value = {\n      itemHeight: itemRectHeight.value,\n      itemWidth: itemRectWidth.value,\n      itemY: itemRectY.value,\n      itemX: itemRectX.value,\n      anchorPosition: transformOrigin.value,\n      menuHeight: menuHeight,\n      items,\n      transformValue: transformValue.value,\n      actionParams: actionParams || {},\n    };\n  };\n\n  const scaleBack = () => {\n    'worklet';\n    itemScale.value = withTiming(1, {\n      duration: HOLD_ITEM_TRANSFORM_DURATION / 2,\n    });\n  };\n\n  const onCompletion = (isFinised?: boolean) => {\n    'worklet';\n    const isListValid = items && items.length > 0;\n    if (isFinised && isListValid) {\n      state.value = CONTEXT_MENU_STATE.ACTIVE;\n      isActive.value = true;\n      scaleBack();\n      if (hapticFeedback !== 'None') {\n        runOnJS(hapticResponse)();\n      }\n    }\n\n    isAnimationStarted.value = false;\n\n    // TODO: Warn user if item list is empty or not given\n  };\n\n  const scaleHold = () => {\n    'worklet';\n    itemScale.value = withTiming(\n      HOLD_ITEM_SCALE_DOWN_VALUE,\n      { duration: HOLD_ITEM_SCALE_DOWN_DURATION },\n      onCompletion\n    );\n  };\n\n  const scaleTap = () => {\n    'worklet';\n    isAnimationStarted.value = true;\n\n    itemScale.value = withSequence(\n      withTiming(HOLD_ITEM_SCALE_DOWN_VALUE, {\n        duration: HOLD_ITEM_SCALE_DOWN_DURATION,\n      }),\n      withTiming(\n        1,\n        {\n          duration: HOLD_ITEM_TRANSFORM_DURATION / 2,\n        },\n        onCompletion\n      )\n    );\n  };\n\n  /**\n   * When use tap activation (\"tap\") and trying to tap multiple times,\n   * scale animation is called again despite it is started. This causes a bug.\n   * To prevent this, it is better to check is animation already started.\n   */\n  const canCallActivateFunctions = () => {\n    'worklet';\n    const willActivateWithTap =\n      activateOn === 'double-tap' || activateOn === 'tap';\n\n    return (\n      (willActivateWithTap && !isAnimationStarted.value) || !willActivateWithTap\n    );\n  };\n  //#endregion\n\n  //#region gesture events\n  const gestureEvent = useAnimatedGestureHandler<\n    LongPressGestureHandlerGestureEvent | TapGestureHandlerGestureEvent,\n    Context\n  >({\n    onActive: (_, context) => {\n      if (canCallActivateFunctions()) {\n        if (!context.didMeasureLayout) {\n          activateAnimation(context);\n          transformValue.value = calculateTransformValue();\n          setMenuProps();\n          context.didMeasureLayout = true;\n        }\n\n        if (!isActive.value) {\n          if (isHold) {\n            scaleHold();\n          } else {\n            scaleTap();\n          }\n        }\n      }\n    },\n    onFinish: (_, context) => {\n      context.didMeasureLayout = false;\n      if (isHold) {\n        scaleBack();\n      }\n    },\n  });\n\n  const overlayGestureEvent = useAnimatedGestureHandler<\n    TapGestureHandlerGestureEvent,\n    Context\n  >({\n    onActive: _ => {\n      if (closeOnTap) state.value = CONTEXT_MENU_STATE.END;\n    },\n  });\n  //#endregion\n\n  //#region animated styles & props\n  const animatedContainerStyle = useAnimatedStyle(() => {\n    const animateOpacity = () =>\n      withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(1, { duration: 0 }));\n\n    return {\n      opacity: isActive.value ? 0 : animateOpacity(),\n      transform: [\n        {\n          scale: isActive.value\n            ? withTiming(1, { duration: HOLD_ITEM_TRANSFORM_DURATION })\n            : itemScale.value,\n        },\n      ],\n    };\n  });\n  const containerStyle = React.useMemo(\n    () => [containerStyles, animatedContainerStyle],\n    [containerStyles, animatedContainerStyle]\n  );\n\n  const animatedPortalStyle = useAnimatedStyle(() => {\n    const animateOpacity = () =>\n      withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(0, { duration: 0 }));\n\n    let tY = calculateTransformValue();\n    const transformAnimation = () =>\n      disableMove\n        ? 0\n        : isActive.value\n        ? withSpring(tY, SPRING_CONFIGURATION)\n        : withTiming(-0.1, { duration: HOLD_ITEM_TRANSFORM_DURATION });\n\n    return {\n      zIndex: 10,\n      position: 'absolute',\n      top: itemRectY.value,\n      left: itemRectX.value,\n      width: itemRectWidth.value,\n      height: itemRectHeight.value,\n      opacity: isActive.value ? 1 : animateOpacity(),\n      transform: [\n        {\n          translateY: transformAnimation(),\n        },\n        {\n          scale: isActive.value\n            ? withTiming(1, { duration: HOLD_ITEM_TRANSFORM_DURATION })\n            : itemScale.value,\n        },\n      ],\n    };\n  });\n  const portalContainerStyle = useMemo(\n    () => [styles.holdItem, animatedPortalStyle],\n    [animatedPortalStyle]\n  );\n\n  const animatedPortalProps = useAnimatedProps<ViewProps>(() => ({\n    pointerEvents: isActive.value ? 'auto' : 'none',\n  }));\n  //#endregion\n\n  //#region animated effects\n  useAnimatedReaction(\n    () => state.value,\n    _state => {\n      if (_state === CONTEXT_MENU_STATE.END) {\n        isActive.value = false;\n      }\n    }\n  );\n  //#endregion\n\n  //#region components\n  const GestureHandler = useMemo(() => {\n    switch (activateOn) {\n      case `double-tap`:\n        return ({ children: handlerChildren }: GestureHandlerProps) => (\n          <TapGestureHandler\n            numberOfTaps={2}\n            onHandlerStateChange={gestureEvent}\n          >\n            {handlerChildren}\n          </TapGestureHandler>\n        );\n      case `tap`:\n        return ({ children: handlerChildren }: GestureHandlerProps) => (\n          <TapGestureHandler\n            numberOfTaps={1}\n            onHandlerStateChange={gestureEvent}\n          >\n            {handlerChildren}\n          </TapGestureHandler>\n        );\n      // default is hold\n      default:\n        return ({ children: handlerChildren }: GestureHandlerProps) => (\n          <LongPressGestureHandler\n            minDurationMs={longPressMinDurationMs}\n            onHandlerStateChange={gestureEvent}\n          >\n            {handlerChildren}\n          </LongPressGestureHandler>\n        );\n    }\n  }, [activateOn, gestureEvent]);\n\n  const PortalOverlay = useMemo(() => {\n    return () => (\n      <TapGestureHandler\n        numberOfTaps={1}\n        onHandlerStateChange={overlayGestureEvent}\n      >\n        <Animated.View style={styles.portalOverlay} />\n      </TapGestureHandler>\n    );\n  }, [overlayGestureEvent]);\n  //#endregion\n\n  //#region render\n  return (\n    <>\n      <GestureHandler>\n        <Animated.View ref={containerRef} style={containerStyle}>\n          {children}\n        </Animated.View>\n      </GestureHandler>\n\n      <Portal key={key} name={key}>\n        <Animated.View\n          key={key}\n          style={portalContainerStyle}\n          animatedProps={animatedPortalProps}\n        >\n          <PortalOverlay />\n          {children}\n        </Animated.View>\n      </Portal>\n    </>\n  );\n  //#endregion\n};\n\nconst HoldItem = memo(HoldItemComponent);\n\nexport default HoldItem;\n"]}

package/lib/commonjs/components/holdItem/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _HoldItem.default;
+  }
+});
+
+var _HoldItem = _interopRequireDefault(require("./HoldItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/holdItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './HoldItem';\nexport type { HoldItemProps } from './types';\n"]}

package/lib/commonjs/components/holdItem/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactNative = require("react-native");
+
+const styles = _reactNative.StyleSheet.create({
+  holdItem: {
+    zIndex: 10,
+    position: 'absolute'
+  },
+  portalOverlay: { ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 15
+  }
+});
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/components/holdItem/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.ts"],"names":["styles","StyleSheet","create","holdItem","zIndex","position","portalOverlay","absoluteFillObject"],"mappings":";;;;;;;AAAA;;AAEA,MAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,QAAQ,EAAE;AAAEC,IAAAA,MAAM,EAAE,EAAV;AAAcC,IAAAA,QAAQ,EAAE;AAAxB,GADqB;AAE/BC,EAAAA,aAAa,EAAE,EACb,GAAGL,wBAAWM,kBADD;AAEbH,IAAAA,MAAM,EAAE;AAFK;AAFgB,CAAlB,CAAf;;eAQeJ,M","sourcesContent":["import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  holdItem: { zIndex: 10, position: 'absolute' },\n  portalOverlay: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 15,\n  },\n});\n\nexport default styles;\n"]}

package/lib/commonjs/components/holdItem/types.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.d.js.map

package/lib/commonjs/components/holdItem/types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/commonjs/components/icon/Icon.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _hooks = require("../../hooks");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Icon = ({
+  iconComponent,
+  name
+}) => {
+  const {
+    theme
+  } = (0, _hooks.useInternal)();
+
+  let AnimatedIcon = _reactNativeReanimated.default.createAnimatedComponent(iconComponent);
+
+  const iconProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    return {
+      color: theme.value === 'light' ? 'black' : 'white'
+    };
+  }, [theme]);
+  return /*#__PURE__*/_react.default.createElement(AnimatedIcon, {
+    name: name,
+    size: 18,
+    animatedProps: iconProps
+  });
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(Icon);
+
+exports.default = _default;
+//# sourceMappingURL=Icon.js.map

package/lib/commonjs/components/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Icon.tsx"],"names":["Icon","iconComponent","name","theme","AnimatedIcon","Animated","createAnimatedComponent","iconProps","color","value"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;AAcA,MAAMA,IAAI,GAAG,CAAC;AAAEC,EAAAA,aAAF;AAAiBC,EAAAA;AAAjB,CAAD,KAAwC;AACnD,QAAM;AAAEC,IAAAA;AAAF,MAAY,yBAAlB;;AACA,MAAIC,YAAY,GAAGC,+BAASC,uBAAT,CACjBL,aADiB,CAAnB;;AAIA,QAAMM,SAAS,GAAG,6CAAiB,MAAM;AACvC,WAAO;AACLC,MAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,KAAgB,OAAhB,GAA0B,OAA1B,GAAoC;AADtC,KAAP;AAGD,GAJiB,EAIf,CAACN,KAAD,CAJe,CAAlB;AAMA,sBAAO,6BAAC,YAAD;AAAc,IAAA,IAAI,EAAED,IAApB;AAA0B,IAAA,IAAI,EAAE,EAAhC;AAAoC,IAAA,aAAa,EAAEK;AAAnD,IAAP;AACD,CAbD;;4BAee,iBAAKP,IAAL,C","sourcesContent":["import React, { memo } from 'react';\n\nimport Animated, { useAnimatedProps } from 'react-native-reanimated';\nimport { useInternal } from '../../hooks';\n\ntype IconComponentProps = {\n  name: string;\n  size: number;\n  animatedProps: Partial<{ color: string }>;\n};\n\n// Update iconComponent type, React.ComponentClass<IconComponentProps, any>\ntype IconProps = {\n  iconComponent: any;\n  name: string;\n};\n\nconst Icon = ({ iconComponent, name }: IconProps) => {\n  const { theme } = useInternal();\n  let AnimatedIcon = Animated.createAnimatedComponent<IconComponentProps>(\n    iconComponent\n  );\n\n  const iconProps = useAnimatedProps(() => {\n    return {\n      color: theme.value === 'light' ? 'black' : 'white',\n    };\n  }, [theme]);\n\n  return <AnimatedIcon name={name} size={18} animatedProps={iconProps} />;\n};\n\nexport default memo(Icon);\n"]}

package/lib/commonjs/components/icon/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Icon';\n"]}

package/lib/commonjs/components/menu/Menu.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _MenuList = _interopRequireDefault(require("./MenuList"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _hooks = require("../../hooks");
+
+var _constants = require("../../constants");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MenuComponent = () => {
+  const {
+    state,
+    menuProps
+  } = (0, _hooks.useInternal)();
+  const wrapperStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
+    const top = anchorPositionVertical === 'top' ? menuProps.value.itemHeight + menuProps.value.itemY + 8 : menuProps.value.itemY - 8;
+    const left = menuProps.value.itemX;
+    const width = menuProps.value.itemWidth;
+    const tY = menuProps.value.transformValue;
+    return {
+      top,
+      left,
+      width,
+      transform: [{
+        translateY: state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION) : (0, _reactNativeReanimated.withTiming)(0, {
+          duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
+        })
+      }]
+    };
+  }, [menuProps]);
+  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [_styles.default.menuWrapper, wrapperStyles]
+  }, /*#__PURE__*/_react.default.createElement(_MenuList.default, null));
+};
+
+const Menu = /*#__PURE__*/_react.default.memo(MenuComponent);
+
+var _default = Menu;
+exports.default = _default;
+//# sourceMappingURL=Menu.js.map

package/lib/commonjs/components/menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Menu.tsx"],"names":["MenuComponent","state","menuProps","wrapperStyles","anchorPositionVertical","value","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","transformValue","transform","translateY","CONTEXT_MENU_STATE","ACTIVE","SPRING_CONFIGURATION","duration","HOLD_ITEM_TRANSFORM_DURATION","styles","menuWrapper","Menu","React","memo"],"mappings":";;;;;;;AAAA;;AAEA;;AAMA;;AAEA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,aAAa,GAAG,MAAM;AAC1B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAuB,yBAA7B;AAEA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,UAAMC,sBAAsB,GAAGF,SAAS,CAACG,KAAV,CAAgBC,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAA/B;AAEA,UAAMC,GAAG,GACPJ,sBAAsB,KAAK,KAA3B,GACIF,SAAS,CAACG,KAAV,CAAgBI,UAAhB,GAA6BP,SAAS,CAACG,KAAV,CAAgBK,KAA7C,GAAqD,CADzD,GAEIR,SAAS,CAACG,KAAV,CAAgBK,KAAhB,GAAwB,CAH9B;AAIA,UAAMC,IAAI,GAAGT,SAAS,CAACG,KAAV,CAAgBO,KAA7B;AACA,UAAMC,KAAK,GAAGX,SAAS,CAACG,KAAV,CAAgBS,SAA9B;AACA,UAAMC,EAAE,GAAGb,SAAS,CAACG,KAAV,CAAgBW,cAA3B;AAEA,WAAO;AACLR,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILI,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EACRjB,KAAK,CAACI,KAAN,KAAgBc,8BAAmBC,MAAnC,GACI,uCAAWL,EAAX,EAAeM,+BAAf,CADJ,GAEI,uCAAW,CAAX,EAAc;AAAEC,UAAAA,QAAQ,EAAEC;AAAZ,SAAd;AAJR,OADS;AAJN,KAAP;AAaD,GAxBqB,EAwBnB,CAACrB,SAAD,CAxBmB,CAAtB;AA0BA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACsB,gBAAOC,WAAR,EAAqBtB,aAArB;AAAtB,kBACE,6BAAC,iBAAD,OADF,CADF;AAKD,CAlCD;;AAoCA,MAAMuB,IAAI,gBAAGC,eAAMC,IAAN,CAAW5B,aAAX,CAAb;;eAEe0B,I","sourcesContent":["import React from 'react';\n\nimport Animated, {\n  useAnimatedStyle,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport MenuList from './MenuList';\n\nimport styles from './styles';\nimport { useInternal } from '../../hooks';\nimport {\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n  SPRING_CONFIGURATION,\n} from '../../constants';\n\nconst MenuComponent = () => {\n  const { state, menuProps } = useInternal();\n\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n\n    const top =\n      anchorPositionVertical === 'top'\n        ? menuProps.value.itemHeight + menuProps.value.itemY + 8\n        : menuProps.value.itemY - 8;\n    const left = menuProps.value.itemX;\n    const width = menuProps.value.itemWidth;\n    const tY = menuProps.value.transformValue;\n\n    return {\n      top,\n      left,\n      width,\n      transform: [\n        {\n          translateY:\n            state.value === CONTEXT_MENU_STATE.ACTIVE\n              ? withSpring(tY, SPRING_CONFIGURATION)\n              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  }, [menuProps]);\n\n  return (\n    <Animated.View style={[styles.menuWrapper, wrapperStyles]}>\n      <MenuList />\n    </Animated.View>\n  );\n};\n\nconst Menu = React.memo(MenuComponent);\n\nexport default Menu;\n"]}