react-native-hold-menu-actions 0.1.15 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/backdrop/Backdrop.js +3 -3
- package/lib/commonjs/components/backdrop/Backdrop.js.map +1 -1
- package/lib/commonjs/components/customView/CustomView.js +35 -25
- package/lib/commonjs/components/customView/CustomView.js.map +1 -1
- package/lib/commonjs/components/holdItem/HoldItem.js +3 -1
- package/lib/commonjs/components/holdItem/HoldItem.js.map +1 -1
- package/lib/commonjs/components/menu/Menu.js +5 -2
- package/lib/commonjs/components/menu/Menu.js.map +1 -1
- package/lib/commonjs/components/menu/MenuList.js +1 -0
- package/lib/commonjs/components/menu/MenuList.js.map +1 -1
- package/lib/commonjs/components/provider/Provider.js +1 -0
- package/lib/commonjs/components/provider/Provider.js.map +1 -1
- package/lib/commonjs/utils/calculations.js +48 -1
- package/lib/commonjs/utils/calculations.js.map +1 -1
- package/lib/module/components/backdrop/Backdrop.js +2 -2
- package/lib/module/components/backdrop/Backdrop.js.map +1 -1
- package/lib/module/components/customView/CustomView.js +36 -27
- package/lib/module/components/customView/CustomView.js.map +1 -1
- package/lib/module/components/holdItem/HoldItem.js +4 -2
- package/lib/module/components/holdItem/HoldItem.js.map +1 -1
- package/lib/module/components/menu/Menu.js +5 -3
- package/lib/module/components/menu/Menu.js.map +1 -1
- package/lib/module/components/menu/MenuList.js +1 -0
- package/lib/module/components/menu/MenuList.js.map +1 -1
- package/lib/module/components/provider/Provider.js +1 -0
- package/lib/module/components/provider/Provider.js.map +1 -1
- package/lib/module/utils/calculations.js +44 -0
- package/lib/module/utils/calculations.js.map +1 -1
- package/lib/typescript/components/menu/MenuList.d.ts +1 -1
- package/lib/typescript/components/menu/types.d.ts +1 -0
- package/lib/typescript/utils/calculations.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/customView/CustomView.tsx +51 -36
- package/src/components/holdItem/HoldItem.tsx +14 -1
- package/src/components/menu/Menu.tsx +13 -2
- package/src/components/menu/types.d.ts +1 -0
- package/src/components/provider/Provider.tsx +10 -7
- package/src/utils/calculations.ts +53 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["calculations.ts"],"names":["MenuItemHeight","styleGuide","typography","callout","lineHeight","FONT_SCALE","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","MENU_WIDTH","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","getTransformOrigin","posX","windowWidth","bottom","distanceToLeft","Math","round","distanceToRight","position","majority","abs","MENU_TRANSFORM_ORIGIN_TOLERENCE"],"mappings":";;;;;;;AAAA;;AACA;;;;AAMO,MAAMA,cAAc,GAAG,MAAM;AAClC;;AACA,SACEC,oBAAWC,UAAX,CAAsBC,OAAtB,CAA8BC,UAA9B,GAA2CC,qBAA3C,GACAJ,oBAAWK,OAAX,GAAqB,GAFvB;AAID,CANM;;;;AAQA,MAAMC,mBAAmB,GAAG,CACjCC,UADiC,EAEjCC,cAFiC,KAG9B;AACH;;AACA,SACET,cAAc,KAAKQ,UAAnB,IACCA,UAAU,GAAG,CADd,IAEAC,cAAc,GAAGR,oBAAWK,OAH9B;AAKD,CAVM;;;;AAoBA,MAAMI,mBAAmB,GAAG,CACjCC,WADiC,EAEjCC,SAFiC,EAGjCJ,UAHiC,EAIjCK,wBAJiC,KAK9B;AACH;;AACA,QAAMC,UAAU,GAAGP,mBAAmB,CAACC,UAAD,EAAaK,wBAAb,CAAtC;AACA,QAAME,kBAA4B,GAAGJ,WAAW,CAACK,KAAZ,CAAkB,GAAlB,CAArC;AAEA,QAAMC,OAAO,GAAGL,SAAhB;AACA,QAAMM,OAAO,GAAG,CAAhB;AAEA,QAAMC,MAAM,GAAG,EAAEL,UAAU,GAAG,CAAf,CAAf;AACA,QAAMM,MAAM,GAAGN,UAAU,GAAG,CAA5B;AAEA,QAAMO,OAAO,GAAIC,wBAAa,CAAd,GAAmB,CAAC,CAApC;AACA,QAAMC,OAAO,GAAID,wBAAa,CAAd,GAAmB,CAAnC;AAEA,SAAO;AACLE,IAAAA,wBAAwB,EAAE;AACxBC,MAAAA,UAAU,EACRV,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,OAA1B,GACI,CAACM,OADL,GAEIN,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,MAA1B,GACAM,OADA,GAEAJ,OANkB;AAOxBS,MAAAA,UAAU,EACRX,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,KAA1B,GACII,MADJ,GAEIJ,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,QAA1B,GACAI,MADA,GAEAD;AAZkB,KADrB;AAeLS,IAAAA,qBAAqB,EAAE;AACrBF,MAAAA,UAAU,EACRV,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,OAA1B,GACI,CAACQ,OADL,GAEIR,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,MAA1B,GACAQ,OADA,GAEAL,OANe;AAOrBQ,MAAAA,UAAU,EACRX,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,KAA1B,GACIK,MADJ,GAEIL,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,QAA1B,GACA,CAACK,MADD,GAEAF;AAZe;AAflB,GAAP;AA8BD,CAjDM;;;;AAmDA,MAAMU,kBAAkB,GAAG,CAChCC,IADgC,
|
|
1
|
+
{"version":3,"sources":["calculations.ts"],"names":["MenuItemHeight","styleGuide","typography","callout","lineHeight","FONT_SCALE","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","MENU_WIDTH","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","calculateDynamicTransformValue","itemY","itemHeight","menuHeight","customViewHeight","anchorPosition","screenHeight","safeAreaTop","safeAreaBottom","GAP","isAnchorTop","includes","bottomEdge","topEdge","tY","getTransformOrigin","posX","windowWidth","bottom","distanceToLeft","Math","round","distanceToRight","position","majority","abs","MENU_TRANSFORM_ORIGIN_TOLERENCE"],"mappings":"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","sourcesContent":["import styleGuide from '../styleGuide';\nimport {\n MENU_WIDTH,\n MENU_TRANSFORM_ORIGIN_TOLERENCE,\n FONT_SCALE,\n} from '../constants';\n\nexport const MenuItemHeight = () => {\n 'worklet';\n return (\n styleGuide.typography.callout.lineHeight * FONT_SCALE +\n styleGuide.spacing * 2.5\n );\n};\n\nexport const calculateMenuHeight = (\n itemLength: number,\n separatorCount: number\n) => {\n 'worklet';\n return (\n MenuItemHeight() * itemLength +\n (itemLength - 1) +\n separatorCount * styleGuide.spacing\n );\n};\n\nexport type TransformOriginAnchorPosition =\n | 'top-right'\n | 'top-left'\n | 'top-center'\n | 'bottom-right'\n | 'bottom-left'\n | 'bottom-center';\n\nexport const menuAnimationAnchor = (\n anchorPoint: TransformOriginAnchorPosition,\n itemWidth: number,\n itemLength: number,\n itemsWithSeparatorLength: number\n) => {\n 'worklet';\n const MenuHeight = calculateMenuHeight(itemLength, itemsWithSeparatorLength);\n const splittetAnchorName: string[] = anchorPoint.split('-');\n\n const Center1 = itemWidth;\n const Center2 = 0;\n\n const TyTop1 = -(MenuHeight / 2);\n const TyTop2 = MenuHeight / 2;\n\n const TxLeft1 = (MENU_WIDTH / 2) * -1;\n const TxLeft2 = (MENU_WIDTH / 2) * 1;\n\n return {\n beginningTransformations: {\n translateX:\n splittetAnchorName[1] === 'right'\n ? -TxLeft1\n : splittetAnchorName[1] === 'left'\n ? TxLeft1\n : Center1,\n translateY:\n splittetAnchorName[0] === 'top'\n ? TyTop1\n : splittetAnchorName[0] === 'bottom'\n ? TyTop1\n : Center2,\n },\n endingTransformations: {\n translateX:\n splittetAnchorName[1] === 'right'\n ? -TxLeft2\n : splittetAnchorName[1] === 'left'\n ? TxLeft2\n : Center2,\n translateY:\n splittetAnchorName[0] === 'top'\n ? TyTop2\n : splittetAnchorName[0] === 'bottom'\n ? -TyTop2\n : Center2,\n },\n };\n};\n\nexport const calculateDynamicTransformValue = (\n itemY: number,\n itemHeight: number,\n menuHeight: number,\n customViewHeight: number,\n anchorPosition: TransformOriginAnchorPosition,\n screenHeight: number,\n safeAreaTop: number,\n safeAreaBottom: number\n): number => {\n 'worklet';\n const GAP = styleGuide.spacing;\n const isAnchorTop = anchorPosition.includes('top');\n\n if (isAnchorTop) {\n // Menu below item, custom view above item\n // Total space needed below item: itemHeight + gap + menuHeight + safeAreaBottom\n // Total space needed above item: customViewHeight + gap + safeAreaTop\n const bottomEdge = itemY + itemHeight + GAP + menuHeight + safeAreaBottom;\n const topEdge = itemY - GAP - customViewHeight - safeAreaTop;\n\n let tY = 0;\n\n // If bottom overflows screen\n if (bottomEdge > screenHeight) {\n tY = screenHeight - bottomEdge;\n }\n // After shifting, check if custom view goes above safe area\n if (topEdge + tY < 0) {\n tY = -topEdge;\n }\n return tY;\n } else {\n // Menu above item, custom view below item\n // Total space needed above item: menuHeight + gap + safeAreaTop\n // Total space needed below item: itemHeight + gap + customViewHeight + safeAreaBottom\n const topEdge = itemY - GAP - menuHeight - safeAreaTop;\n const bottomEdge =\n itemY + itemHeight + GAP + customViewHeight + safeAreaBottom;\n\n let tY = 0;\n // If top overflows screen (goes above safe area)\n if (topEdge < 0) {\n tY = -topEdge;\n }\n // After shifting, check if custom view goes below screen\n if (bottomEdge + tY > screenHeight) {\n tY = screenHeight - bottomEdge;\n }\n return tY;\n }\n};\n\nexport const getTransformOrigin = (\n posX: number,\n itemWidth: number,\n windowWidth: number,\n bottom?: boolean\n): TransformOriginAnchorPosition => {\n 'worklet';\n const distanceToLeft = Math.round(posX + itemWidth / 2);\n const distanceToRight = Math.round(windowWidth - distanceToLeft);\n\n let position: TransformOriginAnchorPosition = bottom\n ? 'bottom-right'\n : 'top-right';\n\n const majority = Math.abs(distanceToLeft - distanceToRight);\n\n if (majority < MENU_TRANSFORM_ORIGIN_TOLERENCE) {\n position = bottom ? 'bottom-center' : 'top-center';\n } else if (distanceToLeft < distanceToRight) {\n position = bottom ? 'bottom-left' : 'top-left';\n }\n\n return position;\n};\n"]}
|
|
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
|
|
|
3
3
|
import Animated, { useAnimatedGestureHandler, useAnimatedProps, useAnimatedStyle, withDelay, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import { TapGestureHandler } from 'react-native-gesture-handler'; // Components
|
|
5
5
|
|
|
6
|
-
import { BlurView } from '
|
|
6
|
+
import { BlurView } from 'expo-blur'; // Utils
|
|
7
7
|
|
|
8
8
|
import { styles } from './styles';
|
|
9
9
|
import { CONTEXT_MENU_STATE, HOLD_ITEM_TRANSFORM_DURATION, IS_IOS, WINDOW_HEIGHT } from '../../constants';
|
|
@@ -52,7 +52,7 @@ const BackdropComponent = () => {
|
|
|
52
52
|
});
|
|
53
53
|
const animatedContainerProps = useAnimatedProps(() => {
|
|
54
54
|
return {
|
|
55
|
-
|
|
55
|
+
intensity: withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0, {
|
|
56
56
|
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
57
57
|
})
|
|
58
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Backdrop.tsx"],"names":["React","memo","StyleSheet","Animated","useAnimatedGestureHandler","useAnimatedProps","useAnimatedStyle","withDelay","withTiming","TapGestureHandler","BlurView","styles","CONTEXT_MENU_STATE","HOLD_ITEM_TRANSFORM_DURATION","IS_IOS","WINDOW_HEIGHT","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","useInternal","AnimatedBlurView","createAnimatedComponent","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","duration","opacityValueAnimation","top","opacity","animatedContainerProps","
|
|
1
|
+
{"version":3,"sources":["Backdrop.tsx"],"names":["React","memo","StyleSheet","Animated","useAnimatedGestureHandler","useAnimatedProps","useAnimatedStyle","withDelay","withTiming","TapGestureHandler","BlurView","styles","CONTEXT_MENU_STATE","HOLD_ITEM_TRANSFORM_DURATION","IS_IOS","WINDOW_HEIGHT","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","useInternal","AnimatedBlurView","createAnimatedComponent","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","duration","opacityValueAnimation","top","opacity","animatedContainerProps","intensity","animatedInnerContainerStyle","backgroundColor","container","absoluteFillObject","Backdrop"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n useAnimatedGestureHandler,\n useAnimatedProps,\n useAnimatedStyle,\n withDelay,\n withTiming,\n} from 'react-native-reanimated';\nimport {\n TapGestureHandler,\n TapGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\n\n// Components\nimport { BlurView } from 'expo-blur';\n\n// Utils\nimport { styles } from './styles';\nimport {\n CONTEXT_MENU_STATE,\n HOLD_ITEM_TRANSFORM_DURATION,\n IS_IOS,\n WINDOW_HEIGHT,\n} from '../../constants';\nimport {\n BACKDROP_LIGHT_BACKGROUND_COLOR,\n BACKDROP_DARK_BACKGROUND_COLOR,\n} from './constants';\nimport { useInternal } from '../../hooks';\n\nconst AnimatedBlurView = IS_IOS\n ? Animated.createAnimatedComponent(BlurView)\n : Animated.View;\n\ntype Context = {\n startPosition: {\n x: number;\n y: number;\n };\n};\n\nconst BackdropComponent = () => {\n const { state, theme } = useInternal();\n\n const tapGestureEvent = useAnimatedGestureHandler<\n TapGestureHandlerGestureEvent,\n Context\n >(\n {\n onStart: (event, context) => {\n context.startPosition = { x: event.x, y: event.y };\n },\n onCancel: () => {\n state.value = CONTEXT_MENU_STATE.END;\n },\n onEnd: (event, context) => {\n const distance = Math.hypot(\n event.x - context.startPosition.x,\n event.y - context.startPosition.y\n );\n const shouldClose = distance < 10;\n const isStateActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n if (shouldClose && isStateActive) {\n state.value = CONTEXT_MENU_STATE.END;\n }\n },\n },\n [state]\n );\n\n const animatedContainerStyle = useAnimatedStyle(() => {\n const topValueAnimation = () =>\n state.value === CONTEXT_MENU_STATE.ACTIVE\n ? 0\n : withDelay(\n HOLD_ITEM_TRANSFORM_DURATION,\n withTiming(WINDOW_HEIGHT, {\n duration: 0,\n })\n );\n\n const opacityValueAnimation = () =>\n withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n return {\n top: topValueAnimation(),\n opacity: opacityValueAnimation(),\n };\n });\n\n const animatedContainerProps = useAnimatedProps(() => {\n return {\n intensity: withTiming(\n state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,\n {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n }\n ),\n };\n });\n\n const animatedInnerContainerStyle = useAnimatedStyle(() => {\n const backgroundColor =\n theme.value === 'light'\n ? BACKDROP_LIGHT_BACKGROUND_COLOR\n : BACKDROP_DARK_BACKGROUND_COLOR;\n\n return { backgroundColor };\n }, [theme]);\n\n return (\n <TapGestureHandler onHandlerStateChange={tapGestureEvent}>\n <AnimatedBlurView\n // @ts-ignore\n tint=\"default\"\n animatedProps={animatedContainerProps}\n style={[styles.container, animatedContainerStyle]}\n >\n <Animated.View\n style={[\n { ...StyleSheet.absoluteFillObject },\n animatedInnerContainerStyle,\n ]}\n />\n </AnimatedBlurView>\n </TapGestureHandler>\n );\n};\n\nconst Backdrop = memo(BackdropComponent);\n\nexport default Backdrop;\n"]}
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import React, { useCallback, useState } from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
|
-
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
|
|
3
|
+
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import { useInternal } from '../../hooks';
|
|
5
|
-
import { HOLD_ITEM_TRANSFORM_DURATION, CONTEXT_MENU_STATE, SPRING_CONFIGURATION, SPRING_CONFIGURATION_MENU, WINDOW_WIDTH } from '../../constants';
|
|
5
|
+
import { HOLD_ITEM_TRANSFORM_DURATION, CONTEXT_MENU_STATE, SPRING_CONFIGURATION, SPRING_CONFIGURATION_MENU, WINDOW_WIDTH, WINDOW_HEIGHT } from '../../constants';
|
|
6
|
+
import { calculateDynamicTransformValue } from '../../utils/calculations';
|
|
6
7
|
|
|
7
8
|
const CustomViewComponent = () => {
|
|
8
9
|
const {
|
|
9
10
|
state,
|
|
10
11
|
menuProps,
|
|
11
|
-
customViewRef
|
|
12
|
+
customViewRef,
|
|
13
|
+
safeAreaInsets
|
|
12
14
|
} = useInternal();
|
|
13
15
|
const [renderFn, setRenderFn] = useState(null);
|
|
14
16
|
const [customViewHeight, setCustomViewHeight] = useState(0);
|
|
15
17
|
const [customViewWidth, setCustomViewWidth] = useState(0);
|
|
18
|
+
const isActive = useSharedValue(false);
|
|
16
19
|
const closeMenu = useCallback(() => {
|
|
17
20
|
state.value = CONTEXT_MENU_STATE.END;
|
|
18
21
|
}, [state]);
|
|
@@ -23,12 +26,18 @@ const CustomViewComponent = () => {
|
|
|
23
26
|
} = event.nativeEvent.layout;
|
|
24
27
|
setCustomViewHeight(height);
|
|
25
28
|
setCustomViewWidth(width);
|
|
26
|
-
|
|
29
|
+
menuProps.value = { ...menuProps.value,
|
|
30
|
+
customViewHeight: height
|
|
31
|
+
};
|
|
32
|
+
}, [menuProps]);
|
|
27
33
|
const clearRenderFn = useCallback(() => {
|
|
28
34
|
setRenderFn(null);
|
|
29
35
|
setCustomViewHeight(0);
|
|
30
36
|
setCustomViewWidth(0);
|
|
31
|
-
|
|
37
|
+
menuProps.value = { ...menuProps.value,
|
|
38
|
+
customViewHeight: 0
|
|
39
|
+
};
|
|
40
|
+
}, [menuProps]);
|
|
32
41
|
const updateRenderFn = useCallback(hasCustomView => {
|
|
33
42
|
if (hasCustomView && customViewRef.current) {
|
|
34
43
|
setRenderFn(() => customViewRef.current);
|
|
@@ -44,11 +53,27 @@ const CustomViewComponent = () => {
|
|
|
44
53
|
hasCustomView
|
|
45
54
|
}) => {
|
|
46
55
|
if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {
|
|
56
|
+
isActive.value = true;
|
|
47
57
|
runOnJS(updateRenderFn)(true);
|
|
48
58
|
} else if (currentState === CONTEXT_MENU_STATE.END) {
|
|
59
|
+
isActive.value = false;
|
|
49
60
|
runOnJS(updateRenderFn)(false);
|
|
50
61
|
}
|
|
51
|
-
}, [state, menuProps]);
|
|
62
|
+
}, [state, menuProps]); // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes
|
|
63
|
+
|
|
64
|
+
const visibilityStyles = useAnimatedStyle(() => {
|
|
65
|
+
return {
|
|
66
|
+
opacity: withTiming(isActive.value ? 1 : 0, {
|
|
67
|
+
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
68
|
+
}),
|
|
69
|
+
transform: [{
|
|
70
|
+
scale: isActive.value ? withSpring(1, SPRING_CONFIGURATION_MENU) : withTiming(0, {
|
|
71
|
+
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
72
|
+
})
|
|
73
|
+
}]
|
|
74
|
+
};
|
|
75
|
+
}, [isActive]); // Positioning style: depends on menuProps and customViewHeight
|
|
76
|
+
|
|
52
77
|
const wrapperStyles = useAnimatedStyle(() => {
|
|
53
78
|
const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
|
|
54
79
|
const isAbove = anchorPositionVertical === 'top'; // Fixed anchor point: top of the item
|
|
@@ -67,50 +92,34 @@ const CustomViewComponent = () => {
|
|
|
67
92
|
left = SCREEN_PADDING;
|
|
68
93
|
}
|
|
69
94
|
|
|
70
|
-
const tY = menuProps.value.
|
|
95
|
+
const tY = calculateDynamicTransformValue(menuProps.value.itemY, menuProps.value.itemHeight, menuProps.value.menuHeight, menuProps.value.customViewHeight, menuProps.value.anchorPosition, WINDOW_HEIGHT, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0); // Positional offset via translateY:
|
|
71
96
|
// above item: shift up by customViewHeight + gap
|
|
72
97
|
// below item: shift down by itemHeight + gap
|
|
73
98
|
|
|
74
99
|
const positionOffsetY = isAbove ? -(customViewHeight + 8) : menuProps.value.itemHeight + 8;
|
|
75
|
-
const scaleAnimation = state.value === CONTEXT_MENU_STATE.ACTIVE ? withSpring(1, SPRING_CONFIGURATION_MENU) : withTiming(0, {
|
|
76
|
-
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
77
|
-
});
|
|
78
|
-
const opacityAnimation = withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
|
|
79
|
-
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
80
|
-
}); // Scale anchor: scale from the edge closest to the item
|
|
81
|
-
|
|
82
|
-
const scaleAnchorOffset = isAbove ? customViewHeight / 2 : -(customViewHeight / 2);
|
|
83
100
|
return {
|
|
84
101
|
top,
|
|
85
102
|
left,
|
|
86
103
|
maxWidth: MAX_WIDTH,
|
|
87
|
-
opacity: opacityAnimation,
|
|
88
104
|
transform: [// 1. Transform value (screen boundary compensation)
|
|
89
105
|
{
|
|
90
|
-
translateY:
|
|
91
|
-
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
92
|
-
})
|
|
106
|
+
translateY: withSpring(tY, SPRING_CONFIGURATION)
|
|
93
107
|
}, // 2. Position offset (animated when customViewHeight changes)
|
|
94
108
|
{
|
|
95
109
|
translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU)
|
|
96
|
-
}, // 3. Scale anchor: move to edge -> scale -> move back
|
|
97
|
-
{
|
|
98
|
-
translateY: scaleAnchorOffset
|
|
99
|
-
}, {
|
|
100
|
-
scale: scaleAnimation
|
|
101
|
-
}, {
|
|
102
|
-
translateY: -scaleAnchorOffset
|
|
103
110
|
}]
|
|
104
111
|
};
|
|
105
112
|
}, [menuProps, customViewHeight, customViewWidth]);
|
|
106
113
|
if (!renderFn) return null;
|
|
107
114
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
108
115
|
style: [styles.customViewWrapper, wrapperStyles]
|
|
116
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
117
|
+
style: visibilityStyles
|
|
109
118
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
110
119
|
onLayout: onLayout
|
|
111
120
|
}, renderFn({
|
|
112
121
|
closeMenu
|
|
113
|
-
})));
|
|
122
|
+
}))));
|
|
114
123
|
};
|
|
115
124
|
|
|
116
125
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CustomView.tsx"],"names":["React","useCallback","useState","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","withSpring","withTiming","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","SPRING_CONFIGURATION_MENU","WINDOW_WIDTH","CustomViewComponent","state","menuProps","customViewRef","renderFn","setRenderFn","customViewHeight","setCustomViewHeight","customViewWidth","setCustomViewWidth","closeMenu","value","END","onLayout","event","height","width","nativeEvent","layout","clearRenderFn","updateRenderFn","hasCustomView","current","setTimeout","currentState","ACTIVE","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","SCREEN_PADDING","MAX_WIDTH","left","itemX","Math","max","tY","transformValue","positionOffsetY","itemHeight","scaleAnimation","duration","opacityAnimation","scaleAnchorOffset","maxWidth","opacity","transform","translateY","scale","styles","customViewWrapper","create","position","zIndex","CustomView","memo"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { useInternal } from '../../hooks';\nimport {\n HOLD_ITEM_TRANSFORM_DURATION,\n CONTEXT_MENU_STATE,\n SPRING_CONFIGURATION,\n SPRING_CONFIGURATION_MENU,\n WINDOW_WIDTH,\n} from '../../constants';\nimport { RenderCustomView } from '../menu/types';\n\nconst CustomViewComponent = () => {\n const { state, menuProps, customViewRef } = useInternal();\n\n const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);\n const [customViewHeight, setCustomViewHeight] = useState(0);\n const [customViewWidth, setCustomViewWidth] = useState(0);\n\n const closeMenu = useCallback(() => {\n state.value = CONTEXT_MENU_STATE.END;\n }, [state]);\n\n const onLayout = useCallback((event: LayoutChangeEvent) => {\n const { height, width } = event.nativeEvent.layout;\n setCustomViewHeight(height);\n setCustomViewWidth(width);\n }, []);\n\n const clearRenderFn = useCallback(() => {\n setRenderFn(null);\n setCustomViewHeight(0);\n setCustomViewWidth(0);\n }, []);\n\n const updateRenderFn = useCallback(\n (hasCustomView: boolean) => {\n if (hasCustomView && customViewRef.current) {\n setRenderFn(() => customViewRef.current);\n } else {\n setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);\n }\n },\n [customViewRef, clearRenderFn]\n );\n\n useAnimatedReaction(\n () => ({\n currentState: state.value,\n hasCustomView: menuProps.value.hasCustomView,\n }),\n ({ currentState, hasCustomView }) => {\n if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {\n runOnJS(updateRenderFn)(true);\n } else if (currentState === CONTEXT_MENU_STATE.END) {\n runOnJS(updateRenderFn)(false);\n }\n },\n [state, menuProps]\n );\n\n const wrapperStyles = useAnimatedStyle(() => {\n const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n const isAbove = anchorPositionVertical === 'top';\n\n // Fixed anchor point: top of the item\n const top = menuProps.value.itemY;\n\n const SCREEN_PADDING = 16;\n const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;\n\n // Start at item's left edge\n let left = menuProps.value.itemX;\n\n // If the view overflows the right edge, shift left\n if (\n customViewWidth > 0 &&\n left + customViewWidth > WINDOW_WIDTH - SCREEN_PADDING\n ) {\n left = Math.max(\n SCREEN_PADDING,\n WINDOW_WIDTH - customViewWidth - SCREEN_PADDING\n );\n }\n if (left < SCREEN_PADDING) {\n left = SCREEN_PADDING;\n }\n const tY = menuProps.value.transformValue;\n\n // Positional offset via translateY:\n // above item: shift up by customViewHeight + gap\n // below item: shift down by itemHeight + gap\n const positionOffsetY = isAbove\n ? -(customViewHeight + 8)\n : menuProps.value.itemHeight + 8;\n\n const scaleAnimation =\n state.value === CONTEXT_MENU_STATE.ACTIVE\n ? withSpring(1, SPRING_CONFIGURATION_MENU)\n : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION });\n\n const opacityAnimation = withTiming(\n state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0,\n { duration: HOLD_ITEM_TRANSFORM_DURATION }\n );\n\n // Scale anchor: scale from the edge closest to the item\n const scaleAnchorOffset = isAbove\n ? customViewHeight / 2\n : -(customViewHeight / 2);\n\n return {\n top,\n left,\n maxWidth: MAX_WIDTH,\n opacity: opacityAnimation,\n transform: [\n // 1. Transform value (screen boundary compensation)\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 // 2. Position offset (animated when customViewHeight changes)\n { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },\n // 3. Scale anchor: move to edge -> scale -> move back\n { translateY: scaleAnchorOffset },\n { scale: scaleAnimation },\n { translateY: -scaleAnchorOffset },\n ],\n };\n }, [menuProps, customViewHeight, customViewWidth]);\n\n if (!renderFn) return null;\n\n return (\n <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>\n <Animated.View onLayout={onLayout}>\n {renderFn({ closeMenu })}\n </Animated.View>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n customViewWrapper: {\n position: 'absolute',\n zIndex: 20,\n },\n});\n\nconst CustomView = React.memo(CustomViewComponent);\n\nexport default CustomView;\n"]}
|
|
1
|
+
{"version":3,"sources":["CustomView.tsx"],"names":["React","useCallback","useState","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","SPRING_CONFIGURATION_MENU","WINDOW_WIDTH","WINDOW_HEIGHT","calculateDynamicTransformValue","CustomViewComponent","state","menuProps","customViewRef","safeAreaInsets","renderFn","setRenderFn","customViewHeight","setCustomViewHeight","customViewWidth","setCustomViewWidth","isActive","closeMenu","value","END","onLayout","event","height","width","nativeEvent","layout","clearRenderFn","updateRenderFn","hasCustomView","current","setTimeout","currentState","ACTIVE","visibilityStyles","opacity","duration","transform","scale","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","SCREEN_PADDING","MAX_WIDTH","left","itemX","Math","max","tY","itemHeight","menuHeight","bottom","positionOffsetY","maxWidth","translateY","styles","customViewWrapper","create","position","zIndex","CustomView","memo"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { useInternal } from '../../hooks';\nimport {\n HOLD_ITEM_TRANSFORM_DURATION,\n CONTEXT_MENU_STATE,\n SPRING_CONFIGURATION,\n SPRING_CONFIGURATION_MENU,\n WINDOW_WIDTH,\n WINDOW_HEIGHT,\n} from '../../constants';\nimport { RenderCustomView } from '../menu/types';\nimport { calculateDynamicTransformValue } from '../../utils/calculations';\n\nconst CustomViewComponent = () => {\n const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();\n\n const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);\n const [customViewHeight, setCustomViewHeight] = useState(0);\n const [customViewWidth, setCustomViewWidth] = useState(0);\n\n const isActive = useSharedValue(false);\n\n const closeMenu = useCallback(() => {\n state.value = CONTEXT_MENU_STATE.END;\n }, [state]);\n\n const onLayout = useCallback(\n (event: LayoutChangeEvent) => {\n const { height, width } = event.nativeEvent.layout;\n setCustomViewHeight(height);\n setCustomViewWidth(width);\n menuProps.value = { ...menuProps.value, customViewHeight: height };\n },\n [menuProps]\n );\n\n const clearRenderFn = useCallback(() => {\n setRenderFn(null);\n setCustomViewHeight(0);\n setCustomViewWidth(0);\n menuProps.value = { ...menuProps.value, customViewHeight: 0 };\n }, [menuProps]);\n\n const updateRenderFn = useCallback(\n (hasCustomView: boolean) => {\n if (hasCustomView && customViewRef.current) {\n setRenderFn(() => customViewRef.current);\n } else {\n setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);\n }\n },\n [customViewRef, clearRenderFn]\n );\n\n useAnimatedReaction(\n () => ({\n currentState: state.value,\n hasCustomView: menuProps.value.hasCustomView,\n }),\n ({ currentState, hasCustomView }) => {\n if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {\n isActive.value = true;\n runOnJS(updateRenderFn)(true);\n } else if (currentState === CONTEXT_MENU_STATE.END) {\n isActive.value = false;\n runOnJS(updateRenderFn)(false);\n }\n },\n [state, menuProps]\n );\n\n // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes\n const visibilityStyles = useAnimatedStyle(() => {\n return {\n opacity: withTiming(isActive.value ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n }),\n transform: [\n {\n scale: isActive.value\n ? withSpring(1, SPRING_CONFIGURATION_MENU)\n : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n },\n ],\n };\n }, [isActive]);\n\n // Positioning style: depends on menuProps and customViewHeight\n const wrapperStyles = useAnimatedStyle(() => {\n const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n const isAbove = anchorPositionVertical === 'top';\n\n // Fixed anchor point: top of the item\n const top = menuProps.value.itemY;\n\n const SCREEN_PADDING = 16;\n const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;\n\n // Start at item's left edge\n let left = menuProps.value.itemX;\n\n // If the view overflows the right edge, shift left\n if (\n customViewWidth > 0 &&\n left + customViewWidth > WINDOW_WIDTH - SCREEN_PADDING\n ) {\n left = Math.max(\n SCREEN_PADDING,\n WINDOW_WIDTH - customViewWidth - SCREEN_PADDING\n );\n }\n if (left < SCREEN_PADDING) {\n left = SCREEN_PADDING;\n }\n const tY = calculateDynamicTransformValue(\n menuProps.value.itemY,\n menuProps.value.itemHeight,\n menuProps.value.menuHeight,\n menuProps.value.customViewHeight,\n menuProps.value.anchorPosition,\n WINDOW_HEIGHT,\n safeAreaInsets?.top || 0,\n safeAreaInsets?.bottom || 0\n );\n\n // Positional offset via translateY:\n // above item: shift up by customViewHeight + gap\n // below item: shift down by itemHeight + gap\n const positionOffsetY = isAbove\n ? -(customViewHeight + 8)\n : menuProps.value.itemHeight + 8;\n\n return {\n top,\n left,\n maxWidth: MAX_WIDTH,\n transform: [\n // 1. Transform value (screen boundary compensation)\n { translateY: withSpring(tY, SPRING_CONFIGURATION) },\n // 2. Position offset (animated when customViewHeight changes)\n { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },\n ],\n };\n }, [menuProps, customViewHeight, customViewWidth]);\n\n if (!renderFn) return null;\n\n return (\n <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>\n <Animated.View style={visibilityStyles}>\n <Animated.View onLayout={onLayout}>\n {renderFn({ closeMenu })}\n </Animated.View>\n </Animated.View>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n customViewWrapper: {\n position: 'absolute',\n zIndex: 20,\n },\n});\n\nconst CustomView = React.memo(CustomViewComponent);\n\nexport default CustomView;\n"]}
|
|
@@ -9,7 +9,7 @@ import { nanoid } from 'nanoid/non-secure';
|
|
|
9
9
|
import * as Haptics from 'expo-haptics'; //#endregion
|
|
10
10
|
//#region utils & types
|
|
11
11
|
|
|
12
|
-
import { getTransformOrigin, calculateMenuHeight } from '../../utils/calculations';
|
|
12
|
+
import { getTransformOrigin, calculateMenuHeight, calculateDynamicTransformValue } from '../../utils/calculations';
|
|
13
13
|
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';
|
|
14
14
|
import { useDeviceOrientation } from '../../hooks';
|
|
15
15
|
import styles from './styles';
|
|
@@ -141,6 +141,7 @@ const HoldItemComponent = ({
|
|
|
141
141
|
menuHeight: menuHeight,
|
|
142
142
|
items: items || [],
|
|
143
143
|
transformValue: transformValue.value,
|
|
144
|
+
customViewHeight: 0,
|
|
144
145
|
actionParams: actionParams || {},
|
|
145
146
|
hasCustomView: !!renderCustomView
|
|
146
147
|
};
|
|
@@ -261,7 +262,8 @@ const HoldItemComponent = ({
|
|
|
261
262
|
duration: 0
|
|
262
263
|
}));
|
|
263
264
|
|
|
264
|
-
|
|
265
|
+
const screenH = deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;
|
|
266
|
+
let tY = calculateDynamicTransformValue(itemRectY.value, itemRectHeight.value, menuHeight, menuProps.value.customViewHeight, transformOrigin.value, screenH, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0);
|
|
265
267
|
|
|
266
268
|
const transformAnimation = () => disableMove ? 0 : isActive.value ? withSpring(tY, SPRING_CONFIGURATION) : withTiming(-0.1, {
|
|
267
269
|
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["HoldItem.tsx"],"names":["React","memo","useMemo","TapGestureHandler","LongPressGestureHandler","Animated","measure","runOnJS","useAnimatedGestureHandler","useAnimatedProps","useAnimatedRef","useAnimatedStyle","useSharedValue","withDelay","withTiming","withSequence","withSpring","useAnimatedReaction","Portal","nanoid","Haptics","getTransformOrigin","calculateMenuHeight","HOLD_ITEM_TRANSFORM_DURATION","HOLD_ITEM_SCALE_DOWN_DURATION","HOLD_ITEM_SCALE_DOWN_VALUE","SPRING_CONFIGURATION","WINDOW_HEIGHT","WINDOW_WIDTH","CONTEXT_MENU_STATE","useDeviceOrientation","styles","styleGuide","useInternal","HoldItemComponent","items","renderCustomView","bottom","containerStyles","disableMove","menuAnchorPosition","activateOn","hapticFeedback","actionParams","closeOnTap","longPressMinDurationMs","children","state","menuProps","customViewRef","safeAreaInsets","deviceOrientation","isActive","isAnimationStarted","itemRectY","itemRectX","itemRectWidth","itemRectHeight","itemScale","transformValue","transformOrigin","key","menuHeight","length","itemsWithSeparator","filter","item","withSeparator","isHold","containerRef","hapticResponse","style","selectionAsync","impactAsync","ImpactFeedbackStyle","notificationAsync","NotificationFeedbackType","activateAnimation","ctx","didMeasureLayout","measured","value","pageY","pageX","height","width","position","calculateTransformValue","isAnchorPointTop","includes","tY","topTransform","spacing","bottomTransform","top","updateCustomViewRef","current","setMenuProps","itemHeight","itemWidth","itemY","itemX","anchorPosition","hasCustomView","scaleBack","duration","onCompletion","isFinised","hasItems","ACTIVE","scaleHold","scaleTap","canCallActivateFunctions","willActivateWithTap","gestureEvent","onActive","_","context","onFinish","overlayGestureEvent","END","animatedContainerStyle","animateOpacity","opacity","transform","scale","containerStyle","animatedPortalStyle","transformAnimation","zIndex","left","translateY","portalContainerStyle","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';\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 renderCustomView,\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, customViewRef, 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 if (!items || items.length === 0) return 0;\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 updateCustomViewRef = () => {\n customViewRef.current = renderCustomView || null;\n };\n\n const setMenuProps = () => {\n 'worklet';\n\n runOnJS(updateCustomViewRef)();\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: items || [],\n transformValue: transformValue.value,\n actionParams: actionParams || {},\n hasCustomView: !!renderCustomView,\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 hasItems = items && items.length > 0;\n const hasCustomView = !!renderCustomView;\n if (isFinised && (hasItems || hasCustomView)) {\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\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"]}
|
|
1
|
+
{"version":3,"sources":["HoldItem.tsx"],"names":["React","memo","useMemo","TapGestureHandler","LongPressGestureHandler","Animated","measure","runOnJS","useAnimatedGestureHandler","useAnimatedProps","useAnimatedRef","useAnimatedStyle","useSharedValue","withDelay","withTiming","withSequence","withSpring","useAnimatedReaction","Portal","nanoid","Haptics","getTransformOrigin","calculateMenuHeight","calculateDynamicTransformValue","HOLD_ITEM_TRANSFORM_DURATION","HOLD_ITEM_SCALE_DOWN_DURATION","HOLD_ITEM_SCALE_DOWN_VALUE","SPRING_CONFIGURATION","WINDOW_HEIGHT","WINDOW_WIDTH","CONTEXT_MENU_STATE","useDeviceOrientation","styles","styleGuide","useInternal","HoldItemComponent","items","renderCustomView","bottom","containerStyles","disableMove","menuAnchorPosition","activateOn","hapticFeedback","actionParams","closeOnTap","longPressMinDurationMs","children","state","menuProps","customViewRef","safeAreaInsets","deviceOrientation","isActive","isAnimationStarted","itemRectY","itemRectX","itemRectWidth","itemRectHeight","itemScale","transformValue","transformOrigin","key","menuHeight","length","itemsWithSeparator","filter","item","withSeparator","isHold","containerRef","hapticResponse","style","selectionAsync","impactAsync","ImpactFeedbackStyle","notificationAsync","NotificationFeedbackType","activateAnimation","ctx","didMeasureLayout","measured","value","pageY","pageX","height","width","position","calculateTransformValue","isAnchorPointTop","includes","tY","topTransform","spacing","bottomTransform","top","updateCustomViewRef","current","setMenuProps","itemHeight","itemWidth","itemY","itemX","anchorPosition","customViewHeight","hasCustomView","scaleBack","duration","onCompletion","isFinised","hasItems","ACTIVE","scaleHold","scaleTap","canCallActivateFunctions","willActivateWithTap","gestureEvent","onActive","_","context","onFinish","overlayGestureEvent","END","animatedContainerStyle","animateOpacity","opacity","transform","scale","containerStyle","animatedPortalStyle","screenH","transformAnimation","zIndex","left","translateY","portalContainerStyle","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';\nimport * as Haptics from 'expo-haptics';\n//#endregion\n\n//#region utils & types\nimport {\n TransformOriginAnchorPosition,\n getTransformOrigin,\n calculateMenuHeight,\n calculateDynamicTransformValue,\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 renderCustomView,\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, customViewRef, 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 if (!items || items.length === 0) return 0;\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 updateCustomViewRef = () => {\n customViewRef.current = renderCustomView || null;\n };\n\n const setMenuProps = () => {\n 'worklet';\n\n runOnJS(updateCustomViewRef)();\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: items || [],\n transformValue: transformValue.value,\n customViewHeight: 0,\n actionParams: actionParams || {},\n hasCustomView: !!renderCustomView,\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 hasItems = items && items.length > 0;\n const hasCustomView = !!renderCustomView;\n if (isFinised && (hasItems || hasCustomView)) {\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\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 const screenH =\n deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;\n let tY = calculateDynamicTransformValue(\n itemRectY.value,\n itemRectHeight.value,\n menuHeight,\n menuProps.value.customViewHeight,\n transformOrigin.value,\n screenH,\n safeAreaInsets?.top || 0,\n safeAreaInsets?.bottom || 0\n );\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"]}
|
|
@@ -3,19 +3,21 @@ import Animated, { useAnimatedStyle, withSpring, withTiming } from 'react-native
|
|
|
3
3
|
import MenuList from './MenuList';
|
|
4
4
|
import styles from './styles';
|
|
5
5
|
import { useInternal } from '../../hooks';
|
|
6
|
-
import { HOLD_ITEM_TRANSFORM_DURATION, CONTEXT_MENU_STATE, SPRING_CONFIGURATION } from '../../constants';
|
|
6
|
+
import { HOLD_ITEM_TRANSFORM_DURATION, CONTEXT_MENU_STATE, SPRING_CONFIGURATION, WINDOW_HEIGHT } from '../../constants';
|
|
7
|
+
import { calculateDynamicTransformValue } from '../../utils/calculations';
|
|
7
8
|
|
|
8
9
|
const MenuComponent = () => {
|
|
9
10
|
const {
|
|
10
11
|
state,
|
|
11
|
-
menuProps
|
|
12
|
+
menuProps,
|
|
13
|
+
safeAreaInsets
|
|
12
14
|
} = useInternal();
|
|
13
15
|
const wrapperStyles = useAnimatedStyle(() => {
|
|
14
16
|
const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
|
|
15
17
|
const top = anchorPositionVertical === 'top' ? menuProps.value.itemHeight + menuProps.value.itemY + 8 : menuProps.value.itemY - 8;
|
|
16
18
|
const left = menuProps.value.itemX;
|
|
17
19
|
const width = menuProps.value.itemWidth;
|
|
18
|
-
const tY = menuProps.value.
|
|
20
|
+
const tY = calculateDynamicTransformValue(menuProps.value.itemY, menuProps.value.itemHeight, menuProps.value.menuHeight, menuProps.value.customViewHeight, menuProps.value.anchorPosition, WINDOW_HEIGHT, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0);
|
|
19
21
|
return {
|
|
20
22
|
top,
|
|
21
23
|
left,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Menu.tsx"],"names":["React","Animated","useAnimatedStyle","withSpring","withTiming","MenuList","styles","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","MenuComponent","state","menuProps","wrapperStyles","anchorPositionVertical","value","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","
|
|
1
|
+
{"version":3,"sources":["Menu.tsx"],"names":["React","Animated","useAnimatedStyle","withSpring","withTiming","MenuList","styles","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","WINDOW_HEIGHT","calculateDynamicTransformValue","MenuComponent","state","menuProps","safeAreaInsets","wrapperStyles","anchorPositionVertical","value","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","menuHeight","customViewHeight","bottom","transform","translateY","ACTIVE","duration","menuWrapper","Menu","memo"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IACEC,gBADF,EAEEC,UAFF,EAGEC,UAHF,QAIO,yBAJP;AAMA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,SAASC,WAAT,QAA4B,aAA5B;AACA,SACEC,4BADF,EAEEC,kBAFF,EAGEC,oBAHF,EAIEC,aAJF,QAKO,iBALP;AAMA,SAASC,8BAAT,QAA+C,0BAA/C;;AAEA,MAAMC,aAAa,GAAG,MAAM;AAC1B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,SAAT;AAAoBC,IAAAA;AAApB,MAAuCT,WAAW,EAAxD;AAEA,QAAMU,aAAa,GAAGf,gBAAgB,CAAC,MAAM;AAC3C,UAAMgB,sBAAsB,GAAGH,SAAS,CAACI,KAAV,CAAgBC,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAA/B;AAEA,UAAMC,GAAG,GACPJ,sBAAsB,KAAK,KAA3B,GACIH,SAAS,CAACI,KAAV,CAAgBI,UAAhB,GAA6BR,SAAS,CAACI,KAAV,CAAgBK,KAA7C,GAAqD,CADzD,GAEIT,SAAS,CAACI,KAAV,CAAgBK,KAAhB,GAAwB,CAH9B;AAIA,UAAMC,IAAI,GAAGV,SAAS,CAACI,KAAV,CAAgBO,KAA7B;AACA,UAAMC,KAAK,GAAGZ,SAAS,CAACI,KAAV,CAAgBS,SAA9B;AACA,UAAMC,EAAE,GAAGjB,8BAA8B,CACvCG,SAAS,CAACI,KAAV,CAAgBK,KADuB,EAEvCT,SAAS,CAACI,KAAV,CAAgBI,UAFuB,EAGvCR,SAAS,CAACI,KAAV,CAAgBW,UAHuB,EAIvCf,SAAS,CAACI,KAAV,CAAgBY,gBAJuB,EAKvChB,SAAS,CAACI,KAAV,CAAgBC,cALuB,EAMvCT,aANuC,EAOvC,CAAAK,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEM,GAAhB,KAAuB,CAPgB,EAQvC,CAAAN,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEgB,MAAhB,KAA0B,CARa,CAAzC;AAWA,WAAO;AACLV,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILM,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EACRpB,KAAK,CAACK,KAAN,KAAgBV,kBAAkB,CAAC0B,MAAnC,GACIhC,UAAU,CAAC0B,EAAD,EAAKnB,oBAAL,CADd,GAEIN,UAAU,CAAC,CAAD,EAAI;AAAEgC,UAAAA,QAAQ,EAAE5B;AAAZ,SAAJ;AAJlB,OADS;AAJN,KAAP;AAaD,GAjCqC,EAiCnC,CAACO,SAAD,CAjCmC,CAAtC;AAmCA,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACT,MAAM,CAAC+B,WAAR,EAAqBpB,aAArB;AAAtB,kBACE,oBAAC,QAAD,OADF,CADF;AAKD,CA3CD;;AA6CA,MAAMqB,IAAI,gBAAGtC,KAAK,CAACuC,IAAN,CAAW1B,aAAX,CAAb;AAEA,eAAeyB,IAAf","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 WINDOW_HEIGHT,\n} from '../../constants';\nimport { calculateDynamicTransformValue } from '../../utils/calculations';\n\nconst MenuComponent = () => {\n const { state, menuProps, safeAreaInsets } = 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 = calculateDynamicTransformValue(\n menuProps.value.itemY,\n menuProps.value.itemHeight,\n menuProps.value.menuHeight,\n menuProps.value.customViewHeight,\n menuProps.value.anchorPosition,\n WINDOW_HEIGHT,\n safeAreaInsets?.top || 0,\n safeAreaInsets?.bottom || 0\n );\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"]}
|
|
@@ -69,6 +69,7 @@ const MenuListComponent = () => {
|
|
|
69
69
|
runOnJS(setter)(_items);
|
|
70
70
|
}
|
|
71
71
|
}, [menuProps]);
|
|
72
|
+
if (itemList.length === 0) return null;
|
|
72
73
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
73
74
|
style: [styles.menuContainer, messageStyles]
|
|
74
75
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","withTiming","calculateMenuHeight","menuAnimationAnchor","MenuItems","SPRING_CONFIGURATION_MENU","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","styles","useInternal","deepEqual","leftOrRight","MenuListComponent","state","theme","menuProps","itemList","setItemList","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","ACTIVE","duration","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","menuContainer","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,EAMEC,UANF,EAOEC,UAPF,QAQO,yBARP;AAUA,SACEC,mBADF,EAEEC,mBAFF,QAGO,0BAHP;AAKA,OAAOC,SAAP,MAAsB,aAAtB;AAEA,SACEC,yBADF,EAEEC,4BAFF,EAGEC,kBAHF,QAIO,iBAJP;AAMA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,SAASC,WAAT,QAA4B,aAA5B;AACA,SAASC,SAAT,QAA0B,yBAA1B;AACA,SAASC,WAAT,QAA4B,gBAA5B;;AAEA,MAAMC,iBAAiB,GAAG,MAAM;AAC9B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA;AAAhB,MAA8BN,WAAW,EAA/C;AAEA,QAAM,CAACO,QAAD,EAAWC,WAAX,IAA0BzB,KAAK,CAAC0B,QAAN,CAAgC,EAAhC,CAAhC;AAEA,QAAMC,UAAU,GAAGrB,eAAe,CAAC,MAAM;AACvC,UAAMsB,kBAAkB,GAAGL,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBC,MAAtB,CACzBC,IAAI,IAAIA,IAAI,CAACC,aADY,CAA3B;AAGA,WAAOvB,mBAAmB,CACxBa,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBI,MADE,EAExBN,kBAAkB,CAACM,MAFK,CAA1B;AAID,GARiC,EAQ/B,CAACX,SAAD,CAR+B,CAAlC;AASA,QAAMY,QAAQ,GAAG5B,cAAc,CAAkB,EAAlB,CAA/B;AAEA,QAAM6B,aAAa,GAAG/B,gBAAgB,CAAC,MAAM;AAC3C,UAAMuB,kBAAkB,GAAGL,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBC,MAAtB,CACzBC,IAAI,IAAIA,IAAI,CAACC,aADY,CAA3B;AAIA,UAAMI,SAAS,GAAG1B,mBAAmB,CACnCY,SAAS,CAACM,KAAV,CAAgBS,cADmB,EAEnCf,SAAS,CAACM,KAAV,CAAgBU,SAFmB,EAGnChB,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBI,MAHa,EAInCN,kBAAkB,CAACM,MAJgB,CAArC;;AAOA,UAAMM,aAAa,GAAGrB,WAAW,CAACI,SAAD,CAAjC;;AAEA,UAAMkB,kBAAkB,GAAG,MACzBpB,KAAK,CAACQ,KAAN,KAAgBd,kBAAkB,CAAC2B,MAAnC,GACIlC,UAAU,CAAC,CAAD,EAAIK,yBAAJ,CADd,GAEIJ,UAAU,CAAC,CAAD,EAAI;AACZkC,MAAAA,QAAQ,EAAE7B;AADE,KAAJ,CAHhB;;AAOA,UAAM8B,gBAAgB,GAAG,MACvBnC,UAAU,CAACY,KAAK,CAACQ,KAAN,KAAgBd,kBAAkB,CAAC2B,MAAnC,GAA4C,CAA5C,GAAgD,CAAjD,EAAoD;AAC5DC,MAAAA,QAAQ,EAAE7B;AADkD,KAApD,CADZ;;AAKA,WAAO;AACL+B,MAAAA,IAAI,EAAEL,aADD;AAELM,MAAAA,MAAM,EAAEnB,UAAU,CAACE,KAFd;AAGLkB,MAAAA,OAAO,EAAEH,gBAAgB,EAHpB;AAILI,MAAAA,SAAS,EAAE,CACT;AAAEC,QAAAA,UAAU,EAAEZ,SAAS,CAACa,wBAAV,CAAmCD;AAAjD,OADS,EAET;AAAEE,QAAAA,UAAU,EAAEd,SAAS,CAACa,wBAAV,CAAmCC;AAAjD,OAFS,EAGT;AACEC,QAAAA,KAAK,EAAEX,kBAAkB;AAD3B,OAHS,EAMT;AAAEQ,QAAAA,UAAU,EAAEZ,SAAS,CAACgB,qBAAV,CAAgCJ;AAA9C,OANS,EAOT;AAAEE,QAAAA,UAAU,EAAEd,SAAS,CAACgB,qBAAV,CAAgCF;AAA9C,OAPS;AAJN,KAAP;AAcD,GAxCqC,CAAtC;AA0CA,QAAMG,2BAA2B,GAAGjD,gBAAgB,CAAC,MAAM;AACzD,UAAMkD,KAAK,GAAGjC,KAAK,CAACO,KAAN,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,SAAjD;AACA,WAAO;AACL2B,MAAAA,eAAe,EAAED;AADZ,KAAP;AAGD,GALmD,EAKjD,CAACjC,KAAD,CALiD,CAApD;;AAOA,QAAMmC,MAAM,GAAI3B,KAAD,IAA4B;AACzCL,IAAAA,WAAW,CAACK,KAAD,CAAX;AACAK,IAAAA,QAAQ,CAACN,KAAT,GAAiBC,KAAjB;AACD,GAHD;;AAKA1B,EAAAA,mBAAmB,CACjB,MAAMmB,SAAS,CAACM,KAAV,CAAgBC,KADL,EAEjB4B,MAAM,IAAI;AACR,QAAI,CAACxC,SAAS,CAACwC,MAAD,EAASvB,QAAQ,CAACN,KAAlB,CAAd,EAAwC;AACtC1B,MAAAA,OAAO,CAACsD,MAAD,CAAP,CAAgBC,MAAhB;AACD;AACF,GANgB,EAOjB,CAACnC,SAAD,CAPiB,CAAnB;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,
|
|
1
|
+
{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","withTiming","calculateMenuHeight","menuAnimationAnchor","MenuItems","SPRING_CONFIGURATION_MENU","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","styles","useInternal","deepEqual","leftOrRight","MenuListComponent","state","theme","menuProps","itemList","setItemList","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","ACTIVE","duration","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","menuContainer","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,EAMEC,UANF,EAOEC,UAPF,QAQO,yBARP;AAUA,SACEC,mBADF,EAEEC,mBAFF,QAGO,0BAHP;AAKA,OAAOC,SAAP,MAAsB,aAAtB;AAEA,SACEC,yBADF,EAEEC,4BAFF,EAGEC,kBAHF,QAIO,iBAJP;AAMA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,SAASC,WAAT,QAA4B,aAA5B;AACA,SAASC,SAAT,QAA0B,yBAA1B;AACA,SAASC,WAAT,QAA4B,gBAA5B;;AAEA,MAAMC,iBAAiB,GAAG,MAAM;AAC9B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA;AAAhB,MAA8BN,WAAW,EAA/C;AAEA,QAAM,CAACO,QAAD,EAAWC,WAAX,IAA0BzB,KAAK,CAAC0B,QAAN,CAAgC,EAAhC,CAAhC;AAEA,QAAMC,UAAU,GAAGrB,eAAe,CAAC,MAAM;AACvC,UAAMsB,kBAAkB,GAAGL,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBC,MAAtB,CACzBC,IAAI,IAAIA,IAAI,CAACC,aADY,CAA3B;AAGA,WAAOvB,mBAAmB,CACxBa,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBI,MADE,EAExBN,kBAAkB,CAACM,MAFK,CAA1B;AAID,GARiC,EAQ/B,CAACX,SAAD,CAR+B,CAAlC;AASA,QAAMY,QAAQ,GAAG5B,cAAc,CAAkB,EAAlB,CAA/B;AAEA,QAAM6B,aAAa,GAAG/B,gBAAgB,CAAC,MAAM;AAC3C,UAAMuB,kBAAkB,GAAGL,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBC,MAAtB,CACzBC,IAAI,IAAIA,IAAI,CAACC,aADY,CAA3B;AAIA,UAAMI,SAAS,GAAG1B,mBAAmB,CACnCY,SAAS,CAACM,KAAV,CAAgBS,cADmB,EAEnCf,SAAS,CAACM,KAAV,CAAgBU,SAFmB,EAGnChB,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBI,MAHa,EAInCN,kBAAkB,CAACM,MAJgB,CAArC;;AAOA,UAAMM,aAAa,GAAGrB,WAAW,CAACI,SAAD,CAAjC;;AAEA,UAAMkB,kBAAkB,GAAG,MACzBpB,KAAK,CAACQ,KAAN,KAAgBd,kBAAkB,CAAC2B,MAAnC,GACIlC,UAAU,CAAC,CAAD,EAAIK,yBAAJ,CADd,GAEIJ,UAAU,CAAC,CAAD,EAAI;AACZkC,MAAAA,QAAQ,EAAE7B;AADE,KAAJ,CAHhB;;AAOA,UAAM8B,gBAAgB,GAAG,MACvBnC,UAAU,CAACY,KAAK,CAACQ,KAAN,KAAgBd,kBAAkB,CAAC2B,MAAnC,GAA4C,CAA5C,GAAgD,CAAjD,EAAoD;AAC5DC,MAAAA,QAAQ,EAAE7B;AADkD,KAApD,CADZ;;AAKA,WAAO;AACL+B,MAAAA,IAAI,EAAEL,aADD;AAELM,MAAAA,MAAM,EAAEnB,UAAU,CAACE,KAFd;AAGLkB,MAAAA,OAAO,EAAEH,gBAAgB,EAHpB;AAILI,MAAAA,SAAS,EAAE,CACT;AAAEC,QAAAA,UAAU,EAAEZ,SAAS,CAACa,wBAAV,CAAmCD;AAAjD,OADS,EAET;AAAEE,QAAAA,UAAU,EAAEd,SAAS,CAACa,wBAAV,CAAmCC;AAAjD,OAFS,EAGT;AACEC,QAAAA,KAAK,EAAEX,kBAAkB;AAD3B,OAHS,EAMT;AAAEQ,QAAAA,UAAU,EAAEZ,SAAS,CAACgB,qBAAV,CAAgCJ;AAA9C,OANS,EAOT;AAAEE,QAAAA,UAAU,EAAEd,SAAS,CAACgB,qBAAV,CAAgCF;AAA9C,OAPS;AAJN,KAAP;AAcD,GAxCqC,CAAtC;AA0CA,QAAMG,2BAA2B,GAAGjD,gBAAgB,CAAC,MAAM;AACzD,UAAMkD,KAAK,GAAGjC,KAAK,CAACO,KAAN,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,SAAjD;AACA,WAAO;AACL2B,MAAAA,eAAe,EAAED;AADZ,KAAP;AAGD,GALmD,EAKjD,CAACjC,KAAD,CALiD,CAApD;;AAOA,QAAMmC,MAAM,GAAI3B,KAAD,IAA4B;AACzCL,IAAAA,WAAW,CAACK,KAAD,CAAX;AACAK,IAAAA,QAAQ,CAACN,KAAT,GAAiBC,KAAjB;AACD,GAHD;;AAKA1B,EAAAA,mBAAmB,CACjB,MAAMmB,SAAS,CAACM,KAAV,CAAgBC,KADL,EAEjB4B,MAAM,IAAI;AACR,QAAI,CAACxC,SAAS,CAACwC,MAAD,EAASvB,QAAQ,CAACN,KAAlB,CAAd,EAAwC;AACtC1B,MAAAA,OAAO,CAACsD,MAAD,CAAP,CAAgBC,MAAhB;AACD;AACF,GANgB,EAOjB,CAACnC,SAAD,CAPiB,CAAnB;AAUA,MAAIC,QAAQ,CAACU,MAAT,KAAoB,CAAxB,EAA2B,OAAO,IAAP;AAE3B,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAAClB,MAAM,CAAC2C,aAAR,EAAuBvB,aAAvB;AAAtB,kBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACLnC,UAAU,CAAC2D,kBADN,EAEL5C,MAAM,CAAC6C,kBAFF,EAGLP,2BAHK;AADT,kBAOE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAE9B;AAAlB,IAPF,CADF,CADF;AAaD,CA/FD;;AAiGA,MAAMsC,QAAQ,gBAAG9D,KAAK,CAAC+D,IAAN,CAAW3C,iBAAX,CAAjB;AAEA,eAAe0C,QAAf","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\n\nimport {\n calculateMenuHeight,\n menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n SPRING_CONFIGURATION_MENU,\n HOLD_ITEM_TRANSFORM_DURATION,\n CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n const { state, theme, menuProps } = useInternal();\n\n const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n const menuHeight = useDerivedValue(() => {\n const itemsWithSeparator = menuProps.value.items.filter(\n item => item.withSeparator\n );\n return calculateMenuHeight(\n menuProps.value.items.length,\n itemsWithSeparator.length\n );\n }, [menuProps]);\n const prevList = useSharedValue<MenuItemProps[]>([]);\n\n const messageStyles = useAnimatedStyle(() => {\n const itemsWithSeparator = menuProps.value.items.filter(\n item => item.withSeparator\n );\n\n const translate = menuAnimationAnchor(\n menuProps.value.anchorPosition,\n menuProps.value.itemWidth,\n menuProps.value.items.length,\n itemsWithSeparator.length\n );\n\n const _leftPosition = leftOrRight(menuProps);\n\n const menuScaleAnimation = () =>\n state.value === CONTEXT_MENU_STATE.ACTIVE\n ? withSpring(1, SPRING_CONFIGURATION_MENU)\n : withTiming(0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n const opacityAnimation = () =>\n withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n return {\n left: _leftPosition,\n height: menuHeight.value,\n opacity: opacityAnimation(),\n transform: [\n { translateX: translate.beginningTransformations.translateX },\n { translateY: translate.beginningTransformations.translateY },\n {\n scale: menuScaleAnimation(),\n },\n { translateX: translate.endingTransformations.translateX },\n { translateY: translate.endingTransformations.translateY },\n ],\n };\n });\n\n const animatedInnerContainerStyle = useAnimatedStyle(() => {\n const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n return {\n backgroundColor: color,\n };\n }, [theme]);\n\n const setter = (items: MenuItemProps[]) => {\n setItemList(items);\n prevList.value = items;\n };\n\n useAnimatedReaction(\n () => menuProps.value.items,\n _items => {\n if (!deepEqual(_items, prevList.value)) {\n runOnJS(setter)(_items);\n }\n },\n [menuProps]\n );\n\n if (itemList.length === 0) return null;\n\n return (\n <Animated.View style={[styles.menuContainer, messageStyles]}>\n <Animated.View\n style={[\n StyleSheet.absoluteFillObject,\n styles.menuInnerContainer,\n animatedInnerContainerStyle,\n ]}\n >\n <MenuItems items={itemList} />\n </Animated.View>\n </Animated.View>\n );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Provider.tsx"],"names":["React","memo","useEffect","useMemo","useRef","PortalProvider","Animated","useSharedValue","useAnimatedReaction","runOnJS","GestureHandlerRootView","Backdrop","InternalContext","CONTEXT_MENU_STATE","Menu","CustomView","AnimatedIcon","ProviderComponent","children","theme","selectedTheme","iconComponent","safeAreaInsets","onOpen","onClose","createAnimatedComponent","state","UNDETERMINED","menuProps","itemHeight","itemWidth","itemX","itemY","items","anchorPosition","menuHeight","transformValue","actionParams","hasCustomView","customViewRef","value","ACTIVE","END","internalContextVariables","top","bottom","left","right","flex","Provider"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,SAAtB,EAAiCC,OAAjC,EAA0CC,MAA1C,QAAwD,OAAxD;AACA,SAASC,cAAT,QAA+B,gBAA/B;AACA,OAAOC,QAAP,
|
|
1
|
+
{"version":3,"sources":["Provider.tsx"],"names":["React","memo","useEffect","useMemo","useRef","PortalProvider","Animated","useSharedValue","useAnimatedReaction","runOnJS","GestureHandlerRootView","Backdrop","InternalContext","CONTEXT_MENU_STATE","Menu","CustomView","AnimatedIcon","ProviderComponent","children","theme","selectedTheme","iconComponent","safeAreaInsets","onOpen","onClose","createAnimatedComponent","state","UNDETERMINED","menuProps","itemHeight","itemWidth","itemX","itemY","items","anchorPosition","menuHeight","transformValue","customViewHeight","actionParams","hasCustomView","customViewRef","value","ACTIVE","END","internalContextVariables","top","bottom","left","right","flex","Provider"],"mappings":"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","sourcesContent":["import React, { memo, useEffect, useMemo, useRef } from 'react';\nimport { PortalProvider } from '@gorhom/portal';\nimport Animated, {\n useSharedValue,\n useAnimatedReaction,\n runOnJS,\n} from 'react-native-reanimated';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\n// Components\nimport { Backdrop } from '../backdrop';\n\n// Utils\nimport { InternalContext } from '../../context/internal';\nimport { HoldMenuProviderProps } from './types';\nimport { StateProps, Action } from './reducer';\nimport { CONTEXT_MENU_STATE } from '../../constants';\nimport { MenuInternalProps } from '../menu/types';\nimport Menu from '../menu';\nimport CustomView from '../customView/CustomView';\nimport { RenderCustomView } from '../menu/types';\n\nexport interface Store {\n state: StateProps;\n dispatch?: React.Dispatch<Action>;\n}\n\nexport let AnimatedIcon: any;\n\nconst ProviderComponent = ({\n children,\n theme: selectedTheme,\n iconComponent,\n safeAreaInsets,\n onOpen,\n onClose,\n}: HoldMenuProviderProps) => {\n if (iconComponent)\n AnimatedIcon = Animated.createAnimatedComponent(iconComponent);\n\n const state = useSharedValue<CONTEXT_MENU_STATE>(\n CONTEXT_MENU_STATE.UNDETERMINED\n );\n const theme = useSharedValue<'light' | 'dark'>(selectedTheme || 'light');\n const menuProps = useSharedValue<MenuInternalProps>({\n itemHeight: 0,\n itemWidth: 0,\n itemX: 0,\n itemY: 0,\n items: [],\n anchorPosition: 'top-center',\n menuHeight: 0,\n transformValue: 0,\n customViewHeight: 0,\n actionParams: {},\n hasCustomView: false,\n });\n const customViewRef = useRef<RenderCustomView | null>(null);\n\n useEffect(() => {\n theme.value = selectedTheme || 'light';\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedTheme]);\n\n useAnimatedReaction(\n () => state.value,\n state => {\n switch (state) {\n case CONTEXT_MENU_STATE.ACTIVE: {\n if (onOpen) runOnJS(onOpen)();\n break;\n }\n case CONTEXT_MENU_STATE.END: {\n if (onClose) runOnJS(onClose)();\n break;\n }\n }\n },\n [state]\n );\n\n const internalContextVariables = useMemo(\n () => ({\n state,\n theme,\n menuProps,\n customViewRef,\n safeAreaInsets: safeAreaInsets || {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n }),\n [state, theme, menuProps, safeAreaInsets]\n );\n\n return (\n <GestureHandlerRootView style={{ flex: 1 }}>\n <InternalContext.Provider value={internalContextVariables}>\n <PortalProvider>\n {children}\n <Backdrop />\n <Menu />\n <CustomView />\n </PortalProvider>\n </InternalContext.Provider>\n </GestureHandlerRootView>\n );\n};\n\nconst Provider = memo(ProviderComponent);\n\nexport default Provider;\n"]}
|