@metamask-previews/design-system-react-native 0.30.2-preview.9bd8bc3 → 0.30.2-preview.e22e766
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/BottomSheet/BottomSheet.cjs +7 -12
- package/dist/components/BottomSheet/BottomSheet.cjs.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.d.cts +0 -1
- package/dist/components/BottomSheet/BottomSheet.d.cts.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.d.mts +0 -1
- package/dist/components/BottomSheet/BottomSheet.d.mts.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.mjs +7 -12
- package/dist/components/BottomSheet/BottomSheet.mjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs +21 -20
- package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.cjs +9 -16
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.cjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.cts +7 -14
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.cts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.mts +7 -14
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.mts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.mjs +8 -14
- package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.mjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.d.cts +0 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.d.cts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.d.mts +0 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.d.mts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs +25 -24
- package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.types.cjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.cts +0 -4
- package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.cts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.mts +0 -4
- package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.mts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.types.mjs.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.cjs +5 -21
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.cjs.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.cjs +3 -5
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.cjs.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.cts +1 -3
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.cts.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.mts +1 -3
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.mts.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.mjs +2 -4
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.mjs.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.cts +2 -6
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.cts.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.mts +2 -6
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.mts.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.mjs +7 -24
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.mjs.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.cjs.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.cts +0 -13
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.cts.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.mts +0 -13
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.mts.map +1 -1
- package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.mjs.map +1 -1
- package/dist/components/BottomSheetOverlay/index.cjs.map +1 -1
- package/dist/components/BottomSheetOverlay/index.d.cts +1 -1
- package/dist/components/BottomSheetOverlay/index.d.cts.map +1 -1
- package/dist/components/BottomSheetOverlay/index.d.mts +1 -1
- package/dist/components/BottomSheetOverlay/index.d.mts.map +1 -1
- package/dist/components/BottomSheetOverlay/index.mjs.map +1 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +1 -1
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +1 -1
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -5,7 +5,6 @@ export declare const BottomSheetDialog: React.ForwardRefExoticComponent<{
|
|
|
5
5
|
isFullscreen?: boolean | undefined;
|
|
6
6
|
isInteractable?: boolean | undefined;
|
|
7
7
|
keyboardAvoidingViewEnabled?: boolean | undefined;
|
|
8
|
-
onDismissStart?: (() => void) | undefined;
|
|
9
8
|
onClose?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
|
|
10
9
|
onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
|
|
11
10
|
twClassName?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAON,cAAc;AAyBf,OAAO,KAAK,EACV,oBAAoB,EAErB,sCAAkC;AAEnC,eAAO,MAAM,iBAAiB;;;;;;;;iFAqR7B,CAAC"}
|
|
@@ -4,24 +4,25 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { Theme, useTailwind, useTheme } from "@metamask-previews/design-system-twrnc-preset";
|
|
8
|
-
import { lightTheme,
|
|
7
|
+
import { Theme, usePureBlack, useTailwind, useTheme } from "@metamask-previews/design-system-twrnc-preset";
|
|
8
|
+
import { lightTheme, resolveDarkTheme } from "@metamask-previews/design-tokens";
|
|
9
9
|
import $lodash from "lodash";
|
|
10
10
|
const { debounce } = $lodash;
|
|
11
11
|
import $React, { forwardRef, useCallback, useEffect, useMemo, useRef, useImperativeHandle } from "react";
|
|
12
12
|
const React = $importDefault($React);
|
|
13
13
|
import { View, Platform, KeyboardAvoidingView } from "react-native";
|
|
14
14
|
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
15
|
-
import Animated, { runOnJS, useAnimatedStyle, useSharedValue,
|
|
15
|
+
import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
16
16
|
import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context";
|
|
17
17
|
// Internal dependencies.
|
|
18
|
-
import {
|
|
19
|
-
export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true,
|
|
18
|
+
import { DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION, DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD, DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION } from "./BottomSheetDialog.constants.mjs";
|
|
19
|
+
export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
|
|
20
20
|
const tw = useTailwind();
|
|
21
21
|
const currentTheme = useTheme();
|
|
22
|
+
const isPureBlack = usePureBlack();
|
|
22
23
|
const shadowLg = currentTheme === Theme.Light
|
|
23
24
|
? lightTheme.shadows.size.lg
|
|
24
|
-
:
|
|
25
|
+
: resolveDarkTheme(isPureBlack).shadows.size.lg;
|
|
25
26
|
const { top: screenTopPadding, bottom: screenBottomPadding } = useSafeAreaInsets();
|
|
26
27
|
const { y: frameY, height: screenHeight } = useSafeAreaFrame();
|
|
27
28
|
const maxSheetHeight = screenHeight - screenTopPadding;
|
|
@@ -38,23 +39,15 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
38
39
|
const onCloseCB = useCallback(() => {
|
|
39
40
|
onClose?.();
|
|
40
41
|
}, [onClose]);
|
|
41
|
-
const animateSheetTo = (target, onComplete) => {
|
|
42
|
-
currentYOffset.value = withSpring(target, getBottomSheetDialogSpringConfig(), (finished) => {
|
|
43
|
-
if (finished && onComplete) {
|
|
44
|
-
runOnJS(onComplete)();
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
};
|
|
48
42
|
const onCloseDialog = useCallback((callback) => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
onCloseCB();
|
|
43
|
+
currentYOffset.value = withTiming(bottomOfDialogYValue.value, { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
|
|
44
|
+
runOnJS(onCloseCB)();
|
|
52
45
|
if (callback) {
|
|
53
|
-
callback();
|
|
46
|
+
runOnJS(callback)();
|
|
54
47
|
}
|
|
55
48
|
});
|
|
56
49
|
// Ref values do not affect deps.
|
|
57
|
-
}, [onCloseCB
|
|
50
|
+
}, [onCloseCB]);
|
|
58
51
|
const gestureHandler = useMemo(() => {
|
|
59
52
|
// These gesture callbacks need explicit 'worklet' directives because this
|
|
60
53
|
// package ships a pre-built dist compiled by ts-bridge (tsc), which emits the
|
|
@@ -101,7 +94,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
101
94
|
DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;
|
|
102
95
|
// Check if the gesture's vertical speed has reached the threshold to determine a swipe action
|
|
103
96
|
const hasReachedSwipeThreshold = Math.abs(velocityY) >
|
|
104
|
-
|
|
97
|
+
DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;
|
|
105
98
|
const isQuickDismissing = velocityY > 0;
|
|
106
99
|
// If user is swiping
|
|
107
100
|
if (hasReachedSwipeThreshold) {
|
|
@@ -124,7 +117,10 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
124
117
|
runOnJS(onCloseDialog)();
|
|
125
118
|
}
|
|
126
119
|
else {
|
|
127
|
-
|
|
120
|
+
// Only animate dialog to a certain Y position instead
|
|
121
|
+
currentYOffset.value = withTiming(finalYOffset, {
|
|
122
|
+
duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
|
|
123
|
+
});
|
|
128
124
|
}
|
|
129
125
|
});
|
|
130
126
|
return gesture;
|
|
@@ -138,11 +134,15 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
138
134
|
]);
|
|
139
135
|
// Animate in sheet on initial render.
|
|
140
136
|
const onOpenDialog = (callback) => {
|
|
137
|
+
// Starts setting the Y position of the dialog to the bottom of the dialog
|
|
141
138
|
currentYOffset.value = bottomOfDialogYValue.value;
|
|
142
|
-
|
|
143
|
-
|
|
139
|
+
// Animate the Y position to the top of the dialog, then call onOpenCB
|
|
140
|
+
currentYOffset.value = withTiming(topOfDialogYValue.value, {
|
|
141
|
+
duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
|
|
142
|
+
}, () => {
|
|
143
|
+
runOnJS(onOpenCB)();
|
|
144
144
|
if (callback) {
|
|
145
|
-
callback();
|
|
145
|
+
runOnJS(callback)();
|
|
146
146
|
}
|
|
147
147
|
});
|
|
148
148
|
};
|
|
@@ -170,7 +170,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
170
170
|
],
|
|
171
171
|
}), []);
|
|
172
172
|
const sheetStyle = useMemo(() => [
|
|
173
|
-
tw.style('bg-default rounded-t-3xl overflow-hidden border border-muted', twClassName),
|
|
173
|
+
tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted', twClassName),
|
|
174
174
|
{
|
|
175
175
|
maxHeight: maxSheetHeight,
|
|
176
176
|
paddingBottom: Platform.select({
|
|
@@ -184,6 +184,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
184
184
|
style,
|
|
185
185
|
], [
|
|
186
186
|
tw,
|
|
187
|
+
isPureBlack,
|
|
187
188
|
maxSheetHeight,
|
|
188
189
|
screenBottomPadding,
|
|
189
190
|
isFullscreen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Theme,\n useTailwind,\n useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useImperativeHandle,\n} from 'react';\nimport {\n LayoutChangeEvent,\n View,\n Platform,\n KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withSpring,\n} from 'react-native-reanimated';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport {\n DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_VELOCITY,\n getBottomSheetDialogSpringConfig,\n} from './BottomSheetDialog.constants';\nimport type {\n BottomSheetDialogRef,\n BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n BottomSheetDialogRef,\n BottomSheetDialogProps\n>(\n (\n {\n children,\n isFullscreen = false,\n isInteractable = true,\n keyboardAvoidingViewEnabled = true,\n onDismissStart,\n onClose,\n onOpen,\n style,\n twClassName,\n ...props\n },\n ref,\n ) => {\n const tw = useTailwind();\n const currentTheme = useTheme();\n const shadowLg =\n currentTheme === Theme.Light\n ? lightTheme.shadows.size.lg\n : darkTheme.shadows.size.lg;\n\n const { top: screenTopPadding, bottom: screenBottomPadding } =\n useSafeAreaInsets();\n const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n const maxSheetHeight = screenHeight - screenTopPadding;\n // X and Y values start on top left of the DIALOG\n // currentYOffset will be used to animate the Y position of the Dialog\n const currentYOffset = useSharedValue(screenHeight);\n const topOfDialogYValue = useSharedValue(0);\n const bottomOfDialogYValue = useSharedValue(screenHeight);\n const gestureStartYOffset = useSharedValue(0);\n const isMounted = useRef(false);\n\n const onOpenCB = useCallback(() => {\n onOpen?.();\n }, [onOpen]);\n const onCloseCB = useCallback(() => {\n onClose?.();\n }, [onClose]);\n\n const animateSheetTo = (target: number, onComplete?: () => void) => {\n currentYOffset.value = withSpring(\n target,\n getBottomSheetDialogSpringConfig(),\n (finished) => {\n if (finished && onComplete) {\n runOnJS(onComplete)();\n }\n },\n );\n };\n\n const onCloseDialog = useCallback(\n (callback?: () => void) => {\n onDismissStart?.();\n animateSheetTo(bottomOfDialogYValue.value, () => {\n onCloseCB();\n if (callback) {\n callback();\n }\n });\n // Ref values do not affect deps.\n },\n [onCloseCB, onDismissStart],\n );\n\n const gestureHandler = useMemo(() => {\n // These gesture callbacks need explicit 'worklet' directives because this\n // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n // recognize that compiled namespaced form, so without these directives the\n // callbacks run on the JS thread and slow drags lag behind the finger.\n const gesture = Gesture.Pan()\n .enabled(isInteractable)\n .onStart(() => {\n 'worklet';\n\n // Starts tracking vertical position of gesture.\n gestureStartYOffset.value = currentYOffset.value;\n })\n .onUpdate((event) => {\n 'worklet';\n\n const { translationY } = event;\n currentYOffset.value = gestureStartYOffset.value + translationY;\n // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n // which means the gesture is currently below the bottom of the dialog,\n // sets it to bottom of Dialog Y value\n if (currentYOffset.value >= bottomOfDialogYValue.value) {\n currentYOffset.value = bottomOfDialogYValue.value;\n }\n // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n // which means the gesture is currently above the top of the dialog,\n // sets it to top of Dialog Y value\n if (currentYOffset.value <= topOfDialogYValue.value) {\n currentYOffset.value = topOfDialogYValue.value;\n }\n })\n .onEnd((event) => {\n 'worklet';\n\n const { translationY, velocityY } = event;\n // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n let finalYOffset: number;\n // Measuring dismissing swipe action\n const latestOffset = gestureStartYOffset.value + translationY;\n // Check if the swipe distance reach the dismiss offset threshold,\n // which is currently 60% of sheet height\n const hasReachedDismissOffset =\n latestOffset >\n bottomOfDialogYValue.value *\n DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n const hasReachedSwipeThreshold =\n Math.abs(velocityY) >\n DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_VELOCITY;\n const isQuickDismissing = velocityY > 0;\n\n // If user is swiping\n if (hasReachedSwipeThreshold) {\n // Quick swipe takes priority\n if (isQuickDismissing) {\n finalYOffset = bottomOfDialogYValue.value;\n } else {\n finalYOffset = topOfDialogYValue.value;\n }\n } else if (hasReachedDismissOffset) {\n finalYOffset = bottomOfDialogYValue.value;\n } else {\n finalYOffset = topOfDialogYValue.value;\n }\n\n const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n if (isDismissed) {\n runOnJS(onCloseDialog)();\n } else {\n currentYOffset.value = withSpring(\n finalYOffset,\n getBottomSheetDialogSpringConfig({ velocity: velocityY }),\n );\n }\n });\n\n return gesture;\n }, [\n isInteractable,\n currentYOffset,\n gestureStartYOffset,\n bottomOfDialogYValue,\n topOfDialogYValue,\n onCloseDialog,\n ]);\n\n // Animate in sheet on initial render.\n const onOpenDialog = (callback?: () => void) => {\n currentYOffset.value = bottomOfDialogYValue.value;\n animateSheetTo(topOfDialogYValue.value, () => {\n onOpenCB();\n if (callback) {\n callback();\n }\n });\n };\n\n const onDebouncedCloseDialog = useMemo(\n // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n () => debounce(onCloseDialog, 2000, { leading: true }),\n [onCloseDialog],\n );\n\n useEffect(\n () =>\n // Automatically handles animation when content changes\n // Disable for now since network switches causes the screen to hang with this on.\n // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n onDebouncedCloseDialog.cancel(),\n [children, onDebouncedCloseDialog],\n );\n\n const updateSheetHeight = (e: LayoutChangeEvent) => {\n const { height } = e.nativeEvent.layout;\n bottomOfDialogYValue.value = height;\n\n if (!isMounted.current) {\n isMounted.current = true;\n onOpenDialog();\n }\n };\n\n const animatedSheetStyle = useAnimatedStyle(\n () => ({\n transform: [\n {\n translateY: currentYOffset.value,\n },\n ],\n }),\n [],\n );\n\n const sheetStyle = useMemo(\n () => [\n tw.style(\n 'bg-default rounded-t-3xl overflow-hidden border border-muted',\n twClassName,\n ),\n {\n maxHeight: maxSheetHeight,\n paddingBottom: Platform.select({\n ios: screenBottomPadding,\n macos: screenBottomPadding,\n default: screenBottomPadding + 16,\n }),\n ...(isFullscreen && { height: maxSheetHeight }),\n ...shadowLg,\n },\n style,\n ],\n\n [\n tw,\n maxSheetHeight,\n screenBottomPadding,\n isFullscreen,\n shadowLg,\n style,\n twClassName,\n ],\n );\n\n const combinedSheetStyle = useMemo(\n () => [...sheetStyle, animatedSheetStyle],\n\n [sheetStyle],\n );\n\n useImperativeHandle(ref, () => ({\n onOpenDialog,\n onCloseDialog,\n }));\n\n return (\n <KeyboardAvoidingView\n style={tw.style('absolute bottom-0 inset-x-0')}\n behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n keyboardVerticalOffset={\n Platform.OS === 'ios' ? -screenBottomPadding : frameY\n }\n enabled={keyboardAvoidingViewEnabled}\n {...props}\n >\n <GestureDetector gesture={gestureHandler}>\n <Animated.View\n onLayout={updateSheetHeight}\n style={combinedSheetStyle}\n >\n {isInteractable && (\n <View style={tw.style('self-stretch items-center p-1')}>\n <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n </View>\n )}\n {children}\n </Animated.View>\n </GestureDetector>\n </KeyboardAvoidingView>\n );\n },\n);\n"]}
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Theme,\n usePureBlack,\n useTailwind,\n useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, resolveDarkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useImperativeHandle,\n} from 'react';\nimport {\n LayoutChangeEvent,\n View,\n Platform,\n KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport {\n DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n BottomSheetDialogRef,\n BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n BottomSheetDialogRef,\n BottomSheetDialogProps\n>(\n (\n {\n children,\n isFullscreen = false,\n isInteractable = true,\n keyboardAvoidingViewEnabled = true,\n onClose,\n onOpen,\n style,\n twClassName,\n ...props\n },\n ref,\n ) => {\n const tw = useTailwind();\n const currentTheme = useTheme();\n const isPureBlack = usePureBlack();\n const shadowLg =\n currentTheme === Theme.Light\n ? lightTheme.shadows.size.lg\n : resolveDarkTheme(isPureBlack).shadows.size.lg;\n\n const { top: screenTopPadding, bottom: screenBottomPadding } =\n useSafeAreaInsets();\n const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n const maxSheetHeight = screenHeight - screenTopPadding;\n // X and Y values start on top left of the DIALOG\n // currentYOffset will be used to animate the Y position of the Dialog\n const currentYOffset = useSharedValue(screenHeight);\n const topOfDialogYValue = useSharedValue(0);\n const bottomOfDialogYValue = useSharedValue(screenHeight);\n const gestureStartYOffset = useSharedValue(0);\n const isMounted = useRef(false);\n\n const onOpenCB = useCallback(() => {\n onOpen?.();\n }, [onOpen]);\n const onCloseCB = useCallback(() => {\n onClose?.();\n }, [onClose]);\n\n const onCloseDialog = useCallback(\n (callback?: () => void) => {\n currentYOffset.value = withTiming(\n bottomOfDialogYValue.value,\n { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n () => {\n runOnJS(onCloseCB)();\n if (callback) {\n runOnJS(callback)();\n }\n },\n );\n // Ref values do not affect deps.\n },\n [onCloseCB],\n );\n\n const gestureHandler = useMemo(() => {\n // These gesture callbacks need explicit 'worklet' directives because this\n // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n // recognize that compiled namespaced form, so without these directives the\n // callbacks run on the JS thread and slow drags lag behind the finger.\n const gesture = Gesture.Pan()\n .enabled(isInteractable)\n .onStart(() => {\n 'worklet';\n\n // Starts tracking vertical position of gesture.\n gestureStartYOffset.value = currentYOffset.value;\n })\n .onUpdate((event) => {\n 'worklet';\n\n const { translationY } = event;\n currentYOffset.value = gestureStartYOffset.value + translationY;\n // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n // which means the gesture is currently below the bottom of the dialog,\n // sets it to bottom of Dialog Y value\n if (currentYOffset.value >= bottomOfDialogYValue.value) {\n currentYOffset.value = bottomOfDialogYValue.value;\n }\n // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n // which means the gesture is currently above the top of the dialog,\n // sets it to top of Dialog Y value\n if (currentYOffset.value <= topOfDialogYValue.value) {\n currentYOffset.value = topOfDialogYValue.value;\n }\n })\n .onEnd((event) => {\n 'worklet';\n\n const { translationY, velocityY } = event;\n // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n let finalYOffset: number;\n // Measuring dismissing swipe action\n const latestOffset = gestureStartYOffset.value + translationY;\n // Check if the swipe distance reach the dismiss offset threshold,\n // which is currently 60% of sheet height\n const hasReachedDismissOffset =\n latestOffset >\n bottomOfDialogYValue.value *\n DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n const hasReachedSwipeThreshold =\n Math.abs(velocityY) >\n DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n const isQuickDismissing = velocityY > 0;\n\n // If user is swiping\n if (hasReachedSwipeThreshold) {\n // Quick swipe takes priority\n if (isQuickDismissing) {\n finalYOffset = bottomOfDialogYValue.value;\n } else {\n finalYOffset = topOfDialogYValue.value;\n }\n } else if (hasReachedDismissOffset) {\n finalYOffset = bottomOfDialogYValue.value;\n } else {\n finalYOffset = topOfDialogYValue.value;\n }\n\n const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n if (isDismissed) {\n runOnJS(onCloseDialog)();\n } else {\n // Only animate dialog to a certain Y position instead\n currentYOffset.value = withTiming(finalYOffset, {\n duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n });\n }\n });\n\n return gesture;\n }, [\n isInteractable,\n currentYOffset,\n gestureStartYOffset,\n bottomOfDialogYValue,\n topOfDialogYValue,\n onCloseDialog,\n ]);\n\n // Animate in sheet on initial render.\n const onOpenDialog = (callback?: () => void) => {\n // Starts setting the Y position of the dialog to the bottom of the dialog\n currentYOffset.value = bottomOfDialogYValue.value;\n // Animate the Y position to the top of the dialog, then call onOpenCB\n currentYOffset.value = withTiming(\n topOfDialogYValue.value,\n {\n duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n },\n () => {\n runOnJS(onOpenCB)();\n if (callback) {\n runOnJS(callback)();\n }\n },\n );\n };\n\n const onDebouncedCloseDialog = useMemo(\n // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n () => debounce(onCloseDialog, 2000, { leading: true }),\n [onCloseDialog],\n );\n\n useEffect(\n () =>\n // Automatically handles animation when content changes\n // Disable for now since network switches causes the screen to hang with this on.\n // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n onDebouncedCloseDialog.cancel(),\n [children, onDebouncedCloseDialog],\n );\n\n const updateSheetHeight = (e: LayoutChangeEvent) => {\n const { height } = e.nativeEvent.layout;\n bottomOfDialogYValue.value = height;\n\n if (!isMounted.current) {\n isMounted.current = true;\n onOpenDialog();\n }\n };\n\n const animatedSheetStyle = useAnimatedStyle(\n () => ({\n transform: [\n {\n translateY: currentYOffset.value,\n },\n ],\n }),\n [],\n );\n\n const sheetStyle = useMemo(\n () => [\n tw.style(\n isPureBlack ? 'bg-alternative' : 'bg-default',\n 'rounded-t-3xl overflow-hidden border border-muted',\n twClassName,\n ),\n {\n maxHeight: maxSheetHeight,\n paddingBottom: Platform.select({\n ios: screenBottomPadding,\n macos: screenBottomPadding,\n default: screenBottomPadding + 16,\n }),\n ...(isFullscreen && { height: maxSheetHeight }),\n ...shadowLg,\n },\n style,\n ],\n\n [\n tw,\n isPureBlack,\n maxSheetHeight,\n screenBottomPadding,\n isFullscreen,\n shadowLg,\n style,\n twClassName,\n ],\n );\n\n const combinedSheetStyle = useMemo(\n () => [...sheetStyle, animatedSheetStyle],\n\n [sheetStyle],\n );\n\n useImperativeHandle(ref, () => ({\n onOpenDialog,\n onCloseDialog,\n }));\n\n return (\n <KeyboardAvoidingView\n style={tw.style('absolute bottom-0 inset-x-0')}\n behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n keyboardVerticalOffset={\n Platform.OS === 'ios' ? -screenBottomPadding : frameY\n }\n enabled={keyboardAvoidingViewEnabled}\n {...props}\n >\n <GestureDetector gesture={gestureHandler}>\n <Animated.View\n onLayout={updateSheetHeight}\n style={combinedSheetStyle}\n >\n {isInteractable && (\n <View style={tw.style('self-stretch items-center p-1')}>\n <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n </View>\n )}\n {children}\n </Animated.View>\n </GestureDetector>\n </KeyboardAvoidingView>\n );\n },\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n /**\n * Optional content to display inside the dialog.\n */\n children?: React.ReactNode;\n /**\n * Optional prop to toggle full screen state of BottomSheetDialog.\n *\n * @default false\n */\n isFullscreen?: boolean;\n /**\n * Optional boolean that indicates if the sheet is swippable.\n * This affects whether or not tapping on the overlay will dismiss\n * the sheet as well, and whether the drag handle indicator is shown.\n *\n * @default true\n */\n isInteractable?: boolean;\n /**\n * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n *\n * @default true\n */\n keyboardAvoidingViewEnabled?: boolean;\n /**\n * Optional callback
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n /**\n * Optional content to display inside the dialog.\n */\n children?: React.ReactNode;\n /**\n * Optional prop to toggle full screen state of BottomSheetDialog.\n *\n * @default false\n */\n isFullscreen?: boolean;\n /**\n * Optional boolean that indicates if the sheet is swippable.\n * This affects whether or not tapping on the overlay will dismiss\n * the sheet as well, and whether the drag handle indicator is shown.\n *\n * @default true\n */\n isInteractable?: boolean;\n /**\n * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n *\n * @default true\n */\n keyboardAvoidingViewEnabled?: boolean;\n /**\n * Optional callback that gets triggered when the sheet is closed.\n */\n onClose?: (hasPendingAction?: boolean) => void;\n /**\n * Optional callback that gets triggered when the sheet is opened.\n */\n onOpen?: (hasPendingAction?: boolean) => void;\n /**\n * Tailwind CSS classes for the dialog container.\n */\n twClassName?: string;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of the BottomSheetDialog.\n */\nexport type BottomSheetDialogRef = {\n /**\n * Imperatively close the dialog with an optional callback after animation completes.\n */\n onCloseDialog: (callback?: () => void) => void;\n /**\n * Imperatively open the dialog with an optional callback after animation completes.\n */\n onOpenDialog: (callback?: () => void) => void;\n};\n"]}
|
|
@@ -27,10 +27,6 @@ export type BottomSheetDialogProps = {
|
|
|
27
27
|
* @default true
|
|
28
28
|
*/
|
|
29
29
|
keyboardAvoidingViewEnabled?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Optional callback invoked when the sheet begins closing (before animation).
|
|
32
|
-
*/
|
|
33
|
-
onDismissStart?: () => void;
|
|
34
30
|
/**
|
|
35
31
|
* Optional callback that gets triggered when the sheet is closed.
|
|
36
32
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}
|
|
@@ -27,10 +27,6 @@ export type BottomSheetDialogProps = {
|
|
|
27
27
|
* @default true
|
|
28
28
|
*/
|
|
29
29
|
keyboardAvoidingViewEnabled?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Optional callback invoked when the sheet begins closing (before animation).
|
|
32
|
-
*/
|
|
33
|
-
onDismissStart?: () => void;
|
|
34
30
|
/**
|
|
35
31
|
* Optional callback that gets triggered when the sheet is closed.
|
|
36
32
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n /**\n * Optional content to display inside the dialog.\n */\n children?: React.ReactNode;\n /**\n * Optional prop to toggle full screen state of BottomSheetDialog.\n *\n * @default false\n */\n isFullscreen?: boolean;\n /**\n * Optional boolean that indicates if the sheet is swippable.\n * This affects whether or not tapping on the overlay will dismiss\n * the sheet as well, and whether the drag handle indicator is shown.\n *\n * @default true\n */\n isInteractable?: boolean;\n /**\n * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n *\n * @default true\n */\n keyboardAvoidingViewEnabled?: boolean;\n /**\n * Optional callback
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n /**\n * Optional content to display inside the dialog.\n */\n children?: React.ReactNode;\n /**\n * Optional prop to toggle full screen state of BottomSheetDialog.\n *\n * @default false\n */\n isFullscreen?: boolean;\n /**\n * Optional boolean that indicates if the sheet is swippable.\n * This affects whether or not tapping on the overlay will dismiss\n * the sheet as well, and whether the drag handle indicator is shown.\n *\n * @default true\n */\n isInteractable?: boolean;\n /**\n * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n *\n * @default true\n */\n keyboardAvoidingViewEnabled?: boolean;\n /**\n * Optional callback that gets triggered when the sheet is closed.\n */\n onClose?: (hasPendingAction?: boolean) => void;\n /**\n * Optional callback that gets triggered when the sheet is opened.\n */\n onOpen?: (hasPendingAction?: boolean) => void;\n /**\n * Tailwind CSS classes for the dialog container.\n */\n twClassName?: string;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of the BottomSheetDialog.\n */\nexport type BottomSheetDialogRef = {\n /**\n * Imperatively close the dialog with an optional callback after animation completes.\n */\n onCloseDialog: (callback?: () => void) => void;\n /**\n * Imperatively open the dialog with an optional callback after animation completes.\n */\n onOpenDialog: (callback?: () => void) => void;\n};\n"]}
|
|
@@ -28,33 +28,17 @@ const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-t
|
|
|
28
28
|
const react_1 = __importStar(require("react"));
|
|
29
29
|
const react_native_1 = require("react-native");
|
|
30
30
|
const BottomSheetOverlay_constants_1 = require("./BottomSheetOverlay.constants.cjs");
|
|
31
|
-
|
|
31
|
+
const BottomSheetOverlay = ({ style, twClassName, onPress, touchableOpacityProps, ...props }) => {
|
|
32
32
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
33
33
|
const opacityVal = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
34
|
-
|
|
34
|
+
(0, react_1.useEffect)(() => {
|
|
35
35
|
react_native_1.Animated.timing(opacityVal, {
|
|
36
36
|
toValue: 1,
|
|
37
37
|
duration: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_DURATION,
|
|
38
|
-
easing:
|
|
38
|
+
easing: react_native_1.Easing.linear,
|
|
39
39
|
useNativeDriver: true,
|
|
40
40
|
}).start();
|
|
41
41
|
}, [opacityVal]);
|
|
42
|
-
const fadeOut = (0, react_1.useCallback)((callback) => {
|
|
43
|
-
react_native_1.Animated.timing(opacityVal, {
|
|
44
|
-
toValue: 0,
|
|
45
|
-
duration: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_DURATION,
|
|
46
|
-
easing: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_EASING,
|
|
47
|
-
useNativeDriver: true,
|
|
48
|
-
}).start(({ finished }) => {
|
|
49
|
-
if (finished) {
|
|
50
|
-
callback?.();
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
}, [opacityVal]);
|
|
54
|
-
(0, react_1.useImperativeHandle)(ref, () => ({ fadeIn, fadeOut }), [fadeIn, fadeOut]);
|
|
55
|
-
(0, react_1.useEffect)(() => {
|
|
56
|
-
fadeIn();
|
|
57
|
-
}, [fadeIn]);
|
|
58
42
|
return (<react_native_1.Animated.View style={[
|
|
59
43
|
tw.style('absolute inset-0 bg-overlay-default', twClassName),
|
|
60
44
|
style,
|
|
@@ -62,6 +46,6 @@ exports.BottomSheetOverlay = (0, react_1.forwardRef)(({ style, twClassName, onPr
|
|
|
62
46
|
]} {...props}>
|
|
63
47
|
{onPress && (<react_native_1.TouchableOpacity onPress={onPress} {...touchableOpacityProps} style={tw.style('flex-1')}/>)}
|
|
64
48
|
</react_native_1.Animated.View>);
|
|
65
|
-
}
|
|
66
|
-
exports.BottomSheetOverlay
|
|
49
|
+
};
|
|
50
|
+
exports.BottomSheetOverlay = BottomSheetOverlay;
|
|
67
51
|
//# sourceMappingURL=BottomSheetOverlay.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAiD;AACjD,+CAAkE;AAElE,qFAAoF;AAG7E,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,uBAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,iEAAkC;YAC5C,MAAM,EAAE,qBAAM,CAAC,MAAM;YACrB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,CAAC,uBAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,qCAAqC,EAAE,WAAW,CAAC;YAC5D,KAAK;YACL,EAAE,OAAO,EAAE,UAAU,EAAE;SACxB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,+BAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAC1B,CACH,CACH;IAAA,EAAE,uBAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,kBAAkB,sBAqC7B","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, TouchableOpacity } from 'react-native';\n\nimport { DEFAULT_OVERLAY_ANIMATION_DURATION } from './BottomSheetOverlay.constants';\nimport { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n\nexport const BottomSheetOverlay: React.FC<BottomSheetOverlayProps> = ({\n style,\n twClassName,\n onPress,\n touchableOpacityProps,\n ...props\n}) => {\n const tw = useTailwind();\n const opacityVal = useRef(new Animated.Value(0)).current;\n\n useEffect(() => {\n Animated.timing(opacityVal, {\n toValue: 1,\n duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n easing: Easing.linear,\n useNativeDriver: true,\n }).start();\n }, [opacityVal]);\n\n return (\n <Animated.View\n style={[\n tw.style('absolute inset-0 bg-overlay-default', twClassName),\n style,\n { opacity: opacityVal },\n ]}\n {...props}\n >\n {onPress && (\n <TouchableOpacity\n onPress={onPress}\n {...touchableOpacityProps}\n style={tw.style('flex-1')}\n />\n )}\n </Animated.View>\n );\n};\n"]}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DEFAULT_OVERLAY_ANIMATION_DURATION =
|
|
3
|
+
exports.DEFAULT_OVERLAY_ANIMATION_DURATION = void 0;
|
|
4
4
|
const design_tokens_1 = require("@metamask-previews/design-tokens");
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
exports.DEFAULT_OVERLAY_ANIMATION_EASING = react_native_1.Easing.bezier(0.42, 0, 0.58, 1);
|
|
8
|
-
exports.DEFAULT_OVERLAY_ANIMATION_DURATION = design_tokens_1.AnimationDuration.Regularly;
|
|
5
|
+
// Defaults
|
|
6
|
+
exports.DEFAULT_OVERLAY_ANIMATION_DURATION = design_tokens_1.AnimationDuration.Fast;
|
|
9
7
|
//# sourceMappingURL=BottomSheetOverlay.constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.constants.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":";;;AAAA,oEAAqE;
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.constants.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":";;;AAAA,oEAAqE;AAErE,WAAW;AACE,QAAA,kCAAkC,GAAG,iCAAiB,CAAC,IAAI,CAAC","sourcesContent":["import { AnimationDuration } from '@metamask-previews/design-tokens';\n\n// Defaults\nexport const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;\n"]}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
import { AnimationDuration } from "@metamask-previews/design-tokens";
|
|
2
|
-
|
|
3
|
-
export declare const DEFAULT_OVERLAY_ANIMATION_EASING: import("react-native").EasingFunction;
|
|
4
|
-
export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;
|
|
2
|
+
export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;
|
|
5
3
|
//# sourceMappingURL=BottomSheetOverlay.constants.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,eAAO,MAAM,kCAAkC,yBAAyB,CAAC"}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
import { AnimationDuration } from "@metamask-previews/design-tokens";
|
|
2
|
-
|
|
3
|
-
export declare const DEFAULT_OVERLAY_ANIMATION_EASING: import("react-native").EasingFunction;
|
|
4
|
-
export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;
|
|
2
|
+
export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;
|
|
5
3
|
//# sourceMappingURL=BottomSheetOverlay.constants.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,eAAO,MAAM,kCAAkC,yBAAyB,CAAC"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { AnimationDuration } from "@metamask-previews/design-tokens";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export const DEFAULT_OVERLAY_ANIMATION_EASING = Easing.bezier(0.42, 0, 0.58, 1);
|
|
5
|
-
export const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;
|
|
2
|
+
// Defaults
|
|
3
|
+
export const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;
|
|
6
4
|
//# sourceMappingURL=BottomSheetOverlay.constants.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.constants.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.constants.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAErE,WAAW;AACX,MAAM,CAAC,MAAM,kCAAkC,GAAG,iBAAiB,CAAC,IAAI,CAAC","sourcesContent":["import { AnimationDuration } from '@metamask-previews/design-tokens';\n\n// Defaults\nexport const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;\n"]}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
export declare const BottomSheetOverlay: React.
|
|
4
|
-
twClassName?: string | undefined;
|
|
5
|
-
onPress?: (() => void) | undefined;
|
|
6
|
-
touchableOpacityProps?: Omit<import("react-native").TouchableOpacityProps, "style" | "onPress"> | undefined;
|
|
7
|
-
} & import("react-native").ViewProps & React.RefAttributes<BottomSheetOverlayRef>>;
|
|
2
|
+
import { BottomSheetOverlayProps } from "./BottomSheetOverlay.types.cjs";
|
|
3
|
+
export declare const BottomSheetOverlay: React.FC<BottomSheetOverlayProps>;
|
|
8
4
|
//# sourceMappingURL=BottomSheetOverlay.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAIjD,OAAO,EAAE,uBAAuB,EAAE,uCAAmC;AAErE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqChE,CAAC"}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
export declare const BottomSheetOverlay: React.
|
|
4
|
-
twClassName?: string | undefined;
|
|
5
|
-
onPress?: (() => void) | undefined;
|
|
6
|
-
touchableOpacityProps?: Omit<import("react-native").TouchableOpacityProps, "style" | "onPress"> | undefined;
|
|
7
|
-
} & import("react-native").ViewProps & React.RefAttributes<BottomSheetOverlayRef>>;
|
|
2
|
+
import { BottomSheetOverlayProps } from "./BottomSheetOverlay.types.mjs";
|
|
3
|
+
export declare const BottomSheetOverlay: React.FC<BottomSheetOverlayProps>;
|
|
8
4
|
//# sourceMappingURL=BottomSheetOverlay.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAIjD,OAAO,EAAE,uBAAuB,EAAE,uCAAmC;AAErE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqChE,CAAC"}
|
|
@@ -5,37 +5,21 @@ function $importDefault(module) {
|
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
7
|
import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
|
|
8
|
-
import $React, {
|
|
8
|
+
import $React, { useEffect, useRef } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
|
-
import { Animated, TouchableOpacity } from "react-native";
|
|
11
|
-
import { DEFAULT_OVERLAY_ANIMATION_DURATION
|
|
12
|
-
export const BottomSheetOverlay =
|
|
10
|
+
import { Animated, Easing, TouchableOpacity } from "react-native";
|
|
11
|
+
import { DEFAULT_OVERLAY_ANIMATION_DURATION } from "./BottomSheetOverlay.constants.mjs";
|
|
12
|
+
export const BottomSheetOverlay = ({ style, twClassName, onPress, touchableOpacityProps, ...props }) => {
|
|
13
13
|
const tw = useTailwind();
|
|
14
14
|
const opacityVal = useRef(new Animated.Value(0)).current;
|
|
15
|
-
|
|
15
|
+
useEffect(() => {
|
|
16
16
|
Animated.timing(opacityVal, {
|
|
17
17
|
toValue: 1,
|
|
18
18
|
duration: DEFAULT_OVERLAY_ANIMATION_DURATION,
|
|
19
|
-
easing:
|
|
19
|
+
easing: Easing.linear,
|
|
20
20
|
useNativeDriver: true,
|
|
21
21
|
}).start();
|
|
22
22
|
}, [opacityVal]);
|
|
23
|
-
const fadeOut = useCallback((callback) => {
|
|
24
|
-
Animated.timing(opacityVal, {
|
|
25
|
-
toValue: 0,
|
|
26
|
-
duration: DEFAULT_OVERLAY_ANIMATION_DURATION,
|
|
27
|
-
easing: DEFAULT_OVERLAY_ANIMATION_EASING,
|
|
28
|
-
useNativeDriver: true,
|
|
29
|
-
}).start(({ finished }) => {
|
|
30
|
-
if (finished) {
|
|
31
|
-
callback?.();
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}, [opacityVal]);
|
|
35
|
-
useImperativeHandle(ref, () => ({ fadeIn, fadeOut }), [fadeIn, fadeOut]);
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
fadeIn();
|
|
38
|
-
}, [fadeIn]);
|
|
39
23
|
return (<Animated.View style={[
|
|
40
24
|
tw.style('absolute inset-0 bg-overlay-default', twClassName),
|
|
41
25
|
style,
|
|
@@ -43,6 +27,5 @@ export const BottomSheetOverlay = forwardRef(({ style, twClassName, onPress, tou
|
|
|
43
27
|
]} {...props}>
|
|
44
28
|
{onPress && (<TouchableOpacity onPress={onPress} {...touchableOpacityProps} style={tw.style('flex-1')}/>)}
|
|
45
29
|
</Animated.View>);
|
|
46
|
-
}
|
|
47
|
-
BottomSheetOverlay.displayName = 'BottomSheetOverlay';
|
|
30
|
+
};
|
|
48
31
|
//# sourceMappingURL=BottomSheetOverlay.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc;;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB;AAElE,OAAO,EAAE,kCAAkC,EAAE,2CAAuC;AAGpF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,kCAAkC;YAC5C,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,qCAAqC,EAAE,WAAW,CAAC;YAC5D,KAAK;YACL,EAAE,OAAO,EAAE,UAAU,EAAE;SACxB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAC1B,CACH,CACH;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, TouchableOpacity } from 'react-native';\n\nimport { DEFAULT_OVERLAY_ANIMATION_DURATION } from './BottomSheetOverlay.constants';\nimport { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n\nexport const BottomSheetOverlay: React.FC<BottomSheetOverlayProps> = ({\n style,\n twClassName,\n onPress,\n touchableOpacityProps,\n ...props\n}) => {\n const tw = useTailwind();\n const opacityVal = useRef(new Animated.Value(0)).current;\n\n useEffect(() => {\n Animated.timing(opacityVal, {\n toValue: 1,\n duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n easing: Easing.linear,\n useNativeDriver: true,\n }).start();\n }, [opacityVal]);\n\n return (\n <Animated.View\n style={[\n tw.style('absolute inset-0 bg-overlay-default', twClassName),\n style,\n { opacity: opacityVal },\n ]}\n {...props}\n >\n {onPress && (\n <TouchableOpacity\n onPress={onPress}\n {...touchableOpacityProps}\n style={tw.style('flex-1')}\n />\n )}\n </Animated.View>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n /**\n * Tailwind CSS classes for the overlay container.\n */\n twClassName?: string;\n /**\n * Callback function triggered when the overlay is pressed.\n */\n onPress?: () => void;\n /**\n * Props spread to the TouchableOpacity component (e.g., testID for the button).\n * Note: onPress should be passed as a top-level prop, not through this object.\n */\n touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n /**\n * Tailwind CSS classes for the overlay container.\n */\n twClassName?: string;\n /**\n * Callback function triggered when the overlay is pressed.\n */\n onPress?: () => void;\n /**\n * Props spread to the TouchableOpacity component (e.g., testID for the button).\n * Note: onPress should be passed as a top-level prop, not through this object.\n */\n touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n"]}
|
|
@@ -17,17 +17,4 @@ export type BottomSheetOverlayProps = {
|
|
|
17
17
|
*/
|
|
18
18
|
touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;
|
|
19
19
|
} & ViewProps;
|
|
20
|
-
/**
|
|
21
|
-
* Ref handle for imperative control of overlay fade animations.
|
|
22
|
-
*/
|
|
23
|
-
export type BottomSheetOverlayRef = {
|
|
24
|
-
/**
|
|
25
|
-
* Fade the overlay in.
|
|
26
|
-
*/
|
|
27
|
-
fadeIn: () => void;
|
|
28
|
-
/**
|
|
29
|
-
* Fade the overlay out with an optional callback after animation completes.
|
|
30
|
-
*/
|
|
31
|
-
fadeOut: (callback?: () => void) => void;
|
|
32
|
-
};
|
|
33
20
|
//# sourceMappingURL=BottomSheetOverlay.types.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC"}
|
|
@@ -17,17 +17,4 @@ export type BottomSheetOverlayProps = {
|
|
|
17
17
|
*/
|
|
18
18
|
touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;
|
|
19
19
|
} & ViewProps;
|
|
20
|
-
/**
|
|
21
|
-
* Ref handle for imperative control of overlay fade animations.
|
|
22
|
-
*/
|
|
23
|
-
export type BottomSheetOverlayRef = {
|
|
24
|
-
/**
|
|
25
|
-
* Fade the overlay in.
|
|
26
|
-
*/
|
|
27
|
-
fadeIn: () => void;
|
|
28
|
-
/**
|
|
29
|
-
* Fade the overlay out with an optional callback after animation completes.
|
|
30
|
-
*/
|
|
31
|
-
fadeOut: (callback?: () => void) => void;
|
|
32
|
-
};
|
|
33
20
|
//# sourceMappingURL=BottomSheetOverlay.types.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetOverlay.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n /**\n * Tailwind CSS classes for the overlay container.\n */\n twClassName?: string;\n /**\n * Callback function triggered when the overlay is pressed.\n */\n onPress?: () => void;\n /**\n * Props spread to the TouchableOpacity component (e.g., testID for the button).\n * Note: onPress should be passed as a top-level prop, not through this object.\n */\n touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n
|
|
1
|
+
{"version":3,"file":"BottomSheetOverlay.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n /**\n * Tailwind CSS classes for the overlay container.\n */\n twClassName?: string;\n /**\n * Callback function triggered when the overlay is pressed.\n */\n onPress?: () => void;\n /**\n * Props spread to the TouchableOpacity component (e.g., testID for the button).\n * Note: onPress should be passed as a top-level prop, not through this object.\n */\n touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":";;;AAAA,+DAA0D;AAAjD,wHAAA,kBAAkB,OAAA","sourcesContent":["export { BottomSheetOverlay } from './BottomSheetOverlay';\nexport type {
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":";;;AAAA,+DAA0D;AAAjD,wHAAA,kBAAkB,OAAA","sourcesContent":["export { BottomSheetOverlay } from './BottomSheetOverlay';\nexport type { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n"]}
|