@impulse-ui-native/flyout 2.8.0 → 2.9.0
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.
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
useSafeAreaInsets
|
|
9
9
|
} from "react-native-safe-area-context";
|
|
10
10
|
import { Pressable, View } from "@impulse-ui-native/primitives";
|
|
11
|
-
import { useTheme } from "@impulse-ui-native/theme";
|
|
11
|
+
import { useTheme, useThemedStyles } from "@impulse-ui-native/theme";
|
|
12
12
|
import { useFlyoutLifecycle } from "../hooks";
|
|
13
13
|
import { FlyoutHandle } from "./flyout-handle";
|
|
14
14
|
import { FlyoutTitle } from "./flyout-title";
|
|
@@ -35,6 +35,10 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
35
35
|
const screenHeight = windowDimensions.height;
|
|
36
36
|
const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;
|
|
37
37
|
const zIndex = flyoutTokens.zIndexBase + layer;
|
|
38
|
+
const styles = useThemedStyles(themedStyles, { maxHeight, placement }, [
|
|
39
|
+
maxHeight,
|
|
40
|
+
placement
|
|
41
|
+
]);
|
|
38
42
|
const {
|
|
39
43
|
close,
|
|
40
44
|
dragGesture,
|
|
@@ -71,9 +75,6 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
71
75
|
const edges = useMemo(() => {
|
|
72
76
|
return [placement, "left", "right"];
|
|
73
77
|
}, [placement]);
|
|
74
|
-
const styles = useMemo(() => {
|
|
75
|
-
return themedStyles(theme, placement, maxHeight);
|
|
76
|
-
}, [theme, placement, maxHeight]);
|
|
77
78
|
const overlayContainerStyle = useMemo(
|
|
78
79
|
() => [StyleSheet.absoluteFill, overlayStyle],
|
|
79
80
|
[overlayStyle]
|
|
@@ -102,7 +103,8 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
102
103
|
] }) }) })
|
|
103
104
|
] });
|
|
104
105
|
});
|
|
105
|
-
function themedStyles(theme,
|
|
106
|
+
function themedStyles(theme, props) {
|
|
107
|
+
const { maxHeight, placement } = props;
|
|
106
108
|
const flyoutTokens = theme.components.flyout;
|
|
107
109
|
return StyleSheet.create({
|
|
108
110
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import { Fragment, memo,
|
|
1
|
+
{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Edge } from \"react-native-safe-area-context\";\nimport { Fragment, memo, useMemo } from \"react\";\nimport { StyleSheet, useWindowDimensions } from \"react-native\";\nimport { GestureDetector } from \"react-native-gesture-handler\";\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\nimport {\n SafeAreaView,\n useSafeAreaInsets,\n} from \"react-native-safe-area-context\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport { useTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { FlyoutProps } from \"../types\";\nimport { useFlyoutLifecycle } from \"../hooks\";\nimport { FlyoutHandle } from \"./flyout-handle\";\nimport { FlyoutTitle } from \"./flyout-title\";\n\nexport const Flyout = memo(function Flyout(\n props: PropsWithChildren<FlyoutProps>,\n) {\n const {\n id,\n children,\n placement = \"bottom\",\n layer = 0,\n title,\n open,\n topOffset,\n bottomOffset,\n onCloseFinished,\n onClose,\n onOpen,\n onOpenFinished,\n } = props;\n\n const theme = useTheme();\n const insets = useSafeAreaInsets();\n\n const windowDimensions = useWindowDimensions();\n\n const flyoutTokens = theme.components.flyout;\n\n const placementOffset = placement === \"top\" ? topOffset : bottomOffset;\n const screenHeight = windowDimensions.height;\n const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;\n const zIndex = flyoutTokens.zIndexBase + layer;\n const styles = useThemedStyles(themedStyles, { maxHeight, placement }, [\n maxHeight,\n placement,\n ]);\n\n const {\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n } = useFlyoutLifecycle({\n id,\n open,\n placement,\n screenHeight,\n safeAreaInset: insets[placement],\n overlayVisibleOpacity: flyoutTokens.overlayVisibleOpacity,\n onClose,\n onCloseFinished,\n onOpen,\n onOpenFinished,\n });\n\n const animatedStyle = useAnimatedStyle(() => {\n const offset =\n placement === \"bottom\" ? -(placementOffset ?? 0) : (placementOffset ?? 0);\n\n return {\n transform: [{ translateY: translateY.value + offset }],\n zIndex,\n };\n });\n\n const overlayStyle = useAnimatedStyle(() => ({\n opacity: opacity.value,\n zIndex,\n backgroundColor: flyoutTokens.overlayColor,\n }));\n\n const edges = useMemo<Edge[]>(() => {\n return [placement, \"left\", \"right\"];\n }, [placement]);\n\n const overlayContainerStyle = useMemo(\n () => [StyleSheet.absoluteFill, overlayStyle],\n [overlayStyle],\n );\n\n const containerStyle = useMemo(\n () => [styles.container, !hasMeasured && styles.hidden, animatedStyle],\n [animatedStyle, hasMeasured, styles.container, styles.hidden],\n );\n\n if (!mounted) {\n return null;\n }\n\n return (\n <Fragment>\n <Animated.View\n pointerEvents={isTouchable ? \"auto\" : \"none\"}\n style={overlayContainerStyle}\n >\n <Pressable onPress={close} style={StyleSheet.absoluteFill} />\n </Animated.View>\n\n <GestureDetector gesture={dragGesture}>\n <Animated.View onLayout={onLayout} style={containerStyle}>\n <SafeAreaView edges={edges}>\n {placement === \"bottom\" ? (\n <FlyoutHandle placement={placement} />\n ) : null}\n\n {title ? <FlyoutTitle title={title} /> : null}\n\n <View style={styles.content}>{children}</View>\n\n {placement === \"top\" ? (\n <FlyoutHandle placement={placement} />\n ) : null}\n </SafeAreaView>\n </Animated.View>\n </GestureDetector>\n </Fragment>\n );\n});\n\ninterface FlyoutThemeProps {\n maxHeight: number;\n placement: \"top\" | \"bottom\";\n}\n\nfunction themedStyles(theme: AppTheme, props: FlyoutThemeProps) {\n const { maxHeight, placement } = props;\n const flyoutTokens = theme.components.flyout;\n\n return StyleSheet.create({\n container: {\n position: \"absolute\",\n [placement]: 0,\n left: 0,\n right: 0,\n backgroundColor: flyoutTokens.backgroundColor,\n borderTopLeftRadius:\n placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\n borderTopRightRadius:\n placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\n borderBottomLeftRadius:\n placement === \"top\" ? flyoutTokens.borderRadius : 0,\n borderBottomRightRadius:\n placement === \"top\" ? flyoutTokens.borderRadius : 0,\n },\n content: {\n paddingHorizontal: flyoutTokens.contentPaddingHorizontal,\n maxHeight,\n },\n hidden: {\n opacity: flyoutTokens.hiddenOpacity,\n },\n });\n}\n"],"mappings":"AAoHQ,cAKE,YALF;AAlHR,SAAS,UAAU,MAAM,eAAe;AACxC,SAAS,YAAY,2BAA2B;AAChD,SAAS,uBAAuB;AAChC,OAAO,YAAY,wBAAwB;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,WAAW,YAAY;AAChC,SAAS,UAAU,uBAAuB;AAG1C,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,SAAS,KAAK,SAASA,QAClC,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,kBAAkB;AAEjC,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,eAAe,MAAM,WAAW;AAEtC,QAAM,kBAAkB,cAAc,QAAQ,YAAY;AAC1D,QAAM,eAAe,iBAAiB;AACtC,QAAM,YAAY,eAAe,aAAa;AAC9C,QAAM,SAAS,aAAa,aAAa;AACzC,QAAM,SAAS,gBAAgB,cAAc,EAAE,WAAW,UAAU,GAAG;AAAA,IACrE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,OAAO,SAAS;AAAA,IAC/B,uBAAuB,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,iBAAiB,MAAM;AAC3C,UAAM,SACJ,cAAc,WAAW,EAAE,mBAAmB,KAAM,mBAAmB;AAEzE,WAAO;AAAA,MACL,WAAW,CAAC,EAAE,YAAY,WAAW,QAAQ,OAAO,CAAC;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,eAAe,iBAAiB,OAAO;AAAA,IAC3C,SAAS,QAAQ;AAAA,IACjB;AAAA,IACA,iBAAiB,aAAa;AAAA,EAChC,EAAE;AAEF,QAAM,QAAQ,QAAgB,MAAM;AAClC,WAAO,CAAC,WAAW,QAAQ,OAAO;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,wBAAwB;AAAA,IAC5B,MAAM,CAAC,WAAW,cAAc,YAAY;AAAA,IAC5C,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,CAAC,eAAe,OAAO,QAAQ,aAAa;AAAA,IACrE,CAAC,eAAe,aAAa,OAAO,WAAW,OAAO,MAAM;AAAA,EAC9D;AAEA,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,YACC;AAAA;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC,eAAe,cAAc,SAAS;AAAA,QACtC,OAAO;AAAA,QAEP,8BAAC,aAAU,SAAS,OAAO,OAAO,WAAW,cAAc;AAAA;AAAA,IAC7D;AAAA,IAEA,oBAAC,mBAAgB,SAAS,aACxB,8BAAC,SAAS,MAAT,EAAc,UAAoB,OAAO,gBACxC,+BAAC,gBAAa,OACX;AAAA,oBAAc,WACb,oBAAC,gBAAa,WAAsB,IAClC;AAAA,MAEH,QAAQ,oBAAC,eAAY,OAAc,IAAK;AAAA,MAEzC,oBAAC,QAAK,OAAO,OAAO,SAAU,UAAS;AAAA,MAEtC,cAAc,QACb,oBAAC,gBAAa,WAAsB,IAClC;AAAA,OACN,GACF,GACF;AAAA,KACF;AAEJ,CAAC;AAOD,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,WAAW,UAAU,IAAI;AACjC,QAAM,eAAe,MAAM,WAAW;AAEtC,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,UAAU;AAAA,MACV,CAAC,SAAS,GAAG;AAAA,MACb,MAAM;AAAA,MACN,OAAO;AAAA,MACP,iBAAiB,aAAa;AAAA,MAC9B,qBACE,cAAc,WAAW,aAAa,eAAe;AAAA,MACvD,sBACE,cAAc,WAAW,aAAa,eAAe;AAAA,MACvD,wBACE,cAAc,QAAQ,aAAa,eAAe;AAAA,MACpD,yBACE,cAAc,QAAQ,aAAa,eAAe;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,MACP,mBAAmB,aAAa;AAAA,MAChC;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,aAAa;AAAA,IACxB;AAAA,EACF,CAAC;AACH;","names":["Flyout"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/flyout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.0",
|
|
4
4
|
"description": "Flyout, popover, and overlay components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/overlay": "2.9.0",
|
|
32
|
+
"@impulse-ui-native/primitives": "2.9.0",
|
|
33
|
+
"@impulse-ui-native/theme": "2.9.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|