react-native-hold-menu-actions 0.1.6

package/src/components/menu/MenuItem.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+
+import Separator from './Separator';
+import styles from './styles';
+
+import { MenuItemProps } from './types';
+import { useInternal } from '../../hooks';
+import { CONTEXT_MENU_STATE } from '../../constants';
+import { BORDER_LIGHT_COLOR, BORDER_DARK_COLOR } from './constants';
+import isEqual from 'lodash.isequal';
+import { getColor } from './calculations';
+import { AnimatedIcon } from '../provider/Provider';
+
+// @ts-ignore
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+type MenuItemComponentProps = {
+  item: MenuItemProps;
+  isLast?: boolean;
+};
+
+const MenuItemComponent = ({ item, isLast }: MenuItemComponentProps) => {
+  const { state, theme, menuProps } = useInternal();
+
+  const borderStyles = useAnimatedStyle(() => {
+    const borderBottomColor =
+      theme.value === 'dark' ? BORDER_DARK_COLOR : BORDER_LIGHT_COLOR;
+
+    return {
+      borderBottomColor,
+      borderBottomWidth: isLast ? 0 : 1,
+    };
+  }, [theme, isLast, item]);
+
+  const textColor = useAnimatedStyle(() => {
+    return { color: getColor(item.isTitle, item.isDestructive, theme.value) };
+  }, [theme, item]);
+
+  const handleOnPress = useCallback(() => {
+    if (!item.isTitle) {
+      const params = menuProps.value.actionParams[item.text] || [];
+      if (item.onPress) item.onPress(...params);
+      state.value = CONTEXT_MENU_STATE.END;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, item]);
+
+  return (
+    <>
+      <AnimatedTouchable
+        onPress={handleOnPress}
+        activeOpacity={!item.isTitle ? 0.4 : 1}
+        style={[styles.menuItem, borderStyles]}
+      >
+        <Animated.Text
+          style={[
+            item.isTitle ? styles.menuItemTitleText : styles.menuItemText,
+            textColor,
+          ]}
+        >
+          {item.text}
+        </Animated.Text>
+        {!item.isTitle &&
+          item.icon &&
+          (AnimatedIcon && typeof item.icon === 'string' ? (
+            <AnimatedIcon name={item.icon} size={18} style={textColor} />
+          ) : typeof item.icon === 'function' ? (
+            item.icon()
+          ) : null)}
+      </AnimatedTouchable>
+      {item.withSeparator && <Separator />}
+    </>
+  );
+};
+
+const MenuItem = React.memo(MenuItemComponent, isEqual);
+export default MenuItem;

package/src/components/menu/MenuItems.tsx

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+
+import MenuItem from './MenuItem';
+
+import isEqual from 'lodash.isequal';
+import { MenuItemProps } from './types';
+
+const MenuItemsComponent = ({ items }: { items: MenuItemProps[] }) => {
+  return (
+    <>
+      {items.map((item: MenuItemProps, index: number) => {
+        return (
+          <MenuItem
+            key={index}
+            item={item}
+            isLast={items.length === index + 1}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+const MenuItems = memo(MenuItemsComponent, isEqual);
+
+export default MenuItems;

package/src/components/menu/MenuList.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Animated, {
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import {
+  calculateMenuHeight,
+  menuAnimationAnchor,
+} from '../../utils/calculations';
+// @ts-ignore
+import { BlurView } from '@react-native-community/blur';
+
+import MenuItems from './MenuItems';
+
+import {
+  SPRING_CONFIGURATION_MENU,
+  HOLD_ITEM_TRANSFORM_DURATION,
+  IS_IOS,
+  CONTEXT_MENU_STATE,
+} from '../../constants';
+
+import styles from './styles';
+import { MenuItemProps } from './types';
+import { useInternal } from '../../hooks';
+import { deepEqual } from '../../utils/validations';
+import { leftOrRight } from './calculations';
+
+const AnimatedView = Animated.createAnimatedComponent(BlurView);
+
+const MenuListComponent = () => {
+  const { state, theme, menuProps } = useInternal();
+
+  const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);
+
+  const menuHeight = useDerivedValue(() => {
+    const itemsWithSeparator = menuProps.value.items.filter(
+      item => item.withSeparator
+    );
+    return calculateMenuHeight(
+      menuProps.value.items.length,
+      itemsWithSeparator.length
+    );
+  }, [menuProps]);
+  const prevList = useSharedValue<MenuItemProps[]>([]);
+
+  const messageStyles = useAnimatedStyle(() => {
+    const itemsWithSeparator = menuProps.value.items.filter(
+      item => item.withSeparator
+    );
+
+    const translate = menuAnimationAnchor(
+      menuProps.value.anchorPosition,
+      menuProps.value.itemWidth,
+      menuProps.value.items.length,
+      itemsWithSeparator.length
+    );
+
+    const _leftPosition = leftOrRight(menuProps);
+
+    const menuScaleAnimation = () =>
+      state.value === CONTEXT_MENU_STATE.ACTIVE
+        ? withSpring(1, SPRING_CONFIGURATION_MENU)
+        : withTiming(0, {
+            duration: HOLD_ITEM_TRANSFORM_DURATION,
+          });
+
+    const opacityAnimation = () =>
+      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
+        duration: HOLD_ITEM_TRANSFORM_DURATION,
+      });
+
+    return {
+      left: _leftPosition,
+      height: menuHeight.value,
+      opacity: opacityAnimation(),
+      transform: [
+        { translateX: translate.beginningTransformations.translateX },
+        { translateY: translate.beginningTransformations.translateY },
+        {
+          scale: menuScaleAnimation(),
+        },
+        { translateX: translate.endingTransformations.translateX },
+        { translateY: translate.endingTransformations.translateY },
+      ],
+    };
+  });
+
+  const animatedInnerContainerStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor:
+        theme.value === 'light'
+          ? IS_IOS
+            ? 'rgba(255, 255, 255, .75)'
+            : 'rgba(255, 255, 255, .95)'
+          : IS_IOS
+          ? 'rgba(0,0,0,0.5)'
+          : 'rgba(39, 39, 39, .8)',
+    };
+  }, [theme]);
+
+  const animatedProps = useAnimatedProps(() => {
+    return { blurType: theme.value };
+  }, [theme]);
+
+  const setter = (items: MenuItemProps[]) => {
+    setItemList(items);
+    prevList.value = items;
+  };
+
+  useAnimatedReaction(
+    () => menuProps.value.items,
+    _items => {
+      if (!deepEqual(_items, prevList.value)) {
+        runOnJS(setter)(_items);
+      }
+    },
+    [menuProps]
+  );
+
+  return (
+    <AnimatedView
+      blurAmount={100}
+      //@ts-ignore
+      animatedProps={animatedProps}
+      style={[styles.menuContainer, messageStyles]}
+    >
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          styles.menuInnerContainer,
+          animatedInnerContainerStyle,
+        ]}
+      >
+        <MenuItems items={itemList} />
+      </Animated.View>
+    </AnimatedView>
+  );
+};
+
+const MenuList = React.memo(MenuListComponent);
+
+export default MenuList;

