@metamask-previews/design-system-react-native 0.30.2-preview.f77a5d5 → 0.32.0-preview.8308740
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 +31 -1
- package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs +9 -8
- 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 +12 -11
- package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs.map +1 -1
- package/dist/components/ButtonSemantic/index.cjs +3 -1
- package/dist/components/ButtonSemantic/index.cjs.map +1 -1
- package/dist/components/ButtonSemantic/index.d.cts +1 -0
- package/dist/components/ButtonSemantic/index.d.cts.map +1 -1
- package/dist/components/ButtonSemantic/index.d.mts +1 -0
- package/dist/components/ButtonSemantic/index.d.mts.map +1 -1
- package/dist/components/ButtonSemantic/index.mjs +1 -0
- package/dist/components/ButtonSemantic/index.mjs.map +1 -1
- package/dist/components/FilterButton/FilterButton.cjs +1 -1
- package/dist/components/FilterButton/FilterButton.cjs.map +1 -1
- package/dist/components/FilterButton/FilterButton.mjs +2 -2
- package/dist/components/FilterButton/FilterButton.mjs.map +1 -1
- package/dist/components/FilterButton/index.cjs +2 -1
- package/dist/components/FilterButton/index.cjs.map +1 -1
- package/dist/components/FilterButton/index.d.cts +1 -1
- package/dist/components/FilterButton/index.d.cts.map +1 -1
- package/dist/components/FilterButton/index.d.mts +1 -1
- package/dist/components/FilterButton/index.d.mts.map +1 -1
- package/dist/components/FilterButton/index.mjs +1 -1
- package/dist/components/FilterButton/index.mjs.map +1 -1
- package/dist/components/Icon/Icon.assets.cjs +2 -0
- package/dist/components/Icon/Icon.assets.cjs.map +1 -1
- package/dist/components/Icon/Icon.assets.d.cts.map +1 -1
- package/dist/components/Icon/Icon.assets.d.mts.map +1 -1
- package/dist/components/Icon/Icon.assets.mjs +2 -0
- package/dist/components/Icon/Icon.assets.mjs.map +1 -1
- package/dist/components/Icon/assets/hard-drive.svg +1 -0
- package/dist/components/SectionHeader/SectionHeader.cjs +25 -14
- package/dist/components/SectionHeader/SectionHeader.cjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.cts +3 -3
- package/dist/components/SectionHeader/SectionHeader.d.cts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.mts +3 -3
- package/dist/components/SectionHeader/SectionHeader.d.mts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.mjs +25 -14
- package/dist/components/SectionHeader/SectionHeader.mjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.cjs +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.cjs +3 -3
- package/dist/components/SegmentedControl/SegmentedControl.constants.cjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.cts +3 -3
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.cts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.mts +3 -3
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.mts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.mjs +4 -4
- package/dist/components/SegmentedControl/SegmentedControl.constants.mjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.mjs +2 -2
- package/dist/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/components/SegmentedControl/index.cjs +3 -1
- package/dist/components/SegmentedControl/index.cjs.map +1 -1
- package/dist/components/SegmentedControl/index.d.cts +1 -0
- package/dist/components/SegmentedControl/index.d.cts.map +1 -1
- package/dist/components/SegmentedControl/index.d.mts +1 -0
- package/dist/components/SegmentedControl/index.d.mts.map +1 -1
- package/dist/components/SegmentedControl/index.mjs +1 -0
- package/dist/components/SegmentedControl/index.mjs.map +1 -1
- package/dist/components/Toast/Toaster.cjs +3 -7
- 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 +4 -8
- package/dist/components/Toast/Toaster.mjs.map +1 -1
- package/dist/components/index.cjs +5 -2
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +3 -3
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +3 -3
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +3 -3
- package/dist/components/index.mjs.map +1 -1
- package/dist/index.cjs +0 -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 +0 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +11 -14
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.32.0]
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Added `HardDrive` to `IconName` ([#1302](https://github.com/MetaMask/metamask-design-system/pull/1302))
|
|
15
|
+
|
|
16
|
+
## [0.31.0]
|
|
17
|
+
|
|
18
|
+
### Added
|
|
19
|
+
|
|
20
|
+
- Added `children` prop to `SectionHeader` for supporting content below the title row ([#1267](https://github.com/MetaMask/metamask-design-system/pull/1267))
|
|
21
|
+
- Added `BannerAlertSeverity.Neutral` for informational banners without semantic severity coloring ([#1287](https://github.com/MetaMask/metamask-design-system/pull/1287))
|
|
22
|
+
- Added `ButtonIconSize.Xs` (20px button dimension mapping to `IconSize.Sm`) ([#1266](https://github.com/MetaMask/metamask-design-system/pull/1266))
|
|
23
|
+
- Added `FilterButtonSize`, `SegmentedControlSize`, and `ButtonSemanticSize` as component-scoped size aliases for `FilterButton`, `SegmentedControl`, and `ButtonSemantic` ([#1297](https://github.com/MetaMask/metamask-design-system/pull/1297))
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- **BREAKING:** Dropped Node.js 20 and 22 support for the release line; consumers must run Node 24 or newer ([#1263](https://github.com/MetaMask/metamask-design-system/pull/1263))
|
|
28
|
+
- **BREAKING:** Removed `titleStartAccessory` and `titleEndAccessory` from `TitleAlert` to align with the Figma component ([#1268](https://github.com/MetaMask/metamask-design-system/pull/1268))
|
|
29
|
+
- See [Migration Guide](./MIGRATION.md#titlealert-title-accessories-removed)
|
|
30
|
+
- Updated `SectionHeader` so `children` render full-width below the header row; default start and end icon size changed from `Md` to `Sm` ([#1298](https://github.com/MetaMask/metamask-design-system/pull/1298))
|
|
31
|
+
- Updated `BannerBase` spacing, padding, action button margin, and close button alignment to match Figma ([#1269](https://github.com/MetaMask/metamask-design-system/pull/1269))
|
|
32
|
+
- Updated `BannerAlert` to remove the severity-colored left border and inherit `BannerBase` default padding ([#1270](https://github.com/MetaMask/metamask-design-system/pull/1270))
|
|
33
|
+
- Updated `MainActionButtons` vertical padding from 16px to 12px to match Figma ([#1246](https://github.com/MetaMask/metamask-design-system/pull/1246))
|
|
34
|
+
- Updated `Tag` neutral variant default icon and text colors to `alternative` ([#1294](https://github.com/MetaMask/metamask-design-system/pull/1294))
|
|
35
|
+
- Updated `BottomSheetHeader` default horizontal padding to match Figma and align with `HeaderStandard` ([#1264](https://github.com/MetaMask/metamask-design-system/pull/1264))
|
|
36
|
+
- Updated `BottomSheetFooter` container padding to 16px horizontal and 0px vertical ([#1265](https://github.com/MetaMask/metamask-design-system/pull/1265))
|
|
37
|
+
|
|
10
38
|
## [0.30.2]
|
|
11
39
|
|
|
12
40
|
### Fixed
|
|
@@ -528,7 +556,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
528
556
|
- Full TypeScript support with type definitions and enums
|
|
529
557
|
- React Native integration with TWRNC preset support
|
|
530
558
|
|
|
531
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.
|
|
559
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.32.0...HEAD
|
|
560
|
+
[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
|
+
[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
|
|
532
562
|
[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
|
|
533
563
|
[0.30.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.0...@metamask/design-system-react-native@0.30.1
|
|
534
564
|
[0.30.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.29.0...@metamask/design-system-react-native@0.30.0
|
|
@@ -32,15 +32,15 @@ const react_native_1 = require("react-native");
|
|
|
32
32
|
const react_native_gesture_handler_1 = require("react-native-gesture-handler");
|
|
33
33
|
const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
|
|
34
34
|
const react_native_safe_area_context_1 = require("react-native-safe-area-context");
|
|
35
|
-
const react_native_worklets_1 = require("react-native-worklets");
|
|
36
35
|
// Internal dependencies.
|
|
37
36
|
const BottomSheetDialog_constants_1 = require("./BottomSheetDialog.constants.cjs");
|
|
38
37
|
exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
|
|
39
38
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
40
39
|
const currentTheme = (0, design_system_twrnc_preset_1.useTheme)();
|
|
40
|
+
const isPureBlack = (0, design_system_twrnc_preset_1.usePureBlack)();
|
|
41
41
|
const shadowLg = currentTheme === design_system_twrnc_preset_1.Theme.Light
|
|
42
42
|
? design_tokens_1.lightTheme.shadows.size.lg
|
|
43
|
-
: design_tokens_1.
|
|
43
|
+
: (0, design_tokens_1.resolveDarkTheme)(isPureBlack).shadows.size.lg;
|
|
44
44
|
const { top: screenTopPadding, bottom: screenBottomPadding } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
|
|
45
45
|
const { y: frameY, height: screenHeight } = (0, react_native_safe_area_context_1.useSafeAreaFrame)();
|
|
46
46
|
const maxSheetHeight = screenHeight - screenTopPadding;
|
|
@@ -59,9 +59,9 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
59
59
|
}, [onClose]);
|
|
60
60
|
const onCloseDialog = (0, react_1.useCallback)((callback) => {
|
|
61
61
|
currentYOffset.value = (0, react_native_reanimated_1.withTiming)(bottomOfDialogYValue.value, { duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
|
|
62
|
-
(0,
|
|
62
|
+
(0, react_native_reanimated_1.runOnJS)(onCloseCB)();
|
|
63
63
|
if (callback) {
|
|
64
|
-
(0,
|
|
64
|
+
(0, react_native_reanimated_1.runOnJS)(callback)();
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
67
|
// Ref values do not affect deps.
|
|
@@ -132,7 +132,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
132
132
|
}
|
|
133
133
|
const isDismissed = finalYOffset === bottomOfDialogYValue.value;
|
|
134
134
|
if (isDismissed) {
|
|
135
|
-
(0,
|
|
135
|
+
(0, react_native_reanimated_1.runOnJS)(onCloseDialog)();
|
|
136
136
|
}
|
|
137
137
|
else {
|
|
138
138
|
// Only animate dialog to a certain Y position instead
|
|
@@ -158,9 +158,9 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
158
158
|
currentYOffset.value = (0, react_native_reanimated_1.withTiming)(topOfDialogYValue.value, {
|
|
159
159
|
duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
|
|
160
160
|
}, () => {
|
|
161
|
-
(0,
|
|
161
|
+
(0, react_native_reanimated_1.runOnJS)(onOpenCB)();
|
|
162
162
|
if (callback) {
|
|
163
|
-
(0,
|
|
163
|
+
(0, react_native_reanimated_1.runOnJS)(callback)();
|
|
164
164
|
}
|
|
165
165
|
});
|
|
166
166
|
};
|
|
@@ -188,7 +188,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
188
188
|
],
|
|
189
189
|
}), []);
|
|
190
190
|
const sheetStyle = (0, react_1.useMemo)(() => [
|
|
191
|
-
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),
|
|
192
192
|
{
|
|
193
193
|
maxHeight: maxSheetHeight,
|
|
194
194
|
paddingBottom: react_native_1.Platform.select({
|
|
@@ -202,6 +202,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
|
|
|
202
202
|
style,
|
|
203
203
|
], [
|
|
204
204
|
tw,
|
|
205
|
+
isPureBlack,
|
|
205
206
|
maxSheetHeight,
|
|
206
207
|
screenBottomPadding,
|
|
207
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 useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\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 scheduleOnRN(onCloseCB);\n if (callback) {\n scheduleOnRN(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 scheduleOnRN(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 scheduleOnRN(onOpenCB);\n if (callback) {\n scheduleOnRN(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,25 +4,25 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { Theme, useTailwind, useTheme } from "@metamask-previews/design-system-twrnc-preset";
|
|
8
|
-
import { lightTheme,
|
|
7
|
+
import { Theme, usePureBlack, useTailwind, useTheme } from "@metamask-previews/design-system-twrnc-preset";
|
|
8
|
+
import { lightTheme, resolveDarkTheme } from "@metamask-previews/design-tokens";
|
|
9
9
|
import $lodash from "lodash";
|
|
10
10
|
const { debounce } = $lodash;
|
|
11
11
|
import $React, { forwardRef, useCallback, useEffect, useMemo, useRef, useImperativeHandle } from "react";
|
|
12
12
|
const React = $importDefault($React);
|
|
13
13
|
import { View, Platform, KeyboardAvoidingView } from "react-native";
|
|
14
14
|
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
15
|
-
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
15
|
+
import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
16
16
|
import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context";
|
|
17
|
-
import { scheduleOnRN } from "react-native-worklets";
|
|
18
17
|
// Internal dependencies.
|
|
19
18
|
import { DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION, DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD, DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION } from "./BottomSheetDialog.constants.mjs";
|
|
20
19
|
export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
|
|
21
20
|
const tw = useTailwind();
|
|
22
21
|
const currentTheme = useTheme();
|
|
22
|
+
const isPureBlack = usePureBlack();
|
|
23
23
|
const shadowLg = currentTheme === Theme.Light
|
|
24
24
|
? lightTheme.shadows.size.lg
|
|
25
|
-
:
|
|
25
|
+
: resolveDarkTheme(isPureBlack).shadows.size.lg;
|
|
26
26
|
const { top: screenTopPadding, bottom: screenBottomPadding } = useSafeAreaInsets();
|
|
27
27
|
const { y: frameY, height: screenHeight } = useSafeAreaFrame();
|
|
28
28
|
const maxSheetHeight = screenHeight - screenTopPadding;
|
|
@@ -41,9 +41,9 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
41
41
|
}, [onClose]);
|
|
42
42
|
const onCloseDialog = useCallback((callback) => {
|
|
43
43
|
currentYOffset.value = withTiming(bottomOfDialogYValue.value, { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
|
|
44
|
-
|
|
44
|
+
runOnJS(onCloseCB)();
|
|
45
45
|
if (callback) {
|
|
46
|
-
|
|
46
|
+
runOnJS(callback)();
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
49
|
// Ref values do not affect deps.
|
|
@@ -114,7 +114,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
114
114
|
}
|
|
115
115
|
const isDismissed = finalYOffset === bottomOfDialogYValue.value;
|
|
116
116
|
if (isDismissed) {
|
|
117
|
-
|
|
117
|
+
runOnJS(onCloseDialog)();
|
|
118
118
|
}
|
|
119
119
|
else {
|
|
120
120
|
// Only animate dialog to a certain Y position instead
|
|
@@ -140,9 +140,9 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
140
140
|
currentYOffset.value = withTiming(topOfDialogYValue.value, {
|
|
141
141
|
duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
|
|
142
142
|
}, () => {
|
|
143
|
-
|
|
143
|
+
runOnJS(onOpenCB)();
|
|
144
144
|
if (callback) {
|
|
145
|
-
|
|
145
|
+
runOnJS(callback)();
|
|
146
146
|
}
|
|
147
147
|
});
|
|
148
148
|
};
|
|
@@ -170,7 +170,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
170
170
|
],
|
|
171
171
|
}), []);
|
|
172
172
|
const sheetStyle = useMemo(() => [
|
|
173
|
-
tw.style('bg-default rounded-t-3xl overflow-hidden border border-muted', twClassName),
|
|
173
|
+
tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted', twClassName),
|
|
174
174
|
{
|
|
175
175
|
maxHeight: maxSheetHeight,
|
|
176
176
|
paddingBottom: Platform.select({
|
|
@@ -184,6 +184,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
|
|
|
184
184
|
style,
|
|
185
185
|
], [
|
|
186
186
|
tw,
|
|
187
|
+
isPureBlack,
|
|
187
188
|
maxSheetHeight,
|
|
188
189
|
screenBottomPadding,
|
|
189
190
|
isFullscreen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACT,sDAAsD;AACvD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,yCAAyC;;;AAEzE,OAAO,QAAO,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,mBAAmB,EACpB,cAAc;;AACf,OAAO,EAEL,IAAI,EACJ,QAAQ,EACR,oBAAoB,EACrB,qBAAqB;AACtB,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,qCAAqC;AACxE,OAAO,QAAQ,EAAE,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,EACX,gCAAgC;AACjC,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,8BAA8B;AAErD,yBAAyB;AACzB,OAAO,EACL,0CAA0C,EAC1C,0CAA0C,EAC1C,iDAAiD,EAClD,0CAAsC;AAMvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAIzC,CACE,EACE,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,IAAI,EACrB,2BAA2B,GAAG,IAAI,EAClC,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAChC,MAAM,QAAQ,GACZ,YAAY,KAAK,KAAK,CAAC,KAAK;QAC1B,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAC5B,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;IAEhC,MAAM,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAC1D,iBAAiB,EAAE,CAAC;IACtB,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE/D,MAAM,cAAc,GAAG,YAAY,GAAG,gBAAgB,CAAC;IACvD,iDAAiD;IACjD,sEAAsE;IACtE,MAAM,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,iBAAiB,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,oBAAoB,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,QAAqB,EAAE,EAAE;QACxB,cAAc,CAAC,KAAK,GAAG,UAAU,CAC/B,oBAAoB,CAAC,KAAK,EAC1B,EAAE,QAAQ,EAAE,0CAA0C,EAAE,EACxD,GAAG,EAAE;YACH,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,IAAI,QAAQ,EAAE;gBACZ,YAAY,CAAC,QAAQ,CAAC,CAAC;aACxB;QACH,CAAC,CACF,CAAC;QACF,iCAAiC;IACnC,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,0EAA0E;QAC1E,8EAA8E;QAC9E,+EAA+E;QAC/E,6EAA6E;QAC7E,4EAA4E;QAC5E,2EAA2E;QAC3E,uEAAuE;QACvE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;aAC1B,OAAO,CAAC,cAAc,CAAC;aACvB,OAAO,CAAC,GAAG,EAAE;YACZ,SAAS,CAAC;YAEV,gDAAgD;YAChD,mBAAmB,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;QACnD,CAAC,CAAC;aACD,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,SAAS,CAAC;YAEV,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;YAC/B,cAAc,CAAC,KAAK,GAAG,mBAAmB,CAAC,KAAK,GAAG,YAAY,CAAC;YAChE,gFAAgF;YAChF,uEAAuE;YACvE,sCAAsC;YACtC,IAAI,cAAc,CAAC,KAAK,IAAI,oBAAoB,CAAC,KAAK,EAAE;gBACtD,cAAc,CAAC,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC;aACnD;YACD,0EAA0E;YAC1E,oEAAoE;YACpE,mCAAmC;YACnC,IAAI,cAAc,CAAC,KAAK,IAAI,iBAAiB,CAAC,KAAK,EAAE;gBACnD,cAAc,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC;aAChD;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,SAAS,CAAC;YAEV,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;YAC1C,uFAAuF;YACvF,IAAI,YAAoB,CAAC;YACzB,oCAAoC;YACpC,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,GAAG,YAAY,CAAC;YAC9D,kEAAkE;YAClE,yCAAyC;YACzC,MAAM,uBAAuB,GAC3B,YAAY;gBACZ,oBAAoB,CAAC,KAAK;oBACxB,0CAA0C,CAAC;YAC/C,8FAA8F;YAC9F,MAAM,wBAAwB,GAC5B,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;gBACnB,iDAAiD,CAAC;YACpD,MAAM,iBAAiB,GAAG,SAAS,GAAG,CAAC,CAAC;YAExC,qBAAqB;YACrB,IAAI,wBAAwB,EAAE;gBAC5B,6BAA6B;gBAC7B,IAAI,iBAAiB,EAAE;oBACrB,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC;iBAC3C;qBAAM;oBACL,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC;iBACxC;aACF;iBAAM,IAAI,uBAAuB,EAAE;gBAClC,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC;aAC3C;iBAAM;gBACL,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC;aACxC;YAED,MAAM,WAAW,GAAG,YAAY,KAAK,oBAAoB,CAAC,KAAK,CAAC;YAEhE,IAAI,WAAW,EAAE;gBACf,YAAY,CAAC,aAAa,CAAC,CAAC;aAC7B;iBAAM;gBACL,sDAAsD;gBACtD,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,YAAY,EAAE;oBAC9C,QAAQ,EAAE,0CAA0C;iBACrD,CAAC,CAAC;aACJ;QACH,CAAC,CAAC,CAAC;QAEL,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE;QACD,cAAc;QACd,cAAc;QACd,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;QACjB,aAAa;KACd,CAAC,CAAC;IAEH,sCAAsC;IACtC,MAAM,YAAY,GAAG,CAAC,QAAqB,EAAE,EAAE;QAC7C,0EAA0E;QAC1E,cAAc,CAAC,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC;QAClD,sEAAsE;QACtE,cAAc,CAAC,KAAK,GAAG,UAAU,CAC/B,iBAAiB,CAAC,KAAK,EACvB;YACE,QAAQ,EAAE,0CAA0C;SACrD,EACD,GAAG,EAAE;YACH,YAAY,CAAC,QAAQ,CAAC,CAAC;YACvB,IAAI,QAAQ,EAAE;gBACZ,YAAY,CAAC,QAAQ,CAAC,CAAC;aACxB;QACH,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,OAAO;IACpC,iGAAiG;IACjG,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACtD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,SAAS,CACP,GAAG,EAAE;IACH,uDAAuD;IACvD,iFAAiF;IACjF,wEAAwE;IACxE,sBAAsB,CAAC,MAAM,EAAE,EACjC,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CACnC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAoB,EAAE,EAAE;QACjD,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;QACxC,oBAAoB,CAAC,KAAK,GAAG,MAAM,CAAC;QAEpC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,YAAY,EAAE,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE;YACT;gBACE,UAAU,EAAE,cAAc,CAAC,KAAK;aACjC;SACF;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC;QACJ,EAAE,CAAC,KAAK,CACN,8DAA8D,EAC9D,WAAW,CACZ;QACD;YACE,SAAS,EAAE,cAAc;YACzB,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC;gBAC7B,GAAG,EAAE,mBAAmB;gBACxB,KAAK,EAAE,mBAAmB;gBAC1B,OAAO,EAAE,mBAAmB,GAAG,EAAE;aAClC,CAAC;YACF,GAAG,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;YAC/C,GAAG,QAAQ;SACZ;QACD,KAAK;KACN,EAED;QACE,EAAE;QACF,cAAc;QACd,mBAAmB;QACnB,YAAY;QACZ,QAAQ;QACR,KAAK;QACL,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,GAAG,UAAU,EAAE,kBAAkB,CAAC,EAEzC,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,YAAY;QACZ,aAAa;KACd,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC,CAC/C,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxD,sBAAsB,CAAC,CACrB,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CACtD,CACD,OAAO,CAAC,CAAC,2BAA2B,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CACvC;UAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAC5B,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAE1B;YAAA,CAAC,cAAc,IAAI,CACjB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CACrD;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC,EAC/D;cAAA,EAAE,IAAI,CAAC,CACR,CACD;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,oBAAoB,CAAC,CACxB,CAAC;AACJ,CAAC,CACF,CAAC","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 useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\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 scheduleOnRN(onCloseCB);\n if (callback) {\n scheduleOnRN(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 scheduleOnRN(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 scheduleOnRN(onOpenCB);\n if (callback) {\n scheduleOnRN(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,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ButtonSemanticSeverity = exports.ButtonSemantic = void 0;
|
|
3
|
+
exports.ButtonSemanticSeverity = exports.ButtonSemantic = exports.ButtonSemanticSize = void 0;
|
|
4
|
+
var design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "ButtonSemanticSize", { enumerable: true, get: function () { return design_system_shared_1.ButtonSemanticSize; } });
|
|
4
6
|
var ButtonSemantic_1 = require("./ButtonSemantic.cjs");
|
|
5
7
|
Object.defineProperty(exports, "ButtonSemantic", { enumerable: true, get: function () { return ButtonSemantic_1.ButtonSemantic; } });
|
|
6
8
|
var ButtonSemantic_types_1 = require("./ButtonSemantic.types.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,gFAA6E;AAApE,0HAAA,kBAAkB,OAAA;AAC3B,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemanticSize } from '@metamask-previews/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { ButtonSemanticSize } from "@metamask-previews/design-system-shared";
|
|
1
2
|
export { ButtonSemantic } from "./ButtonSemantic.cjs";
|
|
2
3
|
export { ButtonSemanticSeverity } from "./ButtonSemantic.types.cjs";
|
|
3
4
|
export type { ButtonSemanticProps } from "./ButtonSemantic.types.cjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,gDAAgD;AAC7E,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { ButtonSemanticSize } from "@metamask-previews/design-system-shared";
|
|
1
2
|
export { ButtonSemantic } from "./ButtonSemantic.mjs";
|
|
2
3
|
export { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
|
|
3
4
|
export type { ButtonSemanticProps } from "./ButtonSemantic.types.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,gDAAgD;AAC7E,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,gDAAgD;AAC7E,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemanticSize } from '@metamask-previews/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
@@ -33,7 +33,7 @@ const FilterButton = ({ children, textProps, startIconProps, endIconProps, value
|
|
|
33
33
|
const filterButtonGroup = (0, react_1.useContext)(design_system_shared_1.FilterButtonGroupContext);
|
|
34
34
|
const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
|
|
35
35
|
const effectiveVariant = variant ?? filterButtonGroup?.variant ?? design_system_shared_1.FilterButtonVariant.Primary;
|
|
36
|
-
const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.
|
|
36
|
+
const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.FilterButtonSize.Sm;
|
|
37
37
|
const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
|
|
38
38
|
const effectiveIsSelected = usesGroupSelection
|
|
39
39
|
? filterButtonGroup.value === value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAIiD;AACjD,+CAA0C;AAG1C,wDAA2C;AAC3C,4CAAoC;AACpC,4CAAoC;AAI7B,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,OAAO,EACP,GAAG,cAAc,EACC,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,+CAAwB,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;IAE7E,MAAM,gBAAgB,GACpB,OAAO,IAAI,iBAAiB,EAAE,OAAO,IAAI,0CAAmB,CAAC,OAAO,CAAC;IAEvE,MAAM,aAAa,GAAG,IAAI,IAAI,iBAAiB,EAAE,IAAI,IAAI,
|
|
1
|
+
{"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
|
|
@@ -4,7 +4,7 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import {
|
|
7
|
+
import { FilterButtonSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask-previews/design-system-shared";
|
|
8
8
|
import $React, { useContext } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { ButtonBase } from "../ButtonBase/index.mjs";
|
|
@@ -14,7 +14,7 @@ export const FilterButton = ({ children, textProps, startIconProps, endIconProps
|
|
|
14
14
|
const filterButtonGroup = useContext(FilterButtonGroupContext);
|
|
15
15
|
const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
|
|
16
16
|
const effectiveVariant = variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;
|
|
17
|
-
const effectiveSize = size ?? filterButtonGroup?.size ??
|
|
17
|
+
const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;
|
|
18
18
|
const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
|
|
19
19
|
const effectiveIsSelected = usesGroupSelection
|
|
20
20
|
? filterButtonGroup.value === value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FilterButton = exports.FilterButtonVariant = void 0;
|
|
3
|
+
exports.FilterButton = exports.FilterButtonVariant = exports.FilterButtonSize = void 0;
|
|
4
4
|
var design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "FilterButtonSize", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonSize; } });
|
|
5
6
|
Object.defineProperty(exports, "FilterButtonVariant", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonVariant; } });
|
|
6
7
|
var FilterButton_1 = require("./FilterButton.cjs");
|
|
7
8
|
Object.defineProperty(exports, "FilterButton", { enumerable: true, get: function () { return FilterButton_1.FilterButton; } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,wHAAA,gBAAgB,OAAA;AAChB,2HAAA,mBAAmB,OAAA;AAErB,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
|
|
1
|
+
export { FilterButtonSize, FilterButtonVariant, } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export { FilterButton } from "./FilterButton.cjs";
|
|
3
3
|
export type { FilterButtonProps } from "./FilterButton.types.cjs";
|
|
4
4
|
//# sourceMappingURL=index.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
|
|
1
|
+
export { FilterButtonSize, FilterButtonVariant, } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export { FilterButton } from "./FilterButton.mjs";
|
|
3
3
|
export type { FilterButtonProps } from "./FilterButton.types.mjs";
|
|
4
4
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACpB,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
|