react-native-hold-menu-actions 0.1.6

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "react-native-hold-menu-actions",
+  "version": "0.1.6",
+  "description": "A performant, easy to use hold to open context menu for React Native powered by Reanimated.",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "hold-menu",
+    "context-menu",
+    "hold-to-open",
+    "reanimated",
+    "menu"
+  ],
+  "repository": "https://github.com/shuraman69/react-native-hold-menu",
+  "author": "Enes Ozturk (https://ozturkenes.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shuraman69/react-native-hold-menu/issues"
+  },
+  "homepage": "https://shuraman69.github.io/react-native-hold-menu",
+  "scripts": {
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "build": "bob build && yarn copy-dts",
+    "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" lib/typescript",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn install && yarn example",
+    "version": "auto-changelog -p && git add ."
+  },
+  "dependencies": {
+    "@gorhom/portal": "^1.0.3",
+    "lodash.isequal": "^4.5.0",
+    "nanoid": "^3.1.20"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@types/faker": "^5.1.5",
+    "@types/lodash.isequal": "^4.5.5",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "0.63.4",
+    "auto-changelog": "^2.2.1",
+    "babel-jest": "~25.2.6",
+    "copyfiles": "^2.4.1",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "husky": "^5.0.9",
+    "jest": "~25.2.6",
+    "prettier": "^2.2.1",
+    "react": "16.13.1",
+    "react-native": "~0.63.4",
+    "react-native-builder-bob": "^0.17.1",
+    "react-native-gesture-handler": "1.8.0",
+    "react-native-reanimated": "2.1.0",
+    "react-test-renderer": "~16.13.1",
+    "release-it": "^14.4.1",
+    "typescript": "~4.0.0"
+  },
+  "peerDependencies": {
+    "@react-native-community/blur": "*",
+    "expo-haptics": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=1.8.0",
+    "react-native-reanimated": ">=2.1.0"
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}

package/src/components/backdrop/Backdrop.tsx

@@ -0,0 +1,138 @@
+import React, { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedGestureHandler,
+  useAnimatedProps,
+  useAnimatedStyle,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  TapGestureHandler,
+  TapGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
+
+// Components
+// @ts-ignore
+import { BlurView } from '@react-native-community/blur';
+
+// Utils
+import { styles } from './styles';
+import {
+  CONTEXT_MENU_STATE,
+  HOLD_ITEM_TRANSFORM_DURATION,
+  IS_IOS,
+  WINDOW_HEIGHT,
+} from '../../constants';
+import {
+  BACKDROP_LIGHT_BACKGROUND_COLOR,
+  BACKDROP_DARK_BACKGROUND_COLOR,
+} from './constants';
+import { useInternal } from '../../hooks';
+
+const AnimatedBlurView = IS_IOS
+  ? Animated.createAnimatedComponent(BlurView)
+  : Animated.View;
+
+type Context = {
+  startPosition: {
+    x: number;
+    y: number;
+  };
+};
+
+const BackdropComponent = () => {
+  const { state, theme } = useInternal();
+
+  const tapGestureEvent = useAnimatedGestureHandler<
+    TapGestureHandlerGestureEvent,
+    Context
+  >(
+    {
+      onStart: (event, context) => {
+        context.startPosition = { x: event.x, y: event.y };
+      },
+      onCancel: () => {
+        state.value = CONTEXT_MENU_STATE.END;
+      },
+      onEnd: (event, context) => {
+        const distance = Math.hypot(
+          event.x - context.startPosition.x,
+          event.y - context.startPosition.y
+        );
+        const shouldClose = distance < 10;
+        const isStateActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
+
+        if (shouldClose && isStateActive) {
+          state.value = CONTEXT_MENU_STATE.END;
+        }
+      },
+    },
+    [state]
+  );
+
+  const animatedContainerStyle = useAnimatedStyle(() => {
+    const topValueAnimation = () =>
+      state.value === CONTEXT_MENU_STATE.ACTIVE
+        ? 0
+        : withDelay(
+            HOLD_ITEM_TRANSFORM_DURATION,
+            withTiming(WINDOW_HEIGHT, {
+              duration: 0,
+            })
+          );
+
+    const opacityValueAnimation = () =>
+      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
+        duration: HOLD_ITEM_TRANSFORM_DURATION,
+      });
+
+    return {
+      top: topValueAnimation(),
+      opacity: opacityValueAnimation(),
+    };
+  });
+
+  const animatedContainerProps = useAnimatedProps(() => {
+    return {
+      blurAmount: withTiming(
+        state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,
+        {
+          duration: HOLD_ITEM_TRANSFORM_DURATION,
+        }
+      ),
+    };
+  });
+
+  const animatedInnerContainerStyle = useAnimatedStyle(() => {
+    const backgroundColor =
+      theme.value === 'light'
+        ? BACKDROP_LIGHT_BACKGROUND_COLOR
+        : BACKDROP_DARK_BACKGROUND_COLOR;
+
+    return { backgroundColor };
+  }, [theme]);
+
+  return (
+    <TapGestureHandler onHandlerStateChange={tapGestureEvent}>
+      <AnimatedBlurView
+        // @ts-ignore
+        tint="default"
+        // @ts-ignore
+        animatedProps={animatedContainerProps}
+        style={[styles.container, animatedContainerStyle]}
+      >
+        <Animated.View
+          style={[
+            { ...StyleSheet.absoluteFillObject },
+            animatedInnerContainerStyle,
+          ]}
+        />
+      </AnimatedBlurView>
+    </TapGestureHandler>
+  );
+};
+
+const Backdrop = memo(BackdropComponent);
+
+export default Backdrop;

package/src/components/backdrop/constants.ts

@@ -0,0 +1,8 @@
+import { IS_IOS } from '../../constants';
+
+export const BACKDROP_LIGHT_BACKGROUND_COLOR = IS_IOS
+  ? 'rgba(0,0,0,0.2)'
+  : 'rgba(19, 19, 19, 0.95)';
+export const BACKDROP_DARK_BACKGROUND_COLOR = IS_IOS
+  ? 'rgba(0,0,0,0.75)'
+  : 'rgba(0,0,0,0.95)';

package/src/components/backdrop/index.ts

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

package/src/components/backdrop/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 0,
+  },
+});

package/src/components/flatList/FlatList.tsx

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import {
+  FlatList as RNFlatList,
+  FlatListProps as RNFlatListProps,
+} from 'react-native';
+
+import isEqual from 'lodash.isequal';
+import Animated from 'react-native-reanimated';
+
+const AnimatedFlatList = Animated.createAnimatedComponent(RNFlatList);
+
+export type HoldMenuFlatListProps<T> = Omit<
+  RNFlatListProps<T>,
+  'scrollEventThrottle'
+>;
+
+const HoldMenuFlatListComponent = (props: HoldMenuFlatListProps<any>) => {
+  return <AnimatedFlatList {...props} scrollEventThrottle={16} />;
+};
+
+const HoldMenuFlatList = memo(HoldMenuFlatListComponent, isEqual);
+
+export default HoldMenuFlatList;

package/src/components/flatList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FlatList';
+export type { HoldMenuFlatListProps } from './FlatList';