react-native-hold-menu-actions 0.1.11 → 0.1.13
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 -6
- package/lib/commonjs/components/backdrop/Backdrop.js.map +1 -1
- package/lib/commonjs/components/customView/CustomView.js +142 -0
- package/lib/commonjs/components/customView/CustomView.js.map +1 -0
- package/lib/commonjs/components/holdItem/HoldItem.js +19 -24
- package/lib/commonjs/components/holdItem/HoldItem.js.map +1 -1
- package/lib/commonjs/components/menu/Menu.js +1 -3
- package/lib/commonjs/components/menu/Menu.js.map +1 -1
- package/lib/commonjs/components/menu/MenuList.js +13 -3
- package/lib/commonjs/components/menu/MenuList.js.map +1 -1
- package/lib/commonjs/components/provider/Provider.js +6 -5
- package/lib/commonjs/components/provider/Provider.js.map +1 -1
- package/lib/commonjs/context/internal.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/components/backdrop/Backdrop.js +3 -6
- package/lib/module/components/backdrop/Backdrop.js.map +1 -1
- package/lib/module/components/customView/CustomView.js +124 -0
- package/lib/module/components/customView/CustomView.js.map +1 -0
- package/lib/module/components/holdItem/HoldItem.js +20 -24
- package/lib/module/components/holdItem/HoldItem.js.map +1 -1
- package/lib/module/components/menu/Menu.js +1 -3
- package/lib/module/components/menu/Menu.js.map +1 -1
- package/lib/module/components/menu/MenuList.js +13 -5
- package/lib/module/components/menu/MenuList.js.map +1 -1
- package/lib/module/components/provider/Provider.js +6 -5
- package/lib/module/components/provider/Provider.js.map +1 -1
- package/lib/module/context/internal.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/components/customView/CustomView.d.ts +3 -0
- package/lib/typescript/components/holdItem/HoldItem.d.ts +1 -1
- package/lib/typescript/components/holdItem/types.d.ts +20 -14
- package/lib/typescript/components/menu/types.d.ts +7 -0
- package/lib/typescript/components/provider/Provider.d.ts +1 -1
- package/lib/typescript/components/provider/types.d.ts +1 -1
- package/lib/typescript/context/internal.d.ts +3 -4
- package/lib/typescript/index.d.ts +0 -2
- package/package.json +1 -1
- package/src/components/backdrop/Backdrop.tsx +2 -5
- package/src/components/customView/CustomView.tsx +164 -0
- package/src/components/holdItem/HoldItem.tsx +20 -25
- package/src/components/holdItem/types.d.ts +20 -14
- package/src/components/menu/Menu.tsx +4 -5
- package/src/components/menu/MenuList.tsx +23 -4
- package/src/components/menu/types.d.ts +7 -0
- package/src/components/provider/Provider.tsx +16 -18
- package/src/components/provider/types.d.ts +1 -1
- package/src/context/internal.ts +3 -8
- package/src/index.ts +0 -6
- package/lib/commonjs/components/provider/Content.js +0 -74
- package/lib/commonjs/components/provider/Content.js.map +0 -1
- package/lib/module/components/provider/Content.js +0 -59
- package/lib/module/components/provider/Content.js.map +0 -1
- package/lib/typescript/components/provider/Content.d.ts +0 -2
- package/src/components/provider/Content.tsx +0 -93
|
@@ -57,20 +57,17 @@ const BackdropComponent = () => {
|
|
|
57
57
|
}
|
|
58
58
|
}, [state]);
|
|
59
59
|
const animatedContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
const topValueAnimation = () => isActive ? 0 : (0, _reactNativeReanimated.withDelay)(_constants.HOLD_ITEM_TRANSFORM_DURATION, (0, _reactNativeReanimated.withTiming)(_constants.WINDOW_HEIGHT, {
|
|
60
|
+
const topValueAnimation = () => state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? 0 : (0, _reactNativeReanimated.withDelay)(_constants.HOLD_ITEM_TRANSFORM_DURATION, (0, _reactNativeReanimated.withTiming)(_constants.WINDOW_HEIGHT, {
|
|
63
61
|
duration: 0
|
|
64
62
|
}));
|
|
65
63
|
|
|
66
|
-
const opacityValueAnimation = () => (0, _reactNativeReanimated.withTiming)(
|
|
64
|
+
const opacityValueAnimation = () => (0, _reactNativeReanimated.withTiming)(state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
|
|
67
65
|
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
68
66
|
});
|
|
69
67
|
|
|
70
68
|
return {
|
|
71
69
|
top: topValueAnimation(),
|
|
72
|
-
opacity: opacityValueAnimation()
|
|
73
|
-
pointerEvents: isActive ? 'auto' : 'none'
|
|
70
|
+
opacity: opacityValueAnimation()
|
|
74
71
|
};
|
|
75
72
|
});
|
|
76
73
|
const animatedContainerProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Backdrop.tsx"],"names":["AnimatedBlurView","IS_IOS","Animated","createAnimatedComponent","BlurView","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","CONTEXT_MENU_STATE","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","
|
|
1
|
+
{"version":3,"sources":["Backdrop.tsx"],"names":["AnimatedBlurView","IS_IOS","Animated","createAnimatedComponent","BlurView","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","CONTEXT_MENU_STATE","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","HOLD_ITEM_TRANSFORM_DURATION","WINDOW_HEIGHT","duration","opacityValueAnimation","top","opacity","animatedContainerProps","blurAmount","animatedInnerContainerStyle","backgroundColor","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","styles","container","StyleSheet","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 '@react-native-community/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 blurAmount: 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"]}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
13
|
+
|
|
14
|
+
var _hooks = require("../../hooks");
|
|
15
|
+
|
|
16
|
+
var _constants = require("../../constants");
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
const CustomViewComponent = () => {
|
|
23
|
+
const {
|
|
24
|
+
state,
|
|
25
|
+
menuProps,
|
|
26
|
+
customViewRef
|
|
27
|
+
} = (0, _hooks.useInternal)();
|
|
28
|
+
const [renderFn, setRenderFn] = (0, _react.useState)(null);
|
|
29
|
+
const [customViewHeight, setCustomViewHeight] = (0, _react.useState)(0);
|
|
30
|
+
const [customViewWidth, setCustomViewWidth] = (0, _react.useState)(0);
|
|
31
|
+
const closeMenu = (0, _react.useCallback)(() => {
|
|
32
|
+
state.value = _constants.CONTEXT_MENU_STATE.END;
|
|
33
|
+
}, [state]);
|
|
34
|
+
const onLayout = (0, _react.useCallback)(event => {
|
|
35
|
+
const {
|
|
36
|
+
height,
|
|
37
|
+
width
|
|
38
|
+
} = event.nativeEvent.layout;
|
|
39
|
+
setCustomViewHeight(height);
|
|
40
|
+
setCustomViewWidth(width);
|
|
41
|
+
}, []);
|
|
42
|
+
const clearRenderFn = (0, _react.useCallback)(() => {
|
|
43
|
+
setRenderFn(null);
|
|
44
|
+
setCustomViewHeight(0);
|
|
45
|
+
setCustomViewWidth(0);
|
|
46
|
+
}, []);
|
|
47
|
+
const updateRenderFn = (0, _react.useCallback)(hasCustomView => {
|
|
48
|
+
if (hasCustomView && customViewRef.current) {
|
|
49
|
+
setRenderFn(() => customViewRef.current);
|
|
50
|
+
} else {
|
|
51
|
+
setTimeout(clearRenderFn, _constants.HOLD_ITEM_TRANSFORM_DURATION);
|
|
52
|
+
}
|
|
53
|
+
}, [customViewRef, clearRenderFn]);
|
|
54
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => ({
|
|
55
|
+
currentState: state.value,
|
|
56
|
+
hasCustomView: menuProps.value.hasCustomView
|
|
57
|
+
}), ({
|
|
58
|
+
currentState,
|
|
59
|
+
hasCustomView
|
|
60
|
+
}) => {
|
|
61
|
+
if (currentState === _constants.CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {
|
|
62
|
+
(0, _reactNativeReanimated.runOnJS)(updateRenderFn)(true);
|
|
63
|
+
} else if (currentState === _constants.CONTEXT_MENU_STATE.END) {
|
|
64
|
+
(0, _reactNativeReanimated.runOnJS)(updateRenderFn)(false);
|
|
65
|
+
}
|
|
66
|
+
}, [state, menuProps]);
|
|
67
|
+
const wrapperStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
68
|
+
const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
|
|
69
|
+
const isAbove = anchorPositionVertical === 'top'; // Fixed anchor point: top of the item
|
|
70
|
+
|
|
71
|
+
const top = menuProps.value.itemY;
|
|
72
|
+
const SCREEN_PADDING = 16;
|
|
73
|
+
const MAX_WIDTH = _constants.WINDOW_WIDTH - SCREEN_PADDING * 2; // Start at item's left edge
|
|
74
|
+
|
|
75
|
+
let left = menuProps.value.itemX; // If the view overflows the right edge, shift left
|
|
76
|
+
|
|
77
|
+
if (customViewWidth > 0 && left + customViewWidth > _constants.WINDOW_WIDTH - SCREEN_PADDING) {
|
|
78
|
+
left = Math.max(SCREEN_PADDING, _constants.WINDOW_WIDTH - customViewWidth - SCREEN_PADDING);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (left < SCREEN_PADDING) {
|
|
82
|
+
left = SCREEN_PADDING;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
const tY = menuProps.value.transformValue; // Positional offset via translateY:
|
|
86
|
+
// above item: shift up by customViewHeight + gap
|
|
87
|
+
// below item: shift down by itemHeight + gap
|
|
88
|
+
|
|
89
|
+
const positionOffsetY = isAbove ? -(customViewHeight + 8) : menuProps.value.itemHeight + 8;
|
|
90
|
+
const scaleAnimation = state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? (0, _reactNativeReanimated.withSpring)(1, _constants.SPRING_CONFIGURATION_MENU) : (0, _reactNativeReanimated.withTiming)(0, {
|
|
91
|
+
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
92
|
+
});
|
|
93
|
+
const opacityAnimation = (0, _reactNativeReanimated.withTiming)(state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
|
|
94
|
+
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
95
|
+
}); // Scale anchor: scale from the edge closest to the item
|
|
96
|
+
|
|
97
|
+
const scaleAnchorOffset = isAbove ? customViewHeight / 2 : -(customViewHeight / 2);
|
|
98
|
+
return {
|
|
99
|
+
top,
|
|
100
|
+
left,
|
|
101
|
+
maxWidth: MAX_WIDTH,
|
|
102
|
+
opacity: opacityAnimation,
|
|
103
|
+
transform: [// 1. Transform value (screen boundary compensation)
|
|
104
|
+
{
|
|
105
|
+
translateY: state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION) : (0, _reactNativeReanimated.withTiming)(0, {
|
|
106
|
+
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
107
|
+
})
|
|
108
|
+
}, // 2. Position offset (animated when customViewHeight changes)
|
|
109
|
+
{
|
|
110
|
+
translateY: (0, _reactNativeReanimated.withSpring)(positionOffsetY, _constants.SPRING_CONFIGURATION_MENU)
|
|
111
|
+
}, // 3. Scale anchor: move to edge -> scale -> move back
|
|
112
|
+
{
|
|
113
|
+
translateY: scaleAnchorOffset
|
|
114
|
+
}, {
|
|
115
|
+
scale: scaleAnimation
|
|
116
|
+
}, {
|
|
117
|
+
translateY: -scaleAnchorOffset
|
|
118
|
+
}]
|
|
119
|
+
};
|
|
120
|
+
}, [menuProps, customViewHeight, customViewWidth]);
|
|
121
|
+
if (!renderFn) return null;
|
|
122
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
123
|
+
style: [styles.customViewWrapper, wrapperStyles]
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
125
|
+
onLayout: onLayout
|
|
126
|
+
}, renderFn({
|
|
127
|
+
closeMenu
|
|
128
|
+
})));
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
const styles = _reactNative.StyleSheet.create({
|
|
132
|
+
customViewWrapper: {
|
|
133
|
+
position: 'absolute',
|
|
134
|
+
zIndex: 20
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
const CustomView = /*#__PURE__*/_react.default.memo(CustomViewComponent);
|
|
139
|
+
|
|
140
|
+
var _default = CustomView;
|
|
141
|
+
exports.default = _default;
|
|
142
|
+
//# sourceMappingURL=CustomView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CustomView.tsx"],"names":["CustomViewComponent","state","menuProps","customViewRef","renderFn","setRenderFn","customViewHeight","setCustomViewHeight","customViewWidth","setCustomViewWidth","closeMenu","value","CONTEXT_MENU_STATE","END","onLayout","event","height","width","nativeEvent","layout","clearRenderFn","updateRenderFn","hasCustomView","current","setTimeout","HOLD_ITEM_TRANSFORM_DURATION","currentState","ACTIVE","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","SCREEN_PADDING","MAX_WIDTH","WINDOW_WIDTH","left","itemX","Math","max","tY","transformValue","positionOffsetY","itemHeight","scaleAnimation","SPRING_CONFIGURATION_MENU","duration","opacityAnimation","scaleAnchorOffset","maxWidth","opacity","transform","translateY","SPRING_CONFIGURATION","scale","styles","customViewWrapper","StyleSheet","create","position","zIndex","CustomView","React","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"]}
|
|
@@ -38,10 +38,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
38
38
|
//#region dependencies
|
|
39
39
|
//#endregion
|
|
40
40
|
//#region utils & types
|
|
41
|
-
const defaultItems = [];
|
|
42
|
-
|
|
43
41
|
const HoldItemComponent = ({
|
|
44
|
-
items
|
|
42
|
+
items,
|
|
43
|
+
renderCustomView,
|
|
45
44
|
bottom,
|
|
46
45
|
containerStyles,
|
|
47
46
|
disableMove,
|
|
@@ -51,15 +50,14 @@ const HoldItemComponent = ({
|
|
|
51
50
|
actionParams,
|
|
52
51
|
closeOnTap,
|
|
53
52
|
longPressMinDurationMs = 150,
|
|
54
|
-
children
|
|
55
|
-
renderContent
|
|
53
|
+
children
|
|
56
54
|
}) => {
|
|
57
55
|
//#region hooks
|
|
58
56
|
const {
|
|
59
57
|
state,
|
|
60
58
|
menuProps,
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
customViewRef,
|
|
60
|
+
safeAreaInsets
|
|
63
61
|
} = (0, _hooks.useInternal)();
|
|
64
62
|
const deviceOrientation = (0, _hooks.useDeviceOrientation)(); //#endregion
|
|
65
63
|
//#region variables
|
|
@@ -75,6 +73,7 @@ const HoldItemComponent = ({
|
|
|
75
73
|
const transformOrigin = (0, _reactNativeReanimated.useSharedValue)(menuAnchorPosition || 'top-right');
|
|
76
74
|
const key = (0, _react.useMemo)(() => `hold-item-${(0, _nonSecure.nanoid)()}`, []);
|
|
77
75
|
const menuHeight = (0, _react.useMemo)(() => {
|
|
76
|
+
if (!items || items.length === 0) return 0;
|
|
78
77
|
const itemsWithSeparator = items.filter(item => item.withSeparator);
|
|
79
78
|
return (0, _calculations.calculateMenuHeight)(items.length, itemsWithSeparator.length);
|
|
80
79
|
}, [items]);
|
|
@@ -131,7 +130,7 @@ const HoldItemComponent = ({
|
|
|
131
130
|
'worklet';
|
|
132
131
|
|
|
133
132
|
const height = deviceOrientation === 'portrait' ? _constants.WINDOW_HEIGHT : _constants.WINDOW_WIDTH;
|
|
134
|
-
const isAnchorPointTop =
|
|
133
|
+
const isAnchorPointTop = transformOrigin.value.includes('top');
|
|
135
134
|
let tY = 0;
|
|
136
135
|
|
|
137
136
|
if (!disableMove) {
|
|
@@ -147,9 +146,14 @@ const HoldItemComponent = ({
|
|
|
147
146
|
return tY;
|
|
148
147
|
};
|
|
149
148
|
|
|
149
|
+
const updateCustomViewRef = () => {
|
|
150
|
+
customViewRef.current = renderCustomView || null;
|
|
151
|
+
};
|
|
152
|
+
|
|
150
153
|
const setMenuProps = () => {
|
|
151
154
|
'worklet';
|
|
152
155
|
|
|
156
|
+
(0, _reactNativeReanimated.runOnJS)(updateCustomViewRef)();
|
|
153
157
|
menuProps.value = {
|
|
154
158
|
itemHeight: itemRectHeight.value,
|
|
155
159
|
itemWidth: itemRectWidth.value,
|
|
@@ -157,9 +161,10 @@ const HoldItemComponent = ({
|
|
|
157
161
|
itemX: itemRectX.value,
|
|
158
162
|
anchorPosition: transformOrigin.value,
|
|
159
163
|
menuHeight: menuHeight,
|
|
160
|
-
items,
|
|
164
|
+
items: items || [],
|
|
161
165
|
transformValue: transformValue.value,
|
|
162
|
-
actionParams: actionParams || {}
|
|
166
|
+
actionParams: actionParams || {},
|
|
167
|
+
hasCustomView: !!renderCustomView
|
|
163
168
|
};
|
|
164
169
|
};
|
|
165
170
|
|
|
@@ -171,33 +176,23 @@ const HoldItemComponent = ({
|
|
|
171
176
|
});
|
|
172
177
|
};
|
|
173
178
|
|
|
174
|
-
const setContentRenderer = () => {
|
|
175
|
-
if (renderContent) {
|
|
176
|
-
contentRenderer.current = params => renderContent({
|
|
177
|
-
closeMenu: params
|
|
178
|
-
});
|
|
179
|
-
} else {
|
|
180
|
-
contentRenderer.current = null;
|
|
181
|
-
}
|
|
182
|
-
};
|
|
183
|
-
|
|
184
179
|
const onCompletion = isFinised => {
|
|
185
180
|
'worklet';
|
|
186
181
|
|
|
187
|
-
const
|
|
182
|
+
const hasItems = items && items.length > 0;
|
|
183
|
+
const hasCustomView = !!renderCustomView;
|
|
188
184
|
|
|
189
|
-
if (isFinised &&
|
|
185
|
+
if (isFinised && (hasItems || hasCustomView)) {
|
|
190
186
|
state.value = _constants.CONTEXT_MENU_STATE.ACTIVE;
|
|
191
187
|
isActive.value = true;
|
|
192
188
|
scaleBack();
|
|
193
|
-
(0, _reactNativeReanimated.runOnJS)(setContentRenderer)();
|
|
194
189
|
|
|
195
190
|
if (hapticFeedback !== 'None') {
|
|
196
191
|
(0, _reactNativeReanimated.runOnJS)(hapticResponse)();
|
|
197
192
|
}
|
|
198
193
|
}
|
|
199
194
|
|
|
200
|
-
isAnimationStarted.value = false;
|
|
195
|
+
isAnimationStarted.value = false;
|
|
201
196
|
};
|
|
202
197
|
|
|
203
198
|
const scaleHold = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["HoldItem.tsx"],"names":["defaultItems","HoldItemComponent","items","bottom","containerStyles","disableMove","menuAnchorPosition","activateOn","hapticFeedback","actionParams","closeOnTap","longPressMinDurationMs","children","renderContent","state","menuProps","safeAreaInsets","contentRenderer","deviceOrientation","isActive","isAnimationStarted","itemRectY","itemRectX","itemRectWidth","itemRectHeight","itemScale","transformValue","transformOrigin","key","menuHeight","itemsWithSeparator","filter","item","withSeparator","length","isHold","containerRef","hapticResponse","style","Haptics","selectionAsync","impactAsync","ImpactFeedbackStyle","notificationAsync","NotificationFeedbackType","activateAnimation","ctx","didMeasureLayout","measured","value","pageY","pageX","height","width","position","WINDOW_WIDTH","WINDOW_HEIGHT","calculateTransformValue","isAnchorPointTop","tY","topTransform","styleGuide","spacing","bottomTransform","top","setMenuProps","itemHeight","itemWidth","itemY","itemX","anchorPosition","scaleBack","duration","HOLD_ITEM_TRANSFORM_DURATION","setContentRenderer","current","params","closeMenu","onCompletion","isFinised","isListValid","CONTEXT_MENU_STATE","ACTIVE","scaleHold","HOLD_ITEM_SCALE_DOWN_VALUE","HOLD_ITEM_SCALE_DOWN_DURATION","scaleTap","canCallActivateFunctions","willActivateWithTap","gestureEvent","onActive","_","context","onFinish","overlayGestureEvent","END","animatedContainerStyle","animateOpacity","opacity","transform","scale","containerStyle","React","useMemo","animatedPortalStyle","transformAnimation","SPRING_CONFIGURATION","zIndex","left","translateY","portalContainerStyle","styles","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';\nimport { MenuItemProps } from '../menu/types';\n//#endregion\n\ntype Context = { didMeasureLayout: boolean };\nconst defaultItems = [] as MenuItemProps[];\nconst HoldItemComponent: React.FC<HoldItemProps> = ({\n items = defaultItems,\n bottom,\n containerStyles,\n disableMove,\n menuAnchorPosition,\n activateOn,\n hapticFeedback,\n actionParams,\n closeOnTap,\n longPressMinDurationMs = 150,\n children,\n renderContent,\n}) => {\n //#region hooks\n const { state, menuProps, safeAreaInsets, contentRenderer } = 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 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 = itemRectY.value > WINDOW_HEIGHT / 2;\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 setMenuProps = () => {\n 'worklet';\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,\n transformValue: transformValue.value,\n actionParams: actionParams || {},\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 setContentRenderer = () => {\n if (renderContent) {\n contentRenderer.current = (params: any) =>\n renderContent({ closeMenu: params });\n } else {\n contentRenderer.current = null;\n }\n };\n\n const onCompletion = (isFinised?: boolean) => {\n 'worklet';\n const isListValid = true;\n // items && items.length > 0;\n if (isFinised && isListValid) {\n state.value = CONTEXT_MENU_STATE.ACTIVE;\n isActive.value = true;\n scaleBack();\n runOnJS(setContentRenderer)();\n if (hapticFeedback !== 'None') {\n runOnJS(hapticResponse)();\n }\n }\n\n isAnimationStarted.value = false;\n\n // TODO: Warn user if item list is empty or not given\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) as React.FC<HoldItemProps>;\n\nexport default HoldItem;\n"]}
|
|
1
|
+
{"version":3,"sources":["HoldItem.tsx"],"names":["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","Haptics","selectionAsync","impactAsync","ImpactFeedbackStyle","notificationAsync","NotificationFeedbackType","activateAnimation","ctx","didMeasureLayout","measured","value","pageY","pageX","height","width","position","WINDOW_WIDTH","WINDOW_HEIGHT","calculateTransformValue","isAnchorPointTop","includes","tY","topTransform","styleGuide","spacing","bottomTransform","top","updateCustomViewRef","current","setMenuProps","itemHeight","itemWidth","itemY","itemX","anchorPosition","hasCustomView","scaleBack","duration","HOLD_ITEM_TRANSFORM_DURATION","onCompletion","isFinised","hasItems","CONTEXT_MENU_STATE","ACTIVE","scaleHold","HOLD_ITEM_SCALE_DOWN_VALUE","HOLD_ITEM_SCALE_DOWN_DURATION","scaleTap","canCallActivateFunctions","willActivateWithTap","gestureEvent","onActive","_","context","onFinish","overlayGestureEvent","END","animatedContainerStyle","animateOpacity","opacity","transform","scale","containerStyle","React","useMemo","animatedPortalStyle","transformAnimation","SPRING_CONFIGURATION","zIndex","left","translateY","portalContainerStyle","styles","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"]}
|
|
@@ -34,14 +34,12 @@ const MenuComponent = () => {
|
|
|
34
34
|
const left = menuProps.value.itemX;
|
|
35
35
|
const width = menuProps.value.itemWidth;
|
|
36
36
|
const tY = menuProps.value.transformValue;
|
|
37
|
-
const isActive = state.value === _constants.CONTEXT_MENU_STATE.ACTIVE;
|
|
38
37
|
return {
|
|
39
38
|
top,
|
|
40
39
|
left,
|
|
41
40
|
width,
|
|
42
|
-
pointerEvents: isActive ? 'auto' : 'none',
|
|
43
41
|
transform: [{
|
|
44
|
-
translateY:
|
|
42
|
+
translateY: state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION) : (0, _reactNativeReanimated.withTiming)(0, {
|
|
45
43
|
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
46
44
|
})
|
|
47
45
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Menu.tsx"],"names":["MenuComponent","state","menuProps","wrapperStyles","anchorPositionVertical","value","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","transformValue","
|
|
1
|
+
{"version":3,"sources":["Menu.tsx"],"names":["MenuComponent","state","menuProps","wrapperStyles","anchorPositionVertical","value","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","transformValue","transform","translateY","CONTEXT_MENU_STATE","ACTIVE","SPRING_CONFIGURATION","duration","HOLD_ITEM_TRANSFORM_DURATION","styles","menuWrapper","Menu","React","memo"],"mappings":";;;;;;;AAAA;;AAEA;;AAMA;;AAEA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,aAAa,GAAG,MAAM;AAC1B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAuB,yBAA7B;AAEA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,UAAMC,sBAAsB,GAAGF,SAAS,CAACG,KAAV,CAAgBC,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAA/B;AAEA,UAAMC,GAAG,GACPJ,sBAAsB,KAAK,KAA3B,GACIF,SAAS,CAACG,KAAV,CAAgBI,UAAhB,GAA6BP,SAAS,CAACG,KAAV,CAAgBK,KAA7C,GAAqD,CADzD,GAEIR,SAAS,CAACG,KAAV,CAAgBK,KAAhB,GAAwB,CAH9B;AAIA,UAAMC,IAAI,GAAGT,SAAS,CAACG,KAAV,CAAgBO,KAA7B;AACA,UAAMC,KAAK,GAAGX,SAAS,CAACG,KAAV,CAAgBS,SAA9B;AACA,UAAMC,EAAE,GAAGb,SAAS,CAACG,KAAV,CAAgBW,cAA3B;AAEA,WAAO;AACLR,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILI,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EACRjB,KAAK,CAACI,KAAN,KAAgBc,8BAAmBC,MAAnC,GACI,uCAAWL,EAAX,EAAeM,+BAAf,CADJ,GAEI,uCAAW,CAAX,EAAc;AAAEC,UAAAA,QAAQ,EAAEC;AAAZ,SAAd;AAJR,OADS;AAJN,KAAP;AAaD,GAxBqB,EAwBnB,CAACrB,SAAD,CAxBmB,CAAtB;AA0BA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACsB,gBAAOC,WAAR,EAAqBtB,aAArB;AAAtB,kBACE,6BAAC,iBAAD,OADF,CADF;AAKD,CAlCD;;AAoCA,MAAMuB,IAAI,gBAAGC,eAAMC,IAAN,CAAW5B,aAAX,CAAb;;eAEe0B,I","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} from '../../constants';\n\nconst MenuComponent = () => {\n const { state, menuProps } = 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 = menuProps.value.transformValue;\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"]}
|
|
@@ -13,6 +13,8 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
|
|
|
13
13
|
|
|
14
14
|
var _calculations = require("../../utils/calculations");
|
|
15
15
|
|
|
16
|
+
var _blur = require("@react-native-community/blur");
|
|
17
|
+
|
|
16
18
|
var _MenuItems = _interopRequireDefault(require("./MenuItems"));
|
|
17
19
|
|
|
18
20
|
var _constants = require("../../constants");
|
|
@@ -31,6 +33,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
31
33
|
|
|
32
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
33
35
|
|
|
36
|
+
const AnimatedView = _reactNativeReanimated.default.createAnimatedComponent(_blur.BlurView);
|
|
37
|
+
|
|
34
38
|
const MenuListComponent = () => {
|
|
35
39
|
const {
|
|
36
40
|
state,
|
|
@@ -77,9 +81,13 @@ const MenuListComponent = () => {
|
|
|
77
81
|
};
|
|
78
82
|
});
|
|
79
83
|
const animatedInnerContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
80
|
-
const color = theme.value === 'light' ? '#fff' : '#1A1A1A';
|
|
81
84
|
return {
|
|
82
|
-
backgroundColor:
|
|
85
|
+
backgroundColor: theme.value === 'light' ? _constants.IS_IOS ? 'rgba(255, 255, 255, .75)' : 'rgba(255, 255, 255, .95)' : _constants.IS_IOS ? 'rgba(0,0,0,0.5)' : 'rgba(39, 39, 39, .8)'
|
|
86
|
+
};
|
|
87
|
+
}, [theme]);
|
|
88
|
+
const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
|
|
89
|
+
return {
|
|
90
|
+
blurType: theme.value
|
|
83
91
|
};
|
|
84
92
|
}, [theme]);
|
|
85
93
|
|
|
@@ -93,7 +101,9 @@ const MenuListComponent = () => {
|
|
|
93
101
|
(0, _reactNativeReanimated.runOnJS)(setter)(_items);
|
|
94
102
|
}
|
|
95
103
|
}, [menuProps]);
|
|
96
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement(AnimatedView, {
|
|
105
|
+
blurAmount: 100,
|
|
106
|
+
animatedProps: animatedProps,
|
|
97
107
|
style: [_styles.default.menuContainer, messageStyles]
|
|
98
108
|
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
99
109
|
style: [_reactNative.StyleSheet.absoluteFillObject, _styles.default.menuInnerContainer, animatedInnerContainerStyle]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuList.tsx"],"names":["MenuListComponent","state","theme","menuProps","itemList","setItemList","React","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","CONTEXT_MENU_STATE","ACTIVE","SPRING_CONFIGURATION_MENU","duration","HOLD_ITEM_TRANSFORM_DURATION","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","
|
|
1
|
+
{"version":3,"sources":["MenuList.tsx"],"names":["AnimatedView","Animated","createAnimatedComponent","BlurView","MenuListComponent","state","theme","menuProps","itemList","setItemList","React","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","CONTEXT_MENU_STATE","ACTIVE","SPRING_CONFIGURATION_MENU","duration","HOLD_ITEM_TRANSFORM_DURATION","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","backgroundColor","IS_IOS","animatedProps","blurType","setter","_items","styles","menuContainer","StyleSheet","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n runOnJS,\n useAnimatedProps,\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';\nimport { BlurView } from '@react-native-community/blur';\n\nimport MenuItems from './MenuItems';\n\nimport {\n SPRING_CONFIGURATION_MENU,\n HOLD_ITEM_TRANSFORM_DURATION,\n IS_IOS,\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 AnimatedView = Animated.createAnimatedComponent(BlurView);\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 return {\n backgroundColor:\n theme.value === 'light'\n ? IS_IOS\n ? 'rgba(255, 255, 255, .75)'\n : 'rgba(255, 255, 255, .95)'\n : IS_IOS\n ? 'rgba(0,0,0,0.5)'\n : 'rgba(39, 39, 39, .8)',\n };\n }, [theme]);\n\n const animatedProps = useAnimatedProps(() => {\n return { blurType: theme.value };\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 return (\n <AnimatedView\n blurAmount={100}\n animatedProps={animatedProps}\n style={[styles.menuContainer, messageStyles]}\n >\n <Animated.View\n style={[\n StyleSheet.absoluteFillObject,\n styles.menuInnerContainer,\n animatedInnerContainerStyle,\n ]}\n >\n <MenuItems items={itemList} />\n </Animated.View>\n </AnimatedView>\n );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}
|
|
@@ -21,7 +21,7 @@ var _constants = require("../../constants");
|
|
|
21
21
|
|
|
22
22
|
var _menu = _interopRequireDefault(require("../menu"));
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _CustomView = _interopRequireDefault(require("../customView/CustomView"));
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
27
|
|
|
@@ -54,9 +54,10 @@ const ProviderComponent = ({
|
|
|
54
54
|
anchorPosition: 'top-center',
|
|
55
55
|
menuHeight: 0,
|
|
56
56
|
transformValue: 0,
|
|
57
|
-
actionParams: {}
|
|
57
|
+
actionParams: {},
|
|
58
|
+
hasCustomView: false
|
|
58
59
|
});
|
|
59
|
-
const
|
|
60
|
+
const customViewRef = (0, _react.useRef)(null);
|
|
60
61
|
(0, _react.useEffect)(() => {
|
|
61
62
|
theme.value = selectedTheme || 'light'; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
62
63
|
}, [selectedTheme]);
|
|
@@ -79,7 +80,7 @@ const ProviderComponent = ({
|
|
|
79
80
|
state,
|
|
80
81
|
theme,
|
|
81
82
|
menuProps,
|
|
82
|
-
|
|
83
|
+
customViewRef,
|
|
83
84
|
safeAreaInsets: safeAreaInsets || {
|
|
84
85
|
top: 0,
|
|
85
86
|
bottom: 0,
|
|
@@ -93,7 +94,7 @@ const ProviderComponent = ({
|
|
|
93
94
|
}
|
|
94
95
|
}, /*#__PURE__*/_react.default.createElement(_internal.InternalContext.Provider, {
|
|
95
96
|
value: internalContextVariables
|
|
96
|
-
}, /*#__PURE__*/_react.default.createElement(_portal.PortalProvider, null, children, /*#__PURE__*/_react.default.createElement(_backdrop.Backdrop, null), /*#__PURE__*/_react.default.createElement(_menu.default, null), /*#__PURE__*/_react.default.createElement(
|
|
97
|
+
}, /*#__PURE__*/_react.default.createElement(_portal.PortalProvider, null, children, /*#__PURE__*/_react.default.createElement(_backdrop.Backdrop, null), /*#__PURE__*/_react.default.createElement(_menu.default, null), /*#__PURE__*/_react.default.createElement(_CustomView.default, null))));
|
|
97
98
|
};
|
|
98
99
|
|
|
99
100
|
const Provider = /*#__PURE__*/(0, _react.memo)(ProviderComponent);
|