@impulse-ui-native/flyout 1.0.8 → 1.0.10

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.
Files changed (4) hide show
  1. package/dist/index.cjs.js.map +1 -1
  2. package/dist/index.esm.js.map +1 -1
  3. package/package.json +9 -8
  4. package/src/components/flyout.tsx +4 -2
package/dist/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/flyout.tsx","../src/components/flyout-handle.tsx","../src/components/flyout-title.tsx"],"sourcesContent":["export * from \"./components\";\r\nexport * from \"./types\";\r\n","import { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { SafeAreaView } from \"@impulse-ui-native/safe-area-view\";\r\nimport { AppTheme, useColors, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport {\r\n Fragment,\r\n memo,\r\n PropsWithChildren,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\nimport {\r\n Dimensions,\r\n LayoutChangeEvent,\r\n Platform,\r\n Pressable,\r\n StyleSheet,\r\n} from \"react-native\";\r\nimport {\r\n Gesture,\r\n GestureDetector,\r\n GestureStateChangeEvent,\r\n GestureUpdateEvent,\r\n PanGestureHandlerEventPayload,\r\n} from \"react-native-gesture-handler\";\r\nimport Animated, {\r\n Easing,\r\n useAnimatedScrollHandler,\r\n useAnimatedStyle,\r\n useSharedValue,\r\n withSpring,\r\n withTiming,\r\n} from \"react-native-reanimated\";\r\nimport { Edge } from \"react-native-safe-area-context\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\r\nimport { FlyoutProps } from \"../types\";\r\nimport { FlyoutHandle } from \"./flyout-handle\";\r\nimport { FlyoutTitle } from \"./flyout-title\";\r\n\r\nconst EnterAnimationConfig = {\r\n damping: 50,\r\n stiffness: 300,\r\n mass: 1,\r\n overshootClamping: true,\r\n};\r\n\r\nconst ExitAnimationConfig = {\r\n duration: 150,\r\n easing: Easing.in(Easing.quad),\r\n};\r\n\r\nconst StickyHeaderIndices = [0];\r\nconst ScreenHeight = Dimensions.get(\"screen\").height;\r\nconst MaxHeight = ScreenHeight * 0.9;\r\n\r\nconst AndroidOverScroll =\r\n Platform.OS === \"android\" ? { overScrollMode: \"always\" as const } : {};\r\n\r\nexport const Flyout = memo(function Flyout({\r\n children,\r\n placement = \"bottom\",\r\n ...props\r\n}: PropsWithChildren<FlyoutProps>) {\r\n const colors = useColors();\r\n const theme = useTheme();\r\n\r\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\r\n const [bounceEnabled, setBounceEnabled] = useState(placement !== \"bottom\");\r\n const [viewportHeight, setViewportHeight] = useState(0);\r\n const [contentHeight, setContentHeight] = useState(0);\r\n\r\n const didOpen = useRef(false);\r\n const canDismiss = useSharedValue(placement === \"bottom\");\r\n const scrollY = useSharedValue(0);\r\n const maxScrollY = useSharedValue(0);\r\n\r\n const translateY = useSharedValue(\r\n placement === \"top\" ? -ScreenHeight : ScreenHeight\r\n );\r\n const opacity = useSharedValue(0);\r\n\r\n const isScrollable = useMemo(\r\n () => contentHeight > viewportHeight,\r\n [contentHeight, viewportHeight]\r\n );\r\n\r\n const onScroll = useAnimatedScrollHandler({\r\n onScroll(event) {\r\n scrollY.value = event.contentOffset.y;\r\n maxScrollY.value = Math.max(\r\n 0,\r\n event.contentSize.height - event.layoutMeasurement.height\r\n );\r\n },\r\n onMomentumEnd(event) {\r\n if (placement === \"bottom\" && event.contentOffset.y <= 0) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value >= maxScrollY.value - 1) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n },\r\n });\r\n\r\n const onLayout = useEventCallback((event: LayoutChangeEvent) => {\r\n if (!didOpen.current && measuredHeight === null) {\r\n const rawHeight = event.nativeEvent.layout.height;\r\n const clampedHeight = Math.min(rawHeight, MaxHeight);\r\n setMeasuredHeight(clampedHeight);\r\n translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\r\n }\r\n });\r\n\r\n const onLayoutScrollview = useEventCallback((event: LayoutChangeEvent) => {\r\n setViewportHeight(event.nativeEvent.layout.height);\r\n });\r\n\r\n const onContentSizeChange = useEventCallback(\r\n (_contentWidth: number, contentHeight: number) => {\r\n setContentHeight(contentHeight);\r\n }\r\n );\r\n\r\n const animateOut = useEventCallback(() => {\r\n if (measuredHeight) {\r\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\r\n\r\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\r\n if (finished && props.onCloseFinished) {\r\n scheduleOnRN(props.onCloseFinished, props.id);\r\n }\r\n });\r\n\r\n opacity.value = withTiming(0, ExitAnimationConfig);\r\n didOpen.current = false;\r\n }\r\n });\r\n\r\n const onPanGestureEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n if (!measuredHeight) return;\r\n\r\n let shouldClose = false;\r\n\r\n if (placement === \"bottom\") {\r\n shouldClose =\r\n event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;\r\n }\r\n\r\n if (placement === \"top\") {\r\n shouldClose =\r\n event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;\r\n }\r\n\r\n if (shouldClose && (canDismiss.value || !isScrollable)) {\r\n animateOut();\r\n } else {\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureHandleEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n onPanGestureEnd(event);\r\n\r\n if (placement === \"bottom\" && scrollY.value > 0) {\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value < maxScrollY.value - 1) {\r\n canDismiss.value = false;\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n if (placement === \"bottom\" && event.translationY < 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && event.translationY > 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n if (canDismiss.value || !isScrollable) {\r\n translateY.value = event.translationY;\r\n }\r\n };\r\n\r\n const onPanGestureHandleUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n canDismiss.value = true;\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n translateY.value = event.translationY;\r\n };\r\n\r\n const panGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureEnd, event));\r\n\r\n const gesture = Gesture.Simultaneous(Gesture.Native(), panGesture);\r\n\r\n const handleGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureHandleUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureHandleEnd, event));\r\n\r\n const animatedStyle = useAnimatedStyle(() => ({\r\n transform: [{ translateY: translateY.value }],\r\n zIndex: 100 + props.layer,\r\n }));\r\n\r\n const overlayStyle = useAnimatedStyle(() => ({\r\n opacity: opacity.value,\r\n zIndex: 100 + props.layer,\r\n backgroundColor: colors.black,\r\n }));\r\n\r\n const edges = useMemo<Edge[]>(() => {\r\n return [placement, \"left\", \"right\"];\r\n }, [placement]);\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, placement),\r\n [theme, placement]\r\n );\r\n\r\n useEffect(() => {\r\n if (measuredHeight === null || didOpen.current || !props.open) return;\r\n\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n didOpen.current = true;\r\n }, [measuredHeight, props.open]);\r\n\r\n return (\r\n <Fragment>\r\n <Animated.View style={[StyleSheet.absoluteFill, overlayStyle]}>\r\n <Pressable onPress={animateOut} style={StyleSheet.absoluteFillObject} />\r\n </Animated.View>\r\n <GestureDetector gesture={gesture}>\r\n <Animated.View style={[styles.container, animatedStyle]}>\r\n <SafeAreaView\r\n edges={edges}\r\n style={styles.safeAreaView}\r\n onLayout={onLayout}\r\n >\r\n {placement === \"bottom\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n\r\n <Animated.ScrollView\r\n onLayout={onLayoutScrollview}\r\n onContentSizeChange={onContentSizeChange}\r\n onScroll={onScroll}\r\n scrollEventThrottle={16}\r\n scrollEnabled={isScrollable}\r\n bounces={isScrollable && bounceEnabled}\r\n style={styles.scrollview}\r\n stickyHeaderIndices={\r\n props.title ? StickyHeaderIndices : undefined\r\n }\r\n showsHorizontalScrollIndicator={false}\r\n showsVerticalScrollIndicator={false}\r\n {...AndroidOverScroll}\r\n >\r\n {props.title && <FlyoutTitle title={props.title} />}\r\n <View padding={theme.spacing.sm}>{children}</View>\r\n </Animated.ScrollView>\r\n\r\n {placement === \"top\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n </SafeAreaView>\r\n </Animated.View>\r\n </GestureDetector>\r\n </Fragment>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n position: \"absolute\",\r\n [placement]: 0,\r\n left: 0,\r\n right: 0,\r\n backgroundColor: theme.colors.background.secondary,\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n scrollview: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n safeAreaView: { maxHeight: MaxHeight },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated from \"react-native-reanimated\";\r\n\r\nconst FlyoutHandleHeight = 32;\r\n\r\ninterface FlyoutHandleProps {\r\n placement: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutHandle = memo(function FlyoutHandle(\r\n props: FlyoutHandleProps\r\n) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n return (\r\n <Animated.View style={styles.flyoutHandleContainer}>\r\n <View style={styles.flyoutHandle} />\r\n </Animated.View>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n flyoutHandle: {\r\n alignSelf: \"center\",\r\n backgroundColor: theme.colors.background.primary,\r\n width: \"25%\",\r\n height: 6,\r\n borderRadius: theme.radii.round,\r\n },\r\n flyoutHandleContainer: {\r\n position: \"absolute\",\r\n top: placement === \"bottom\" ? -FlyoutHandleHeight : undefined,\r\n bottom: placement === \"top\" ? -FlyoutHandleHeight : undefined,\r\n width: \"100%\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n height: FlyoutHandleHeight,\r\n },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { Typography } from \"@impulse-ui-native/typography\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, ReactNode, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\ninterface FlyoutTitleProps {\r\n title?: ReactNode | string;\r\n placement?: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutTitle = memo(function FlyoutTitle(props: FlyoutTitleProps) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n const title = useMemo(() => {\r\n if (typeof props.title === \"string\") {\r\n return <Typography.Title3>{props.title}</Typography.Title3>;\r\n }\r\n\r\n return props.title;\r\n }, [props.title]);\r\n\r\n if (!props.title) {\r\n return null;\r\n }\r\n\r\n return <View style={styles.container}>{title}</View>;\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement?: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n backgroundColor: theme.colors.background.secondary,\r\n padding: theme.spacing.mxs,\r\n alignItems: \"center\",\r\n },\r\n });\r\n};\r\n"],"mappings":"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","names":["import_theme","import_view","import_react","import_react_native","import_react_native_reanimated","FlyoutHandle","Animated","import_theme","import_view","import_react","import_react_native","FlyoutTitle","themedStyles","Flyout","contentHeight","themedStyles","Animated"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/flyout.tsx","../src/components/flyout-handle.tsx","../src/components/flyout-title.tsx"],"sourcesContent":["export * from \"./components\";\r\nexport * from \"./types\";\r\n","import { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { SafeAreaView } from \"@impulse-ui-native/safe-area-view\";\r\nimport { AppTheme, useColors, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport {\r\n Fragment,\r\n memo,\r\n PropsWithChildren,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\nimport {\r\n Dimensions,\r\n LayoutChangeEvent,\r\n Platform,\r\n Pressable,\r\n StyleSheet,\r\n} from \"react-native\";\r\nimport {\r\n Gesture,\r\n GestureDetector,\r\n GestureStateChangeEvent,\r\n GestureUpdateEvent,\r\n PanGestureHandlerEventPayload,\r\n} from \"react-native-gesture-handler\";\r\nimport Animated, {\r\n Easing,\r\n useAnimatedScrollHandler,\r\n useAnimatedStyle,\r\n useSharedValue,\r\n withSpring,\r\n withTiming,\r\n} from \"react-native-reanimated\";\r\nimport { Edge } from \"react-native-safe-area-context\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\n\r\nimport { FlyoutProps } from \"../types\";\n\r\nimport { FlyoutHandle } from \"./flyout-handle\";\r\nimport { FlyoutTitle } from \"./flyout-title\";\r\n\r\nconst EnterAnimationConfig = {\r\n damping: 50,\r\n stiffness: 300,\r\n mass: 1,\r\n overshootClamping: true,\r\n};\r\n\r\nconst ExitAnimationConfig = {\r\n duration: 150,\r\n easing: Easing.in(Easing.quad),\r\n};\r\n\r\nconst StickyHeaderIndices = [0];\r\nconst ScreenHeight = Dimensions.get(\"screen\").height;\r\nconst MaxHeight = ScreenHeight * 0.9;\r\n\r\nconst AndroidOverScroll =\r\n Platform.OS === \"android\" ? { overScrollMode: \"always\" as const } : {};\r\n\r\nexport const Flyout = memo(function Flyout({\r\n children,\r\n placement = \"bottom\",\r\n ...props\r\n}: PropsWithChildren<FlyoutProps>) {\r\n const colors = useColors();\r\n const theme = useTheme();\r\n\r\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\r\n const [bounceEnabled, setBounceEnabled] = useState(placement !== \"bottom\");\r\n const [viewportHeight, setViewportHeight] = useState(0);\r\n const [contentHeight, setContentHeight] = useState(0);\r\n\r\n const didOpen = useRef(false);\r\n const canDismiss = useSharedValue(placement === \"bottom\");\r\n const scrollY = useSharedValue(0);\r\n const maxScrollY = useSharedValue(0);\r\n\r\n const translateY = useSharedValue(\r\n placement === \"top\" ? -ScreenHeight : ScreenHeight\r\n );\r\n const opacity = useSharedValue(0);\r\n\r\n const isScrollable = useMemo(\r\n () => contentHeight > viewportHeight,\r\n [contentHeight, viewportHeight]\r\n );\r\n\r\n const onScroll = useAnimatedScrollHandler({\r\n onScroll(event) {\r\n scrollY.value = event.contentOffset.y;\r\n maxScrollY.value = Math.max(\r\n 0,\r\n event.contentSize.height - event.layoutMeasurement.height\r\n );\r\n },\r\n onMomentumEnd(event) {\r\n if (placement === \"bottom\" && event.contentOffset.y <= 0) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value >= maxScrollY.value - 1) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n },\r\n });\r\n\r\n const onLayout = useEventCallback((event: LayoutChangeEvent) => {\r\n if (!didOpen.current && measuredHeight === null) {\r\n const rawHeight = event.nativeEvent.layout.height;\r\n const clampedHeight = Math.min(rawHeight, MaxHeight);\r\n setMeasuredHeight(clampedHeight);\r\n translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\r\n }\r\n });\r\n\r\n const onLayoutScrollview = useEventCallback((event: LayoutChangeEvent) => {\r\n setViewportHeight(event.nativeEvent.layout.height);\r\n });\r\n\r\n const onContentSizeChange = useEventCallback(\r\n (_contentWidth: number, contentHeight: number) => {\r\n setContentHeight(contentHeight);\r\n }\r\n );\r\n\r\n const animateOut = useEventCallback(() => {\r\n if (measuredHeight) {\r\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\r\n\r\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\r\n if (finished && props.onCloseFinished) {\r\n scheduleOnRN(props.onCloseFinished, props.id);\r\n }\r\n });\r\n\r\n opacity.value = withTiming(0, ExitAnimationConfig);\r\n didOpen.current = false;\r\n }\r\n });\r\n\r\n const onPanGestureEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n if (!measuredHeight) return;\r\n\r\n let shouldClose = false;\r\n\r\n if (placement === \"bottom\") {\r\n shouldClose =\r\n event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;\r\n }\r\n\r\n if (placement === \"top\") {\r\n shouldClose =\r\n event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;\r\n }\r\n\r\n if (shouldClose && (canDismiss.value || !isScrollable)) {\r\n animateOut();\r\n } else {\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureHandleEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n onPanGestureEnd(event);\r\n\r\n if (placement === \"bottom\" && scrollY.value > 0) {\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value < maxScrollY.value - 1) {\r\n canDismiss.value = false;\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n if (placement === \"bottom\" && event.translationY < 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && event.translationY > 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n if (canDismiss.value || !isScrollable) {\r\n translateY.value = event.translationY;\r\n }\r\n };\r\n\r\n const onPanGestureHandleUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n canDismiss.value = true;\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n translateY.value = event.translationY;\r\n };\r\n\r\n const panGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureEnd, event));\r\n\r\n const gesture = Gesture.Simultaneous(Gesture.Native(), panGesture);\r\n\r\n const handleGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureHandleUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureHandleEnd, event));\r\n\r\n const animatedStyle = useAnimatedStyle(() => ({\r\n transform: [{ translateY: translateY.value }],\r\n zIndex: 100 + props.layer,\r\n }));\r\n\r\n const overlayStyle = useAnimatedStyle(() => ({\r\n opacity: opacity.value,\r\n zIndex: 100 + props.layer,\r\n backgroundColor: colors.black,\r\n }));\r\n\r\n const edges = useMemo<Edge[]>(() => {\r\n return [placement, \"left\", \"right\"];\r\n }, [placement]);\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, placement),\r\n [theme, placement]\r\n );\r\n\r\n useEffect(() => {\r\n if (measuredHeight === null || didOpen.current || !props.open) return;\r\n\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n didOpen.current = true;\r\n }, [measuredHeight, props.open]);\r\n\r\n return (\r\n <Fragment>\r\n <Animated.View style={[StyleSheet.absoluteFill, overlayStyle]}>\r\n <Pressable onPress={animateOut} style={StyleSheet.absoluteFillObject} />\r\n </Animated.View>\r\n <GestureDetector gesture={gesture}>\r\n <Animated.View style={[styles.container, animatedStyle]}>\r\n <SafeAreaView\r\n edges={edges}\r\n style={styles.safeAreaView}\r\n onLayout={onLayout}\r\n >\r\n {placement === \"bottom\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n\r\n <Animated.ScrollView\r\n onLayout={onLayoutScrollview}\r\n onContentSizeChange={onContentSizeChange}\r\n onScroll={onScroll}\r\n scrollEventThrottle={16}\r\n scrollEnabled={isScrollable}\r\n bounces={isScrollable && bounceEnabled}\r\n style={styles.scrollview}\r\n stickyHeaderIndices={\r\n props.title ? StickyHeaderIndices : undefined\r\n }\r\n showsHorizontalScrollIndicator={false}\r\n showsVerticalScrollIndicator={false}\r\n {...AndroidOverScroll}\r\n >\r\n {props.title && <FlyoutTitle title={props.title} />}\r\n <View padding={theme.spacing.sm}>{children}</View>\r\n </Animated.ScrollView>\r\n\r\n {placement === \"top\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n </SafeAreaView>\r\n </Animated.View>\r\n </GestureDetector>\r\n </Fragment>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n position: \"absolute\",\r\n [placement]: 0,\r\n left: 0,\r\n right: 0,\r\n backgroundColor: theme.colors.background.secondary,\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n scrollview: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n safeAreaView: { maxHeight: MaxHeight },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated from \"react-native-reanimated\";\r\n\r\nconst FlyoutHandleHeight = 32;\r\n\r\ninterface FlyoutHandleProps {\r\n placement: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutHandle = memo(function FlyoutHandle(\r\n props: FlyoutHandleProps\r\n) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n return (\r\n <Animated.View style={styles.flyoutHandleContainer}>\r\n <View style={styles.flyoutHandle} />\r\n </Animated.View>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n flyoutHandle: {\r\n alignSelf: \"center\",\r\n backgroundColor: theme.colors.background.primary,\r\n width: \"25%\",\r\n height: 6,\r\n borderRadius: theme.radii.round,\r\n },\r\n flyoutHandleContainer: {\r\n position: \"absolute\",\r\n top: placement === \"bottom\" ? -FlyoutHandleHeight : undefined,\r\n bottom: placement === \"top\" ? -FlyoutHandleHeight : undefined,\r\n width: \"100%\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n height: FlyoutHandleHeight,\r\n },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { Typography } from \"@impulse-ui-native/typography\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, ReactNode, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\ninterface FlyoutTitleProps {\r\n title?: ReactNode | string;\r\n placement?: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutTitle = memo(function FlyoutTitle(props: FlyoutTitleProps) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n const title = useMemo(() => {\r\n if (typeof props.title === \"string\") {\r\n return <Typography.Title3>{props.title}</Typography.Title3>;\r\n }\r\n\r\n return props.title;\r\n }, [props.title]);\r\n\r\n if (!props.title) {\r\n return null;\r\n }\r\n\r\n return <View style={styles.container}>{title}</View>;\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement?: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n backgroundColor: theme.colors.background.secondary,\r\n padding: theme.spacing.mxs,\r\n alignItems: \"center\",\r\n },\r\n });\r\n};\r\n"],"mappings":"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","names":["import_theme","import_view","import_react","import_react_native","import_react_native_reanimated","FlyoutHandle","Animated","import_theme","import_view","import_react","import_react_native","FlyoutTitle","themedStyles","Flyout","contentHeight","themedStyles","Animated"]}
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/flyout.tsx","../src/components/flyout-handle.tsx","../src/components/flyout-title.tsx"],"sourcesContent":["import { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { SafeAreaView } from \"@impulse-ui-native/safe-area-view\";\r\nimport { AppTheme, useColors, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport {\r\n Fragment,\r\n memo,\r\n PropsWithChildren,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\nimport {\r\n Dimensions,\r\n LayoutChangeEvent,\r\n Platform,\r\n Pressable,\r\n StyleSheet,\r\n} from \"react-native\";\r\nimport {\r\n Gesture,\r\n GestureDetector,\r\n GestureStateChangeEvent,\r\n GestureUpdateEvent,\r\n PanGestureHandlerEventPayload,\r\n} from \"react-native-gesture-handler\";\r\nimport Animated, {\r\n Easing,\r\n useAnimatedScrollHandler,\r\n useAnimatedStyle,\r\n useSharedValue,\r\n withSpring,\r\n withTiming,\r\n} from \"react-native-reanimated\";\r\nimport { Edge } from \"react-native-safe-area-context\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\r\nimport { FlyoutProps } from \"../types\";\r\nimport { FlyoutHandle } from \"./flyout-handle\";\r\nimport { FlyoutTitle } from \"./flyout-title\";\r\n\r\nconst EnterAnimationConfig = {\r\n damping: 50,\r\n stiffness: 300,\r\n mass: 1,\r\n overshootClamping: true,\r\n};\r\n\r\nconst ExitAnimationConfig = {\r\n duration: 150,\r\n easing: Easing.in(Easing.quad),\r\n};\r\n\r\nconst StickyHeaderIndices = [0];\r\nconst ScreenHeight = Dimensions.get(\"screen\").height;\r\nconst MaxHeight = ScreenHeight * 0.9;\r\n\r\nconst AndroidOverScroll =\r\n Platform.OS === \"android\" ? { overScrollMode: \"always\" as const } : {};\r\n\r\nexport const Flyout = memo(function Flyout({\r\n children,\r\n placement = \"bottom\",\r\n ...props\r\n}: PropsWithChildren<FlyoutProps>) {\r\n const colors = useColors();\r\n const theme = useTheme();\r\n\r\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\r\n const [bounceEnabled, setBounceEnabled] = useState(placement !== \"bottom\");\r\n const [viewportHeight, setViewportHeight] = useState(0);\r\n const [contentHeight, setContentHeight] = useState(0);\r\n\r\n const didOpen = useRef(false);\r\n const canDismiss = useSharedValue(placement === \"bottom\");\r\n const scrollY = useSharedValue(0);\r\n const maxScrollY = useSharedValue(0);\r\n\r\n const translateY = useSharedValue(\r\n placement === \"top\" ? -ScreenHeight : ScreenHeight\r\n );\r\n const opacity = useSharedValue(0);\r\n\r\n const isScrollable = useMemo(\r\n () => contentHeight > viewportHeight,\r\n [contentHeight, viewportHeight]\r\n );\r\n\r\n const onScroll = useAnimatedScrollHandler({\r\n onScroll(event) {\r\n scrollY.value = event.contentOffset.y;\r\n maxScrollY.value = Math.max(\r\n 0,\r\n event.contentSize.height - event.layoutMeasurement.height\r\n );\r\n },\r\n onMomentumEnd(event) {\r\n if (placement === \"bottom\" && event.contentOffset.y <= 0) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value >= maxScrollY.value - 1) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n },\r\n });\r\n\r\n const onLayout = useEventCallback((event: LayoutChangeEvent) => {\r\n if (!didOpen.current && measuredHeight === null) {\r\n const rawHeight = event.nativeEvent.layout.height;\r\n const clampedHeight = Math.min(rawHeight, MaxHeight);\r\n setMeasuredHeight(clampedHeight);\r\n translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\r\n }\r\n });\r\n\r\n const onLayoutScrollview = useEventCallback((event: LayoutChangeEvent) => {\r\n setViewportHeight(event.nativeEvent.layout.height);\r\n });\r\n\r\n const onContentSizeChange = useEventCallback(\r\n (_contentWidth: number, contentHeight: number) => {\r\n setContentHeight(contentHeight);\r\n }\r\n );\r\n\r\n const animateOut = useEventCallback(() => {\r\n if (measuredHeight) {\r\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\r\n\r\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\r\n if (finished && props.onCloseFinished) {\r\n scheduleOnRN(props.onCloseFinished, props.id);\r\n }\r\n });\r\n\r\n opacity.value = withTiming(0, ExitAnimationConfig);\r\n didOpen.current = false;\r\n }\r\n });\r\n\r\n const onPanGestureEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n if (!measuredHeight) return;\r\n\r\n let shouldClose = false;\r\n\r\n if (placement === \"bottom\") {\r\n shouldClose =\r\n event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;\r\n }\r\n\r\n if (placement === \"top\") {\r\n shouldClose =\r\n event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;\r\n }\r\n\r\n if (shouldClose && (canDismiss.value || !isScrollable)) {\r\n animateOut();\r\n } else {\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureHandleEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n onPanGestureEnd(event);\r\n\r\n if (placement === \"bottom\" && scrollY.value > 0) {\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value < maxScrollY.value - 1) {\r\n canDismiss.value = false;\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n if (placement === \"bottom\" && event.translationY < 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && event.translationY > 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n if (canDismiss.value || !isScrollable) {\r\n translateY.value = event.translationY;\r\n }\r\n };\r\n\r\n const onPanGestureHandleUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n canDismiss.value = true;\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n translateY.value = event.translationY;\r\n };\r\n\r\n const panGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureEnd, event));\r\n\r\n const gesture = Gesture.Simultaneous(Gesture.Native(), panGesture);\r\n\r\n const handleGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureHandleUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureHandleEnd, event));\r\n\r\n const animatedStyle = useAnimatedStyle(() => ({\r\n transform: [{ translateY: translateY.value }],\r\n zIndex: 100 + props.layer,\r\n }));\r\n\r\n const overlayStyle = useAnimatedStyle(() => ({\r\n opacity: opacity.value,\r\n zIndex: 100 + props.layer,\r\n backgroundColor: colors.black,\r\n }));\r\n\r\n const edges = useMemo<Edge[]>(() => {\r\n return [placement, \"left\", \"right\"];\r\n }, [placement]);\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, placement),\r\n [theme, placement]\r\n );\r\n\r\n useEffect(() => {\r\n if (measuredHeight === null || didOpen.current || !props.open) return;\r\n\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n didOpen.current = true;\r\n }, [measuredHeight, props.open]);\r\n\r\n return (\r\n <Fragment>\r\n <Animated.View style={[StyleSheet.absoluteFill, overlayStyle]}>\r\n <Pressable onPress={animateOut} style={StyleSheet.absoluteFillObject} />\r\n </Animated.View>\r\n <GestureDetector gesture={gesture}>\r\n <Animated.View style={[styles.container, animatedStyle]}>\r\n <SafeAreaView\r\n edges={edges}\r\n style={styles.safeAreaView}\r\n onLayout={onLayout}\r\n >\r\n {placement === \"bottom\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n\r\n <Animated.ScrollView\r\n onLayout={onLayoutScrollview}\r\n onContentSizeChange={onContentSizeChange}\r\n onScroll={onScroll}\r\n scrollEventThrottle={16}\r\n scrollEnabled={isScrollable}\r\n bounces={isScrollable && bounceEnabled}\r\n style={styles.scrollview}\r\n stickyHeaderIndices={\r\n props.title ? StickyHeaderIndices : undefined\r\n }\r\n showsHorizontalScrollIndicator={false}\r\n showsVerticalScrollIndicator={false}\r\n {...AndroidOverScroll}\r\n >\r\n {props.title && <FlyoutTitle title={props.title} />}\r\n <View padding={theme.spacing.sm}>{children}</View>\r\n </Animated.ScrollView>\r\n\r\n {placement === \"top\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n </SafeAreaView>\r\n </Animated.View>\r\n </GestureDetector>\r\n </Fragment>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n position: \"absolute\",\r\n [placement]: 0,\r\n left: 0,\r\n right: 0,\r\n backgroundColor: theme.colors.background.secondary,\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n scrollview: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n safeAreaView: { maxHeight: MaxHeight },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated from \"react-native-reanimated\";\r\n\r\nconst FlyoutHandleHeight = 32;\r\n\r\ninterface FlyoutHandleProps {\r\n placement: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutHandle = memo(function FlyoutHandle(\r\n props: FlyoutHandleProps\r\n) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n return (\r\n <Animated.View style={styles.flyoutHandleContainer}>\r\n <View style={styles.flyoutHandle} />\r\n </Animated.View>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n flyoutHandle: {\r\n alignSelf: \"center\",\r\n backgroundColor: theme.colors.background.primary,\r\n width: \"25%\",\r\n height: 6,\r\n borderRadius: theme.radii.round,\r\n },\r\n flyoutHandleContainer: {\r\n position: \"absolute\",\r\n top: placement === \"bottom\" ? -FlyoutHandleHeight : undefined,\r\n bottom: placement === \"top\" ? -FlyoutHandleHeight : undefined,\r\n width: \"100%\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n height: FlyoutHandleHeight,\r\n },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { Typography } from \"@impulse-ui-native/typography\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, ReactNode, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\ninterface FlyoutTitleProps {\r\n title?: ReactNode | string;\r\n placement?: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutTitle = memo(function FlyoutTitle(props: FlyoutTitleProps) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n const title = useMemo(() => {\r\n if (typeof props.title === \"string\") {\r\n return <Typography.Title3>{props.title}</Typography.Title3>;\r\n }\r\n\r\n return props.title;\r\n }, [props.title]);\r\n\r\n if (!props.title) {\r\n return null;\r\n }\r\n\r\n return <View style={styles.container}>{title}</View>;\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement?: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n backgroundColor: theme.colors.background.secondary,\r\n padding: theme.spacing.mxs,\r\n alignItems: \"center\",\r\n },\r\n });\r\n};\r\n"],"mappings":"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","names":["useTheme","View","memo","useMemo","StyleSheet","Animated","FlyoutHandle","useTheme","View","memo","useMemo","StyleSheet","FlyoutTitle","themedStyles","memo","Flyout","useTheme","useMemo","contentHeight","themedStyles","Animated","StyleSheet","View"]}
1
+ {"version":3,"sources":["../src/components/flyout.tsx","../src/components/flyout-handle.tsx","../src/components/flyout-title.tsx"],"sourcesContent":["import { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { SafeAreaView } from \"@impulse-ui-native/safe-area-view\";\r\nimport { AppTheme, useColors, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport {\r\n Fragment,\r\n memo,\r\n PropsWithChildren,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\nimport {\r\n Dimensions,\r\n LayoutChangeEvent,\r\n Platform,\r\n Pressable,\r\n StyleSheet,\r\n} from \"react-native\";\r\nimport {\r\n Gesture,\r\n GestureDetector,\r\n GestureStateChangeEvent,\r\n GestureUpdateEvent,\r\n PanGestureHandlerEventPayload,\r\n} from \"react-native-gesture-handler\";\r\nimport Animated, {\r\n Easing,\r\n useAnimatedScrollHandler,\r\n useAnimatedStyle,\r\n useSharedValue,\r\n withSpring,\r\n withTiming,\r\n} from \"react-native-reanimated\";\r\nimport { Edge } from \"react-native-safe-area-context\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\n\r\nimport { FlyoutProps } from \"../types\";\n\r\nimport { FlyoutHandle } from \"./flyout-handle\";\r\nimport { FlyoutTitle } from \"./flyout-title\";\r\n\r\nconst EnterAnimationConfig = {\r\n damping: 50,\r\n stiffness: 300,\r\n mass: 1,\r\n overshootClamping: true,\r\n};\r\n\r\nconst ExitAnimationConfig = {\r\n duration: 150,\r\n easing: Easing.in(Easing.quad),\r\n};\r\n\r\nconst StickyHeaderIndices = [0];\r\nconst ScreenHeight = Dimensions.get(\"screen\").height;\r\nconst MaxHeight = ScreenHeight * 0.9;\r\n\r\nconst AndroidOverScroll =\r\n Platform.OS === \"android\" ? { overScrollMode: \"always\" as const } : {};\r\n\r\nexport const Flyout = memo(function Flyout({\r\n children,\r\n placement = \"bottom\",\r\n ...props\r\n}: PropsWithChildren<FlyoutProps>) {\r\n const colors = useColors();\r\n const theme = useTheme();\r\n\r\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\r\n const [bounceEnabled, setBounceEnabled] = useState(placement !== \"bottom\");\r\n const [viewportHeight, setViewportHeight] = useState(0);\r\n const [contentHeight, setContentHeight] = useState(0);\r\n\r\n const didOpen = useRef(false);\r\n const canDismiss = useSharedValue(placement === \"bottom\");\r\n const scrollY = useSharedValue(0);\r\n const maxScrollY = useSharedValue(0);\r\n\r\n const translateY = useSharedValue(\r\n placement === \"top\" ? -ScreenHeight : ScreenHeight\r\n );\r\n const opacity = useSharedValue(0);\r\n\r\n const isScrollable = useMemo(\r\n () => contentHeight > viewportHeight,\r\n [contentHeight, viewportHeight]\r\n );\r\n\r\n const onScroll = useAnimatedScrollHandler({\r\n onScroll(event) {\r\n scrollY.value = event.contentOffset.y;\r\n maxScrollY.value = Math.max(\r\n 0,\r\n event.contentSize.height - event.layoutMeasurement.height\r\n );\r\n },\r\n onMomentumEnd(event) {\r\n if (placement === \"bottom\" && event.contentOffset.y <= 0) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value >= maxScrollY.value - 1) {\r\n scheduleOnRN(setBounceEnabled, false);\r\n canDismiss.value = true;\r\n }\r\n },\r\n });\r\n\r\n const onLayout = useEventCallback((event: LayoutChangeEvent) => {\r\n if (!didOpen.current && measuredHeight === null) {\r\n const rawHeight = event.nativeEvent.layout.height;\r\n const clampedHeight = Math.min(rawHeight, MaxHeight);\r\n setMeasuredHeight(clampedHeight);\r\n translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\r\n }\r\n });\r\n\r\n const onLayoutScrollview = useEventCallback((event: LayoutChangeEvent) => {\r\n setViewportHeight(event.nativeEvent.layout.height);\r\n });\r\n\r\n const onContentSizeChange = useEventCallback(\r\n (_contentWidth: number, contentHeight: number) => {\r\n setContentHeight(contentHeight);\r\n }\r\n );\r\n\r\n const animateOut = useEventCallback(() => {\r\n if (measuredHeight) {\r\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\r\n\r\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\r\n if (finished && props.onCloseFinished) {\r\n scheduleOnRN(props.onCloseFinished, props.id);\r\n }\r\n });\r\n\r\n opacity.value = withTiming(0, ExitAnimationConfig);\r\n didOpen.current = false;\r\n }\r\n });\r\n\r\n const onPanGestureEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n if (!measuredHeight) return;\r\n\r\n let shouldClose = false;\r\n\r\n if (placement === \"bottom\") {\r\n shouldClose =\r\n event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;\r\n }\r\n\r\n if (placement === \"top\") {\r\n shouldClose =\r\n event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;\r\n }\r\n\r\n if (shouldClose && (canDismiss.value || !isScrollable)) {\r\n animateOut();\r\n } else {\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureHandleEnd = useEventCallback(\r\n (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n onPanGestureEnd(event);\r\n\r\n if (placement === \"bottom\" && scrollY.value > 0) {\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && scrollY.value < maxScrollY.value - 1) {\r\n canDismiss.value = false;\r\n }\r\n }\r\n );\r\n\r\n const onPanGestureUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n if (placement === \"bottom\" && event.translationY < 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (placement === \"top\" && event.translationY > 0) {\r\n scheduleOnRN(setBounceEnabled, true);\r\n canDismiss.value = false;\r\n }\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n if (canDismiss.value || !isScrollable) {\r\n translateY.value = event.translationY;\r\n }\r\n };\r\n\r\n const onPanGestureHandleUpdate = (\r\n event: GestureUpdateEvent<PanGestureHandlerEventPayload>\r\n ) => {\r\n canDismiss.value = true;\r\n\r\n if (\r\n (placement === \"bottom\" && event.translationY < 0) ||\r\n (placement === \"top\" && event.translationY > 0)\r\n ) {\r\n return;\r\n }\r\n\r\n translateY.value = event.translationY;\r\n };\r\n\r\n const panGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureEnd, event));\r\n\r\n const gesture = Gesture.Simultaneous(Gesture.Native(), panGesture);\r\n\r\n const handleGesture = Gesture.Pan()\r\n .onUpdate(onPanGestureHandleUpdate)\r\n .onEnd((event) => scheduleOnRN(onPanGestureHandleEnd, event));\r\n\r\n const animatedStyle = useAnimatedStyle(() => ({\r\n transform: [{ translateY: translateY.value }],\r\n zIndex: 100 + props.layer,\r\n }));\r\n\r\n const overlayStyle = useAnimatedStyle(() => ({\r\n opacity: opacity.value,\r\n zIndex: 100 + props.layer,\r\n backgroundColor: colors.black,\r\n }));\r\n\r\n const edges = useMemo<Edge[]>(() => {\r\n return [placement, \"left\", \"right\"];\r\n }, [placement]);\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, placement),\r\n [theme, placement]\r\n );\r\n\r\n useEffect(() => {\r\n if (measuredHeight === null || didOpen.current || !props.open) return;\r\n\r\n translateY.value = withSpring(0, EnterAnimationConfig);\r\n opacity.value = withSpring(0.4, EnterAnimationConfig);\r\n didOpen.current = true;\r\n }, [measuredHeight, props.open]);\r\n\r\n return (\r\n <Fragment>\r\n <Animated.View style={[StyleSheet.absoluteFill, overlayStyle]}>\r\n <Pressable onPress={animateOut} style={StyleSheet.absoluteFillObject} />\r\n </Animated.View>\r\n <GestureDetector gesture={gesture}>\r\n <Animated.View style={[styles.container, animatedStyle]}>\r\n <SafeAreaView\r\n edges={edges}\r\n style={styles.safeAreaView}\r\n onLayout={onLayout}\r\n >\r\n {placement === \"bottom\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n\r\n <Animated.ScrollView\r\n onLayout={onLayoutScrollview}\r\n onContentSizeChange={onContentSizeChange}\r\n onScroll={onScroll}\r\n scrollEventThrottle={16}\r\n scrollEnabled={isScrollable}\r\n bounces={isScrollable && bounceEnabled}\r\n style={styles.scrollview}\r\n stickyHeaderIndices={\r\n props.title ? StickyHeaderIndices : undefined\r\n }\r\n showsHorizontalScrollIndicator={false}\r\n showsVerticalScrollIndicator={false}\r\n {...AndroidOverScroll}\r\n >\r\n {props.title && <FlyoutTitle title={props.title} />}\r\n <View padding={theme.spacing.sm}>{children}</View>\r\n </Animated.ScrollView>\r\n\r\n {placement === \"top\" ? (\r\n <GestureDetector gesture={handleGesture}>\r\n <FlyoutHandle placement={placement} />\r\n </GestureDetector>\r\n ) : null}\r\n </SafeAreaView>\r\n </Animated.View>\r\n </GestureDetector>\r\n </Fragment>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n position: \"absolute\",\r\n [placement]: 0,\r\n left: 0,\r\n right: 0,\r\n backgroundColor: theme.colors.background.secondary,\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n scrollview: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : 0,\r\n borderBottomLeftRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n borderBottomRightRadius: placement === \"top\" ? theme.radii.xl : 0,\r\n },\r\n safeAreaView: { maxHeight: MaxHeight },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated from \"react-native-reanimated\";\r\n\r\nconst FlyoutHandleHeight = 32;\r\n\r\ninterface FlyoutHandleProps {\r\n placement: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutHandle = memo(function FlyoutHandle(\r\n props: FlyoutHandleProps\r\n) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n return (\r\n <Animated.View style={styles.flyoutHandleContainer}>\r\n <View style={styles.flyoutHandle} />\r\n </Animated.View>\r\n );\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n flyoutHandle: {\r\n alignSelf: \"center\",\r\n backgroundColor: theme.colors.background.primary,\r\n width: \"25%\",\r\n height: 6,\r\n borderRadius: theme.radii.round,\r\n },\r\n flyoutHandleContainer: {\r\n position: \"absolute\",\r\n top: placement === \"bottom\" ? -FlyoutHandleHeight : undefined,\r\n bottom: placement === \"top\" ? -FlyoutHandleHeight : undefined,\r\n width: \"100%\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n height: FlyoutHandleHeight,\r\n },\r\n });\r\n};\r\n","import { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\r\nimport { Typography } from \"@impulse-ui-native/typography\";\r\nimport { View } from \"@impulse-ui-native/view\";\r\nimport { memo, ReactNode, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\ninterface FlyoutTitleProps {\r\n title?: ReactNode | string;\r\n placement?: \"top\" | \"bottom\";\r\n}\r\n\r\nexport const FlyoutTitle = memo(function FlyoutTitle(props: FlyoutTitleProps) {\r\n const theme = useTheme();\r\n\r\n const styles = useMemo(\r\n () => themedStyles(theme, props.placement),\r\n [theme, props.placement]\r\n );\r\n\r\n const title = useMemo(() => {\r\n if (typeof props.title === \"string\") {\r\n return <Typography.Title3>{props.title}</Typography.Title3>;\r\n }\r\n\r\n return props.title;\r\n }, [props.title]);\r\n\r\n if (!props.title) {\r\n return null;\r\n }\r\n\r\n return <View style={styles.container}>{title}</View>;\r\n});\r\n\r\nconst themedStyles = function (theme: AppTheme, placement?: \"top\" | \"bottom\") {\r\n return StyleSheet.create({\r\n container: {\r\n borderTopLeftRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n borderTopRightRadius: placement === \"bottom\" ? theme.radii.xl : undefined,\r\n backgroundColor: theme.colors.background.secondary,\r\n padding: theme.spacing.mxs,\r\n alignItems: \"center\",\r\n },\r\n });\r\n};\r\n"],"mappings":"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","names":["useTheme","View","memo","useMemo","StyleSheet","Animated","FlyoutHandle","useTheme","View","memo","useMemo","StyleSheet","FlyoutTitle","themedStyles","memo","Flyout","useTheme","useMemo","contentHeight","themedStyles","Animated","StyleSheet","View"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@impulse-ui-native/flyout",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "source": "src/index.ts",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -21,12 +21,12 @@
21
21
  "LICENSE"
22
22
  ],
23
23
  "dependencies": {
24
- "@impulse-ui-native/theme": "1.0.8",
25
- "@impulse-ui-native/view": "1.0.8",
26
- "@impulse-ui-native/typography": "1.0.8",
27
- "@impulse-ui-native/core": "1.0.8",
28
- "@impulse-ui-native/safe-area-view": "1.0.8",
29
- "@impulse-ui-native/layer-manager-types": "1.0.8"
24
+ "@impulse-ui-native/theme": "1.0.10",
25
+ "@impulse-ui-native/view": "1.0.10",
26
+ "@impulse-ui-native/typography": "1.0.10",
27
+ "@impulse-ui-native/safe-area-view": "1.0.10",
28
+ "@impulse-ui-native/core": "1.0.10",
29
+ "@impulse-ui-native/layer-manager-types": "1.0.10"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "react": ">=18",
@@ -43,6 +43,7 @@
43
43
  },
44
44
  "scripts": {
45
45
  "build": "tsup --config tsup.config.ts",
46
- "typecheck": "tsc -p tsconfig.json --noEmit"
46
+ "typecheck": "tsc -p tsconfig.json --noEmit",
47
+ "lint": "pnpm exec eslint . --fix"
47
48
  }
48
49
  }
package/src/components/flyout.tsx CHANGED
@@ -34,8 +34,10 @@ import Animated, {
34
34
  withTiming,
35
35
  } from "react-native-reanimated";
36
36
  import { Edge } from "react-native-safe-area-context";
37
- import { scheduleOnRN } from "react-native-worklets";
38
- import { FlyoutProps } from "../types";
37
+ import { scheduleOnRN } from "react-native-worklets";
38
+
39
+ import { FlyoutProps } from "../types";
40
+
39
41
  import { FlyoutHandle } from "./flyout-handle";
40
42
  import { FlyoutTitle } from "./flyout-title";
41
43