react-native-hold-menu-actions 0.1.13 → 0.1.15
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/MenuList.js +3 -13
- package/lib/commonjs/components/menu/MenuList.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/components/menu/MenuList.js +5 -13
- package/lib/module/components/menu/MenuList.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/components/holdItem/types.d.ts +1 -9
- package/lib/typescript/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/holdItem/types.d.ts +1 -9
- package/src/components/menu/MenuList.tsx +4 -23
- package/src/index.ts +7 -0
|
@@ -13,8 +13,6 @@ 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
|
-
|
|
18
16
|
var _MenuItems = _interopRequireDefault(require("./MenuItems"));
|
|
19
17
|
|
|
20
18
|
var _constants = require("../../constants");
|
|
@@ -33,8 +31,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
33
31
|
|
|
34
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
33
|
|
|
36
|
-
const AnimatedView = _reactNativeReanimated.default.createAnimatedComponent(_blur.BlurView);
|
|
37
|
-
|
|
38
34
|
const MenuListComponent = () => {
|
|
39
35
|
const {
|
|
40
36
|
state,
|
|
@@ -81,13 +77,9 @@ const MenuListComponent = () => {
|
|
|
81
77
|
};
|
|
82
78
|
});
|
|
83
79
|
const animatedInnerContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
80
|
+
const color = theme.value === 'light' ? '#fff' : '#1A1A1A';
|
|
84
81
|
return {
|
|
85
|
-
backgroundColor:
|
|
86
|
-
};
|
|
87
|
-
}, [theme]);
|
|
88
|
-
const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
|
|
89
|
-
return {
|
|
90
|
-
blurType: theme.value
|
|
82
|
+
backgroundColor: color
|
|
91
83
|
};
|
|
92
84
|
}, [theme]);
|
|
93
85
|
|
|
@@ -101,9 +93,7 @@ const MenuListComponent = () => {
|
|
|
101
93
|
(0, _reactNativeReanimated.runOnJS)(setter)(_items);
|
|
102
94
|
}
|
|
103
95
|
}, [menuProps]);
|
|
104
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
105
|
-
blurAmount: 100,
|
|
106
|
-
animatedProps: animatedProps,
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
107
97
|
style: [_styles.default.menuContainer, messageStyles]
|
|
108
98
|
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
109
99
|
style: [_reactNative.StyleSheet.absoluteFillObject, _styles.default.menuInnerContainer, animatedInnerContainerStyle]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuList.tsx"],"names":["
|
|
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","color","backgroundColor","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 useAnimatedReaction,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\n\nimport {\n calculateMenuHeight,\n menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n SPRING_CONFIGURATION_MENU,\n HOLD_ITEM_TRANSFORM_DURATION,\n CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n const { state, theme, menuProps } = useInternal();\n\n const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n const menuHeight = useDerivedValue(() => {\n const itemsWithSeparator = menuProps.value.items.filter(\n item => item.withSeparator\n );\n return calculateMenuHeight(\n menuProps.value.items.length,\n itemsWithSeparator.length\n );\n }, [menuProps]);\n const prevList = useSharedValue<MenuItemProps[]>([]);\n\n const messageStyles = useAnimatedStyle(() => {\n const itemsWithSeparator = menuProps.value.items.filter(\n item => item.withSeparator\n );\n\n const translate = menuAnimationAnchor(\n menuProps.value.anchorPosition,\n menuProps.value.itemWidth,\n menuProps.value.items.length,\n itemsWithSeparator.length\n );\n\n const _leftPosition = leftOrRight(menuProps);\n\n const menuScaleAnimation = () =>\n state.value === CONTEXT_MENU_STATE.ACTIVE\n ? withSpring(1, SPRING_CONFIGURATION_MENU)\n : withTiming(0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n const opacityAnimation = () =>\n withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n return {\n left: _leftPosition,\n height: menuHeight.value,\n opacity: opacityAnimation(),\n transform: [\n { translateX: translate.beginningTransformations.translateX },\n { translateY: translate.beginningTransformations.translateY },\n {\n scale: menuScaleAnimation(),\n },\n { translateX: translate.endingTransformations.translateX },\n { translateY: translate.endingTransformations.translateY },\n ],\n };\n });\n\n const animatedInnerContainerStyle = useAnimatedStyle(() => {\n const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n return {\n backgroundColor: color,\n };\n }, [theme]);\n\n const setter = (items: MenuItemProps[]) => {\n setItemList(items);\n prevList.value = items;\n };\n\n useAnimatedReaction(\n () => menuProps.value.items,\n _items => {\n if (!deepEqual(_items, prevList.value)) {\n runOnJS(setter)(_items);\n }\n },\n [menuProps]\n );\n\n return (\n <Animated.View style={[styles.menuContainer, messageStyles]}>\n <Animated.View\n style={[\n StyleSheet.absoluteFillObject,\n styles.menuInnerContainer,\n animatedInnerContainerStyle,\n ]}\n >\n <MenuItems items={itemList} />\n </Animated.View>\n </Animated.View>\n );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { default as HoldItem } from './components/holdItem';\nexport { default as HoldMenuProvider } from './components/provider';\nexport { default as HoldMenuFlatList } from './components/flatList';\nexport { default as HoldMenuIcon } from './components/icon';\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { default as HoldItem } from './components/holdItem';\nexport { default as HoldMenuProvider } from './components/provider';\nexport { default as HoldMenuFlatList } from './components/flatList';\nexport { default as HoldMenuIcon } from './components/icon';\n\nexport type { HoldItemProps } from './components/holdItem/types';\nexport type {\n MenuItemProps,\n CustomViewProps,\n RenderCustomView,\n} from './components/menu/types';\n"]}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
|
-
import Animated, { runOnJS,
|
|
3
|
+
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import { calculateMenuHeight, menuAnimationAnchor } from '../../utils/calculations';
|
|
5
|
-
import { BlurView } from '@react-native-community/blur';
|
|
6
5
|
import MenuItems from './MenuItems';
|
|
7
|
-
import { SPRING_CONFIGURATION_MENU, HOLD_ITEM_TRANSFORM_DURATION,
|
|
6
|
+
import { SPRING_CONFIGURATION_MENU, HOLD_ITEM_TRANSFORM_DURATION, CONTEXT_MENU_STATE } from '../../constants';
|
|
8
7
|
import styles from './styles';
|
|
9
8
|
import { useInternal } from '../../hooks';
|
|
10
9
|
import { deepEqual } from '../../utils/validations';
|
|
11
10
|
import { leftOrRight } from './calculations';
|
|
12
|
-
const AnimatedView = Animated.createAnimatedComponent(BlurView);
|
|
13
11
|
|
|
14
12
|
const MenuListComponent = () => {
|
|
15
13
|
const {
|
|
@@ -55,13 +53,9 @@ const MenuListComponent = () => {
|
|
|
55
53
|
};
|
|
56
54
|
});
|
|
57
55
|
const animatedInnerContainerStyle = useAnimatedStyle(() => {
|
|
56
|
+
const color = theme.value === 'light' ? '#fff' : '#1A1A1A';
|
|
58
57
|
return {
|
|
59
|
-
backgroundColor:
|
|
60
|
-
};
|
|
61
|
-
}, [theme]);
|
|
62
|
-
const animatedProps = useAnimatedProps(() => {
|
|
63
|
-
return {
|
|
64
|
-
blurType: theme.value
|
|
58
|
+
backgroundColor: color
|
|
65
59
|
};
|
|
66
60
|
}, [theme]);
|
|
67
61
|
|
|
@@ -75,9 +69,7 @@ const MenuListComponent = () => {
|
|
|
75
69
|
runOnJS(setter)(_items);
|
|
76
70
|
}
|
|
77
71
|
}, [menuProps]);
|
|
78
|
-
return /*#__PURE__*/React.createElement(
|
|
79
|
-
blurAmount: 100,
|
|
80
|
-
animatedProps: animatedProps,
|
|
72
|
+
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
81
73
|
style: [styles.menuContainer, messageStyles]
|
|
82
74
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
83
75
|
style: [StyleSheet.absoluteFillObject, styles.menuInnerContainer, animatedInnerContainerStyle]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","
|
|
1
|
+
{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","withTiming","calculateMenuHeight","menuAnimationAnchor","MenuItems","SPRING_CONFIGURATION_MENU","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","styles","useInternal","deepEqual","leftOrRight","MenuListComponent","state","theme","menuProps","itemList","setItemList","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","ACTIVE","duration","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","menuContainer","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\n\nimport {\n calculateMenuHeight,\n menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n SPRING_CONFIGURATION_MENU,\n HOLD_ITEM_TRANSFORM_DURATION,\n CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n const { state, theme, menuProps } = useInternal();\n\n const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n const menuHeight = useDerivedValue(() => {\n const itemsWithSeparator = menuProps.value.items.filter(\n item => item.withSeparator\n );\n return calculateMenuHeight(\n menuProps.value.items.length,\n itemsWithSeparator.length\n );\n }, [menuProps]);\n const prevList = useSharedValue<MenuItemProps[]>([]);\n\n const messageStyles = useAnimatedStyle(() => {\n const itemsWithSeparator = menuProps.value.items.filter(\n item => item.withSeparator\n );\n\n const translate = menuAnimationAnchor(\n menuProps.value.anchorPosition,\n menuProps.value.itemWidth,\n menuProps.value.items.length,\n itemsWithSeparator.length\n );\n\n const _leftPosition = leftOrRight(menuProps);\n\n const menuScaleAnimation = () =>\n state.value === CONTEXT_MENU_STATE.ACTIVE\n ? withSpring(1, SPRING_CONFIGURATION_MENU)\n : withTiming(0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n const opacityAnimation = () =>\n withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n duration: HOLD_ITEM_TRANSFORM_DURATION,\n });\n\n return {\n left: _leftPosition,\n height: menuHeight.value,\n opacity: opacityAnimation(),\n transform: [\n { translateX: translate.beginningTransformations.translateX },\n { translateY: translate.beginningTransformations.translateY },\n {\n scale: menuScaleAnimation(),\n },\n { translateX: translate.endingTransformations.translateX },\n { translateY: translate.endingTransformations.translateY },\n ],\n };\n });\n\n const animatedInnerContainerStyle = useAnimatedStyle(() => {\n const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n return {\n backgroundColor: color,\n };\n }, [theme]);\n\n const setter = (items: MenuItemProps[]) => {\n setItemList(items);\n prevList.value = items;\n };\n\n useAnimatedReaction(\n () => menuProps.value.items,\n _items => {\n if (!deepEqual(_items, prevList.value)) {\n runOnJS(setter)(_items);\n }\n },\n [menuProps]\n );\n\n return (\n <Animated.View style={[styles.menuContainer, messageStyles]}>\n <Animated.View\n style={[\n StyleSheet.absoluteFillObject,\n styles.menuInnerContainer,\n animatedInnerContainerStyle,\n ]}\n >\n <MenuItems items={itemList} />\n </Animated.View>\n </Animated.View>\n );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["default","HoldItem","HoldMenuProvider","HoldMenuFlatList","HoldMenuIcon"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,uBAApC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,uBAA5C;AACA,SAASF,OAAO,IAAIG,gBAApB,QAA4C,uBAA5C;AACA,SAASH,OAAO,IAAII,YAApB,QAAwC,mBAAxC","sourcesContent":["export { default as HoldItem } from './components/holdItem';\nexport { default as HoldMenuProvider } from './components/provider';\nexport { default as HoldMenuFlatList } from './components/flatList';\nexport { default as HoldMenuIcon } from './components/icon';\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["default","HoldItem","HoldMenuProvider","HoldMenuFlatList","HoldMenuIcon"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,uBAApC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,uBAA5C;AACA,SAASF,OAAO,IAAIG,gBAApB,QAA4C,uBAA5C;AACA,SAASH,OAAO,IAAII,YAApB,QAAwC,mBAAxC","sourcesContent":["export { default as HoldItem } from './components/holdItem';\nexport { default as HoldMenuProvider } from './components/provider';\nexport { default as HoldMenuFlatList } from './components/flatList';\nexport { default as HoldMenuIcon } from './components/icon';\n\nexport type { HoldItemProps } from './components/holdItem/types';\nexport type {\n MenuItemProps,\n CustomViewProps,\n RenderCustomView,\n} from './components/menu/types';\n"]}
|
|
@@ -135,15 +135,7 @@ type HoldItemBaseProps = {
|
|
|
135
135
|
longPressMinDurationMs?: number;
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
-
export type
|
|
139
|
-
items: MenuItemProps[];
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export type HoldItemWithCustomView = HoldItemBaseProps & {
|
|
143
|
-
renderCustomView: RenderCustomView;
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
export type HoldItemProps = HoldItemWithItems | HoldItemWithCustomView;
|
|
138
|
+
export type HoldItemProps = HoldItemBaseProps;
|
|
147
139
|
|
|
148
140
|
export type GestureHandlerProps = {
|
|
149
141
|
children: React.ReactElement | React.ReactElement[];
|
|
@@ -2,3 +2,5 @@ export { default as HoldItem } from './components/holdItem';
|
|
|
2
2
|
export { default as HoldMenuProvider } from './components/provider';
|
|
3
3
|
export { default as HoldMenuFlatList } from './components/flatList';
|
|
4
4
|
export { default as HoldMenuIcon } from './components/icon';
|
|
5
|
+
export type { HoldItemProps } from './components/holdItem/types';
|
|
6
|
+
export type { MenuItemProps, CustomViewProps, RenderCustomView, } from './components/menu/types';
|
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.15",
|
|
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",
|
|
@@ -135,15 +135,7 @@ type HoldItemBaseProps = {
|
|
|
135
135
|
longPressMinDurationMs?: number;
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
-
export type
|
|
139
|
-
items: MenuItemProps[];
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export type HoldItemWithCustomView = HoldItemBaseProps & {
|
|
143
|
-
renderCustomView: RenderCustomView;
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
export type HoldItemProps = HoldItemWithItems | HoldItemWithCustomView;
|
|
138
|
+
export type HoldItemProps = HoldItemBaseProps;
|
|
147
139
|
|
|
148
140
|
export type GestureHandlerProps = {
|
|
149
141
|
children: React.ReactElement | React.ReactElement[];
|
|
@@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native';
|
|
|
3
3
|
|
|
4
4
|
import Animated, {
|
|
5
5
|
runOnJS,
|
|
6
|
-
useAnimatedProps,
|
|
7
6
|
useAnimatedReaction,
|
|
8
7
|
useAnimatedStyle,
|
|
9
8
|
useDerivedValue,
|
|
@@ -16,14 +15,12 @@ import {
|
|
|
16
15
|
calculateMenuHeight,
|
|
17
16
|
menuAnimationAnchor,
|
|
18
17
|
} from '../../utils/calculations';
|
|
19
|
-
import { BlurView } from '@react-native-community/blur';
|
|
20
18
|
|
|
21
19
|
import MenuItems from './MenuItems';
|
|
22
20
|
|
|
23
21
|
import {
|
|
24
22
|
SPRING_CONFIGURATION_MENU,
|
|
25
23
|
HOLD_ITEM_TRANSFORM_DURATION,
|
|
26
|
-
IS_IOS,
|
|
27
24
|
CONTEXT_MENU_STATE,
|
|
28
25
|
} from '../../constants';
|
|
29
26
|
|
|
@@ -33,8 +30,6 @@ import { useInternal } from '../../hooks';
|
|
|
33
30
|
import { deepEqual } from '../../utils/validations';
|
|
34
31
|
import { leftOrRight } from './calculations';
|
|
35
32
|
|
|
36
|
-
const AnimatedView = Animated.createAnimatedComponent(BlurView);
|
|
37
|
-
|
|
38
33
|
const MenuListComponent = () => {
|
|
39
34
|
const { state, theme, menuProps } = useInternal();
|
|
40
35
|
|
|
@@ -94,22 +89,12 @@ const MenuListComponent = () => {
|
|
|
94
89
|
});
|
|
95
90
|
|
|
96
91
|
const animatedInnerContainerStyle = useAnimatedStyle(() => {
|
|
92
|
+
const color = theme.value === 'light' ? '#fff' : '#1A1A1A';
|
|
97
93
|
return {
|
|
98
|
-
backgroundColor:
|
|
99
|
-
theme.value === 'light'
|
|
100
|
-
? IS_IOS
|
|
101
|
-
? 'rgba(255, 255, 255, .75)'
|
|
102
|
-
: 'rgba(255, 255, 255, .95)'
|
|
103
|
-
: IS_IOS
|
|
104
|
-
? 'rgba(0,0,0,0.5)'
|
|
105
|
-
: 'rgba(39, 39, 39, .8)',
|
|
94
|
+
backgroundColor: color,
|
|
106
95
|
};
|
|
107
96
|
}, [theme]);
|
|
108
97
|
|
|
109
|
-
const animatedProps = useAnimatedProps(() => {
|
|
110
|
-
return { blurType: theme.value };
|
|
111
|
-
}, [theme]);
|
|
112
|
-
|
|
113
98
|
const setter = (items: MenuItemProps[]) => {
|
|
114
99
|
setItemList(items);
|
|
115
100
|
prevList.value = items;
|
|
@@ -126,11 +111,7 @@ const MenuListComponent = () => {
|
|
|
126
111
|
);
|
|
127
112
|
|
|
128
113
|
return (
|
|
129
|
-
<
|
|
130
|
-
blurAmount={100}
|
|
131
|
-
animatedProps={animatedProps}
|
|
132
|
-
style={[styles.menuContainer, messageStyles]}
|
|
133
|
-
>
|
|
114
|
+
<Animated.View style={[styles.menuContainer, messageStyles]}>
|
|
134
115
|
<Animated.View
|
|
135
116
|
style={[
|
|
136
117
|
StyleSheet.absoluteFillObject,
|
|
@@ -140,7 +121,7 @@ const MenuListComponent = () => {
|
|
|
140
121
|
>
|
|
141
122
|
<MenuItems items={itemList} />
|
|
142
123
|
</Animated.View>
|
|
143
|
-
</
|
|
124
|
+
</Animated.View>
|
|
144
125
|
);
|
|
145
126
|
};
|
|
146
127
|
|
package/src/index.ts
CHANGED
|
@@ -2,3 +2,10 @@ export { default as HoldItem } from './components/holdItem';
|
|
|
2
2
|
export { default as HoldMenuProvider } from './components/provider';
|
|
3
3
|
export { default as HoldMenuFlatList } from './components/flatList';
|
|
4
4
|
export { default as HoldMenuIcon } from './components/icon';
|
|
5
|
+
|
|
6
|
+
export type { HoldItemProps } from './components/holdItem/types';
|
|
7
|
+
export type {
|
|
8
|
+
MenuItemProps,
|
|
9
|
+
CustomViewProps,
|
|
10
|
+
RenderCustomView,
|
|
11
|
+
} from './components/menu/types';
|