react-native-hold-menu-actions 0.1.6

package/src/components/holdItem/HoldItem.tsx

@@ -0,0 +1,449 @@
+import React, { memo, useMemo } from 'react';
+import { ViewProps } from 'react-native';
+
+//#region reanimated & gesture handler
+import {
+  TapGestureHandler,
+  LongPressGestureHandler,
+  TapGestureHandlerGestureEvent,
+  LongPressGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
+import Animated, {
+  measure,
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedProps,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+  withSequence,
+  withSpring,
+  useAnimatedReaction,
+} from 'react-native-reanimated';
+//#endregion
+
+//#region dependencies
+import { Portal } from '@gorhom/portal';
+import { nanoid } from 'nanoid/non-secure';
+// @ts-ignore
+import * as Haptics from 'expo-haptics';
+//#endregion
+
+//#region utils & types
+import {
+  TransformOriginAnchorPosition,
+  getTransformOrigin,
+  calculateMenuHeight,
+} from '../../utils/calculations';
+import {
+  HOLD_ITEM_TRANSFORM_DURATION,
+  HOLD_ITEM_SCALE_DOWN_DURATION,
+  HOLD_ITEM_SCALE_DOWN_VALUE,
+  SPRING_CONFIGURATION,
+  WINDOW_HEIGHT,
+  WINDOW_WIDTH,
+  CONTEXT_MENU_STATE,
+} from '../../constants';
+import { useDeviceOrientation } from '../../hooks';
+import styles from './styles';
+
+import type { HoldItemProps, GestureHandlerProps } from './types';
+import styleGuide from '../../styleGuide';
+import { useInternal } from '../../hooks';
+//#endregion
+
+type Context = { didMeasureLayout: boolean };
+
+const HoldItemComponent = ({
+  items,
+  bottom,
+  containerStyles,
+  disableMove,
+  menuAnchorPosition,
+  activateOn,
+  hapticFeedback,
+  actionParams,
+  closeOnTap,
+  longPressMinDurationMs = 150,
+  children,
+}: HoldItemProps) => {
+  //#region hooks
+  const { state, menuProps, safeAreaInsets } = useInternal();
+  const deviceOrientation = useDeviceOrientation();
+  //#endregion
+
+  //#region variables
+  const isActive = useSharedValue(false);
+  const isAnimationStarted = useSharedValue(false);
+
+  const itemRectY = useSharedValue<number>(0);
+  const itemRectX = useSharedValue<number>(0);
+  const itemRectWidth = useSharedValue<number>(0);
+  const itemRectHeight = useSharedValue<number>(0);
+  const itemScale = useSharedValue<number>(1);
+  const transformValue = useSharedValue<number>(0);
+
+  const transformOrigin = useSharedValue<TransformOriginAnchorPosition>(
+    menuAnchorPosition || 'top-right'
+  );
+
+  const key = useMemo(() => `hold-item-${nanoid()}`, []);
+  const menuHeight = useMemo(() => {
+    const itemsWithSeparator = items.filter(item => item.withSeparator);
+    return calculateMenuHeight(items.length, itemsWithSeparator.length);
+  }, [items]);
+
+  const isHold = !activateOn || activateOn === 'hold';
+  //#endregion
+
+  //#region refs
+  const containerRef = useAnimatedRef<Animated.View>();
+  //#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: any) => {
+    'worklet';
+    if (!ctx.didMeasureLayout) {
+      const measured = measure(containerRef);
+
+      itemRectY.value = measured.pageY;
+      itemRectX.value = measured.pageX;
+      itemRectHeight.value = measured.height;
+      itemRectWidth.value = measured.width;
+
+      if (!menuAnchorPosition) {
+        const position = getTransformOrigin(
+          measured.pageX,
+          itemRectWidth.value,
+          deviceOrientation === 'portrait' ? WINDOW_WIDTH : WINDOW_HEIGHT,
+          bottom
+        );
+        transformOrigin.value = position;
+      }
+    }
+  };
+
+  const calculateTransformValue = () => {
+    'worklet';
+
+    const height =
+      deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;
+
+    const isAnchorPointTop = transformOrigin.value.includes('top');
+
+    let tY = 0;
+    if (!disableMove) {
+      if (isAnchorPointTop) {
+        const topTransform =
+          itemRectY.value +
+          itemRectHeight.value +
+          menuHeight +
+          styleGuide.spacing +
+          (safeAreaInsets?.bottom || 0);
+
+        tY = topTransform > height ? height - topTransform : 0;
+      } else {
+        const bottomTransform =
+          itemRectY.value - menuHeight - (safeAreaInsets?.top || 0);
+        tY =
+          bottomTransform < 0 ? -bottomTransform + styleGuide.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 = withTiming(1, {
+      duration: HOLD_ITEM_TRANSFORM_DURATION / 2,
+    });
+  };
+
+  const onCompletion = (isFinised?: boolean) => {
+    'worklet';
+    const isListValid = items && items.length > 0;
+    if (isFinised && isListValid) {
+      state.value = CONTEXT_MENU_STATE.ACTIVE;
+      isActive.value = true;
+      scaleBack();
+      if (hapticFeedback !== 'None') {
+        runOnJS(hapticResponse)();
+      }
+    }
+
+    isAnimationStarted.value = false;
+
+    // TODO: Warn user if item list is empty or not given
+  };
+
+  const scaleHold = () => {
+    'worklet';
+    itemScale.value = withTiming(
+      HOLD_ITEM_SCALE_DOWN_VALUE,
+      { duration: HOLD_ITEM_SCALE_DOWN_DURATION },
+      onCompletion
+    );
+  };
+
+  const scaleTap = () => {
+    'worklet';
+    isAnimationStarted.value = true;
+
+    itemScale.value = withSequence(
+      withTiming(HOLD_ITEM_SCALE_DOWN_VALUE, {
+        duration: HOLD_ITEM_SCALE_DOWN_DURATION,
+      }),
+      withTiming(
+        1,
+        {
+          duration: 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 = useAnimatedGestureHandler<
+    LongPressGestureHandlerGestureEvent | TapGestureHandlerGestureEvent,
+    Context
+  >({
+    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 = useAnimatedGestureHandler<
+    TapGestureHandlerGestureEvent,
+    Context
+  >({
+    onActive: _ => {
+      if (closeOnTap) state.value = CONTEXT_MENU_STATE.END;
+    },
+  });
+  //#endregion
+
+  //#region animated styles & props
+  const animatedContainerStyle = useAnimatedStyle(() => {
+    const animateOpacity = () =>
+      withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(1, { duration: 0 }));
+
+    return {
+      opacity: isActive.value ? 0 : animateOpacity(),
+      transform: [
+        {
+          scale: isActive.value
+            ? withTiming(1, { duration: HOLD_ITEM_TRANSFORM_DURATION })
+            : itemScale.value,
+        },
+      ],
+    };
+  });
+  const containerStyle = React.useMemo(
+    () => [containerStyles, animatedContainerStyle],
+    [containerStyles, animatedContainerStyle]
+  );
+
+  const animatedPortalStyle = useAnimatedStyle(() => {
+    const animateOpacity = () =>
+      withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(0, { duration: 0 }));
+
+    let tY = calculateTransformValue();
+    const transformAnimation = () =>
+      disableMove
+        ? 0
+        : isActive.value
+        ? 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,
+      height: itemRectHeight.value,
+      opacity: isActive.value ? 1 : animateOpacity(),
+      transform: [
+        {
+          translateY: transformAnimation(),
+        },
+        {
+          scale: isActive.value
+            ? withTiming(1, { duration: HOLD_ITEM_TRANSFORM_DURATION })
+            : itemScale.value,
+        },
+      ],
+    };
+  });
+  const portalContainerStyle = useMemo(
+    () => [styles.holdItem, animatedPortalStyle],
+    [animatedPortalStyle]
+  );
+
+  const animatedPortalProps = useAnimatedProps<ViewProps>(() => ({
+    pointerEvents: isActive.value ? 'auto' : 'none',
+  }));
+  //#endregion
+
+  //#region animated effects
+  useAnimatedReaction(
+    () => state.value,
+    _state => {
+      if (_state === CONTEXT_MENU_STATE.END) {
+        isActive.value = false;
+      }
+    }
+  );
+  //#endregion
+
+  //#region components
+  const GestureHandler = useMemo(() => {
+    switch (activateOn) {
+      case `double-tap`:
+        return ({ children: handlerChildren }: GestureHandlerProps) => (
+          <TapGestureHandler
+            numberOfTaps={2}
+            onHandlerStateChange={gestureEvent}
+          >
+            {handlerChildren}
+          </TapGestureHandler>
+        );
+      case `tap`:
+        return ({ children: handlerChildren }: GestureHandlerProps) => (
+          <TapGestureHandler
+            numberOfTaps={1}
+            onHandlerStateChange={gestureEvent}
+          >
+            {handlerChildren}
+          </TapGestureHandler>
+        );
+      // default is hold
+      default:
+        return ({ children: handlerChildren }: GestureHandlerProps) => (
+          <LongPressGestureHandler
+            minDurationMs={longPressMinDurationMs}
+            onHandlerStateChange={gestureEvent}
+          >
+            {handlerChildren}
+          </LongPressGestureHandler>
+        );
+    }
+  }, [activateOn, gestureEvent]);
+
+  const PortalOverlay = useMemo(() => {
+    return () => (
+      <TapGestureHandler
+        numberOfTaps={1}
+        onHandlerStateChange={overlayGestureEvent}
+      >
+        <Animated.View style={styles.portalOverlay} />
+      </TapGestureHandler>
+    );
+  }, [overlayGestureEvent]);
+  //#endregion
+
+  //#region render
+  return (
+    <>
+      <GestureHandler>
+        <Animated.View ref={containerRef} style={containerStyle}>
+          {children}
+        </Animated.View>
+      </GestureHandler>
+
+      <Portal key={key} name={key}>
+        <Animated.View
+          key={key}
+          style={portalContainerStyle}
+          animatedProps={animatedPortalProps}
+        >
+          <PortalOverlay />
+          {children}
+        </Animated.View>
+      </Portal>
+    </>
+  );
+  //#endregion
+};
+
+const HoldItem = memo(HoldItemComponent);
+
+export default HoldItem;

package/src/components/holdItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from './HoldItem';
+export type { HoldItemProps } from './types';

package/src/components/holdItem/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  holdItem: { zIndex: 10, position: 'absolute' },
+  portalOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 15,
+  },
+});
+
+export default styles;

package/src/components/holdItem/types.d.ts

@@ -0,0 +1,131 @@
+import { ViewStyle } from 'react-native';
+import { MenuItemProps } from '../menu/types';
+import { TransformOriginAnchorPosition } from '../../utils/calculations';
+
+export type HoldItemProps = {
+  /**
+   * List of context menu items.
+   * @type MenuItemProps[]
+   * @default []
+   */
+  items: MenuItemProps[];
+
+  /**
+   * Object of keys that same name with items to match parameters to onPress actions.
+   * @type { [name: string]: (string | number)[] }
+   * @examples
+   * ```js
+   * const items = [
+   *  {text: 'Reply', onPress: (messageId) => {}},
+   *  {text: 'Copy', onPress: (messageText) => {}},
+   * ]
+   * ...
+   * <HoldItem
+   *    items={items}
+   *    actionParams={{
+   *      Reply: ['dd443224-7f43'],
+   *      Copy: ['Hello World!']
+   *    }}
+   * ><View/></HoldItem>
+   * ```
+   */
+  actionParams?: {
+    [name: string]: any[];
+  };
+
+  children: React.ReactElement | React.ReactElement[];
+
+  /**
+   * Menu anchor position is calculated automaticly.
+   * But you can override the calculation by passing an anchor position.
+   * @type TransformOriginAnchorPosition
+   * @examples
+   * menuAnchorPosition="top-bottom"
+   */
+  menuAnchorPosition?: TransformOriginAnchorPosition;
+
+  /**
+   * Disables moving holded item
+   * @type boolean
+   * @default false
+   * @examples
+   * disableMove={true}
+   */
+  disableMove?: boolean;
+
+  /**
+   * HoldItem wrapper component styles.
+   * You may need for some examples like dynamic width or hight like message boxes.
+   * See Whatsapp example.
+   * @type ViewStyles
+   * @default {}
+   * @examples
+   * containerStyles={{ maxWidth: '80%' }}
+   */
+  containerStyles?: ViewStyle | ViewStyle[];
+
+  /**
+   * Theme for menu background and texts
+   * @type string
+   * @examples
+   * theme="light"
+   */
+  theme?: 'light' | 'dark';
+
+  /**
+   * Set true if you want to open menu from bottom
+   * @type boolean
+   * @default false
+   * @examples
+   * bottom={true}
+   */
+  bottom?: boolean;
+
+  /**
+   * Set if you'd like a different tap activation
+   * @type string
+   * @default 'hold'
+   * @examples
+   * activateOn="hold"
+   */
+  activateOn?: 'tap' | 'double-tap' | 'hold';
+
+  /**
+   * Set if you'd like to enable haptic feedback on activation
+   * @type string
+   * @default 'Medium'
+   * @examples
+   * hapticFeedback="None"
+   */
+  hapticFeedback?:
+    | 'None'
+    | 'Selection'
+    | 'Light'
+    | 'Medium'
+    | 'Heavy'
+    | 'Success'
+    | 'Warning'
+    | 'Error';
+
+  /**
+   * Set true if you want to close menu when tap to HoldItem
+   * @type boolean
+   * @default false
+   * @examples
+   * closeOnTap={true}
+   */
+  closeOnTap?: boolean;
+
+  /**
+   * Set delay before long tap will activate gesture. May be useful to increase this value in lists
+   * @type number
+   * @default 150
+   * @examples
+   * longPressMinDurationMs={250}
+   */
+  longPressMinDurationMs?: number;
+};
+
+export type GestureHandlerProps = {
+  children: React.ReactElement | React.ReactElement[];
+};

package/src/components/icon/Icon.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { useInternal } from '../../hooks';
+
+type IconComponentProps = {
+  name: string;
+  size: number;
+  animatedProps: Partial<{ color: string }>;
+};
+
+// Update iconComponent type, React.ComponentClass<IconComponentProps, any>
+type IconProps = {
+  iconComponent: any;
+  name: string;
+};
+
+const Icon = ({ iconComponent, name }: IconProps) => {
+  const { theme } = useInternal();
+  let AnimatedIcon = Animated.createAnimatedComponent<IconComponentProps>(
+    iconComponent
+  );
+
+  const iconProps = useAnimatedProps(() => {
+    return {
+      color: theme.value === 'light' ? 'black' : 'white',
+    };
+  }, [theme]);
+
+  return <AnimatedIcon name={name} size={18} animatedProps={iconProps} />;
+};
+
+export default memo(Icon);

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export { default } from './Icon';

package/src/components/menu/Menu.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import MenuList from './MenuList';
+
+import styles from './styles';
+import { useInternal } from '../../hooks';
+import {
+  HOLD_ITEM_TRANSFORM_DURATION,
+  CONTEXT_MENU_STATE,
+  SPRING_CONFIGURATION,
+} from '../../constants';
+
+const MenuComponent = () => {
+  const { state, menuProps } = useInternal();
+
+  const wrapperStyles = 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 === CONTEXT_MENU_STATE.ACTIVE
+              ? withSpring(tY, SPRING_CONFIGURATION)
+              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
+        },
+      ],
+    };
+  }, [menuProps]);
+
+  return (
+    <Animated.View style={[styles.menuWrapper, wrapperStyles]}>
+      <MenuList />
+    </Animated.View>
+  );
+};
+
+const Menu = React.memo(MenuComponent);
+
+export default Menu;