package/src/components/menu/Separator.tsx

@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useInternal } from '../../hooks';
+
+import { BORDER_LIGHT_COLOR, BORDER_DARK_COLOR } from './constants';
+
+const Separator = () => {
+  const { theme } = useInternal();
+
+  const separatorStyles = useAnimatedStyle(() => {
+    return {
+      backgroundColor:
+        theme.value === 'dark' ? BORDER_DARK_COLOR : BORDER_LIGHT_COLOR,
+    };
+  }, [theme]);
+
+  return <Animated.View style={[styles.separator, { ...separatorStyles }]} />;
+};
+
+export default memo(Separator);
+
+const styles = StyleSheet.create({
+  separator: {
+    width: '100%',
+    height: 8,
+  },
+});

package/src/components/menu/calculations.ts

@@ -0,0 +1,49 @@
+import Animated from 'react-native-reanimated';
+
+import { MENU_WIDTH } from '../../constants';
+import {
+  MENU_TEXT_DARK_COLOR,
+  MENU_TEXT_DESTRUCTIVE_COLOR_DARK,
+  MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT,
+  MENU_TEXT_LIGHT_COLOR,
+  MENU_TITLE_COLOR,
+} from './constants';
+import type { MenuInternalProps } from './types';
+
+export const leftOrRight = (
+  menuProps: Animated.SharedValue<MenuInternalProps>
+) => {
+  'worklet';
+
+  const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];
+  const itemWidth = menuProps.value.itemWidth;
+
+  let leftPosition = 0;
+  anchorPositionHorizontal === 'right'
+    ? (leftPosition = -MENU_WIDTH + itemWidth)
+    : anchorPositionHorizontal === 'left'
+    ? (leftPosition = 0)
+    : (leftPosition =
+        -menuProps.value.itemWidth -
+        MENU_WIDTH / 2 +
+        menuProps.value.itemWidth / 2);
+
+  return leftPosition;
+};
+
+export const getColor = (
+  isTitle: boolean | undefined,
+  isDestructive: boolean | undefined,
+  themeValue: 'light' | 'dark'
+) => {
+  'worklet';
+  return isTitle
+    ? MENU_TITLE_COLOR
+    : isDestructive
+    ? themeValue === 'dark'
+      ? MENU_TEXT_DESTRUCTIVE_COLOR_DARK
+      : MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT
+    : themeValue === 'dark'
+    ? MENU_TEXT_DARK_COLOR
+    : MENU_TEXT_LIGHT_COLOR;
+};

