@metamask-previews/design-system-react-native 0.32.0-preview.cf8aa2e4 → 0.33.0-preview.b0de9209
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/CHANGELOG.md +8 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs +4 -2
- package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.d.cts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.d.mts.map +1 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs +6 -4
- package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs.map +1 -1
- package/dist/components/Toast/Toast.constants.cjs +2 -14
- package/dist/components/Toast/Toast.constants.cjs.map +1 -1
- package/dist/components/Toast/Toast.constants.d.cts +1 -11
- package/dist/components/Toast/Toast.constants.d.cts.map +1 -1
- package/dist/components/Toast/Toast.constants.d.mts +1 -11
- package/dist/components/Toast/Toast.constants.d.mts.map +1 -1
- package/dist/components/Toast/Toast.constants.mjs +1 -13
- package/dist/components/Toast/Toast.constants.mjs.map +1 -1
- package/dist/components/Toast/Toast.types.cjs.map +1 -1
- package/dist/components/Toast/Toast.types.d.cts +1 -1
- package/dist/components/Toast/Toast.types.d.cts.map +1 -1
- package/dist/components/Toast/Toast.types.d.mts +1 -1
- package/dist/components/Toast/Toast.types.d.mts.map +1 -1
- package/dist/components/Toast/Toast.types.mjs.map +1 -1
- package/dist/components/Toast/Toaster.cjs +14 -16
- package/dist/components/Toast/Toaster.cjs.map +1 -1
- package/dist/components/Toast/Toaster.d.cts.map +1 -1
- package/dist/components/Toast/Toaster.d.mts.map +1 -1
- package/dist/components/Toast/Toaster.mjs +16 -18
- package/dist/components/Toast/Toaster.mjs.map +1 -1
- package/dist/components/Toast/index.cjs +2 -2
- package/dist/components/Toast/index.cjs.map +1 -1
- package/dist/components/Toast/index.d.cts +1 -1
- package/dist/components/Toast/index.d.cts.map +1 -1
- package/dist/components/Toast/index.d.mts +1 -1
- package/dist/components/Toast/index.d.mts.map +1 -1
- package/dist/components/Toast/index.mjs +1 -1
- package/dist/components/Toast/index.mjs.map +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +0 -1
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +0 -1
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -9
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.33.0]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Updated `BottomSheetDialog` to use `background.alternative` and pure-black shadow tokens when pure-black mode is active via `usePureBlack` from `@metamask/design-system-twrnc-preset` ([#1307](https://github.com/MetaMask/metamask-design-system/pull/1307))
|
|
15
|
+
|
|
10
16
|
## [0.32.0]
|
|
11
17
|
|
|
12
18
|
### Added
|
|
@@ -556,7 +562,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
556
562
|
- Full TypeScript support with type definitions and enums
|
|
557
563
|
- React Native integration with TWRNC preset support
|
|
558
564
|
|
|
559
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.
|
|
565
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.33.0...HEAD
|
|
566
|
+
[0.33.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.32.0...@metamask/design-system-react-native@0.33.0
|
|
560
567
|
[0.32.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.31.0...@metamask/design-system-react-native@0.32.0
|
|
561
568
|
[0.31.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.2...@metamask/design-system-react-native@0.31.0
|
|
562
569
|
[0.30.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.1...@metamask/design-system-react-native@0.30.2
|
|
@@ -37,9 +37,10 @@ const BottomSheetDialog_constants_1 = require("./BottomSheetDialog.constants.cjs
|
|
|
37
37
|
exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
|
|
38
38
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
39
39
|
const currentTheme = (0, design_system_twrnc_preset_1.useTheme)();
|
|
40
|
+
const isPureBlack = (0, design_system_twrnc_preset_1.usePureBlack)();
|
|
40
41
|
const shadowLg = currentTheme === design_system_twrnc_preset_1.Theme.Light
|
|
41
42
|
? design_tokens_1.lightTheme.shadows.size.lg
|
|
42
|
-
: design_tokens_1.
|
|
43
|
+
: (0, design_tokens_1.resolveDarkTheme)(isPureBlack).shadows.size.lg;
|
|
43
44
|
const { top: screenTopPadding, bottom: screenBottomPadding } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
|
|
44
45
|
const { y: frameY, height: screenHeight } = (0, react_native_safe_area_context_1.useSafeAreaFrame)();
|
|
45
46
|
const maxSheetHeight = screenHeight - screenTopPadding;
|
|
@@ -187,7 +188,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
187
188
|
],
|
|
188
189
|
}), []);
|
|
189
190
|
const sheetStyle = (0, react_1.useMemo)(() => [
|
|
190
|
-
tw.style('bg-default rounded-t-3xl overflow-hidden border border-muted', twClassName),
|
|
191
|
+
tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted', twClassName),
|
|
191
192
|
{
|
|
192
193
|
maxHeight: maxSheetHeight,
|
|
193
194
|
paddingBottom: react_native_1.Platform.select({
|
|
@@ -201,6 +202,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
201
202
|
style,
|
|
202
203
|
], [
|
|
203
204
|
tw,
|
|
205
|
+
isPureBlack,
|
|
204
206
|
maxSheetHeight,
|
|
205
207
|
screenBottomPadding,
|
|
206
208
|
isFullscreen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.cjs","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 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 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 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 '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.cjs","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.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BottomSheetDialog.d.cts","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"}
|
|
@@ -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,8 +4,8 @@ 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";
|
|
@@ -19,9 +19,10 @@ import { DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION, DEFAULT_BOTTOMSHEETDIALOG_D
|
|
|
19
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;
|
|
@@ -169,7 +170,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
169
170
|
],
|
|
170
171
|
}), []);
|
|
171
172
|
const sheetStyle = useMemo(() => [
|
|
172
|
-
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),
|
|
173
174
|
{
|
|
174
175
|
maxHeight: maxSheetHeight,
|
|
175
176
|
paddingBottom: Platform.select({
|
|
@@ -183,6 +184,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
183
184
|
style,
|
|
184
185
|
], [
|
|
185
186
|
tw,
|
|
187
|
+
isPureBlack,
|
|
186
188
|
maxSheetHeight,
|
|
187
189
|
screenBottomPadding,
|
|
188
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 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 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 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 '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,25 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TOAST_SEVERITY_ICON_MAP = exports.
|
|
3
|
+
exports.TOAST_SEVERITY_ICON_MAP = exports.TOAST_BOTTOM_PADDING = exports.TOAST_VISIBILITY_DURATION = exports.TOAST_ANIMATION_DURATION = void 0;
|
|
4
4
|
// External dependencies.
|
|
5
5
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
6
6
|
const Toast_types_1 = require("./Toast.types.cjs");
|
|
7
7
|
var design_system_shared_2 = require("@metamask-previews/design-system-shared");
|
|
8
8
|
Object.defineProperty(exports, "TOAST_ANIMATION_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_ANIMATION_DURATION; } });
|
|
9
9
|
Object.defineProperty(exports, "TOAST_VISIBILITY_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_VISIBILITY_DURATION; } });
|
|
10
|
-
exports.
|
|
11
|
-
/**
|
|
12
|
-
* Spring tuned to approximate iOS system banner motion.
|
|
13
|
-
*
|
|
14
|
-
* UIKit reference: `animate(withDuration: 0.5, usingSpringWithDamping: 0.7,
|
|
15
|
-
* initialSpringVelocity: 1)`
|
|
16
|
-
*
|
|
17
|
-
* SwiftUI reference: `.snappy` / `.smooth` with minimal bounce.
|
|
18
|
-
*/
|
|
19
|
-
exports.TOAST_SPRING_CONFIG = {
|
|
20
|
-
dampingRatio: 0.85,
|
|
21
|
-
duration: 500,
|
|
22
|
-
};
|
|
10
|
+
exports.TOAST_BOTTOM_PADDING = 36;
|
|
23
11
|
exports.TOAST_SEVERITY_ICON_MAP = {
|
|
24
12
|
[Toast_types_1.ToastSeverity.Success]: design_system_shared_1.IconAlertSeverity.Success,
|
|
25
13
|
[Toast_types_1.ToastSeverity.Warning]: design_system_shared_1.IconAlertSeverity.Warning,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,kFAA4E;
|
|
1
|
+
{"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,kFAA4E;AAE5E,mDAA8C;AAE9C,gFAGiD;AAF/C,gIAAA,wBAAwB,OAAA;AACxB,iIAAA,yBAAyB,OAAA;AAGd,QAAA,oBAAoB,GAAG,EAAE,CAAC;AAE1B,QAAA,uBAAuB,GAAG;IACrC,CAAC,2BAAa,CAAC,OAAO,CAAC,EAAE,wCAAiB,CAAC,OAAO;IAClD,CAAC,2BAAa,CAAC,OAAO,CAAC,EAAE,wCAAiB,CAAC,OAAO;IAClD,CAAC,2BAAa,CAAC,MAAM,CAAC,EAAE,wCAAiB,CAAC,MAAM;CACxC,CAAC","sourcesContent":["// External dependencies.\nimport { IconAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport { ToastSeverity } from './Toast.types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\nexport const TOAST_BOTTOM_PADDING = 36;\n\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: IconAlertSeverity.Success,\n [ToastSeverity.Warning]: IconAlertSeverity.Warning,\n [ToastSeverity.Danger]: IconAlertSeverity.Danger,\n} as const;\n"]}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
|
-
import type { WithSpringConfig } from "react-native-reanimated";
|
|
2
1
|
export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION, } from "@metamask-previews/design-system-shared";
|
|
3
|
-
export declare const
|
|
4
|
-
/**
|
|
5
|
-
* Spring tuned to approximate iOS system banner motion.
|
|
6
|
-
*
|
|
7
|
-
* UIKit reference: `animate(withDuration: 0.5, usingSpringWithDamping: 0.7,
|
|
8
|
-
* initialSpringVelocity: 1)`
|
|
9
|
-
*
|
|
10
|
-
* SwiftUI reference: `.snappy` / `.smooth` with minimal bounce.
|
|
11
|
-
*/
|
|
12
|
-
export declare const TOAST_SPRING_CONFIG: WithSpringConfig;
|
|
2
|
+
export declare const TOAST_BOTTOM_PADDING = 36;
|
|
13
3
|
export declare const TOAST_SEVERITY_ICON_MAP: {
|
|
14
4
|
readonly success: "success";
|
|
15
5
|
readonly warning: "warning";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAEjD,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
|
-
import type { WithSpringConfig } from "react-native-reanimated";
|
|
2
1
|
export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION, } from "@metamask-previews/design-system-shared";
|
|
3
|
-
export declare const
|
|
4
|
-
/**
|
|
5
|
-
* Spring tuned to approximate iOS system banner motion.
|
|
6
|
-
*
|
|
7
|
-
* UIKit reference: `animate(withDuration: 0.5, usingSpringWithDamping: 0.7,
|
|
8
|
-
* initialSpringVelocity: 1)`
|
|
9
|
-
*
|
|
10
|
-
* SwiftUI reference: `.snappy` / `.smooth` with minimal bounce.
|
|
11
|
-
*/
|
|
12
|
-
export declare const TOAST_SPRING_CONFIG: WithSpringConfig;
|
|
2
|
+
export declare const TOAST_BOTTOM_PADDING = 36;
|
|
13
3
|
export declare const TOAST_SEVERITY_ICON_MAP: {
|
|
14
4
|
readonly success: "success";
|
|
15
5
|
readonly warning: "warning";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAEjD,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}
|
|
@@ -2,19 +2,7 @@
|
|
|
2
2
|
import { IconAlertSeverity } from "@metamask-previews/design-system-shared";
|
|
3
3
|
import { ToastSeverity } from "./Toast.types.mjs";
|
|
4
4
|
export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION } from "@metamask-previews/design-system-shared";
|
|
5
|
-
export const
|
|
6
|
-
/**
|
|
7
|
-
* Spring tuned to approximate iOS system banner motion.
|
|
8
|
-
*
|
|
9
|
-
* UIKit reference: `animate(withDuration: 0.5, usingSpringWithDamping: 0.7,
|
|
10
|
-
* initialSpringVelocity: 1)`
|
|
11
|
-
*
|
|
12
|
-
* SwiftUI reference: `.snappy` / `.smooth` with minimal bounce.
|
|
13
|
-
*/
|
|
14
|
-
export const TOAST_SPRING_CONFIG = {
|
|
15
|
-
dampingRatio: 0.85,
|
|
16
|
-
duration: 500,
|
|
17
|
-
};
|
|
5
|
+
export const TOAST_BOTTOM_PADDING = 36;
|
|
18
6
|
export const TOAST_SEVERITY_ICON_MAP = {
|
|
19
7
|
[ToastSeverity.Success]: IconAlertSeverity.Success,
|
|
20
8
|
[ToastSeverity.Warning]: IconAlertSeverity.Warning,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;
|
|
1
|
+
{"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAE5E,OAAO,EAAE,aAAa,EAAE,0BAAsB;AAE9C,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EAC1B,gDAAgD;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAClD,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAClD,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,MAAM;CACxC,CAAC","sourcesContent":["// External dependencies.\nimport { IconAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport { ToastSeverity } from './Toast.types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\nexport const TOAST_BOTTOM_PADDING = 36;\n\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: IconAlertSeverity.Success,\n [ToastSeverity.Warning]: IconAlertSeverity.Warning,\n [ToastSeverity.Danger]: IconAlertSeverity.Danger,\n} as const;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";;;AACA,kFAAwE;AAM/D,8FANA,oCAAa,OAMA","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\nimport { ToastSeverity } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon/Icon.types';\n\nexport { ToastSeverity };\nexport type { ToastPropsShared };\n\n/**\n * Optional props for the leading severity `Icon`.\n */\nexport type ToastIconProps = Omit<IconProps, 'name' | 'size' | 'color'>;\n\n/**\n * Shared toast props aligned with BannerBase, plus optional severity/icon props.\n */\nexport type ToastSharedProps = Omit<BannerBaseProps, 'closeButtonProps'> & {\n closeButtonProps?: Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onPress'\n >;\n severity?: ToastSeverity;\n iconAlertProps?: ToastIconProps;\n};\n\n/**\n * Toast options used by the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastSharedProps & {\n hasNoTimeout?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Toast.types.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";;;AACA,kFAAwE;AAM/D,8FANA,oCAAa,OAMA","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\nimport { ToastSeverity } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon/Icon.types';\n\nexport { ToastSeverity };\nexport type { ToastPropsShared };\n\n/**\n * Optional props for the leading severity `Icon`.\n */\nexport type ToastIconProps = Omit<IconProps, 'name' | 'size' | 'color'>;\n\n/**\n * Shared toast props aligned with BannerBase, plus optional severity/icon props.\n */\nexport type ToastSharedProps = Omit<BannerBaseProps, 'closeButtonProps'> & {\n closeButtonProps?: Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onPress'\n >;\n severity?: ToastSeverity;\n iconAlertProps?: ToastIconProps;\n};\n\n/**\n * Toast options used by the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastSharedProps & {\n hasNoTimeout?: boolean;\n bottomOffset?: number;\n};\n\n/**\n * Toaster component reference.\n */\nexport type ToasterRef = {\n showToast: (toastOptions: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/**\n * Toast component props intended for direct rendering of a single toast surface.\n */\nexport type ToastProps = ToastSharedProps;\n\n/**\n * Toaster component props.\n * Extends ViewProps to inherit standard React Native props such as testID and accessibilityLabel.\n */\nexport type ToasterProps = {\n /**\n * Optional Tailwind CSS classes for the toast container.\n */\n twClassName?: string;\n} & Omit<ViewProps, 'style'>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAChF,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG;IACzE,gBAAgB,CAAC,EAAE,IAAI,CACrB,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;IACF,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"Toast.types.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAChF,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG;IACzE,gBAAgB,CAAC,EAAE,IAAI,CACrB,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;IACF,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAE1C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAChF,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG;IACzE,gBAAgB,CAAC,EAAE,IAAI,CACrB,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;IACF,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"Toast.types.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAChF,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG;IACzE,gBAAgB,CAAC,EAAE,IAAI,CACrB,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;IACF,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAE1C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAMxE,OAAO,EAAE,aAAa,EAAE,CAAC","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\nimport { ToastSeverity } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon/Icon.types';\n\nexport { ToastSeverity };\nexport type { ToastPropsShared };\n\n/**\n * Optional props for the leading severity `Icon`.\n */\nexport type ToastIconProps = Omit<IconProps, 'name' | 'size' | 'color'>;\n\n/**\n * Shared toast props aligned with BannerBase, plus optional severity/icon props.\n */\nexport type ToastSharedProps = Omit<BannerBaseProps, 'closeButtonProps'> & {\n closeButtonProps?: Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onPress'\n >;\n severity?: ToastSeverity;\n iconAlertProps?: ToastIconProps;\n};\n\n/**\n * Toast options used by the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastSharedProps & {\n hasNoTimeout?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Toast.types.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAMxE,OAAO,EAAE,aAAa,EAAE,CAAC","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\nimport { ToastSeverity } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon/Icon.types';\n\nexport { ToastSeverity };\nexport type { ToastPropsShared };\n\n/**\n * Optional props for the leading severity `Icon`.\n */\nexport type ToastIconProps = Omit<IconProps, 'name' | 'size' | 'color'>;\n\n/**\n * Shared toast props aligned with BannerBase, plus optional severity/icon props.\n */\nexport type ToastSharedProps = Omit<BannerBaseProps, 'closeButtonProps'> & {\n closeButtonProps?: Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onPress'\n >;\n severity?: ToastSeverity;\n iconAlertProps?: ToastIconProps;\n};\n\n/**\n * Toast options used by the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastSharedProps & {\n hasNoTimeout?: boolean;\n bottomOffset?: number;\n};\n\n/**\n * Toaster component reference.\n */\nexport type ToasterRef = {\n showToast: (toastOptions: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/**\n * Toast component props intended for direct rendering of a single toast surface.\n */\nexport type ToastProps = ToastSharedProps;\n\n/**\n * Toaster component props.\n * Extends ViewProps to inherit standard React Native props such as testID and accessibilityLabel.\n */\nexport type ToasterProps = {\n /**\n * Optional Tailwind CSS classes for the toast container.\n */\n twClassName?: string;\n} & Omit<ViewProps, 'style'>;\n"]}
|
|
@@ -42,20 +42,18 @@ const assertRegisteredRef = (method) => {
|
|
|
42
42
|
}
|
|
43
43
|
return registeredRef.current;
|
|
44
44
|
};
|
|
45
|
-
const getToastProps = ({ hasNoTimeout: _hasNoTimeout, onClose: _onClose,
|
|
46
|
-
const getHiddenTranslateY = (height, offset) => -(height + offset);
|
|
45
|
+
const getToastProps = ({ bottomOffset: _bottomOffset, hasNoTimeout: _hasNoTimeout, onClose: _onClose, twClassName: _twClassName, ...toastProps }) => toastProps;
|
|
47
46
|
const ToasterComponent = (0, react_1.forwardRef)(({ twClassName, ...props }, ref) => {
|
|
48
47
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
49
48
|
const [toastOptions, setToastOptions] = (0, react_1.useState)(undefined);
|
|
50
49
|
const replacementTimerRef = (0, react_1.useRef)(null);
|
|
51
|
-
const {
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const topOffset = toastOptions?.topOffset ?? 0;
|
|
50
|
+
const { bottom: bottomNotchSpacing } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
|
|
51
|
+
const translateYProgress = (0, react_native_reanimated_1.useSharedValue)(screenHeight);
|
|
52
|
+
const bottomOffset = toastOptions?.bottomOffset ?? 0;
|
|
55
53
|
const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
|
|
56
|
-
transform: [{ translateY: translateYProgress.value
|
|
54
|
+
transform: [{ translateY: translateYProgress.value - bottomOffset }],
|
|
57
55
|
}));
|
|
58
|
-
const baseStyle = (0, react_1.useMemo)(() => [tw.style('absolute left-4 right-4
|
|
56
|
+
const baseStyle = (0, react_1.useMemo)(() => [tw.style('absolute left-4 right-4 bottom-0'), animatedStyle], [tw, animatedStyle]);
|
|
59
57
|
const innerRef = (0, react_1.useRef)(null);
|
|
60
58
|
const resetState = () => setToastOptions(undefined);
|
|
61
59
|
const showToast = (options) => {
|
|
@@ -82,7 +80,7 @@ const ToasterComponent = (0, react_1.forwardRef)(({ twClassName, ...props }, ref
|
|
|
82
80
|
clearTimeout(replacementTimerRef.current);
|
|
83
81
|
replacementTimerRef.current = null;
|
|
84
82
|
}
|
|
85
|
-
translateYProgress.value = (0, react_native_reanimated_1.
|
|
83
|
+
translateYProgress.value = (0, react_native_reanimated_1.withTiming)(screenHeight, { duration: Toast_constants_1.TOAST_ANIMATION_DURATION }, () => {
|
|
86
84
|
(0, react_native_reanimated_1.runOnJS)(resetState)();
|
|
87
85
|
});
|
|
88
86
|
};
|
|
@@ -110,16 +108,16 @@ const ToasterComponent = (0, react_1.forwardRef)(({ twClassName, ...props }, ref
|
|
|
110
108
|
.join(' ');
|
|
111
109
|
const onAnimatedViewLayout = (e) => {
|
|
112
110
|
const { height } = e.nativeEvent.layout;
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
toastHeight.value = height;
|
|
116
|
-
translateYProgress.value = hiddenTranslateY;
|
|
111
|
+
const translateYToValue = -(Toast_constants_1.TOAST_BOTTOM_PADDING + bottomNotchSpacing);
|
|
112
|
+
translateYProgress.value = height;
|
|
117
113
|
if (toastOptions.hasNoTimeout) {
|
|
118
|
-
translateYProgress.value = (0, react_native_reanimated_1.
|
|
114
|
+
translateYProgress.value = (0, react_native_reanimated_1.withTiming)(translateYToValue, {
|
|
115
|
+
duration: Toast_constants_1.TOAST_ANIMATION_DURATION,
|
|
116
|
+
});
|
|
119
117
|
}
|
|
120
118
|
else {
|
|
121
|
-
translateYProgress.value = (0, react_native_reanimated_1.
|
|
122
|
-
translateYProgress.value = (0, react_native_reanimated_1.withDelay)(Toast_constants_1.TOAST_VISIBILITY_DURATION, (0, react_native_reanimated_1.
|
|
119
|
+
translateYProgress.value = (0, react_native_reanimated_1.withTiming)(translateYToValue, { duration: Toast_constants_1.TOAST_ANIMATION_DURATION }, () => {
|
|
120
|
+
translateYProgress.value = (0, react_native_reanimated_1.withDelay)(Toast_constants_1.TOAST_VISIBILITY_DURATION, (0, react_native_reanimated_1.withTiming)(height, { duration: Toast_constants_1.TOAST_ANIMATION_DURATION }, (0, react_native_reanimated_1.runOnJS)(resetState)));
|
|
123
121
|
});
|
|
124
122
|
}
|
|
125
123
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { RefObject } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withDelay,\n withSpring,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport { Toast } from './Toast';\nimport {\n TOAST_SPRING_CONFIG,\n TOAST_TOP_PADDING,\n TOAST_VISIBILITY_DURATION,\n} from './Toast.constants';\nimport type {\n ToastOptions,\n ToastProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\n\nconst screenHeight = Dimensions.get('window').height;\n\nlet registeredRef: RefObject<ToasterRef | null> | null = null;\n\nconst assertRegisteredRef = (method: 'dismiss' | 'toast'): ToasterRef => {\n if (!registeredRef?.current) {\n const invocation = method === 'toast' ? 'toast()' : `toast.${method}()`;\n throw new Error(\n `${invocation} called before <Toaster /> mounted. Render <Toaster /> once at the root of your app.`,\n );\n }\n return registeredRef.current;\n};\n\nconst getToastProps = ({\n hasNoTimeout: _hasNoTimeout,\n onClose: _onClose,\n topOffset: _topOffset,\n twClassName: _twClassName,\n ...toastProps\n}: ToastOptions): Omit<ToastProps, 'twClassName'> => toastProps;\n\nconst getHiddenTranslateY = (height: number, offset: number) =>\n -(height + offset);\n\nconst ToasterComponent = forwardRef<ToasterRef, ToasterProps>(\n ({ twClassName, ...props }, ref) => {\n const tw = useTailwind();\n const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>(\n undefined,\n );\n const replacementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const { top: topInset } = useSafeAreaInsets();\n const toastHeight = useSharedValue(screenHeight);\n const translateYProgress = useSharedValue(-screenHeight);\n const topOffset = toastOptions?.topOffset ?? 0;\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: translateYProgress.value + topOffset }],\n }));\n const baseStyle: StyleProp<ViewStyle> = useMemo(\n () => [tw.style('absolute left-4 right-4 top-0'), animatedStyle],\n [tw, animatedStyle],\n );\n const innerRef = useRef<ToasterRef | null>(null);\n\n const resetState = () => setToastOptions(undefined);\n\n const showToast = (options: ToastOptions) => {\n let timeoutDuration = 0;\n const normalizedOptions = {\n hasNoTimeout: false,\n ...options,\n };\n if (toastOptions) {\n cancelAnimation(translateYProgress);\n timeoutDuration = 100;\n setToastOptions(undefined);\n }\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n }\n replacementTimerRef.current = setTimeout(() => {\n replacementTimerRef.current = null;\n setToastOptions(normalizedOptions);\n }, timeoutDuration);\n };\n\n const closeToast = () => {\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n replacementTimerRef.current = null;\n }\n translateYProgress.value = withSpring(\n getHiddenTranslateY(toastHeight.value, topOffset),\n TOAST_SPRING_CONFIG,\n () => {\n runOnJS(resetState)();\n },\n );\n };\n\n innerRef.current = {\n closeToast,\n showToast,\n };\n\n useImperativeHandle(ref, () => innerRef.current as ToasterRef);\n\n useLayoutEffect(() => {\n registeredRef = innerRef;\n return () => {\n if (registeredRef === innerRef) {\n registeredRef = null;\n }\n };\n }, []);\n\n if (!toastOptions) {\n return null;\n }\n\n const { onClose: toastOnClose, twClassName: toastTwClassName } =\n toastOptions;\n const toastProps = getToastProps(toastOptions);\n const { actionButtonLabel, actionButtonOnPress, ...restToastProps } =\n toastProps;\n const toastTwClassNames = [twClassName, toastTwClassName]\n .filter(Boolean)\n .join(' ');\n\n const onAnimatedViewLayout = (e: LayoutChangeEvent) => {\n const { height } = e.nativeEvent.layout;\n const hiddenTranslateY = getHiddenTranslateY(height, topOffset);\n const visibleTranslateY = topInset + TOAST_TOP_PADDING;\n\n toastHeight.value = height;\n translateYProgress.value = hiddenTranslateY;\n\n if (toastOptions.hasNoTimeout) {\n translateYProgress.value = withSpring(\n visibleTranslateY,\n TOAST_SPRING_CONFIG,\n );\n } else {\n translateYProgress.value = withSpring(\n visibleTranslateY,\n TOAST_SPRING_CONFIG,\n () => {\n translateYProgress.value = withDelay(\n TOAST_VISIBILITY_DURATION,\n withSpring(\n hiddenTranslateY,\n TOAST_SPRING_CONFIG,\n runOnJS(resetState),\n ),\n );\n },\n );\n }\n };\n\n return (\n <Animated.View\n onLayout={onAnimatedViewLayout}\n style={baseStyle}\n {...props}\n >\n {actionButtonLabel && actionButtonOnPress ? (\n <Toast\n {...toastProps}\n actionButtonLabel={actionButtonLabel}\n actionButtonOnPress={actionButtonOnPress}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n ) : (\n <Toast\n {...restToastProps}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n )}\n </Animated.View>\n );\n },\n);\n\nToasterComponent.displayName = 'Toaster';\n\ntype ToastFunction = ((options: ToastOptions) => void) & {\n dismiss: () => void;\n};\n\nexport const Toaster = ToasterComponent;\n\nexport const toast = ((options: ToastOptions) => {\n assertRegisteredRef('toast').showToast(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n assertRegisteredRef('dismiss').closeToast();\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Toaster.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { RefObject } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withDelay,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport { Toast } from './Toast';\nimport {\n TOAST_ANIMATION_DURATION,\n TOAST_BOTTOM_PADDING,\n TOAST_VISIBILITY_DURATION,\n} from './Toast.constants';\nimport type {\n ToastOptions,\n ToastProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\n\nconst screenHeight = Dimensions.get('window').height;\n\nlet registeredRef: RefObject<ToasterRef | null> | null = null;\n\nconst assertRegisteredRef = (method: 'dismiss' | 'toast'): ToasterRef => {\n if (!registeredRef?.current) {\n const invocation = method === 'toast' ? 'toast()' : `toast.${method}()`;\n throw new Error(\n `${invocation} called before <Toaster /> mounted. Render <Toaster /> once at the root of your app.`,\n );\n }\n return registeredRef.current;\n};\n\nconst getToastProps = ({\n bottomOffset: _bottomOffset,\n hasNoTimeout: _hasNoTimeout,\n onClose: _onClose,\n twClassName: _twClassName,\n ...toastProps\n}: ToastOptions): Omit<ToastProps, 'twClassName'> => toastProps;\n\nconst ToasterComponent = forwardRef<ToasterRef, ToasterProps>(\n ({ twClassName, ...props }, ref) => {\n const tw = useTailwind();\n const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>(\n undefined,\n );\n const replacementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const { bottom: bottomNotchSpacing } = useSafeAreaInsets();\n const translateYProgress = useSharedValue(screenHeight);\n const bottomOffset = toastOptions?.bottomOffset ?? 0;\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: translateYProgress.value - bottomOffset }],\n }));\n const baseStyle: StyleProp<ViewStyle> = useMemo(\n () => [tw.style('absolute left-4 right-4 bottom-0'), animatedStyle],\n [tw, animatedStyle],\n );\n const innerRef = useRef<ToasterRef | null>(null);\n\n const resetState = () => setToastOptions(undefined);\n\n const showToast = (options: ToastOptions) => {\n let timeoutDuration = 0;\n const normalizedOptions = {\n hasNoTimeout: false,\n ...options,\n };\n if (toastOptions) {\n cancelAnimation(translateYProgress);\n timeoutDuration = 100;\n setToastOptions(undefined);\n }\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n }\n replacementTimerRef.current = setTimeout(() => {\n replacementTimerRef.current = null;\n setToastOptions(normalizedOptions);\n }, timeoutDuration);\n };\n\n const closeToast = () => {\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n replacementTimerRef.current = null;\n }\n translateYProgress.value = withTiming(\n screenHeight,\n { duration: TOAST_ANIMATION_DURATION },\n () => {\n runOnJS(resetState)();\n },\n );\n };\n\n innerRef.current = {\n closeToast,\n showToast,\n };\n\n useImperativeHandle(ref, () => innerRef.current as ToasterRef);\n\n useLayoutEffect(() => {\n registeredRef = innerRef;\n return () => {\n if (registeredRef === innerRef) {\n registeredRef = null;\n }\n };\n }, []);\n\n if (!toastOptions) {\n return null;\n }\n\n const { onClose: toastOnClose, twClassName: toastTwClassName } =\n toastOptions;\n const toastProps = getToastProps(toastOptions);\n const { actionButtonLabel, actionButtonOnPress, ...restToastProps } =\n toastProps;\n const toastTwClassNames = [twClassName, toastTwClassName]\n .filter(Boolean)\n .join(' ');\n\n const onAnimatedViewLayout = (e: LayoutChangeEvent) => {\n const { height } = e.nativeEvent.layout;\n const translateYToValue = -(TOAST_BOTTOM_PADDING + bottomNotchSpacing);\n\n translateYProgress.value = height;\n\n if (toastOptions.hasNoTimeout) {\n translateYProgress.value = withTiming(translateYToValue, {\n duration: TOAST_ANIMATION_DURATION,\n });\n } else {\n translateYProgress.value = withTiming(\n translateYToValue,\n { duration: TOAST_ANIMATION_DURATION },\n () => {\n translateYProgress.value = withDelay(\n TOAST_VISIBILITY_DURATION,\n withTiming(\n height,\n { duration: TOAST_ANIMATION_DURATION },\n runOnJS(resetState),\n ),\n );\n },\n );\n }\n };\n\n return (\n <Animated.View\n onLayout={onAnimatedViewLayout}\n style={baseStyle}\n {...props}\n >\n {actionButtonLabel && actionButtonOnPress ? (\n <Toast\n {...toastProps}\n actionButtonLabel={actionButtonLabel}\n actionButtonOnPress={actionButtonOnPress}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n ) : (\n <Toast\n {...restToastProps}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n )}\n </Animated.View>\n );\n },\n);\n\nToasterComponent.displayName = 'Toaster';\n\ntype ToastFunction = ((options: ToastOptions) => void) & {\n dismiss: () => void;\n};\n\nexport const Toaster = ToasterComponent;\n\nexport const toast = ((options: ToastOptions) => {\n assertRegisteredRef('toast').showToast(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n assertRegisteredRef('dismiss').closeToast();\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,cAAc;AAqBf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;
|
|
1
|
+
{"version":3,"file":"Toaster.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,cAAc;AAqBf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;AA4KvB,KAAK,aAAa,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,OAAO;;sFAAmB,CAAC;AAExC,eAAO,MAAM,KAAK,eAEC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,cAAc;AAqBf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;
|
|
1
|
+
{"version":3,"file":"Toaster.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,cAAc;AAqBf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;AA4KvB,KAAK,aAAa,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,OAAO;;sFAAmB,CAAC;AAExC,eAAO,MAAM,KAAK,eAEC,CAAC"}
|
|
@@ -9,11 +9,11 @@ import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
|
|
|
9
9
|
import $React, { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
10
10
|
const React = $importDefault($React);
|
|
11
11
|
import { Dimensions } from "react-native";
|
|
12
|
-
import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withDelay,
|
|
12
|
+
import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
|
|
13
13
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
14
14
|
// Internal dependencies.
|
|
15
15
|
import { Toast } from "./Toast.mjs";
|
|
16
|
-
import {
|
|
16
|
+
import { TOAST_ANIMATION_DURATION, TOAST_BOTTOM_PADDING, TOAST_VISIBILITY_DURATION } from "./Toast.constants.mjs";
|
|
17
17
|
const screenHeight = Dimensions.get('window').height;
|
|
18
18
|
let registeredRef = null;
|
|
19
19
|
const assertRegisteredRef = (method) => {
|
|
@@ -23,20 +23,18 @@ const assertRegisteredRef = (method) => {
|
|
|
23
23
|
}
|
|
24
24
|
return registeredRef.current;
|
|
25
25
|
};
|
|
26
|
-
const getToastProps = ({ hasNoTimeout: _hasNoTimeout, onClose: _onClose,
|
|
27
|
-
const getHiddenTranslateY = (height, offset) => -(height + offset);
|
|
26
|
+
const getToastProps = ({ bottomOffset: _bottomOffset, hasNoTimeout: _hasNoTimeout, onClose: _onClose, twClassName: _twClassName, ...toastProps }) => toastProps;
|
|
28
27
|
const ToasterComponent = forwardRef(({ twClassName, ...props }, ref) => {
|
|
29
28
|
const tw = useTailwind();
|
|
30
29
|
const [toastOptions, setToastOptions] = useState(undefined);
|
|
31
30
|
const replacementTimerRef = useRef(null);
|
|
32
|
-
const {
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const topOffset = toastOptions?.topOffset ?? 0;
|
|
31
|
+
const { bottom: bottomNotchSpacing } = useSafeAreaInsets();
|
|
32
|
+
const translateYProgress = useSharedValue(screenHeight);
|
|
33
|
+
const bottomOffset = toastOptions?.bottomOffset ?? 0;
|
|
36
34
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
37
|
-
transform: [{ translateY: translateYProgress.value
|
|
35
|
+
transform: [{ translateY: translateYProgress.value - bottomOffset }],
|
|
38
36
|
}));
|
|
39
|
-
const baseStyle = useMemo(() => [tw.style('absolute left-4 right-4
|
|
37
|
+
const baseStyle = useMemo(() => [tw.style('absolute left-4 right-4 bottom-0'), animatedStyle], [tw, animatedStyle]);
|
|
40
38
|
const innerRef = useRef(null);
|
|
41
39
|
const resetState = () => setToastOptions(undefined);
|
|
42
40
|
const showToast = (options) => {
|
|
@@ -63,7 +61,7 @@ const ToasterComponent = forwardRef(({ twClassName, ...props }, ref) => {
|
|
|
63
61
|
clearTimeout(replacementTimerRef.current);
|
|
64
62
|
replacementTimerRef.current = null;
|
|
65
63
|
}
|
|
66
|
-
translateYProgress.value =
|
|
64
|
+
translateYProgress.value = withTiming(screenHeight, { duration: TOAST_ANIMATION_DURATION }, () => {
|
|
67
65
|
runOnJS(resetState)();
|
|
68
66
|
});
|
|
69
67
|
};
|
|
@@ -91,16 +89,16 @@ const ToasterComponent = forwardRef(({ twClassName, ...props }, ref) => {
|
|
|
91
89
|
.join(' ');
|
|
92
90
|
const onAnimatedViewLayout = (e) => {
|
|
93
91
|
const { height } = e.nativeEvent.layout;
|
|
94
|
-
const
|
|
95
|
-
|
|
96
|
-
toastHeight.value = height;
|
|
97
|
-
translateYProgress.value = hiddenTranslateY;
|
|
92
|
+
const translateYToValue = -(TOAST_BOTTOM_PADDING + bottomNotchSpacing);
|
|
93
|
+
translateYProgress.value = height;
|
|
98
94
|
if (toastOptions.hasNoTimeout) {
|
|
99
|
-
translateYProgress.value =
|
|
95
|
+
translateYProgress.value = withTiming(translateYToValue, {
|
|
96
|
+
duration: TOAST_ANIMATION_DURATION,
|
|
97
|
+
});
|
|
100
98
|
}
|
|
101
99
|
else {
|
|
102
|
-
translateYProgress.value =
|
|
103
|
-
translateYProgress.value = withDelay(TOAST_VISIBILITY_DURATION,
|
|
100
|
+
translateYProgress.value = withTiming(translateYToValue, { duration: TOAST_ANIMATION_DURATION }, () => {
|
|
101
|
+
translateYProgress.value = withDelay(TOAST_VISIBILITY_DURATION, withTiming(height, { duration: TOAST_ANIMATION_DURATION }, runOnJS(resetState)));
|
|
104
102
|
});
|
|
105
103
|
}
|
|
106
104
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { RefObject } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withDelay,\n withSpring,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport { Toast } from './Toast';\nimport {\n TOAST_SPRING_CONFIG,\n TOAST_TOP_PADDING,\n TOAST_VISIBILITY_DURATION,\n} from './Toast.constants';\nimport type {\n ToastOptions,\n ToastProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\n\nconst screenHeight = Dimensions.get('window').height;\n\nlet registeredRef: RefObject<ToasterRef | null> | null = null;\n\nconst assertRegisteredRef = (method: 'dismiss' | 'toast'): ToasterRef => {\n if (!registeredRef?.current) {\n const invocation = method === 'toast' ? 'toast()' : `toast.${method}()`;\n throw new Error(\n `${invocation} called before <Toaster /> mounted. Render <Toaster /> once at the root of your app.`,\n );\n }\n return registeredRef.current;\n};\n\nconst getToastProps = ({\n hasNoTimeout: _hasNoTimeout,\n onClose: _onClose,\n topOffset: _topOffset,\n twClassName: _twClassName,\n ...toastProps\n}: ToastOptions): Omit<ToastProps, 'twClassName'> => toastProps;\n\nconst getHiddenTranslateY = (height: number, offset: number) =>\n -(height + offset);\n\nconst ToasterComponent = forwardRef<ToasterRef, ToasterProps>(\n ({ twClassName, ...props }, ref) => {\n const tw = useTailwind();\n const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>(\n undefined,\n );\n const replacementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const { top: topInset } = useSafeAreaInsets();\n const toastHeight = useSharedValue(screenHeight);\n const translateYProgress = useSharedValue(-screenHeight);\n const topOffset = toastOptions?.topOffset ?? 0;\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: translateYProgress.value + topOffset }],\n }));\n const baseStyle: StyleProp<ViewStyle> = useMemo(\n () => [tw.style('absolute left-4 right-4 top-0'), animatedStyle],\n [tw, animatedStyle],\n );\n const innerRef = useRef<ToasterRef | null>(null);\n\n const resetState = () => setToastOptions(undefined);\n\n const showToast = (options: ToastOptions) => {\n let timeoutDuration = 0;\n const normalizedOptions = {\n hasNoTimeout: false,\n ...options,\n };\n if (toastOptions) {\n cancelAnimation(translateYProgress);\n timeoutDuration = 100;\n setToastOptions(undefined);\n }\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n }\n replacementTimerRef.current = setTimeout(() => {\n replacementTimerRef.current = null;\n setToastOptions(normalizedOptions);\n }, timeoutDuration);\n };\n\n const closeToast = () => {\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n replacementTimerRef.current = null;\n }\n translateYProgress.value = withSpring(\n getHiddenTranslateY(toastHeight.value, topOffset),\n TOAST_SPRING_CONFIG,\n () => {\n runOnJS(resetState)();\n },\n );\n };\n\n innerRef.current = {\n closeToast,\n showToast,\n };\n\n useImperativeHandle(ref, () => innerRef.current as ToasterRef);\n\n useLayoutEffect(() => {\n registeredRef = innerRef;\n return () => {\n if (registeredRef === innerRef) {\n registeredRef = null;\n }\n };\n }, []);\n\n if (!toastOptions) {\n return null;\n }\n\n const { onClose: toastOnClose, twClassName: toastTwClassName } =\n toastOptions;\n const toastProps = getToastProps(toastOptions);\n const { actionButtonLabel, actionButtonOnPress, ...restToastProps } =\n toastProps;\n const toastTwClassNames = [twClassName, toastTwClassName]\n .filter(Boolean)\n .join(' ');\n\n const onAnimatedViewLayout = (e: LayoutChangeEvent) => {\n const { height } = e.nativeEvent.layout;\n const hiddenTranslateY = getHiddenTranslateY(height, topOffset);\n const visibleTranslateY = topInset + TOAST_TOP_PADDING;\n\n toastHeight.value = height;\n translateYProgress.value = hiddenTranslateY;\n\n if (toastOptions.hasNoTimeout) {\n translateYProgress.value = withSpring(\n visibleTranslateY,\n TOAST_SPRING_CONFIG,\n );\n } else {\n translateYProgress.value = withSpring(\n visibleTranslateY,\n TOAST_SPRING_CONFIG,\n () => {\n translateYProgress.value = withDelay(\n TOAST_VISIBILITY_DURATION,\n withSpring(\n hiddenTranslateY,\n TOAST_SPRING_CONFIG,\n runOnJS(resetState),\n ),\n );\n },\n );\n }\n };\n\n return (\n <Animated.View\n onLayout={onAnimatedViewLayout}\n style={baseStyle}\n {...props}\n >\n {actionButtonLabel && actionButtonOnPress ? (\n <Toast\n {...toastProps}\n actionButtonLabel={actionButtonLabel}\n actionButtonOnPress={actionButtonOnPress}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n ) : (\n <Toast\n {...restToastProps}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n )}\n </Animated.View>\n );\n },\n);\n\nToasterComponent.displayName = 'Toaster';\n\ntype ToastFunction = ((options: ToastOptions) => void) & {\n dismiss: () => void;\n};\n\nexport const Toaster = ToasterComponent;\n\nexport const toast = ((options: ToastOptions) => {\n assertRegisteredRef('toast').showToast(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n assertRegisteredRef('dismiss').closeToast();\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Toaster.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { RefObject } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withDelay,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport { Toast } from './Toast';\nimport {\n TOAST_ANIMATION_DURATION,\n TOAST_BOTTOM_PADDING,\n TOAST_VISIBILITY_DURATION,\n} from './Toast.constants';\nimport type {\n ToastOptions,\n ToastProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\n\nconst screenHeight = Dimensions.get('window').height;\n\nlet registeredRef: RefObject<ToasterRef | null> | null = null;\n\nconst assertRegisteredRef = (method: 'dismiss' | 'toast'): ToasterRef => {\n if (!registeredRef?.current) {\n const invocation = method === 'toast' ? 'toast()' : `toast.${method}()`;\n throw new Error(\n `${invocation} called before <Toaster /> mounted. Render <Toaster /> once at the root of your app.`,\n );\n }\n return registeredRef.current;\n};\n\nconst getToastProps = ({\n bottomOffset: _bottomOffset,\n hasNoTimeout: _hasNoTimeout,\n onClose: _onClose,\n twClassName: _twClassName,\n ...toastProps\n}: ToastOptions): Omit<ToastProps, 'twClassName'> => toastProps;\n\nconst ToasterComponent = forwardRef<ToasterRef, ToasterProps>(\n ({ twClassName, ...props }, ref) => {\n const tw = useTailwind();\n const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>(\n undefined,\n );\n const replacementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const { bottom: bottomNotchSpacing } = useSafeAreaInsets();\n const translateYProgress = useSharedValue(screenHeight);\n const bottomOffset = toastOptions?.bottomOffset ?? 0;\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: translateYProgress.value - bottomOffset }],\n }));\n const baseStyle: StyleProp<ViewStyle> = useMemo(\n () => [tw.style('absolute left-4 right-4 bottom-0'), animatedStyle],\n [tw, animatedStyle],\n );\n const innerRef = useRef<ToasterRef | null>(null);\n\n const resetState = () => setToastOptions(undefined);\n\n const showToast = (options: ToastOptions) => {\n let timeoutDuration = 0;\n const normalizedOptions = {\n hasNoTimeout: false,\n ...options,\n };\n if (toastOptions) {\n cancelAnimation(translateYProgress);\n timeoutDuration = 100;\n setToastOptions(undefined);\n }\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n }\n replacementTimerRef.current = setTimeout(() => {\n replacementTimerRef.current = null;\n setToastOptions(normalizedOptions);\n }, timeoutDuration);\n };\n\n const closeToast = () => {\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n replacementTimerRef.current = null;\n }\n translateYProgress.value = withTiming(\n screenHeight,\n { duration: TOAST_ANIMATION_DURATION },\n () => {\n runOnJS(resetState)();\n },\n );\n };\n\n innerRef.current = {\n closeToast,\n showToast,\n };\n\n useImperativeHandle(ref, () => innerRef.current as ToasterRef);\n\n useLayoutEffect(() => {\n registeredRef = innerRef;\n return () => {\n if (registeredRef === innerRef) {\n registeredRef = null;\n }\n };\n }, []);\n\n if (!toastOptions) {\n return null;\n }\n\n const { onClose: toastOnClose, twClassName: toastTwClassName } =\n toastOptions;\n const toastProps = getToastProps(toastOptions);\n const { actionButtonLabel, actionButtonOnPress, ...restToastProps } =\n toastProps;\n const toastTwClassNames = [twClassName, toastTwClassName]\n .filter(Boolean)\n .join(' ');\n\n const onAnimatedViewLayout = (e: LayoutChangeEvent) => {\n const { height } = e.nativeEvent.layout;\n const translateYToValue = -(TOAST_BOTTOM_PADDING + bottomNotchSpacing);\n\n translateYProgress.value = height;\n\n if (toastOptions.hasNoTimeout) {\n translateYProgress.value = withTiming(translateYToValue, {\n duration: TOAST_ANIMATION_DURATION,\n });\n } else {\n translateYProgress.value = withTiming(\n translateYToValue,\n { duration: TOAST_ANIMATION_DURATION },\n () => {\n translateYProgress.value = withDelay(\n TOAST_VISIBILITY_DURATION,\n withTiming(\n height,\n { duration: TOAST_ANIMATION_DURATION },\n runOnJS(resetState),\n ),\n );\n },\n );\n }\n };\n\n return (\n <Animated.View\n onLayout={onAnimatedViewLayout}\n style={baseStyle}\n {...props}\n >\n {actionButtonLabel && actionButtonOnPress ? (\n <Toast\n {...toastProps}\n actionButtonLabel={actionButtonLabel}\n actionButtonOnPress={actionButtonOnPress}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n ) : (\n <Toast\n {...restToastProps}\n onClose={() => {\n closeToast();\n toastOnClose?.();\n }}\n twClassName={toastTwClassNames}\n />\n )}\n </Animated.View>\n );\n },\n);\n\nToasterComponent.displayName = 'Toaster';\n\ntype ToastFunction = ((options: ToastOptions) => void) & {\n dismiss: () => void;\n};\n\nexport const Toaster = ToasterComponent;\n\nexport const toast = ((options: ToastOptions) => {\n assertRegisteredRef('toast').showToast(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n assertRegisteredRef('dismiss').closeToast();\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.TOAST_BOTTOM_PADDING = exports.ToastSeverity = exports.toast = exports.Toaster = exports.Toast = void 0;
|
|
4
4
|
var Toast_1 = require("./Toast.cjs");
|
|
5
5
|
Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
|
|
6
6
|
var Toaster_1 = require("./Toaster.cjs");
|
|
@@ -9,5 +9,5 @@ Object.defineProperty(exports, "toast", { enumerable: true, get: function () { r
|
|
|
9
9
|
var design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
10
10
|
Object.defineProperty(exports, "ToastSeverity", { enumerable: true, get: function () { return design_system_shared_1.ToastSeverity; } });
|
|
11
11
|
var Toast_constants_1 = require("./Toast.constants.cjs");
|
|
12
|
-
Object.defineProperty(exports, "
|
|
12
|
+
Object.defineProperty(exports, "TOAST_BOTTOM_PADDING", { enumerable: true, get: function () { return Toast_constants_1.TOAST_BOTTOM_PADDING; } });
|
|
13
13
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":";;;AAAA,qCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,yCAA2C;AAAlC,kGAAA,OAAO,OAAA;AAAE,gGAAA,KAAK,OAAA;AACvB,gFAAwE;AAA/D,qHAAA,aAAa,OAAA;AAQtB,
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":";;;AAAA,qCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,yCAA2C;AAAlC,kGAAA,OAAO,OAAA;AAAE,gGAAA,KAAK,OAAA;AACvB,gFAAwE;AAA/D,qHAAA,aAAa,OAAA;AAQtB,yDAAyD;AAAhD,uHAAA,oBAAoB,OAAA","sourcesContent":["export { Toast } from './Toast';\nexport { Toaster, toast } from './Toaster';\nexport { ToastSeverity } from '@metamask-previews/design-system-shared';\nexport type {\n ToastOptions,\n ToastProps,\n ToastIconProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\nexport { TOAST_BOTTOM_PADDING } from './Toast.constants';\n"]}
|
|
@@ -2,5 +2,5 @@ export { Toast } from "./Toast.cjs";
|
|
|
2
2
|
export { Toaster, toast } from "./Toaster.cjs";
|
|
3
3
|
export { ToastSeverity } from "@metamask-previews/design-system-shared";
|
|
4
4
|
export type { ToastOptions, ToastProps, ToastIconProps, ToasterProps, ToasterRef, } from "./Toast.types.cjs";
|
|
5
|
-
export {
|
|
5
|
+
export { TOAST_BOTTOM_PADDING } from "./Toast.constants.cjs";
|
|
6
6
|
//# sourceMappingURL=index.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,YAAY,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,UAAU,GACX,0BAAsB;AACvB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,YAAY,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,UAAU,GACX,0BAAsB;AACvB,OAAO,EAAE,oBAAoB,EAAE,8BAA0B"}
|
|
@@ -2,5 +2,5 @@ export { Toast } from "./Toast.mjs";
|
|
|
2
2
|
export { Toaster, toast } from "./Toaster.mjs";
|
|
3
3
|
export { ToastSeverity } from "@metamask-previews/design-system-shared";
|
|
4
4
|
export type { ToastOptions, ToastProps, ToastIconProps, ToasterProps, ToasterRef, } from "./Toast.types.mjs";
|
|
5
|
-
export {
|
|
5
|
+
export { TOAST_BOTTOM_PADDING } from "./Toast.constants.mjs";
|
|
6
6
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,YAAY,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,UAAU,GACX,0BAAsB;AACvB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,OAAO,EAAE,aAAa,EAAE,gDAAgD;AACxE,YAAY,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,UAAU,GACX,0BAAsB;AACvB,OAAO,EAAE,oBAAoB,EAAE,8BAA0B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { Toast } from "./Toast.mjs";
|
|
2
2
|
export { Toaster, toast } from "./Toaster.mjs";
|
|
3
3
|
export { ToastSeverity } from "@metamask-previews/design-system-shared";
|
|
4
|
-
export {
|
|
4
|
+
export { TOAST_BOTTOM_PADDING } from "./Toast.constants.mjs";
|
|
5
5
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAQxE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAQxE,OAAO,EAAE,oBAAoB,EAAE,8BAA0B","sourcesContent":["export { Toast } from './Toast';\nexport { Toaster, toast } from './Toaster';\nexport { ToastSeverity } from '@metamask-previews/design-system-shared';\nexport type {\n ToastOptions,\n ToastProps,\n ToastIconProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\nexport { TOAST_BOTTOM_PADDING } from './Toast.constants';\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -14,9 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
//
|
|
18
|
-
//
|
|
19
|
-
// in
|
|
20
|
-
|
|
17
|
+
// Package entry re-exports the public component API. Keep this file free of side-effect
|
|
18
|
+
// imports (e.g. polyfills): they mark the barrel as side-effectful, which causes Vite/Rolldown
|
|
19
|
+
// to eagerly initialize unrelated modules in Storybook static builds and can race on cold CDN
|
|
20
|
+
// loads (React error #130). TextEncoder is provided natively by Hermes (RN >= 0.76).
|
|
21
21
|
__exportStar(require("./components/index.cjs"), exports);
|
|
22
22
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wFAAwF;AACxF,+FAA+F;AAC/F,8FAA8F;AAC9F,qFAAqF;AACrF,yDAA6B","sourcesContent":["// Package entry re-exports the public component API. Keep this file free of side-effect\n// imports (e.g. polyfills): they mark the barrel as side-effectful, which causes Vite/Rolldown\n// to eagerly initialize unrelated modules in Storybook static builds and can race on cold CDN\n// loads (React error #130). TextEncoder is provided natively by Hermes (RN >= 0.76).\nexport * from './components';\n"]}
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,uCAA6B"}
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,uCAA6B"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
// in
|
|
4
|
-
|
|
1
|
+
// Package entry re-exports the public component API. Keep this file free of side-effect
|
|
2
|
+
// imports (e.g. polyfills): they mark the barrel as side-effectful, which causes Vite/Rolldown
|
|
3
|
+
// to eagerly initialize unrelated modules in Storybook static builds and can race on cold CDN
|
|
4
|
+
// loads (React error #130). TextEncoder is provided natively by Hermes (RN >= 0.76).
|
|
5
5
|
export * from "./components/index.mjs";
|
|
6
6
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,+FAA+F;AAC/F,8FAA8F;AAC9F,qFAAqF;AACrF,uCAA6B","sourcesContent":["// Package entry re-exports the public component API. Keep this file free of side-effect\n// imports (e.g. polyfills): they mark the barrel as side-effectful, which causes Vite/Rolldown\n// to eagerly initialize unrelated modules in Storybook static builds and can race on cold CDN\n// loads (React error #130). TextEncoder is provided natively by Hermes (RN >= 0.76).\nexport * from './components';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask-previews/design-system-react-native",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.33.0-preview.b0de9209",
|
|
4
4
|
"description": "Design System React Native",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -47,8 +47,7 @@
|
|
|
47
47
|
"test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@metamask-previews/design-system-shared": "0.
|
|
51
|
-
"fast-text-encoding": "^1.0.6",
|
|
50
|
+
"@metamask-previews/design-system-shared": "0.27.0-preview.b0de9209",
|
|
52
51
|
"react-native-jazzicon": "^0.1.2"
|
|
53
52
|
},
|
|
54
53
|
"devDependencies": {
|
|
@@ -58,17 +57,16 @@
|
|
|
58
57
|
"@babel/preset-typescript": "^7.23.3",
|
|
59
58
|
"@figma/code-connect": "^1.4.8",
|
|
60
59
|
"@gorhom/bottom-sheet": "^5.1.3",
|
|
61
|
-
"@metamask-previews/design-system-twrnc-preset": "0.
|
|
62
|
-
"@metamask-previews/design-tokens": "8.
|
|
60
|
+
"@metamask-previews/design-system-twrnc-preset": "0.7.0-preview.b0de9209",
|
|
61
|
+
"@metamask-previews/design-tokens": "8.7.0-preview.b0de9209",
|
|
63
62
|
"@metamask/auto-changelog": "^6.1.1",
|
|
64
63
|
"@metamask/utils": "^11.11.0",
|
|
65
64
|
"@react-native/babel-preset": "0.81.5",
|
|
66
65
|
"@react-native/typescript-config": "0.81.5",
|
|
67
|
-
"@storybook/react-native": "10.4.
|
|
66
|
+
"@storybook/react-native": "10.4.7",
|
|
68
67
|
"@testing-library/react-native": "^13.3.3",
|
|
69
68
|
"@ts-bridge/cli": "^0.6.3",
|
|
70
69
|
"@types/babel__preset-env": "^7",
|
|
71
|
-
"@types/fast-text-encoding": "^1",
|
|
72
70
|
"@types/jest": "^27.4.1",
|
|
73
71
|
"@types/node": "^16.18.54",
|
|
74
72
|
"@types/react": "^19.1.0",
|
|
@@ -85,13 +83,13 @@
|
|
|
85
83
|
"react-native-svg-transformer": "^1.5.3",
|
|
86
84
|
"react-native-worklets": "patch:react-native-worklets@npm%3A0.5.1#~/.yarn/patches/react-native-worklets-npm-0.5.1-dcf1422a19.patch",
|
|
87
85
|
"react-test-renderer": "19.1.0",
|
|
88
|
-
"storybook": "10.4.
|
|
86
|
+
"storybook": "10.4.6",
|
|
89
87
|
"ts-jest": "^29.2.5",
|
|
90
88
|
"tsx": "^4.20.6",
|
|
91
89
|
"typescript": "~5.2.2"
|
|
92
90
|
},
|
|
93
91
|
"peerDependencies": {
|
|
94
|
-
"@metamask/design-system-twrnc-preset": "^0.
|
|
92
|
+
"@metamask/design-system-twrnc-preset": "^0.7.0",
|
|
95
93
|
"@metamask/design-tokens": "^8.2.0",
|
|
96
94
|
"@metamask/utils": "^11.11.0",
|
|
97
95
|
"lodash": "^4.17.21",
|