react-native-hold-menu-actions 0.1.7 → 0.1.8
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 +6 -3
- package/lib/commonjs/components/backdrop/Backdrop.js.map +1 -1
- package/lib/commonjs/components/menu/Menu.js +3 -1
- package/lib/commonjs/components/menu/Menu.js.map +1 -1
- package/lib/module/components/backdrop/Backdrop.js +6 -3
- package/lib/module/components/backdrop/Backdrop.js.map +1 -1
- package/lib/module/components/menu/Menu.js +3 -1
- package/lib/module/components/menu/Menu.js.map +1 -1
- package/package.json +1 -1
- package/src/components/backdrop/Backdrop.tsx +5 -2
- package/src/components/menu/Menu.tsx +5 -4
|
@@ -57,17 +57,20 @@ const BackdropComponent = () => {
|
|
|
57
57
|
}
|
|
58
58
|
}, [state]);
|
|
59
59
|
const animatedContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
60
|
-
const
|
|
60
|
+
const isActive = state.value === _constants.CONTEXT_MENU_STATE.ACTIVE;
|
|
61
|
+
|
|
62
|
+
const topValueAnimation = () => isActive ? 0 : (0, _reactNativeReanimated.withDelay)(_constants.HOLD_ITEM_TRANSFORM_DURATION, (0, _reactNativeReanimated.withTiming)(_constants.WINDOW_HEIGHT, {
|
|
61
63
|
duration: 0
|
|
62
64
|
}));
|
|
63
65
|
|
|
64
|
-
const opacityValueAnimation = () => (0, _reactNativeReanimated.withTiming)(
|
|
66
|
+
const opacityValueAnimation = () => (0, _reactNativeReanimated.withTiming)(isActive ? 1 : 0, {
|
|
65
67
|
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
66
68
|
});
|
|
67
69
|
|
|
68
70
|
return {
|
|
69
71
|
top: topValueAnimation(),
|
|
70
|
-
opacity: opacityValueAnimation()
|
|
72
|
+
opacity: opacityValueAnimation(),
|
|
73
|
+
pointerEvents: isActive ? 'auto' : 'none'
|
|
71
74
|
};
|
|
72
75
|
});
|
|
73
76
|
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","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":";;;;;;;AAAA;;AACA;;AACA;;AAOA;;AAMA;;AAGA;;AACA;;AAMA;;AAIA;;;;;;AAfA;AAGA;AAcA,MAAMA,gBAAgB,GAAGC,oBACrBC,+BAASC,uBAAT,CAAiCC,cAAjC,CADqB,GAErBF,+BAASG,IAFb;;AAWA,MAAMC,iBAAiB,GAAG,MAAM;AAC9B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAmB,yBAAzB;AAEA,QAAMC,eAAe,GAAG,sDAItB;AACEC,IAAAA,OAAO,EAAE,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC3BA,MAAAA,OAAO,CAACC,aAAR,GAAwB;AAAEC,QAAAA,CAAC,EAAEH,KAAK,CAACG,CAAX;AAAcC,QAAAA,CAAC,EAAEJ,KAAK,CAACI;AAAvB,OAAxB;AACD,KAHH;AAIEC,IAAAA,QAAQ,EAAE,MAAM;AACdT,MAAAA,KAAK,CAACU,KAAN,GAAcC,8BAAmBC,GAAjC;AACD,KANH;AAOEC,IAAAA,KAAK,EAAE,CAACT,KAAD,EAAQC,OAAR,KAAoB;AACzB,YAAMS,QAAQ,GAAGC,IAAI,CAACC,KAAL,CACfZ,KAAK,CAACG,CAAN,GAAUF,OAAO,CAACC,aAAR,CAAsBC,CADjB,EAEfH,KAAK,CAACI,CAAN,GAAUH,OAAO,CAACC,aAAR,CAAsBE,CAFjB,CAAjB;AAIA,YAAMS,WAAW,GAAGH,QAAQ,GAAG,EAA/B;AACA,YAAMI,aAAa,GAAGlB,KAAK,CAACU,KAAN,KAAgBC,8BAAmBQ,MAAzD;;AAEA,UAAIF,WAAW,IAAIC,aAAnB,EAAkC;AAChClB,QAAAA,KAAK,CAACU,KAAN,GAAcC,8BAAmBC,GAAjC;AACD;AACF;AAlBH,GAJsB,EAwBtB,CAACZ,KAAD,CAxBsB,CAAxB;AA2BA,QAAMoB,sBAAsB,GAAG,6CAAiB,MAAM;AACpD,UAAMC,
|
|
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","isActive","topValueAnimation","HOLD_ITEM_TRANSFORM_DURATION","WINDOW_HEIGHT","duration","opacityValueAnimation","top","opacity","pointerEvents","animatedContainerProps","blurAmount","animatedInnerContainerStyle","backgroundColor","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","styles","container","StyleSheet","absoluteFillObject","Backdrop"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAOA;;AAMA;;AAGA;;AACA;;AAMA;;AAIA;;;;;;AAfA;AAGA;AAcA,MAAMA,gBAAgB,GAAGC,oBACrBC,+BAASC,uBAAT,CAAiCC,cAAjC,CADqB,GAErBF,+BAASG,IAFb;;AAWA,MAAMC,iBAAiB,GAAG,MAAM;AAC9B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAmB,yBAAzB;AAEA,QAAMC,eAAe,GAAG,sDAItB;AACEC,IAAAA,OAAO,EAAE,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC3BA,MAAAA,OAAO,CAACC,aAAR,GAAwB;AAAEC,QAAAA,CAAC,EAAEH,KAAK,CAACG,CAAX;AAAcC,QAAAA,CAAC,EAAEJ,KAAK,CAACI;AAAvB,OAAxB;AACD,KAHH;AAIEC,IAAAA,QAAQ,EAAE,MAAM;AACdT,MAAAA,KAAK,CAACU,KAAN,GAAcC,8BAAmBC,GAAjC;AACD,KANH;AAOEC,IAAAA,KAAK,EAAE,CAACT,KAAD,EAAQC,OAAR,KAAoB;AACzB,YAAMS,QAAQ,GAAGC,IAAI,CAACC,KAAL,CACfZ,KAAK,CAACG,CAAN,GAAUF,OAAO,CAACC,aAAR,CAAsBC,CADjB,EAEfH,KAAK,CAACI,CAAN,GAAUH,OAAO,CAACC,aAAR,CAAsBE,CAFjB,CAAjB;AAIA,YAAMS,WAAW,GAAGH,QAAQ,GAAG,EAA/B;AACA,YAAMI,aAAa,GAAGlB,KAAK,CAACU,KAAN,KAAgBC,8BAAmBQ,MAAzD;;AAEA,UAAIF,WAAW,IAAIC,aAAnB,EAAkC;AAChClB,QAAAA,KAAK,CAACU,KAAN,GAAcC,8BAAmBC,GAAjC;AACD;AACF;AAlBH,GAJsB,EAwBtB,CAACZ,KAAD,CAxBsB,CAAxB;AA2BA,QAAMoB,sBAAsB,GAAG,6CAAiB,MAAM;AACpD,UAAMC,QAAQ,GAAGrB,KAAK,CAACU,KAAN,KAAgBC,8BAAmBQ,MAApD;;AAEA,UAAMG,iBAAiB,GAAG,MACxBD,QAAQ,GACJ,CADI,GAEJ,sCACEE,uCADF,EAEE,uCAAWC,wBAAX,EAA0B;AACxBC,MAAAA,QAAQ,EAAE;AADc,KAA1B,CAFF,CAHN;;AAUA,UAAMC,qBAAqB,GAAG,MAC5B,uCAAWL,QAAQ,GAAG,CAAH,GAAO,CAA1B,EAA6B;AAC3BI,MAAAA,QAAQ,EAAEF;AADiB,KAA7B,CADF;;AAKA,WAAO;AACLI,MAAAA,GAAG,EAAEL,iBAAiB,EADjB;AAELM,MAAAA,OAAO,EAAEF,qBAAqB,EAFzB;AAGLG,MAAAA,aAAa,EAAER,QAAQ,GAAG,MAAH,GAAY;AAH9B,KAAP;AAKD,GAvB8B,CAA/B;AAyBA,QAAMS,sBAAsB,GAAG,6CAAiB,MAAM;AACpD,WAAO;AACLC,MAAAA,UAAU,EAAE,uCACV/B,KAAK,CAACU,KAAN,KAAgBC,8BAAmBQ,MAAnC,GAA4C,GAA5C,GAAkD,CADxC,EAEV;AACEM,QAAAA,QAAQ,EAAEF;AADZ,OAFU;AADP,KAAP;AAQD,GAT8B,CAA/B;AAWA,QAAMS,2BAA2B,GAAG,6CAAiB,MAAM;AACzD,UAAMC,eAAe,GACnBhC,KAAK,CAACS,KAAN,KAAgB,OAAhB,GACIwB,2CADJ,GAEIC,0CAHN;AAKA,WAAO;AAAEF,MAAAA;AAAF,KAAP;AACD,GAPmC,EAOjC,CAAChC,KAAD,CAPiC,CAApC;AASA,sBACE,6BAAC,4CAAD;AAAmB,IAAA,oBAAoB,EAAEC;AAAzC,kBACE,6BAAC,gBAAD,CACE;AADF;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,aAAa,EAAE4B,sBAHjB;AAIE,IAAA,KAAK,EAAE,CAACM,eAAOC,SAAR,EAAmBjB,sBAAnB;AAJT,kBAME,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL,EAAE,GAAGkB,wBAAWC;AAAhB,KADK,EAELP,2BAFK;AADT,IANF,CADF,CADF;AAiBD,CA5FD;;AA8FA,MAAMQ,QAAQ,gBAAG,iBAAKzC,iBAAL,CAAjB;eAEeyC,Q","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 isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n const topValueAnimation = () =>\n isActive\n ? 0\n : withDelay(\n HOLD_ITEM_TRANSFORM_DURATION,\n withTiming(WINDOW_HEIGHT, {\n duration: 0,\n })\n );\n\n const opacityValueAnimation = () =>\n withTiming(isActive ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n return {\n top: topValueAnimation(),\n opacity: opacityValueAnimation(),\n pointerEvents: isActive ? 'auto' : 'none',\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"]}
|
|
@@ -34,12 +34,14 @@ 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;
|
|
37
38
|
return {
|
|
38
39
|
top,
|
|
39
40
|
left,
|
|
40
41
|
width,
|
|
42
|
+
pointerEvents: isActive ? 'auto' : 'none',
|
|
41
43
|
transform: [{
|
|
42
|
-
translateY:
|
|
44
|
+
translateY: isActive ? (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION) : (0, _reactNativeReanimated.withTiming)(0, {
|
|
43
45
|
duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
|
|
44
46
|
})
|
|
45
47
|
}]
|
|
@@ -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","isActive","CONTEXT_MENU_STATE","ACTIVE","pointerEvents","transform","translateY","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;AACA,UAAMC,QAAQ,GAAGhB,KAAK,CAACI,KAAN,KAAgBa,8BAAmBC,MAApD;AAEA,WAAO;AACLX,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILO,MAAAA,aAAa,EAAEH,QAAQ,GAAG,MAAH,GAAY,MAJ9B;AAKLI,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EAAEL,QAAQ,GAChB,uCAAWF,EAAX,EAAeQ,+BAAf,CADgB,GAEhB,uCAAW,CAAX,EAAc;AAAEC,UAAAA,QAAQ,EAAEC;AAAZ,SAAd;AAHN,OADS;AALN,KAAP;AAaD,GAzBqB,EAyBnB,CAACvB,SAAD,CAzBmB,CAAtB;AA2BA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACwB,gBAAOC,WAAR,EAAqBxB,aAArB;AAAtB,kBACE,6BAAC,iBAAD,OADF,CADF;AAKD,CAnCD;;AAqCA,MAAMyB,IAAI,gBAAGC,eAAMC,IAAN,CAAW9B,aAAX,CAAb;;eAEe4B,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 const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n return {\n top,\n left,\n width,\n pointerEvents: isActive ? 'auto' : 'none',\n transform: [\n {\n translateY: isActive\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"]}
|
|
@@ -37,17 +37,20 @@ const BackdropComponent = () => {
|
|
|
37
37
|
}
|
|
38
38
|
}, [state]);
|
|
39
39
|
const animatedContainerStyle = useAnimatedStyle(() => {
|
|
40
|
-
const
|
|
40
|
+
const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
|
|
41
|
+
|
|
42
|
+
const topValueAnimation = () => isActive ? 0 : withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(WINDOW_HEIGHT, {
|
|
41
43
|
duration: 0
|
|
42
44
|
}));
|
|
43
45
|
|
|
44
|
-
const opacityValueAnimation = () => withTiming(
|
|
46
|
+
const opacityValueAnimation = () => withTiming(isActive ? 1 : 0, {
|
|
45
47
|
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
46
48
|
});
|
|
47
49
|
|
|
48
50
|
return {
|
|
49
51
|
top: topValueAnimation(),
|
|
50
|
-
opacity: opacityValueAnimation()
|
|
52
|
+
opacity: opacityValueAnimation(),
|
|
53
|
+
pointerEvents: isActive ? 'auto' : 'none'
|
|
51
54
|
};
|
|
52
55
|
});
|
|
53
56
|
const animatedContainerProps = useAnimatedProps(() => {
|
|
@@ -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","blurAmount","animatedInnerContainerStyle","backgroundColor","container","absoluteFillObject","Backdrop"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,QAA4B,OAA5B;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,QAAP,IACEC,yBADF,EAEEC,gBAFF,EAGEC,gBAHF,EAIEC,SAJF,EAKEC,UALF,QAMO,yBANP;AAOA,SACEC,iBADF,QAGO,8BAHP,C,CAKA;;AACA,SAASC,QAAT,QAAyB,8BAAzB,C,CAEA;;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SACEC,kBADF,EAEEC,4BAFF,EAGEC,MAHF,EAIEC,aAJF,QAKO,iBALP;AAMA,SACEC,+BADF,EAEEC,8BAFF,QAGO,aAHP;AAIA,SAASC,WAAT,QAA4B,aAA5B;AAEA,MAAMC,gBAAgB,GAAGL,MAAM,GAC3BX,QAAQ,CAACiB,uBAAT,CAAiCV,QAAjC,CAD2B,GAE3BP,QAAQ,CAACkB,IAFb;;AAWA,MAAMC,iBAAiB,GAAG,MAAM;AAC9B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAmBN,WAAW,EAApC;AAEA,QAAMO,eAAe,GAAGrB,yBAAyB,CAI/C;AACEsB,IAAAA,OAAO,EAAE,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC3BA,MAAAA,OAAO,CAACC,aAAR,GAAwB;AAAEC,QAAAA,CAAC,EAAEH,KAAK,CAACG,CAAX;AAAcC,QAAAA,CAAC,EAAEJ,KAAK,CAACI;AAAvB,OAAxB;AACD,KAHH;AAIEC,IAAAA,QAAQ,EAAE,MAAM;AACdT,MAAAA,KAAK,CAACU,KAAN,GAAcrB,kBAAkB,CAACsB,GAAjC;AACD,KANH;AAOEC,IAAAA,KAAK,EAAE,CAACR,KAAD,EAAQC,OAAR,KAAoB;AACzB,YAAMQ,QAAQ,GAAGC,IAAI,CAACC,KAAL,CACfX,KAAK,CAACG,CAAN,GAAUF,OAAO,CAACC,aAAR,CAAsBC,CADjB,EAEfH,KAAK,CAACI,CAAN,GAAUH,OAAO,CAACC,aAAR,CAAsBE,CAFjB,CAAjB;AAIA,YAAMQ,WAAW,GAAGH,QAAQ,GAAG,EAA/B;AACA,YAAMI,aAAa,GAAGjB,KAAK,CAACU,KAAN,KAAgBrB,kBAAkB,CAAC6B,MAAzD;;AAEA,UAAIF,WAAW,IAAIC,aAAnB,EAAkC;AAChCjB,QAAAA,KAAK,CAACU,KAAN,GAAcrB,kBAAkB,CAACsB,GAAjC;AACD;AACF;AAlBH,GAJ+C,EAwB/C,CAACX,KAAD,CAxB+C,CAAjD;AA2BA,QAAMmB,sBAAsB,GAAGpC,gBAAgB,CAAC,MAAM;AACpD,UAAMqC,
|
|
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","isActive","topValueAnimation","duration","opacityValueAnimation","top","opacity","pointerEvents","animatedContainerProps","blurAmount","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 '@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 isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n const topValueAnimation = () =>\n isActive\n ? 0\n : withDelay(\n HOLD_ITEM_TRANSFORM_DURATION,\n withTiming(WINDOW_HEIGHT, {\n duration: 0,\n })\n );\n\n const opacityValueAnimation = () =>\n withTiming(isActive ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n return {\n top: topValueAnimation(),\n opacity: opacityValueAnimation(),\n pointerEvents: isActive ? 'auto' : 'none',\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"]}
|
|
@@ -16,12 +16,14 @@ const MenuComponent = () => {
|
|
|
16
16
|
const left = menuProps.value.itemX;
|
|
17
17
|
const width = menuProps.value.itemWidth;
|
|
18
18
|
const tY = menuProps.value.transformValue;
|
|
19
|
+
const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
|
|
19
20
|
return {
|
|
20
21
|
top,
|
|
21
22
|
left,
|
|
22
23
|
width,
|
|
24
|
+
pointerEvents: isActive ? 'auto' : 'none',
|
|
23
25
|
transform: [{
|
|
24
|
-
translateY:
|
|
26
|
+
translateY: isActive ? withSpring(tY, SPRING_CONFIGURATION) : withTiming(0, {
|
|
25
27
|
duration: HOLD_ITEM_TRANSFORM_DURATION
|
|
26
28
|
})
|
|
27
29
|
}]
|
|
@@ -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","transformValue","
|
|
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","transformValue","isActive","ACTIVE","pointerEvents","transform","translateY","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,QAIO,iBAJP;;AAMA,MAAMC,aAAa,GAAG,MAAM;AAC1B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAuBN,WAAW,EAAxC;AAEA,QAAMO,aAAa,GAAGZ,gBAAgB,CAAC,MAAM;AAC3C,UAAMa,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;AACA,UAAMC,QAAQ,GAAGhB,KAAK,CAACI,KAAN,KAAgBP,kBAAkB,CAACoB,MAApD;AAEA,WAAO;AACLV,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILM,MAAAA,aAAa,EAAEF,QAAQ,GAAG,MAAH,GAAY,MAJ9B;AAKLG,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EAAEJ,QAAQ,GAChBzB,UAAU,CAACuB,EAAD,EAAKhB,oBAAL,CADM,GAEhBN,UAAU,CAAC,CAAD,EAAI;AAAE6B,UAAAA,QAAQ,EAAEzB;AAAZ,SAAJ;AAHhB,OADS;AALN,KAAP;AAaD,GAzBqC,EAyBnC,CAACK,SAAD,CAzBmC,CAAtC;AA2BA,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACP,MAAM,CAAC4B,WAAR,EAAqBpB,aAArB;AAAtB,kBACE,oBAAC,QAAD,OADF,CADF;AAKD,CAnCD;;AAqCA,MAAMqB,IAAI,gBAAGnC,KAAK,CAACoC,IAAN,CAAWzB,aAAX,CAAb;AAEA,eAAewB,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} 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 const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n return {\n top,\n left,\n width,\n pointerEvents: isActive ? 'auto' : 'none',\n transform: [\n {\n translateY: isActive\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-hold-menu-actions",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "A performant, easy to use hold to open context menu for React Native powered by Reanimated.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -71,8 +71,10 @@ const BackdropComponent = () => {
|
|
|
71
71
|
);
|
|
72
72
|
|
|
73
73
|
const animatedContainerStyle = useAnimatedStyle(() => {
|
|
74
|
+
const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
|
|
75
|
+
|
|
74
76
|
const topValueAnimation = () =>
|
|
75
|
-
|
|
77
|
+
isActive
|
|
76
78
|
? 0
|
|
77
79
|
: withDelay(
|
|
78
80
|
HOLD_ITEM_TRANSFORM_DURATION,
|
|
@@ -82,13 +84,14 @@ const BackdropComponent = () => {
|
|
|
82
84
|
);
|
|
83
85
|
|
|
84
86
|
const opacityValueAnimation = () =>
|
|
85
|
-
withTiming(
|
|
87
|
+
withTiming(isActive ? 1 : 0, {
|
|
86
88
|
duration: HOLD_ITEM_TRANSFORM_DURATION,
|
|
87
89
|
});
|
|
88
90
|
|
|
89
91
|
return {
|
|
90
92
|
top: topValueAnimation(),
|
|
91
93
|
opacity: opacityValueAnimation(),
|
|
94
|
+
pointerEvents: isActive ? 'auto' : 'none',
|
|
92
95
|
};
|
|
93
96
|
});
|
|
94
97
|
|
|
@@ -29,17 +29,18 @@ const MenuComponent = () => {
|
|
|
29
29
|
const left = menuProps.value.itemX;
|
|
30
30
|
const width = menuProps.value.itemWidth;
|
|
31
31
|
const tY = menuProps.value.transformValue;
|
|
32
|
+
const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
|
|
32
33
|
|
|
33
34
|
return {
|
|
34
35
|
top,
|
|
35
36
|
left,
|
|
36
37
|
width,
|
|
38
|
+
pointerEvents: isActive ? 'auto' : 'none',
|
|
37
39
|
transform: [
|
|
38
40
|
{
|
|
39
|
-
translateY:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
: withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
|
|
41
|
+
translateY: isActive
|
|
42
|
+
? withSpring(tY, SPRING_CONFIGURATION)
|
|
43
|
+
: withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
|
|
43
44
|
},
|
|
44
45
|
],
|
|
45
46
|
};
|