@impulse-ui-native/flyout 3.0.0 → 5.0.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.
- package/dist/components/flyout-handle.js +7 -5
- package/dist/components/flyout-handle.js.map +1 -1
- package/dist/components/flyout.js +8 -8
- package/dist/components/flyout.js.map +1 -1
- package/dist/hooks/use-flyout-lifecycle.hook.js +3 -2
- package/dist/hooks/use-flyout-lifecycle.hook.js.map +1 -1
- package/package.json +5 -5
|
@@ -3,13 +3,17 @@ import { memo } from "react";
|
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
4
|
import Animated from "react-native-reanimated";
|
|
5
5
|
import { View } from "@impulse-ui-native/primitives";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
getFlyoutTokens,
|
|
8
|
+
useThemedStyles
|
|
9
|
+
} from "@impulse-ui-native/theme";
|
|
7
10
|
const FlyoutHandle = memo(function FlyoutHandle2(props) {
|
|
8
11
|
const styles = useThemedStyles(themedStyles, props, [props.placement]);
|
|
9
12
|
return /* @__PURE__ */ jsx(Animated.View, { style: styles.flyoutHandleContainer, children: /* @__PURE__ */ jsx(View, { style: styles.flyoutHandle }) });
|
|
10
13
|
});
|
|
11
14
|
function themedStyles(theme, { placement }) {
|
|
12
|
-
const
|
|
15
|
+
const flyoutTokens = getFlyoutTokens(theme.components.flyout, { placement });
|
|
16
|
+
const handleTokens = flyoutTokens.handle;
|
|
13
17
|
return StyleSheet.create({
|
|
14
18
|
flyoutHandle: {
|
|
15
19
|
alignSelf: "center",
|
|
@@ -20,12 +24,10 @@ function themedStyles(theme, { placement }) {
|
|
|
20
24
|
},
|
|
21
25
|
flyoutHandleContainer: {
|
|
22
26
|
position: "absolute",
|
|
23
|
-
top: placement === "bottom" ? -handleTokens.containerHeight : void 0,
|
|
24
|
-
bottom: placement === "top" ? -handleTokens.containerHeight : void 0,
|
|
25
27
|
width: "100%",
|
|
26
28
|
justifyContent: "center",
|
|
27
29
|
alignItems: "center",
|
|
28
|
-
|
|
30
|
+
...flyoutTokens.handleContainer
|
|
29
31
|
}
|
|
30
32
|
});
|
|
31
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/flyout-handle.tsx"],"sourcesContent":["import { memo } from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/components/flyout-handle.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport {\n AppTheme,\n getFlyoutTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\ninterface FlyoutHandleProps {\n placement: \"top\" | \"bottom\";\n}\n\nexport const FlyoutHandle = memo(function FlyoutHandle(\n props: FlyoutHandleProps,\n) {\n const styles = useThemedStyles(themedStyles, props, [props.placement]);\n\n return (\n <Animated.View style={styles.flyoutHandleContainer}>\n <View style={styles.flyoutHandle} />\n </Animated.View>\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n { placement }: { placement: \"top\" | \"bottom\" },\n) {\n const flyoutTokens = getFlyoutTokens(theme.components.flyout, { placement });\n const handleTokens = flyoutTokens.handle;\n\n return StyleSheet.create({\n flyoutHandle: {\n alignSelf: \"center\",\n backgroundColor: handleTokens.backgroundColor,\n width: handleTokens.width,\n height: handleTokens.height,\n borderRadius: handleTokens.borderRadius,\n },\n flyoutHandleContainer: {\n position: \"absolute\",\n width: \"100%\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...flyoutTokens.handleContainer,\n },\n });\n}\n"],"mappings":"AAsBM;AAtBN,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAErB,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,SAAS,gBAAgB,cAAc,OAAO,CAAC,MAAM,SAAS,CAAC;AAErE,SACE,oBAAC,SAAS,MAAT,EAAc,OAAO,OAAO,uBAC3B,8BAAC,QAAK,OAAO,OAAO,cAAc,GACpC;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,UAAU,GACZ;AACA,QAAM,eAAe,gBAAgB,MAAM,WAAW,QAAQ,EAAE,UAAU,CAAC;AAC3E,QAAM,eAAe,aAAa;AAElC,SAAO,WAAW,OAAO;AAAA,IACvB,cAAc;AAAA,MACZ,WAAW;AAAA,MACX,iBAAiB,aAAa;AAAA,MAC9B,OAAO,aAAa;AAAA,MACpB,QAAQ,aAAa;AAAA,MACrB,cAAc,aAAa;AAAA,IAC7B;AAAA,IACA,uBAAuB;AAAA,MACrB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG,aAAa;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":["FlyoutHandle"]}
|
|
@@ -8,7 +8,11 @@ import {
|
|
|
8
8
|
useSafeAreaInsets
|
|
9
9
|
} from "react-native-safe-area-context";
|
|
10
10
|
import { Pressable, View } from "@impulse-ui-native/primitives";
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
getFlyoutTokens,
|
|
13
|
+
useTheme,
|
|
14
|
+
useThemedStyles
|
|
15
|
+
} from "@impulse-ui-native/theme";
|
|
12
16
|
import { useFlyoutLifecycle } from "../hooks";
|
|
13
17
|
import { FlyoutHandle } from "./flyout-handle";
|
|
14
18
|
import { FlyoutTitle } from "./flyout-title";
|
|
@@ -30,7 +34,7 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
30
34
|
const theme = useTheme();
|
|
31
35
|
const insets = useSafeAreaInsets();
|
|
32
36
|
const windowDimensions = useWindowDimensions();
|
|
33
|
-
const flyoutTokens = theme.components.flyout;
|
|
37
|
+
const flyoutTokens = getFlyoutTokens(theme.components.flyout, { placement });
|
|
34
38
|
const placementOffset = placement === "top" ? topOffset : bottomOffset;
|
|
35
39
|
const screenHeight = windowDimensions.height;
|
|
36
40
|
const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;
|
|
@@ -105,18 +109,14 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
105
109
|
});
|
|
106
110
|
function themedStyles(theme, props) {
|
|
107
111
|
const { maxHeight, placement } = props;
|
|
108
|
-
const flyoutTokens = theme.components.flyout;
|
|
112
|
+
const flyoutTokens = getFlyoutTokens(theme.components.flyout, { placement });
|
|
109
113
|
return StyleSheet.create({
|
|
110
114
|
container: {
|
|
111
115
|
position: "absolute",
|
|
112
|
-
[placement]: 0,
|
|
113
116
|
left: 0,
|
|
114
117
|
right: 0,
|
|
115
118
|
backgroundColor: flyoutTokens.backgroundColor,
|
|
116
|
-
|
|
117
|
-
borderTopRightRadius: placement === "bottom" ? flyoutTokens.borderRadius : 0,
|
|
118
|
-
borderBottomLeftRadius: placement === "top" ? flyoutTokens.borderRadius : 0,
|
|
119
|
-
borderBottomRightRadius: placement === "top" ? flyoutTokens.borderRadius : 0
|
|
119
|
+
...flyoutTokens.container
|
|
120
120
|
},
|
|
121
121
|
content: {
|
|
122
122
|
paddingHorizontal: flyoutTokens.contentPaddingHorizontal,
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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 {\n getFlyoutTokens,\n useTheme,\n useThemedStyles,\n} 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 = getFlyoutTokens(theme.components.flyout, { placement });\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 = getFlyoutTokens(theme.components.flyout, { placement });\n\n return StyleSheet.create({\n container: {\n position: \"absolute\",\n left: 0,\n right: 0,\n backgroundColor: flyoutTokens.backgroundColor,\n ...flyoutTokens.container,\n },\n content: {\n paddingHorizontal: flyoutTokens.contentPaddingHorizontal,\n maxHeight,\n },\n hidden: {\n opacity: flyoutTokens.hiddenOpacity,\n },\n });\n}\n"],"mappings":"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","names":["Flyout"]}
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
withTiming
|
|
8
8
|
} from "react-native-reanimated";
|
|
9
9
|
import { scheduleOnRN } from "react-native-worklets";
|
|
10
|
-
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
10
|
+
import { getFlyoutTokens, useComponentsTokens } from "@impulse-ui-native/theme";
|
|
11
11
|
const EnterAnimationConfig = {
|
|
12
12
|
damping: 50,
|
|
13
13
|
stiffness: 300,
|
|
@@ -32,7 +32,8 @@ function useFlyoutLifecycle(props) {
|
|
|
32
32
|
onOpenFinished
|
|
33
33
|
} = props;
|
|
34
34
|
const tokens = useComponentsTokens();
|
|
35
|
-
const
|
|
35
|
+
const flyoutTokens = getFlyoutTokens(tokens.flyout, { placement });
|
|
36
|
+
const handleHeight = flyoutTokens.handleContainer.height;
|
|
36
37
|
const [mounted, setMounted] = useState(open);
|
|
37
38
|
const [measuredHeight, setMeasuredHeight] = useState(null);
|
|
38
39
|
const [isTouchable, setIsTouchable] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-flyout-lifecycle.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { LayoutChangeEvent } from \"react-native\";\nimport { Gesture } from \"react-native-gesture-handler\";\nimport {\n Easing,\n useSharedValue,\n withSpring,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { FlyoutProps } from \"../types\";\n\nconst EnterAnimationConfig = {\n damping: 50,\n stiffness: 300,\n mass: 1,\n overshootClamping: true,\n};\n\nconst ExitAnimationConfig = {\n duration: 150,\n easing: Easing.in(Easing.quad),\n};\n\ninterface UseFlyoutLifecycleProps {\n id: FlyoutProps[\"id\"];\n open: FlyoutProps[\"open\"];\n placement: NonNullable<FlyoutProps[\"placement\"]>;\n screenHeight: number;\n safeAreaInset: number;\n overlayVisibleOpacity: number;\n onClose: FlyoutProps[\"onClose\"];\n onCloseFinished: FlyoutProps[\"onCloseFinished\"];\n onOpen: FlyoutProps[\"onOpen\"];\n onOpenFinished: FlyoutProps[\"onOpenFinished\"];\n}\n\nexport function useFlyoutLifecycle(props: UseFlyoutLifecycleProps) {\n const {\n id,\n open,\n placement,\n screenHeight,\n safeAreaInset,\n overlayVisibleOpacity,\n onClose,\n onCloseFinished,\n onOpen,\n onOpenFinished,\n } = props;\n\n const tokens = useComponentsTokens();\n const handleHeight = tokens.flyout.handle.containerHeight;\n\n const [mounted, setMounted] = useState(open);\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\n const [isTouchable, setIsTouchable] = useState(false);\n\n const didOpen = useRef(false);\n const isClosing = useRef(false);\n const transitionId = useRef(0);\n\n const translateY = useSharedValue(\n placement === \"top\" ? -screenHeight : screenHeight,\n );\n const opacity = useSharedValue(0);\n\n const hasMeasured = measuredHeight !== null;\n\n const onLayout = useCallback(\n (event: LayoutChangeEvent) => {\n if (measuredHeight !== null) {\n return;\n }\n\n const height =\n event.nativeEvent.layout.height + safeAreaInset + handleHeight;\n\n translateY.value = placement === \"top\" ? -height : height;\n setMeasuredHeight(height);\n },\n [handleHeight, measuredHeight, placement, safeAreaInset, translateY],\n );\n\n const finishClosing = useCallback(\n (finishedTransitionId: number) => {\n if (!isClosing.current || transitionId.current !== finishedTransitionId) {\n return;\n }\n\n isClosing.current = false;\n setMounted(false);\n setMeasuredHeight(null);\n onCloseFinished?.(id);\n },\n [id, onCloseFinished],\n );\n\n const close = useCallback(() => {\n if (measuredHeight === null || isClosing.current) {\n return;\n }\n\n isClosing.current = true;\n transitionId.current += 1;\n setIsTouchable(false);\n onClose?.(id);\n\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\n const closingTransitionId = transitionId.current;\n\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\n if (finished) {\n scheduleOnRN(finishClosing, closingTransitionId);\n }\n });\n opacity.value = withTiming(0, ExitAnimationConfig);\n didOpen.current = false;\n }, [\n finishClosing,\n id,\n measuredHeight,\n onClose,\n opacity,\n placement,\n translateY,\n ]);\n\n const dragGesture = useMemo(\n () =>\n Gesture.Pan()\n .enabled(hasMeasured)\n .onUpdate((event) => {\n if (placement === \"bottom\") {\n translateY.value = Math.max(0, event.translationY);\n return;\n }\n\n translateY.value = Math.min(0, event.translationY);\n })\n .onEnd((event) => {\n if (measuredHeight === null) {\n return;\n }\n\n const shouldClose =\n placement === \"bottom\"\n ? event.translationY > measuredHeight * 0.5 ||\n event.velocityY > 1500\n : event.translationY < -measuredHeight * 0.5 ||\n event.velocityY < -1500;\n\n if (shouldClose) {\n scheduleOnRN(close);\n return;\n }\n\n translateY.value = withSpring(0, EnterAnimationConfig);\n opacity.value = withSpring(\n overlayVisibleOpacity,\n EnterAnimationConfig,\n );\n }),\n [\n close,\n hasMeasured,\n measuredHeight,\n opacity,\n overlayVisibleOpacity,\n placement,\n translateY,\n ],\n );\n\n useEffect(() => {\n if (!open) {\n return;\n }\n\n transitionId.current += 1;\n setIsTouchable(false);\n isClosing.current = false;\n didOpen.current = false;\n\n if (!mounted) {\n setMounted(true);\n setMeasuredHeight(null);\n translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\n opacity.value = 0;\n }\n }, [mounted, open, opacity, placement, screenHeight, translateY]);\n\n useEffect(() => {\n if (!open || measuredHeight === null || didOpen.current) {\n return;\n }\n\n setIsTouchable(true);\n onOpen?.(id);\n\n translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\n if (finished && onOpenFinished) {\n scheduleOnRN(onOpenFinished, id);\n }\n });\n opacity.value = withSpring(overlayVisibleOpacity, EnterAnimationConfig);\n didOpen.current = true;\n }, [\n id,\n measuredHeight,\n onOpen,\n onOpenFinished,\n opacity,\n open,\n overlayVisibleOpacity,\n translateY,\n ]);\n\n useEffect(() => {\n if (open || !mounted || isClosing.current) {\n return;\n }\n\n if (didOpen.current) {\n close();\n return;\n }\n\n setMounted(false);\n setMeasuredHeight(null);\n }, [close, mounted, open]);\n\n return useMemo(\n () => ({\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n }),\n [\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n ],\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-flyout-lifecycle.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { LayoutChangeEvent } from \"react-native\";\nimport { Gesture } from \"react-native-gesture-handler\";\nimport {\n Easing,\n useSharedValue,\n withSpring,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { getFlyoutTokens, useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { FlyoutProps } from \"../types\";\n\nconst EnterAnimationConfig = {\n damping: 50,\n stiffness: 300,\n mass: 1,\n overshootClamping: true,\n};\n\nconst ExitAnimationConfig = {\n duration: 150,\n easing: Easing.in(Easing.quad),\n};\n\ninterface UseFlyoutLifecycleProps {\n id: FlyoutProps[\"id\"];\n open: FlyoutProps[\"open\"];\n placement: NonNullable<FlyoutProps[\"placement\"]>;\n screenHeight: number;\n safeAreaInset: number;\n overlayVisibleOpacity: number;\n onClose: FlyoutProps[\"onClose\"];\n onCloseFinished: FlyoutProps[\"onCloseFinished\"];\n onOpen: FlyoutProps[\"onOpen\"];\n onOpenFinished: FlyoutProps[\"onOpenFinished\"];\n}\n\nexport function useFlyoutLifecycle(props: UseFlyoutLifecycleProps) {\n const {\n id,\n open,\n placement,\n screenHeight,\n safeAreaInset,\n overlayVisibleOpacity,\n onClose,\n onCloseFinished,\n onOpen,\n onOpenFinished,\n } = props;\n\n const tokens = useComponentsTokens();\n const flyoutTokens = getFlyoutTokens(tokens.flyout, { placement });\n const handleHeight = flyoutTokens.handleContainer.height;\n\n const [mounted, setMounted] = useState(open);\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\n const [isTouchable, setIsTouchable] = useState(false);\n\n const didOpen = useRef(false);\n const isClosing = useRef(false);\n const transitionId = useRef(0);\n\n const translateY = useSharedValue(\n placement === \"top\" ? -screenHeight : screenHeight,\n );\n const opacity = useSharedValue(0);\n\n const hasMeasured = measuredHeight !== null;\n\n const onLayout = useCallback(\n (event: LayoutChangeEvent) => {\n if (measuredHeight !== null) {\n return;\n }\n\n const height =\n event.nativeEvent.layout.height + safeAreaInset + handleHeight;\n\n translateY.value = placement === \"top\" ? -height : height;\n setMeasuredHeight(height);\n },\n [handleHeight, measuredHeight, placement, safeAreaInset, translateY],\n );\n\n const finishClosing = useCallback(\n (finishedTransitionId: number) => {\n if (!isClosing.current || transitionId.current !== finishedTransitionId) {\n return;\n }\n\n isClosing.current = false;\n setMounted(false);\n setMeasuredHeight(null);\n onCloseFinished?.(id);\n },\n [id, onCloseFinished],\n );\n\n const close = useCallback(() => {\n if (measuredHeight === null || isClosing.current) {\n return;\n }\n\n isClosing.current = true;\n transitionId.current += 1;\n setIsTouchable(false);\n onClose?.(id);\n\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\n const closingTransitionId = transitionId.current;\n\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\n if (finished) {\n scheduleOnRN(finishClosing, closingTransitionId);\n }\n });\n opacity.value = withTiming(0, ExitAnimationConfig);\n didOpen.current = false;\n }, [\n finishClosing,\n id,\n measuredHeight,\n onClose,\n opacity,\n placement,\n translateY,\n ]);\n\n const dragGesture = useMemo(\n () =>\n Gesture.Pan()\n .enabled(hasMeasured)\n .onUpdate((event) => {\n if (placement === \"bottom\") {\n translateY.value = Math.max(0, event.translationY);\n return;\n }\n\n translateY.value = Math.min(0, event.translationY);\n })\n .onEnd((event) => {\n if (measuredHeight === null) {\n return;\n }\n\n const shouldClose =\n placement === \"bottom\"\n ? event.translationY > measuredHeight * 0.5 ||\n event.velocityY > 1500\n : event.translationY < -measuredHeight * 0.5 ||\n event.velocityY < -1500;\n\n if (shouldClose) {\n scheduleOnRN(close);\n return;\n }\n\n translateY.value = withSpring(0, EnterAnimationConfig);\n opacity.value = withSpring(\n overlayVisibleOpacity,\n EnterAnimationConfig,\n );\n }),\n [\n close,\n hasMeasured,\n measuredHeight,\n opacity,\n overlayVisibleOpacity,\n placement,\n translateY,\n ],\n );\n\n useEffect(() => {\n if (!open) {\n return;\n }\n\n transitionId.current += 1;\n setIsTouchable(false);\n isClosing.current = false;\n didOpen.current = false;\n\n if (!mounted) {\n setMounted(true);\n setMeasuredHeight(null);\n translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\n opacity.value = 0;\n }\n }, [mounted, open, opacity, placement, screenHeight, translateY]);\n\n useEffect(() => {\n if (!open || measuredHeight === null || didOpen.current) {\n return;\n }\n\n setIsTouchable(true);\n onOpen?.(id);\n\n translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\n if (finished && onOpenFinished) {\n scheduleOnRN(onOpenFinished, id);\n }\n });\n opacity.value = withSpring(overlayVisibleOpacity, EnterAnimationConfig);\n didOpen.current = true;\n }, [\n id,\n measuredHeight,\n onOpen,\n onOpenFinished,\n opacity,\n open,\n overlayVisibleOpacity,\n translateY,\n ]);\n\n useEffect(() => {\n if (open || !mounted || isClosing.current) {\n return;\n }\n\n if (didOpen.current) {\n close();\n return;\n }\n\n setMounted(false);\n setMeasuredHeight(null);\n }, [close, mounted, open]);\n\n return useMemo(\n () => ({\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n }),\n [\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n ],\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/flyout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.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/theme": "
|
|
32
|
-
"@impulse-ui-native/overlay": "
|
|
33
|
-
"@impulse-ui-native/primitives": "
|
|
31
|
+
"@impulse-ui-native/theme": "5.0.0",
|
|
32
|
+
"@impulse-ui-native/overlay": "5.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "5.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"react-native-safe-area-context": "~5.7.0",
|
|
44
44
|
"react-native-worklets": "0.10.1",
|
|
45
45
|
"typescript": "~6.0.3",
|
|
46
|
-
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
47
46
|
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
47
|
+
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
48
48
|
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|