package/src/components/menu/constants.ts

@@ -0,0 +1,9 @@
+export const BORDER_LIGHT_COLOR = 'rgba(0, 0, 0, 0.1)';
+export const BORDER_DARK_COLOR = 'rgba(255, 255, 255, 0.1)';
+
+export const MENU_TITLE_COLOR = 'gray';
+export const MENU_TEXT_LIGHT_COLOR = 'rgba(0, 0, 0, 1)';
+export const MENU_TEXT_DARK_COLOR = 'rgb(255, 255, 255)';
+
+export const MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT = 'rgb(255, 59,48)';
+export const MENU_TEXT_DESTRUCTIVE_COLOR_DARK = 'rgb(255, 69,58)';

package/src/components/menu/index.ts

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

package/src/components/menu/styles.ts

@@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+import { MENU_WIDTH } from '../../constants';
+import styleGuide from '../../styleGuide';
+
+const styles = StyleSheet.create({
+  menuWrapper: {
+    position: 'absolute',
+    left: 0,
+    zIndex: 10,
+  },
+  menuContainer: {
+    position: 'absolute',
+    top: 0,
+    width: MENU_WIDTH,
+    borderRadius: styleGuide.spacing * 1.5,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    overflow: 'hidden',
+    zIndex: 15,
+  },
+  menuInnerContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  menuItem: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: styleGuide.spacing * 2,
+    paddingVertical: styleGuide.spacing * 1.25,
+  },
+  border: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  menuItemText: {
+    fontSize: styleGuide.typography.callout.fontSize,
+    lineHeight: styleGuide.typography.callout.lineHeight,
+    textAlign: 'left',
+    width: '100%',
+    flex: 1,
+  },
+  menuItemTitleText: {
+    fontSize: styleGuide.typography.callout2.fontSize,
+    lineHeight: styleGuide.typography.callout2.lineHeight,
+    textAlign: 'center',
+    width: '100%',
+    flex: 1,
+  },
+  textDark: {
+    color: 'black',
+  },
+  textLight: {
+    color: 'white',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,28 @@
+import { TransformOriginAnchorPosition } from '../../utils/calculations';
+
+export type MenuItemProps = {
+  text: string;
+  icon?: string | (() => React.ReactElement);
+  onPress?: (...args: any[]) => void;
+  isTitle?: boolean;
+  isDestructive?: boolean;
+  withSeparator?: boolean;
+};
+
+export type MenuListProps = {
+  items: MenuItemProps[];
+};
+
+export type MenuInternalProps = {
+  items: MenuItemProps[];
+  itemHeight: number;
+  itemWidth: number;
+  itemY: number;
+  itemX: number;
+  anchorPosition: TransformOriginAnchorPosition;
+  menuHeight: number;
+  transformValue: number;
+  actionParams: {
+    [name: string]: (string | number)[];
+  };
+};

package/src/components/provider/Provider.tsx

@@ -0,0 +1,105 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { PortalProvider } from '@gorhom/portal';
+import Animated, { useSharedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+// Components
+import { Backdrop } from '../backdrop';
+
+// Utils
+import { InternalContext } from '../../context/internal';
+import { HoldMenuProviderProps } from './types';
+import { StateProps, Action } from './reducer';
+import { CONTEXT_MENU_STATE } from '../../constants';
+import { MenuInternalProps } from '../menu/types';
+import Menu from '../menu';
+
+export interface Store {
+  state: StateProps;
+  dispatch?: React.Dispatch<Action>;
+}
+
+export let AnimatedIcon: any;
+
+const ProviderComponent = ({
+  children,
+  theme: selectedTheme,
+  iconComponent,
+  safeAreaInsets,
+  onOpen,
+  onClose,
+}: HoldMenuProviderProps) => {
+  if (iconComponent)
+    AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
+
+  const state = useSharedValue<CONTEXT_MENU_STATE>(
+    CONTEXT_MENU_STATE.UNDETERMINED
+  );
+  const theme = useSharedValue<'light' | 'dark'>(selectedTheme || 'light');
+  const menuProps = useSharedValue<MenuInternalProps>({
+    itemHeight: 0,
+    itemWidth: 0,
+    itemX: 0,
+    itemY: 0,
+    items: [],
+    anchorPosition: 'top-center',
+    menuHeight: 0,
+    transformValue: 0,
+    actionParams: {},
+  });
+
+  useEffect(() => {
+    theme.value = selectedTheme || 'light';
+    // 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,
+      theme,
+      menuProps,
+      safeAreaInsets: safeAreaInsets || {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      },
+    }),
+    [state, theme, menuProps, safeAreaInsets]
+  );
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <InternalContext.Provider value={internalContextVariables}>
+        <PortalProvider>
+          {children}
+          <Backdrop />
+          <Menu />
+        </PortalProvider>
+      </InternalContext.Provider>
+    </GestureHandlerRootView>
+  );
+};
+
+const Provider = memo(ProviderComponent);
+
+export default Provider;

package/src/components/provider/index.ts

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

package/src/components/provider/reducer.ts

@@ -0,0 +1,48 @@
+import { CONTEXT_MENU_STATE } from '../../constants';
+
+export type StateProps = {
+  active: number;
+  activeItem: string | null;
+  theme: 'light' | 'dark';
+};
+
+export enum ActionType {
+  Active = 'Active',
+  End = 'End',
+  Theme = 'Theme',
+}
+
+export type Action =
+  | { type: ActionType.Active; activeItem: string | null }
+  | { type: ActionType.End }
+  | { type: ActionType.Theme };
+
+export const reducer = (state: StateProps, action: Action): StateProps => {
+  switch (action.type) {
+    case ActionType.Active:
+      return {
+        ...state,
+        active: CONTEXT_MENU_STATE.ACTIVE,
+        activeItem: action.activeItem,
+      };
+    case ActionType.End:
+      return {
+        ...state,
+        active: CONTEXT_MENU_STATE.END,
+        activeItem: null,
+      };
+    case ActionType.Theme:
+      return {
+        ...state,
+        theme: state.theme === 'dark' ? 'light' : 'dark',
+      };
+    default:
+      return state;
+  }
+};
+
+export const initialState: StateProps = {
+  active: 0,
+  activeItem: null,
+  theme: 'light',
+};

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

@@ -0,0 +1,33 @@
+export interface HoldMenuProviderProps {
+  /**
+   * Theme of hold menu. Effects to backdrop and context menu styles. Optional.
+   * @type "light" | "dark"
+   * @default "light"
+   * @examples
+   * theme="light"
+   */
+  theme?: 'dark' | 'light';
+  iconComponent?: any;
+  children: React.ReactElement | React.ReactElement[];
+
+  /**
+   * Set this to prevent the menu to be opened under the unsafe area.
+   * @type object
+   * @default
+   * { top: 0, bottom: 0, right: 0, left: 0 }
+   * @examples
+   * ```
+   * const insets = useSafeAreaInsets();
+   * safeAreaInsets={insets}
+   * ```
+   */
+  safeAreaInsets: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+
+  onOpen?: () => void;
+  onClose?: () => void;
+}

package/src/constants.ts

@@ -0,0 +1,54 @@
+import { Dimensions, Platform } from 'react-native';
+
+const HOLD_ITEM_TRANSFORM_DURATION = 150;
+const HOLD_ITEM_SCALE_DOWN_VALUE = 0.95;
+const HOLD_ITEM_SCALE_DOWN_DURATION = 210;
+
+const SPRING_CONFIGURATION = {
+  damping: 33,
+  mass: 1.03,
+  stiffness: 500,
+  restDisplacementThreshold: 0.001,
+  restSpeedThreshold: 0.001,
+};
+
+const SPRING_CONFIGURATION_MENU = {
+  damping: 39,
+  mass: 1.09,
+  stiffness: 500,
+  restDisplacementThreshold: 0.001,
+  restSpeedThreshold: 0.001,
+};
+
+enum CONTEXT_MENU_STATE {
+  UNDETERMINED = 0,
+  ACTIVE,
+  END,
+}
+
+const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('screen');
+
+const MENU_CONTAINER_WIDTH = 100;
+const MENU_WIDTH = (WINDOW_WIDTH * 60) / 100;
+
+const MENU_TRANSFORM_ORIGIN_TOLERENCE = 10;
+
+const IS_IOS = Platform.OS === 'ios';
+
+const FONT_SCALE = Dimensions.get('screen').fontScale;
+
+export {
+  CONTEXT_MENU_STATE,
+  WINDOW_HEIGHT,
+  WINDOW_WIDTH,
+  MENU_WIDTH,
+  MENU_CONTAINER_WIDTH,
+  HOLD_ITEM_TRANSFORM_DURATION,
+  HOLD_ITEM_SCALE_DOWN_VALUE,
+  HOLD_ITEM_SCALE_DOWN_DURATION,
+  SPRING_CONFIGURATION,
+  SPRING_CONFIGURATION_MENU,
+  MENU_TRANSFORM_ORIGIN_TOLERENCE,
+  IS_IOS,
+  FONT_SCALE,
+};

package/src/context/index.ts

@@ -0,0 +1 @@
+export { InternalContext } from './internal';