react-native-hold-menu-actions 0.1.19 → 0.1.20
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/menu/Menu.js +6 -1
- package/lib/commonjs/components/menu/Menu.js.map +1 -1
- package/lib/commonjs/components/menu/calculations.js +12 -0
- package/lib/commonjs/components/menu/calculations.js.map +1 -1
- package/lib/module/components/menu/Menu.js +7 -2
- package/lib/module/components/menu/Menu.js.map +1 -1
- package/lib/module/components/menu/calculations.js +13 -1
- package/lib/module/components/menu/calculations.js.map +1 -1
- package/package.json +1 -1
- package/src/components/menu/Menu.tsx +10 -1
- package/src/components/menu/calculations.ts +12 -1
|
@@ -28,6 +28,9 @@ const MenuComponent = () => {
|
|
|
28
28
|
state,
|
|
29
29
|
menuProps
|
|
30
30
|
} = (0, _hooks.useInternal)();
|
|
31
|
+
const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => ({
|
|
32
|
+
pointerEvents: state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? 'auto' : 'none'
|
|
33
|
+
}));
|
|
31
34
|
const wrapperStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
32
35
|
const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
|
|
33
36
|
const top = anchorPositionVertical === 'top' ? menuProps.value.itemHeight + menuProps.value.itemY + 8 : menuProps.value.itemY - 8;
|
|
@@ -46,7 +49,9 @@ const MenuComponent = () => {
|
|
|
46
49
|
};
|
|
47
50
|
}, [menuProps]);
|
|
48
51
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
49
|
-
style: [_styles.default.menuWrapper, wrapperStyles]
|
|
52
|
+
style: [_styles.default.menuWrapper, wrapperStyles] // @ts-ignore
|
|
53
|
+
,
|
|
54
|
+
animatedProps: animatedProps
|
|
50
55
|
}, /*#__PURE__*/_react.default.createElement(_MenuList.default, null));
|
|
51
56
|
};
|
|
52
57
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Menu.tsx"],"names":["MenuComponent","state","menuProps","
|
|
1
|
+
{"version":3,"sources":["Menu.tsx"],"names":["MenuComponent","state","menuProps","animatedProps","pointerEvents","value","CONTEXT_MENU_STATE","ACTIVE","wrapperStyles","anchorPositionVertical","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","transformValue","transform","translateY","SPRING_CONFIGURATION","duration","HOLD_ITEM_TRANSFORM_DURATION","styles","menuWrapper","Menu","React","memo"],"mappings":";;;;;;;AAAA;;AAEA;;AAOA;;AAEA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,aAAa,GAAG,MAAM;AAC1B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAuB,yBAA7B;AAEA,QAAMC,aAAa,GAAG,6CAAiB,OAAO;AAC5CC,IAAAA,aAAa,EAAEH,KAAK,CAACI,KAAN,KAAgBC,8BAAmBC,MAAnC,GAA4C,MAA5C,GAAqD;AADxB,GAAP,CAAjB,CAAtB;AAIA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,UAAMC,sBAAsB,GAAGP,SAAS,CAACG,KAAV,CAAgBK,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAA/B;AAEA,UAAMC,GAAG,GACPH,sBAAsB,KAAK,KAA3B,GACIP,SAAS,CAACG,KAAV,CAAgBQ,UAAhB,GAA6BX,SAAS,CAACG,KAAV,CAAgBS,KAA7C,GAAqD,CADzD,GAEIZ,SAAS,CAACG,KAAV,CAAgBS,KAAhB,GAAwB,CAH9B;AAIA,UAAMC,IAAI,GAAGb,SAAS,CAACG,KAAV,CAAgBW,KAA7B;AACA,UAAMC,KAAK,GAAGf,SAAS,CAACG,KAAV,CAAgBa,SAA9B;AACA,UAAMC,EAAE,GAAGjB,SAAS,CAACG,KAAV,CAAgBe,cAA3B;AAEA,WAAO;AACLR,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILI,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EACRrB,KAAK,CAACI,KAAN,KAAgBC,8BAAmBC,MAAnC,GACI,uCAAWY,EAAX,EAAeI,+BAAf,CADJ,GAEI,uCAAW,CAAX,EAAc;AAAEC,UAAAA,QAAQ,EAAEC;AAAZ,SAAd;AAJR,OADS;AAJN,KAAP;AAaD,GAxBqB,EAwBnB,CAACvB,SAAD,CAxBmB,CAAtB;AA0BA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACwB,gBAAOC,WAAR,EAAqBnB,aAArB,CADT,CAEE;AAFF;AAGE,IAAA,aAAa,EAAEL;AAHjB,kBAKE,6BAAC,iBAAD,OALF,CADF;AASD,CA1CD;;AA4CA,MAAMyB,IAAI,gBAAGC,eAAMC,IAAN,CAAW9B,aAAX,CAAb;;eAEe4B,I","sourcesContent":["import React from 'react';\n\nimport Animated, {\n useAnimatedProps,\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 animatedProps = useAnimatedProps(() => ({\n pointerEvents: state.value === CONTEXT_MENU_STATE.ACTIVE ? 'auto' : 'none',\n }));\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\n style={[styles.menuWrapper, wrapperStyles]}\n // @ts-ignore\n animatedProps={animatedProps}\n >\n <MenuList />\n </Animated.View>\n );\n};\n\nconst Menu = React.memo(MenuComponent);\n\nexport default Menu;\n"]}
|
|
@@ -14,8 +14,20 @@ const leftOrRight = menuProps => {
|
|
|
14
14
|
|
|
15
15
|
const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];
|
|
16
16
|
const itemWidth = menuProps.value.itemWidth;
|
|
17
|
+
const itemX = menuProps.value.itemX;
|
|
17
18
|
let leftPosition = 0;
|
|
18
19
|
anchorPositionHorizontal === 'right' ? leftPosition = -_constants.MENU_WIDTH + itemWidth : anchorPositionHorizontal === 'left' ? leftPosition = 0 : leftPosition = -menuProps.value.itemWidth - _constants.MENU_WIDTH / 2 + menuProps.value.itemWidth / 2;
|
|
20
|
+
const menuRightEdge = itemX + leftPosition + _constants.MENU_WIDTH;
|
|
21
|
+
|
|
22
|
+
if (menuRightEdge > _constants.WINDOW_WIDTH) {
|
|
23
|
+
leftPosition -= menuRightEdge - _constants.WINDOW_WIDTH + 16;
|
|
24
|
+
} // Проверка левой границы
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
if (itemX + leftPosition < 0) {
|
|
28
|
+
leftPosition = -itemX + 16;
|
|
29
|
+
}
|
|
30
|
+
|
|
19
31
|
return leftPosition;
|
|
20
32
|
};
|
|
21
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["calculations.ts"],"names":["leftOrRight","menuProps","anchorPositionHorizontal","value","anchorPosition","split","itemWidth","leftPosition","MENU_WIDTH","getColor","isTitle","isDestructive","themeValue","MENU_TITLE_COLOR","MENU_TEXT_DESTRUCTIVE_COLOR_DARK","MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT","MENU_TEXT_DARK_COLOR","MENU_TEXT_LIGHT_COLOR"],"mappings":";;;;;;;AAEA;;AACA;;AASO,MAAMA,WAAW,GACtBC,SADyB,IAEtB;AACH;;AAEA,QAAMC,wBAAwB,GAAGD,SAAS,CAACE,KAAV,CAAgBC,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAAjC;AACA,QAAMC,SAAS,GAAGL,SAAS,CAACE,KAAV,CAAgBG,SAAlC;AAEA,MAAIC,YAAY,GAAG,CAAnB;
|
|
1
|
+
{"version":3,"sources":["calculations.ts"],"names":["leftOrRight","menuProps","anchorPositionHorizontal","value","anchorPosition","split","itemWidth","itemX","leftPosition","MENU_WIDTH","menuRightEdge","WINDOW_WIDTH","getColor","isTitle","isDestructive","themeValue","MENU_TITLE_COLOR","MENU_TEXT_DESTRUCTIVE_COLOR_DARK","MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT","MENU_TEXT_DARK_COLOR","MENU_TEXT_LIGHT_COLOR"],"mappings":";;;;;;;AAEA;;AACA;;AASO,MAAMA,WAAW,GACtBC,SADyB,IAEtB;AACH;;AAEA,QAAMC,wBAAwB,GAAGD,SAAS,CAACE,KAAV,CAAgBC,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAAjC;AACA,QAAMC,SAAS,GAAGL,SAAS,CAACE,KAAV,CAAgBG,SAAlC;AACA,QAAMC,KAAK,GAAGN,SAAS,CAACE,KAAV,CAAgBI,KAA9B;AAEA,MAAIC,YAAY,GAAG,CAAnB;AACAN,EAAAA,wBAAwB,KAAK,OAA7B,GACKM,YAAY,GAAG,CAACC,qBAAD,GAAcH,SADlC,GAEIJ,wBAAwB,KAAK,MAA7B,GACCM,YAAY,GAAG,CADhB,GAECA,YAAY,GACX,CAACP,SAAS,CAACE,KAAV,CAAgBG,SAAjB,GACAG,wBAAa,CADb,GAEAR,SAAS,CAACE,KAAV,CAAgBG,SAAhB,GAA4B,CAPlC;AASA,QAAMI,aAAa,GAAGH,KAAK,GAAGC,YAAR,GAAuBC,qBAA7C;;AACA,MAAIC,aAAa,GAAGC,uBAApB,EAAkC;AAChCH,IAAAA,YAAY,IAAIE,aAAa,GAAGC,uBAAhB,GAA+B,EAA/C;AACD,GApBE,CAsBH;;;AACA,MAAIJ,KAAK,GAAGC,YAAR,GAAuB,CAA3B,EAA8B;AAC5BA,IAAAA,YAAY,GAAG,CAACD,KAAD,GAAS,EAAxB;AACD;;AAED,SAAOC,YAAP;AACD,CA9BM;;;;AAgCA,MAAMI,QAAQ,GAAG,CACtBC,OADsB,EAEtBC,aAFsB,EAGtBC,UAHsB,KAInB;AACH;;AACA,SAAOF,OAAO,GACVG,4BADU,GAEVF,aAAa,GACbC,UAAU,KAAK,MAAf,GACEE,4CADF,GAEEC,6CAHW,GAIbH,UAAU,KAAK,MAAf,GACAI,gCADA,GAEAC,iCARJ;AASD,CAfM","sourcesContent":["import Animated from 'react-native-reanimated';\n\nimport { MENU_WIDTH, WINDOW_WIDTH } from '../../constants';\nimport {\n MENU_TEXT_DARK_COLOR,\n MENU_TEXT_DESTRUCTIVE_COLOR_DARK,\n MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT,\n MENU_TEXT_LIGHT_COLOR,\n MENU_TITLE_COLOR,\n} from './constants';\nimport type { MenuInternalProps } from './types';\n\nexport const leftOrRight = (\n menuProps: Animated.SharedValue<MenuInternalProps>\n) => {\n 'worklet';\n\n const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];\n const itemWidth = menuProps.value.itemWidth;\n const itemX = menuProps.value.itemX;\n\n let leftPosition = 0;\n anchorPositionHorizontal === 'right'\n ? (leftPosition = -MENU_WIDTH + itemWidth)\n : anchorPositionHorizontal === 'left'\n ? (leftPosition = 0)\n : (leftPosition =\n -menuProps.value.itemWidth -\n MENU_WIDTH / 2 +\n menuProps.value.itemWidth / 2);\n\n const menuRightEdge = itemX + leftPosition + MENU_WIDTH;\n if (menuRightEdge > WINDOW_WIDTH) {\n leftPosition -= menuRightEdge - WINDOW_WIDTH + 16;\n }\n\n // Проверка левой границы\n if (itemX + leftPosition < 0) {\n leftPosition = -itemX + 16;\n }\n\n return leftPosition;\n};\n\nexport const getColor = (\n isTitle: boolean | undefined,\n isDestructive: boolean | undefined,\n themeValue: 'light' | 'dark'\n) => {\n 'worklet';\n return isTitle\n ? MENU_TITLE_COLOR\n : isDestructive\n ? themeValue === 'dark'\n ? MENU_TEXT_DESTRUCTIVE_COLOR_DARK\n : MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT\n : themeValue === 'dark'\n ? MENU_TEXT_DARK_COLOR\n : MENU_TEXT_LIGHT_COLOR;\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Animated, { useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
|
|
2
|
+
import Animated, { useAnimatedProps, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
|
|
3
3
|
import MenuList from './MenuList';
|
|
4
4
|
import styles from './styles';
|
|
5
5
|
import { useInternal } from '../../hooks';
|
|
@@ -10,6 +10,9 @@ const MenuComponent = () => {
|
|
|
10
10
|
state,
|
|
11
11
|
menuProps
|
|
12
12
|
} = useInternal();
|
|
13
|
+
const animatedProps = useAnimatedProps(() => ({
|
|
14
|
+
pointerEvents: state.value === CONTEXT_MENU_STATE.ACTIVE ? 'auto' : 'none'
|
|
15
|
+
}));
|
|
13
16
|
const wrapperStyles = useAnimatedStyle(() => {
|
|
14
17
|
const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
|
|
15
18
|
const top = anchorPositionVertical === 'top' ? menuProps.value.itemHeight + menuProps.value.itemY + 8 : menuProps.value.itemY - 8;
|
|
@@ -28,7 +31,9 @@ const MenuComponent = () => {
|
|
|
28
31
|
};
|
|
29
32
|
}, [menuProps]);
|
|
30
33
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
31
|
-
style: [styles.menuWrapper, wrapperStyles]
|
|
34
|
+
style: [styles.menuWrapper, wrapperStyles] // @ts-ignore
|
|
35
|
+
,
|
|
36
|
+
animatedProps: animatedProps
|
|
32
37
|
}, /*#__PURE__*/React.createElement(MenuList, null));
|
|
33
38
|
};
|
|
34
39
|
|
|
@@ -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","
|
|
1
|
+
{"version":3,"sources":["Menu.tsx"],"names":["React","Animated","useAnimatedProps","useAnimatedStyle","withSpring","withTiming","MenuList","styles","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","MenuComponent","state","menuProps","animatedProps","pointerEvents","value","ACTIVE","wrapperStyles","anchorPositionVertical","anchorPosition","split","top","itemHeight","itemY","left","itemX","width","itemWidth","tY","transformValue","transform","translateY","duration","menuWrapper","Menu","memo"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IACEC,gBADF,EAEEC,gBAFF,EAGEC,UAHF,EAIEC,UAJF,QAKO,yBALP;AAOA,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,GAAGb,gBAAgB,CAAC,OAAO;AAC5Cc,IAAAA,aAAa,EAAEH,KAAK,CAACI,KAAN,KAAgBP,kBAAkB,CAACQ,MAAnC,GAA4C,MAA5C,GAAqD;AADxB,GAAP,CAAD,CAAtC;AAIA,QAAMC,aAAa,GAAGhB,gBAAgB,CAAC,MAAM;AAC3C,UAAMiB,sBAAsB,GAAGN,SAAS,CAACG,KAAV,CAAgBI,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAA/B;AAEA,UAAMC,GAAG,GACPH,sBAAsB,KAAK,KAA3B,GACIN,SAAS,CAACG,KAAV,CAAgBO,UAAhB,GAA6BV,SAAS,CAACG,KAAV,CAAgBQ,KAA7C,GAAqD,CADzD,GAEIX,SAAS,CAACG,KAAV,CAAgBQ,KAAhB,GAAwB,CAH9B;AAIA,UAAMC,IAAI,GAAGZ,SAAS,CAACG,KAAV,CAAgBU,KAA7B;AACA,UAAMC,KAAK,GAAGd,SAAS,CAACG,KAAV,CAAgBY,SAA9B;AACA,UAAMC,EAAE,GAAGhB,SAAS,CAACG,KAAV,CAAgBc,cAA3B;AAEA,WAAO;AACLR,MAAAA,GADK;AAELG,MAAAA,IAFK;AAGLE,MAAAA,KAHK;AAILI,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,UAAU,EACRpB,KAAK,CAACI,KAAN,KAAgBP,kBAAkB,CAACQ,MAAnC,GACId,UAAU,CAAC0B,EAAD,EAAKnB,oBAAL,CADd,GAEIN,UAAU,CAAC,CAAD,EAAI;AAAE6B,UAAAA,QAAQ,EAAEzB;AAAZ,SAAJ;AAJlB,OADS;AAJN,KAAP;AAaD,GAxBqC,EAwBnC,CAACK,SAAD,CAxBmC,CAAtC;AA0BA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACP,MAAM,CAAC4B,WAAR,EAAqBhB,aAArB,CADT,CAEE;AAFF;AAGE,IAAA,aAAa,EAAEJ;AAHjB,kBAKE,oBAAC,QAAD,OALF,CADF;AASD,CA1CD;;AA4CA,MAAMqB,IAAI,gBAAGpC,KAAK,CAACqC,IAAN,CAAWzB,aAAX,CAAb;AAEA,eAAewB,IAAf","sourcesContent":["import React from 'react';\n\nimport Animated, {\n useAnimatedProps,\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 animatedProps = useAnimatedProps(() => ({\n pointerEvents: state.value === CONTEXT_MENU_STATE.ACTIVE ? 'auto' : 'none',\n }));\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\n style={[styles.menuWrapper, wrapperStyles]}\n // @ts-ignore\n animatedProps={animatedProps}\n >\n <MenuList />\n </Animated.View>\n );\n};\n\nconst Menu = React.memo(MenuComponent);\n\nexport default Menu;\n"]}
|
|
@@ -1,12 +1,24 @@
|
|
|
1
|
-
import { MENU_WIDTH } from '../../constants';
|
|
1
|
+
import { MENU_WIDTH, WINDOW_WIDTH } from '../../constants';
|
|
2
2
|
import { MENU_TEXT_DARK_COLOR, MENU_TEXT_DESTRUCTIVE_COLOR_DARK, MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT, MENU_TEXT_LIGHT_COLOR, MENU_TITLE_COLOR } from './constants';
|
|
3
3
|
export const leftOrRight = menuProps => {
|
|
4
4
|
'worklet';
|
|
5
5
|
|
|
6
6
|
const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];
|
|
7
7
|
const itemWidth = menuProps.value.itemWidth;
|
|
8
|
+
const itemX = menuProps.value.itemX;
|
|
8
9
|
let leftPosition = 0;
|
|
9
10
|
anchorPositionHorizontal === 'right' ? leftPosition = -MENU_WIDTH + itemWidth : anchorPositionHorizontal === 'left' ? leftPosition = 0 : leftPosition = -menuProps.value.itemWidth - MENU_WIDTH / 2 + menuProps.value.itemWidth / 2;
|
|
11
|
+
const menuRightEdge = itemX + leftPosition + MENU_WIDTH;
|
|
12
|
+
|
|
13
|
+
if (menuRightEdge > WINDOW_WIDTH) {
|
|
14
|
+
leftPosition -= menuRightEdge - WINDOW_WIDTH + 16;
|
|
15
|
+
} // Проверка левой границы
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
if (itemX + leftPosition < 0) {
|
|
19
|
+
leftPosition = -itemX + 16;
|
|
20
|
+
}
|
|
21
|
+
|
|
10
22
|
return leftPosition;
|
|
11
23
|
};
|
|
12
24
|
export const getColor = (isTitle, isDestructive, themeValue) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["calculations.ts"],"names":["MENU_WIDTH","MENU_TEXT_DARK_COLOR","MENU_TEXT_DESTRUCTIVE_COLOR_DARK","MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT","MENU_TEXT_LIGHT_COLOR","MENU_TITLE_COLOR","leftOrRight","menuProps","anchorPositionHorizontal","value","anchorPosition","split","itemWidth","leftPosition","getColor","isTitle","isDestructive","themeValue"],"mappings":"AAEA,SAASA,UAAT,
|
|
1
|
+
{"version":3,"sources":["calculations.ts"],"names":["MENU_WIDTH","WINDOW_WIDTH","MENU_TEXT_DARK_COLOR","MENU_TEXT_DESTRUCTIVE_COLOR_DARK","MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT","MENU_TEXT_LIGHT_COLOR","MENU_TITLE_COLOR","leftOrRight","menuProps","anchorPositionHorizontal","value","anchorPosition","split","itemWidth","itemX","leftPosition","menuRightEdge","getColor","isTitle","isDestructive","themeValue"],"mappings":"AAEA,SAASA,UAAT,EAAqBC,YAArB,QAAyC,iBAAzC;AACA,SACEC,oBADF,EAEEC,gCAFF,EAGEC,iCAHF,EAIEC,qBAJF,EAKEC,gBALF,QAMO,aANP;AASA,OAAO,MAAMC,WAAW,GACtBC,SADyB,IAEtB;AACH;;AAEA,QAAMC,wBAAwB,GAAGD,SAAS,CAACE,KAAV,CAAgBC,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAAjC;AACA,QAAMC,SAAS,GAAGL,SAAS,CAACE,KAAV,CAAgBG,SAAlC;AACA,QAAMC,KAAK,GAAGN,SAAS,CAACE,KAAV,CAAgBI,KAA9B;AAEA,MAAIC,YAAY,GAAG,CAAnB;AACAN,EAAAA,wBAAwB,KAAK,OAA7B,GACKM,YAAY,GAAG,CAACf,UAAD,GAAca,SADlC,GAEIJ,wBAAwB,KAAK,MAA7B,GACCM,YAAY,GAAG,CADhB,GAECA,YAAY,GACX,CAACP,SAAS,CAACE,KAAV,CAAgBG,SAAjB,GACAb,UAAU,GAAG,CADb,GAEAQ,SAAS,CAACE,KAAV,CAAgBG,SAAhB,GAA4B,CAPlC;AASA,QAAMG,aAAa,GAAGF,KAAK,GAAGC,YAAR,GAAuBf,UAA7C;;AACA,MAAIgB,aAAa,GAAGf,YAApB,EAAkC;AAChCc,IAAAA,YAAY,IAAIC,aAAa,GAAGf,YAAhB,GAA+B,EAA/C;AACD,GApBE,CAsBH;;;AACA,MAAIa,KAAK,GAAGC,YAAR,GAAuB,CAA3B,EAA8B;AAC5BA,IAAAA,YAAY,GAAG,CAACD,KAAD,GAAS,EAAxB;AACD;;AAED,SAAOC,YAAP;AACD,CA9BM;AAgCP,OAAO,MAAME,QAAQ,GAAG,CACtBC,OADsB,EAEtBC,aAFsB,EAGtBC,UAHsB,KAInB;AACH;;AACA,SAAOF,OAAO,GACVZ,gBADU,GAEVa,aAAa,GACbC,UAAU,KAAK,MAAf,GACEjB,gCADF,GAEEC,iCAHW,GAIbgB,UAAU,KAAK,MAAf,GACAlB,oBADA,GAEAG,qBARJ;AASD,CAfM","sourcesContent":["import Animated from 'react-native-reanimated';\n\nimport { MENU_WIDTH, WINDOW_WIDTH } from '../../constants';\nimport {\n MENU_TEXT_DARK_COLOR,\n MENU_TEXT_DESTRUCTIVE_COLOR_DARK,\n MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT,\n MENU_TEXT_LIGHT_COLOR,\n MENU_TITLE_COLOR,\n} from './constants';\nimport type { MenuInternalProps } from './types';\n\nexport const leftOrRight = (\n menuProps: Animated.SharedValue<MenuInternalProps>\n) => {\n 'worklet';\n\n const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];\n const itemWidth = menuProps.value.itemWidth;\n const itemX = menuProps.value.itemX;\n\n let leftPosition = 0;\n anchorPositionHorizontal === 'right'\n ? (leftPosition = -MENU_WIDTH + itemWidth)\n : anchorPositionHorizontal === 'left'\n ? (leftPosition = 0)\n : (leftPosition =\n -menuProps.value.itemWidth -\n MENU_WIDTH / 2 +\n menuProps.value.itemWidth / 2);\n\n const menuRightEdge = itemX + leftPosition + MENU_WIDTH;\n if (menuRightEdge > WINDOW_WIDTH) {\n leftPosition -= menuRightEdge - WINDOW_WIDTH + 16;\n }\n\n // Проверка левой границы\n if (itemX + leftPosition < 0) {\n leftPosition = -itemX + 16;\n }\n\n return leftPosition;\n};\n\nexport const getColor = (\n isTitle: boolean | undefined,\n isDestructive: boolean | undefined,\n themeValue: 'light' | 'dark'\n) => {\n 'worklet';\n return isTitle\n ? MENU_TITLE_COLOR\n : isDestructive\n ? themeValue === 'dark'\n ? MENU_TEXT_DESTRUCTIVE_COLOR_DARK\n : MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT\n : themeValue === 'dark'\n ? MENU_TEXT_DARK_COLOR\n : MENU_TEXT_LIGHT_COLOR;\n};\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.20",
|
|
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",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import Animated, {
|
|
4
|
+
useAnimatedProps,
|
|
4
5
|
useAnimatedStyle,
|
|
5
6
|
withSpring,
|
|
6
7
|
withTiming,
|
|
@@ -19,6 +20,10 @@ import {
|
|
|
19
20
|
const MenuComponent = () => {
|
|
20
21
|
const { state, menuProps } = useInternal();
|
|
21
22
|
|
|
23
|
+
const animatedProps = useAnimatedProps(() => ({
|
|
24
|
+
pointerEvents: state.value === CONTEXT_MENU_STATE.ACTIVE ? 'auto' : 'none',
|
|
25
|
+
}));
|
|
26
|
+
|
|
22
27
|
const wrapperStyles = useAnimatedStyle(() => {
|
|
23
28
|
const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
|
|
24
29
|
|
|
@@ -46,7 +51,11 @@ const MenuComponent = () => {
|
|
|
46
51
|
}, [menuProps]);
|
|
47
52
|
|
|
48
53
|
return (
|
|
49
|
-
<Animated.View
|
|
54
|
+
<Animated.View
|
|
55
|
+
style={[styles.menuWrapper, wrapperStyles]}
|
|
56
|
+
// @ts-ignore
|
|
57
|
+
animatedProps={animatedProps}
|
|
58
|
+
>
|
|
50
59
|
<MenuList />
|
|
51
60
|
</Animated.View>
|
|
52
61
|
);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Animated from 'react-native-reanimated';
|
|
2
2
|
|
|
3
|
-
import { MENU_WIDTH } from '../../constants';
|
|
3
|
+
import { MENU_WIDTH, WINDOW_WIDTH } from '../../constants';
|
|
4
4
|
import {
|
|
5
5
|
MENU_TEXT_DARK_COLOR,
|
|
6
6
|
MENU_TEXT_DESTRUCTIVE_COLOR_DARK,
|
|
@@ -17,6 +17,7 @@ export const leftOrRight = (
|
|
|
17
17
|
|
|
18
18
|
const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];
|
|
19
19
|
const itemWidth = menuProps.value.itemWidth;
|
|
20
|
+
const itemX = menuProps.value.itemX;
|
|
20
21
|
|
|
21
22
|
let leftPosition = 0;
|
|
22
23
|
anchorPositionHorizontal === 'right'
|
|
@@ -28,6 +29,16 @@ export const leftOrRight = (
|
|
|
28
29
|
MENU_WIDTH / 2 +
|
|
29
30
|
menuProps.value.itemWidth / 2);
|
|
30
31
|
|
|
32
|
+
const menuRightEdge = itemX + leftPosition + MENU_WIDTH;
|
|
33
|
+
if (menuRightEdge > WINDOW_WIDTH) {
|
|
34
|
+
leftPosition -= menuRightEdge - WINDOW_WIDTH + 16;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Проверка левой границы
|
|
38
|
+
if (itemX + leftPosition < 0) {
|
|
39
|
+
leftPosition = -itemX + 16;
|
|
40
|
+
}
|
|
41
|
+
|
|
31
42
|
return leftPosition;
|
|
32
43
|
};
|
|
33
44
|
|