react-native-hold-menu-actions 0.1.6

package/src/context/internal.ts

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+import type Animated from 'react-native-reanimated';
+import type { CONTEXT_MENU_STATE } from '../constants';
+import { MenuInternalProps } from '../components/menu/types';
+
+export type InternalContextType = {
+  state: Animated.SharedValue<CONTEXT_MENU_STATE>;
+  theme: Animated.SharedValue<'light' | 'dark'>;
+  menuProps: Animated.SharedValue<MenuInternalProps>;
+  safeAreaInsets?: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+};
+
+// @ts-ignore
+export const InternalContext = createContext<InternalContextType>();

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useDeviceOrientation } from './useDeviceOrientation';
+export { useInternal } from './useInternal';

package/src/hooks/useDeviceOrientation.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { Dimensions } from 'react-native';
+
+type Orientation = 'landscape' | 'portrait';
+
+function getWindowOrientation(): Orientation {
+  const { width, height } = Dimensions.get('window');
+  return height >= width ? 'portrait' : 'landscape';
+}
+
+function useDeviceOrientation() {
+  const [deviceOrientation, setDeviceOrientation] = useState<Orientation>(
+    getWindowOrientation()
+  );
+
+  useEffect(() => {
+    function updateState() {
+      setDeviceOrientation(getWindowOrientation());
+    }
+    const changeEvent = Dimensions.addEventListener('change', updateState);
+    // @ts-ignore
+    return () => changeEvent.remove();
+  }, []);
+
+  return deviceOrientation;
+}
+
+export default useDeviceOrientation;

package/src/hooks/useInternal.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { InternalContext } from '../context';
+
+export const useInternal = () => useContext(InternalContext);

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as HoldItem } from './components/holdItem';
+export { default as HoldMenuProvider } from './components/provider';
+export { default as HoldMenuFlatList } from './components/flatList';
+export { default as HoldMenuIcon } from './components/icon';

package/src/styleGuide.ts

@@ -0,0 +1,31 @@
+import { Dimensions } from 'react-native';
+
+const styleGuide = {
+  spacing: 8,
+  dimensionWidth: Dimensions.get('screen').width,
+  dimensionHeight: Dimensions.get('screen').height,
+  palette: {
+    primary: '#0072ff',
+    secondary: '#e2e2e2',
+    common: {
+      white: '#fff',
+      black: '#000',
+    },
+  },
+  typography: {
+    body: {
+      fontSize: 17,
+      lineHeight: 20,
+    },
+    callout: {
+      fontSize: 16,
+      lineHeight: 20,
+    },
+    callout2: {
+      fontSize: 14,
+      lineHeight: 18,
+    },
+  },
+};
+
+export default styleGuide;

package/src/utils/calculations.ts

@@ -0,0 +1,110 @@
+import styleGuide from '../styleGuide';
+import {
+  MENU_WIDTH,
+  MENU_TRANSFORM_ORIGIN_TOLERENCE,
+  FONT_SCALE,
+} from '../constants';
+
+export const MenuItemHeight = () => {
+  'worklet';
+  return (
+    styleGuide.typography.callout.lineHeight * FONT_SCALE +
+    styleGuide.spacing * 2.5
+  );
+};
+
+export const calculateMenuHeight = (
+  itemLength: number,
+  separatorCount: number
+) => {
+  'worklet';
+  return (
+    MenuItemHeight() * itemLength +
+    (itemLength - 1) +
+    separatorCount * styleGuide.spacing
+  );
+};
+
+export type TransformOriginAnchorPosition =
+  | 'top-right'
+  | 'top-left'
+  | 'top-center'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'bottom-center';
+
+export const menuAnimationAnchor = (
+  anchorPoint: TransformOriginAnchorPosition,
+  itemWidth: number,
+  itemLength: number,
+  itemsWithSeparatorLength: number
+) => {
+  'worklet';
+  const MenuHeight = calculateMenuHeight(itemLength, itemsWithSeparatorLength);
+  const splittetAnchorName: string[] = anchorPoint.split('-');
+
+  const Center1 = itemWidth;
+  const Center2 = 0;
+
+  const TyTop1 = -(MenuHeight / 2);
+  const TyTop2 = MenuHeight / 2;
+
+  const TxLeft1 = (MENU_WIDTH / 2) * -1;
+  const TxLeft2 = (MENU_WIDTH / 2) * 1;
+
+  return {
+    beginningTransformations: {
+      translateX:
+        splittetAnchorName[1] === 'right'
+          ? -TxLeft1
+          : splittetAnchorName[1] === 'left'
+          ? TxLeft1
+          : Center1,
+      translateY:
+        splittetAnchorName[0] === 'top'
+          ? TyTop1
+          : splittetAnchorName[0] === 'bottom'
+          ? TyTop1
+          : Center2,
+    },
+    endingTransformations: {
+      translateX:
+        splittetAnchorName[1] === 'right'
+          ? -TxLeft2
+          : splittetAnchorName[1] === 'left'
+          ? TxLeft2
+          : Center2,
+      translateY:
+        splittetAnchorName[0] === 'top'
+          ? TyTop2
+          : splittetAnchorName[0] === 'bottom'
+          ? -TyTop2
+          : Center2,
+    },
+  };
+};
+
+export const getTransformOrigin = (
+  posX: number,
+  itemWidth: number,
+  windowWidth: number,
+  bottom?: boolean
+): TransformOriginAnchorPosition => {
+  'worklet';
+  const distanceToLeft = Math.round(posX + itemWidth / 2);
+  const distanceToRight = Math.round(windowWidth - distanceToLeft);
+
+  let position: TransformOriginAnchorPosition = bottom
+    ? 'bottom-right'
+    : 'top-right';
+
+  const majority = Math.abs(distanceToLeft - distanceToRight);
+
+  if (majority < MENU_TRANSFORM_ORIGIN_TOLERENCE) {
+    position = bottom ? 'bottom-center' : 'top-center';
+  } else if (distanceToLeft < distanceToRight) {
+    position = bottom ? 'bottom-left' : 'top-left';
+  }
+
+  return position;
+};

package/src/utils/validations.ts

@@ -0,0 +1,42 @@
+import { MenuItemProps } from '../components/menu/types';
+
+function fieldAreSame(obj1: MenuItemProps, obj2: MenuItemProps) {
+  'worklet';
+
+  const keys = Object.keys(obj1);
+
+  return keys.every(key => {
+    // @ts-ignore
+    const val1 = obj1[key];
+    // @ts-ignore
+    const val2 = obj2[key];
+
+    if (val1 !== val2) {
+      if (typeof val1 === 'function' && typeof val2 === 'function')
+        return val1.toString() === val2.toString();
+      return false;
+    }
+
+    return true;
+  });
+}
+
+function deepEqual(array1: MenuItemProps[], array2: MenuItemProps[]) {
+  'worklet';
+
+  const areArrays = Array.isArray(array1) && Array.isArray(array2);
+  const areSameLength = areArrays && array2 && array1.length === array2.length;
+
+  if (areArrays && areSameLength && array2) {
+    return array1.every((menuItem: MenuItemProps, index) => {
+      const obj1 = menuItem;
+      const obj2 = array2[index];
+
+      return fieldAreSame(obj1, obj2);
+    });
+  }
+
+  return false;
+}
+
+export { deepEqual };