@umituz/react-native-bottom-sheet 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,16 +1,15 @@
1
1
  {
2
2
  "name": "@umituz/react-native-bottom-sheet",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
5
- "main": "./lib/index.js",
6
- "types": "./lib/index.d.ts",
5
+ "main": "./src/index.ts",
6
+ "types": "./src/index.ts",
7
7
  "scripts": {
8
8
  "build": "tsc",
9
9
  "typecheck": "tsc --noEmit",
10
10
  "lint": "tsc --noEmit",
11
11
  "clean": "rm -rf lib",
12
12
  "prebuild": "npm run clean",
13
- "prepublishOnly": "npm run build",
14
13
  "version:patch": "npm version patch -m 'chore: release v%s'",
15
14
  "version:minor": "npm version minor -m 'chore: release v%s'",
16
15
  "version:major": "npm version major -m 'chore: release v%s'"
@@ -32,6 +31,7 @@
32
31
  "peerDependencies": {
33
32
  "@gorhom/bottom-sheet": ">=5.0.0",
34
33
  "@umituz/react-native-design-system": "*",
34
+ "@umituz/react-native-theme": "*",
35
35
  "react": ">=18.2.0",
36
36
  "react-native": ">=0.74.0",
37
37
  "react-native-gesture-handler": ">=2.16.0",
@@ -39,23 +39,24 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@gorhom/bottom-sheet": "^5",
42
+ "@react-native-async-storage/async-storage": "^2.2.0",
42
43
  "@types/react": "^18.2.45",
43
44
  "@types/react-native": "^0.73.0",
44
45
  "@umituz/react-native-design-system": "latest",
46
+ "@umituz/react-native-theme": "latest",
45
47
  "react": "^18.2.0",
46
48
  "react-native": "^0.74.0",
47
49
  "react-native-gesture-handler": "~2.16.1",
48
50
  "react-native-reanimated": "^3.10.1",
49
- "typescript": "^5.3.3"
51
+ "typescript": "^5.3.3",
52
+ "zustand": "^5.0.8"
50
53
  },
51
54
  "publishConfig": {
52
55
  "access": "public"
53
56
  },
54
57
  "files": [
55
- "lib",
56
58
  "src",
57
59
  "README.md",
58
60
  "LICENSE"
59
61
  ]
60
62
  }
61
-
package/src/index.ts CHANGED
@@ -90,9 +90,21 @@ export {
90
90
  type BottomSheetProps,
91
91
  type BottomSheetRef,
92
92
  } from './presentation/components/BottomSheet';
93
+ export {
94
+ BottomSheetModal,
95
+ type BottomSheetModalProps,
96
+ type BottomSheetModalRef,
97
+ } from './presentation/components/BottomSheetModal';
93
98
 
94
99
  // Presentation Hooks
95
100
  export {
96
101
  useBottomSheet,
97
102
  type UseBottomSheetReturn,
98
103
  } from './presentation/hooks/useBottomSheet';
104
+ export {
105
+ useBottomSheetModal,
106
+ type UseBottomSheetModalReturn,
107
+ } from './presentation/hooks/useBottomSheetModal';
108
+
109
+ // Re-export BottomSheetModalProvider for convenience
110
+ export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
@@ -36,7 +36,7 @@ import GorhomBottomSheet, {
36
36
  BottomSheetBackdrop,
37
37
  type BottomSheetBackdropProps,
38
38
  } from '@gorhom/bottom-sheet';
39
- import { useAppDesignTokens } from '@umituz/react-native-design-system';
39
+ import { useAppDesignTokens } from '@umituz/react-native-theme';
40
40
  import type {
41
41
  BottomSheetConfig,
42
42
  BottomSheetPreset,
@@ -56,6 +56,7 @@ export interface BottomSheetRef {
56
56
  close: () => void;
57
57
  }
58
58
 
59
+
59
60
  /**
60
61
  * Bottom sheet component props
61
62
  */
@@ -152,6 +153,26 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
152
153
  ref
153
154
  ) => {
154
155
  const tokens = useAppDesignTokens();
156
+ const sheetRef = React.useRef<GorhomBottomSheet>(null);
157
+
158
+ // Expose ref methods
159
+ React.useImperativeHandle(ref, () => ({
160
+ snapToIndex: (index: number) => {
161
+ sheetRef.current?.snapToIndex(index);
162
+ },
163
+ snapToPosition: (position: string | number) => {
164
+ sheetRef.current?.snapToPosition(position);
165
+ },
166
+ expand: () => {
167
+ sheetRef.current?.expand();
168
+ },
169
+ collapse: () => {
170
+ sheetRef.current?.collapse();
171
+ },
172
+ close: () => {
173
+ sheetRef.current?.close();
174
+ },
175
+ }));
155
176
 
156
177
  // Get configuration from preset or custom
157
178
  const config: BottomSheetConfig = useMemo(() => {
@@ -210,8 +231,8 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
210
231
 
211
232
  return (
212
233
  <GorhomBottomSheet
213
- ref={ref as any}
214
- index={config.initialIndex ?? 0}
234
+ ref={sheetRef}
235
+ index={-1}
215
236
  snapPoints={config.snapPoints}
216
237
  enableDynamicSizing={config.enableDynamicSizing}
217
238
  backdropComponent={renderBackdrop}
@@ -0,0 +1,282 @@
1
+ /**
2
+ * BottomSheetModal Component
3
+ *
4
+ * Modal version of bottom sheet using @gorhom/bottom-sheet.
5
+ * Provides a clean, theme-aware API for modal bottom sheets.
6
+ *
7
+ * Features:
8
+ * - Modal presentation (overlays entire screen)
9
+ * - Snap point support (percentage, fixed, dynamic)
10
+ * - Backdrop with tap-to-close
11
+ * - Keyboard handling (interactive, fillParent, extend)
12
+ * - Theme-aware colors
13
+ * - Handle indicator
14
+ * - Pan down to close
15
+ * - Smooth animations with Reanimated v3
16
+ *
17
+ * Usage:
18
+ * ```tsx
19
+ * const { modalRef, present, dismiss } = useBottomSheetModal();
20
+ *
21
+ * <BottomSheetModal
22
+ * ref={modalRef}
23
+ * preset="medium"
24
+ * onDismiss={() => console.log('Dismissed')}
25
+ * >
26
+ * <View>
27
+ * <Text>Modal Content</Text>
28
+ * </View>
29
+ * </BottomSheetModal>
30
+ * ```
31
+ */
32
+
33
+ import React, { forwardRef, useCallback, useMemo } from 'react';
34
+ import { StyleSheet } from 'react-native';
35
+ import {
36
+ BottomSheetModal as GorhomBottomSheetModal,
37
+ BottomSheetView,
38
+ BottomSheetBackdrop,
39
+ type BottomSheetBackdropProps,
40
+ } from '@gorhom/bottom-sheet';
41
+ import { useAppDesignTokens } from '@umituz/react-native-theme';
42
+ import type {
43
+ BottomSheetConfig,
44
+ BottomSheetPreset,
45
+ SnapPoint,
46
+ KeyboardBehavior,
47
+ } from '../../domain/entities/BottomSheet';
48
+ import { BottomSheetUtils } from '../../domain/entities/BottomSheet';
49
+
50
+ /**
51
+ * Bottom sheet modal ref methods
52
+ */
53
+ export interface BottomSheetModalRef {
54
+ present: () => void;
55
+ dismiss: () => void;
56
+ snapToIndex: (index: number) => void;
57
+ snapToPosition: (position: string | number) => void;
58
+ expand: () => void;
59
+ collapse: () => void;
60
+ }
61
+
62
+ /**
63
+ * Bottom sheet modal component props
64
+ */
65
+ export interface BottomSheetModalProps {
66
+ /**
67
+ * Bottom sheet content
68
+ */
69
+ children: React.ReactNode;
70
+
71
+ /**
72
+ * Preset configuration (small, medium, large, full)
73
+ */
74
+ preset?: BottomSheetPreset;
75
+
76
+ /**
77
+ * Custom snap points (overrides preset)
78
+ */
79
+ snapPoints?: SnapPoint[];
80
+
81
+ /**
82
+ * Initial snap point index
83
+ */
84
+ initialIndex?: number;
85
+
86
+ /**
87
+ * Enable backdrop
88
+ */
89
+ enableBackdrop?: boolean;
90
+
91
+ /**
92
+ * Backdrop appears at this snap index
93
+ */
94
+ backdropAppearsOnIndex?: number;
95
+
96
+ /**
97
+ * Backdrop disappears at this snap index
98
+ */
99
+ backdropDisappearsOnIndex?: number;
100
+
101
+ /**
102
+ * Keyboard behavior strategy
103
+ */
104
+ keyboardBehavior?: KeyboardBehavior;
105
+
106
+ /**
107
+ * Enable handle indicator
108
+ */
109
+ enableHandleIndicator?: boolean;
110
+
111
+ /**
112
+ * Enable pan down to close
113
+ */
114
+ enablePanDownToClose?: boolean;
115
+
116
+ /**
117
+ * Enable dynamic sizing
118
+ */
119
+ enableDynamicSizing?: boolean;
120
+
121
+ /**
122
+ * Callback when sheet changes position
123
+ */
124
+ onChange?: (index: number) => void;
125
+
126
+ /**
127
+ * Callback when sheet is dismissed
128
+ */
129
+ onDismiss?: () => void;
130
+ }
131
+
132
+ /**
133
+ * Bottom Sheet Modal Component
134
+ *
135
+ * Modal version of bottom sheet for React Native.
136
+ * Uses @gorhom/bottom-sheet with Reanimated v3.
137
+ */
138
+ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>(
139
+ (
140
+ {
141
+ children,
142
+ preset = 'medium',
143
+ snapPoints: customSnapPoints,
144
+ initialIndex,
145
+ enableBackdrop = true,
146
+ backdropAppearsOnIndex,
147
+ backdropDisappearsOnIndex,
148
+ keyboardBehavior = 'interactive',
149
+ enableHandleIndicator = true,
150
+ enablePanDownToClose = true,
151
+ enableDynamicSizing = false,
152
+ onChange,
153
+ onDismiss,
154
+ },
155
+ ref
156
+ ) => {
157
+ const tokens = useAppDesignTokens();
158
+ const modalRef = React.useRef<GorhomBottomSheetModal>(null);
159
+
160
+ // Expose ref methods
161
+ React.useImperativeHandle(ref, () => ({
162
+ present: () => {
163
+ modalRef.current?.present();
164
+ },
165
+ dismiss: () => {
166
+ modalRef.current?.dismiss();
167
+ },
168
+ snapToIndex: (index: number) => {
169
+ modalRef.current?.snapToIndex(index);
170
+ },
171
+ snapToPosition: (position: string | number) => {
172
+ modalRef.current?.snapToPosition(position);
173
+ },
174
+ expand: () => {
175
+ modalRef.current?.expand();
176
+ },
177
+ collapse: () => {
178
+ modalRef.current?.collapse();
179
+ },
180
+ }));
181
+
182
+ // Get configuration from preset or custom
183
+ const config: BottomSheetConfig = useMemo(() => {
184
+ if (customSnapPoints) {
185
+ return BottomSheetUtils.createConfig({
186
+ snapPoints: customSnapPoints,
187
+ initialIndex,
188
+ enableBackdrop,
189
+ backdropAppearsOnIndex,
190
+ backdropDisappearsOnIndex,
191
+ keyboardBehavior,
192
+ enableHandleIndicator,
193
+ enablePanDownToClose,
194
+ enableDynamicSizing,
195
+ });
196
+ }
197
+ return BottomSheetUtils.getPreset(preset);
198
+ }, [
199
+ preset,
200
+ customSnapPoints,
201
+ initialIndex,
202
+ enableBackdrop,
203
+ backdropAppearsOnIndex,
204
+ backdropDisappearsOnIndex,
205
+ keyboardBehavior,
206
+ enableHandleIndicator,
207
+ enablePanDownToClose,
208
+ enableDynamicSizing,
209
+ ]);
210
+
211
+ // Render backdrop component
212
+ const renderBackdrop = useCallback(
213
+ (props: BottomSheetBackdropProps) =>
214
+ enableBackdrop ? (
215
+ <BottomSheetBackdrop
216
+ {...props}
217
+ appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
218
+ disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
219
+ opacity={0.5}
220
+ pressBehavior="close"
221
+ />
222
+ ) : null,
223
+ [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
224
+ );
225
+
226
+ // Handle sheet changes
227
+ const handleSheetChange = useCallback(
228
+ (index: number) => {
229
+ onChange?.(index);
230
+ if (index === -1) {
231
+ onDismiss?.();
232
+ }
233
+ },
234
+ [onChange, onDismiss]
235
+ );
236
+
237
+ return (
238
+ <GorhomBottomSheetModal
239
+ ref={modalRef}
240
+ index={config.initialIndex ?? 0}
241
+ snapPoints={config.snapPoints}
242
+ enableDynamicSizing={config.enableDynamicSizing}
243
+ backdropComponent={renderBackdrop}
244
+ keyboardBehavior={config.keyboardBehavior}
245
+ enableHandlePanningGesture={config.enableHandleIndicator}
246
+ enablePanDownToClose={config.enablePanDownToClose}
247
+ onChange={handleSheetChange}
248
+ onDismiss={onDismiss}
249
+ backgroundStyle={[
250
+ styles.background,
251
+ { backgroundColor: tokens.colors.surface },
252
+ ]}
253
+ handleIndicatorStyle={[
254
+ styles.handleIndicator,
255
+ { backgroundColor: tokens.colors.border },
256
+ ]}
257
+ >
258
+ <BottomSheetView style={styles.contentContainer}>
259
+ {children}
260
+ </BottomSheetView>
261
+ </GorhomBottomSheetModal>
262
+ );
263
+ }
264
+ );
265
+
266
+ BottomSheetModal.displayName = 'BottomSheetModal';
267
+
268
+ const styles = StyleSheet.create({
269
+ background: {
270
+ borderTopLeftRadius: 16,
271
+ borderTopRightRadius: 16,
272
+ },
273
+ handleIndicator: {
274
+ width: 40,
275
+ height: 4,
276
+ borderRadius: 2,
277
+ },
278
+ contentContainer: {
279
+ flex: 1,
280
+ },
281
+ });
282
+
@@ -0,0 +1,134 @@
1
+ /**
2
+ * useBottomSheetModal Hook
3
+ *
4
+ * React hook for managing bottom sheet modal state and interactions.
5
+ * Provides a clean API for common bottom sheet modal operations.
6
+ *
7
+ * Features:
8
+ * - Present/dismiss bottom sheet modal
9
+ * - Snap to specific index
10
+ * - Expand to max height
11
+ * - Collapse to min height
12
+ * - Track current position
13
+ * - Preset configurations
14
+ *
15
+ * Usage:
16
+ * ```tsx
17
+ * const { modalRef, present, dismiss, expand, collapse } = useBottomSheetModal();
18
+ *
19
+ * return (
20
+ * <>
21
+ * <Button onPress={present}>Open Modal</Button>
22
+ * <BottomSheetModal ref={modalRef} preset="medium">
23
+ * <Text>Content</Text>
24
+ * </BottomSheetModal>
25
+ * </>
26
+ * );
27
+ * ```
28
+ */
29
+
30
+ import { useRef, useCallback } from 'react';
31
+ import type { BottomSheetModalRef } from '../components/BottomSheetModal';
32
+
33
+ /**
34
+ * Return type for useBottomSheetModal hook
35
+ */
36
+ export interface UseBottomSheetModalReturn {
37
+ /**
38
+ * Ref to attach to BottomSheetModal component
39
+ */
40
+ modalRef: React.RefObject<BottomSheetModalRef>;
41
+
42
+ /**
43
+ * Present bottom sheet modal
44
+ */
45
+ present: () => void;
46
+
47
+ /**
48
+ * Dismiss bottom sheet modal
49
+ */
50
+ dismiss: () => void;
51
+
52
+ /**
53
+ * Expand to maximum height
54
+ */
55
+ expand: () => void;
56
+
57
+ /**
58
+ * Collapse to minimum height
59
+ */
60
+ collapse: () => void;
61
+
62
+ /**
63
+ * Snap to specific index
64
+ */
65
+ snapToIndex: (index: number) => void;
66
+
67
+ /**
68
+ * Snap to specific position
69
+ */
70
+ snapToPosition: (position: string | number) => void;
71
+ }
72
+
73
+ /**
74
+ * useBottomSheetModal Hook
75
+ *
76
+ * Hook for managing bottom sheet modal state and interactions.
77
+ * Provides imperative methods for controlling the modal.
78
+ */
79
+ export const useBottomSheetModal = (): UseBottomSheetModalReturn => {
80
+ const modalRef = useRef<BottomSheetModalRef>(null);
81
+
82
+ /**
83
+ * Present bottom sheet modal
84
+ */
85
+ const present = useCallback(() => {
86
+ modalRef.current?.present();
87
+ }, []);
88
+
89
+ /**
90
+ * Dismiss bottom sheet modal
91
+ */
92
+ const dismiss = useCallback(() => {
93
+ modalRef.current?.dismiss();
94
+ }, []);
95
+
96
+ /**
97
+ * Expand to maximum height (last snap point)
98
+ */
99
+ const expand = useCallback(() => {
100
+ modalRef.current?.expand();
101
+ }, []);
102
+
103
+ /**
104
+ * Collapse to minimum height (first snap point)
105
+ */
106
+ const collapse = useCallback(() => {
107
+ modalRef.current?.collapse();
108
+ }, []);
109
+
110
+ /**
111
+ * Snap to specific index
112
+ */
113
+ const snapToIndex = useCallback((index: number) => {
114
+ modalRef.current?.snapToIndex(index);
115
+ }, []);
116
+
117
+ /**
118
+ * Snap to specific position (percentage or fixed)
119
+ */
120
+ const snapToPosition = useCallback((position: string | number) => {
121
+ modalRef.current?.snapToPosition(position);
122
+ }, []);
123
+
124
+ return {
125
+ modalRef,
126
+ present,
127
+ dismiss,
128
+ expand,
129
+ collapse,
130
+ snapToIndex,
131
+ snapToPosition,
132
+ };
133
+ };
134
+
@@ -1,113 +0,0 @@
1
- /**
2
- * Bottom Sheet Domain - Entity
3
- *
4
- * Defines bottom sheet types, snap point configurations, and utilities.
5
- * Provides a clean abstraction over @gorhom/bottom-sheet library.
6
- *
7
- * Features:
8
- * - Snap point types (percentage, fixed, dynamic)
9
- * - Pre-built configs (small, medium, large, full)
10
- * - Backdrop configurations
11
- * - Animation timing configs
12
- * - Keyboard behavior options
13
- *
14
- * Architecture:
15
- * - Domain Layer: Pure business logic, no UI dependencies
16
- * - Factory pattern for config creation
17
- * - Type-safe snap points and options
18
- */
19
- /**
20
- * Snap point types for bottom sheet positioning
21
- */
22
- export type SnapPoint = string | number;
23
- /**
24
- * Keyboard behavior strategies
25
- */
26
- export type KeyboardBehavior = 'interactive' | 'fillParent' | 'extend';
27
- /**
28
- * Bottom sheet preset sizes
29
- */
30
- export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full';
31
- /**
32
- * Bottom sheet configuration interface
33
- */
34
- export interface BottomSheetConfig {
35
- /**
36
- * Snap points for the bottom sheet
37
- * - Percentage: '25%', '50%', '75%'
38
- * - Fixed: 200, 400, 600
39
- * - Dynamic: 'CONTENT_HEIGHT'
40
- */
41
- snapPoints: SnapPoint[];
42
- /**
43
- * Initial snap point index (default: 0)
44
- */
45
- initialIndex?: number;
46
- /**
47
- * Enable backdrop (darkens background)
48
- */
49
- enableBackdrop?: boolean;
50
- /**
51
- * Backdrop appears at this snap index (default: 0)
52
- */
53
- backdropAppearsOnIndex?: number;
54
- /**
55
- * Backdrop disappears at this snap index (default: -1)
56
- */
57
- backdropDisappearsOnIndex?: number;
58
- /**
59
- * Keyboard behavior strategy
60
- */
61
- keyboardBehavior?: KeyboardBehavior;
62
- /**
63
- * Enable handle indicator (default: true)
64
- */
65
- enableHandleIndicator?: boolean;
66
- /**
67
- * Enable pan down to close (default: true)
68
- */
69
- enablePanDownToClose?: boolean;
70
- /**
71
- * Enable dynamic sizing
72
- */
73
- enableDynamicSizing?: boolean;
74
- }
75
- /**
76
- * Backdrop configuration
77
- */
78
- export interface BackdropConfig {
79
- appearsOnIndex: number;
80
- disappearsOnIndex: number;
81
- opacity?: number;
82
- pressBehavior?: 'none' | 'close' | 'collapse';
83
- }
84
- /**
85
- * Pre-built bottom sheet configurations
86
- */
87
- export declare const BOTTOM_SHEET_PRESETS: Record<BottomSheetPreset, BottomSheetConfig>;
88
- /**
89
- * Default bottom sheet configuration
90
- */
91
- export declare const DEFAULT_BOTTOM_SHEET_CONFIG: BottomSheetConfig;
92
- /**
93
- * Bottom sheet utilities
94
- */
95
- export declare const BottomSheetUtils: {
96
- /**
97
- * Create custom bottom sheet config
98
- */
99
- createConfig: (overrides: Partial<BottomSheetConfig>) => BottomSheetConfig;
100
- /**
101
- * Get preset configuration
102
- */
103
- getPreset: (preset: BottomSheetPreset) => BottomSheetConfig;
104
- /**
105
- * Validate snap points
106
- */
107
- validateSnapPoints: (snapPoints: SnapPoint[]) => boolean;
108
- /**
109
- * Create backdrop config
110
- */
111
- createBackdropConfig: (appearsOnIndex?: number, disappearsOnIndex?: number, opacity?: number) => BackdropConfig;
112
- };
113
- //# sourceMappingURL=BottomSheet.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/domain/entities/BottomSheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;OAKG;IACH,UAAU,EAAE,SAAS,EAAE,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;CAC/C;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAqC7E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,iBAUzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;IAC3B;;OAEG;8BACuB,OAAO,CAAC,iBAAiB,CAAC,KAAG,iBAAiB;IAOxE;;OAEG;wBACiB,iBAAiB,KAAG,iBAAiB;IAIzD;;OAEG;qCAC8B,SAAS,EAAE,KAAG,OAAO;IAgBtD;;OAEG;4CAEe,MAAM,sBACH,MAAM,YAChB,MAAM,KACd,cAAc;CAQlB,CAAC"}
@@ -1,125 +0,0 @@
1
- /**
2
- * Bottom Sheet Domain - Entity
3
- *
4
- * Defines bottom sheet types, snap point configurations, and utilities.
5
- * Provides a clean abstraction over @gorhom/bottom-sheet library.
6
- *
7
- * Features:
8
- * - Snap point types (percentage, fixed, dynamic)
9
- * - Pre-built configs (small, medium, large, full)
10
- * - Backdrop configurations
11
- * - Animation timing configs
12
- * - Keyboard behavior options
13
- *
14
- * Architecture:
15
- * - Domain Layer: Pure business logic, no UI dependencies
16
- * - Factory pattern for config creation
17
- * - Type-safe snap points and options
18
- */
19
- /**
20
- * Pre-built bottom sheet configurations
21
- */
22
- export const BOTTOM_SHEET_PRESETS = {
23
- small: {
24
- snapPoints: ['25%'],
25
- initialIndex: 0,
26
- enableBackdrop: true,
27
- backdropAppearsOnIndex: 0,
28
- backdropDisappearsOnIndex: -1,
29
- enableHandleIndicator: true,
30
- enablePanDownToClose: true,
31
- },
32
- medium: {
33
- snapPoints: ['50%'],
34
- initialIndex: 0,
35
- enableBackdrop: true,
36
- backdropAppearsOnIndex: 0,
37
- backdropDisappearsOnIndex: -1,
38
- enableHandleIndicator: true,
39
- enablePanDownToClose: true,
40
- },
41
- large: {
42
- snapPoints: ['75%'],
43
- initialIndex: 0,
44
- enableBackdrop: true,
45
- backdropAppearsOnIndex: 0,
46
- backdropDisappearsOnIndex: -1,
47
- enableHandleIndicator: true,
48
- enablePanDownToClose: true,
49
- },
50
- full: {
51
- snapPoints: ['25%', '50%', '90%'],
52
- initialIndex: 1,
53
- enableBackdrop: true,
54
- backdropAppearsOnIndex: 2,
55
- backdropDisappearsOnIndex: 1,
56
- enableHandleIndicator: true,
57
- enablePanDownToClose: true,
58
- },
59
- };
60
- /**
61
- * Default bottom sheet configuration
62
- */
63
- export const DEFAULT_BOTTOM_SHEET_CONFIG = {
64
- snapPoints: ['50%'],
65
- initialIndex: 0,
66
- enableBackdrop: true,
67
- backdropAppearsOnIndex: 0,
68
- backdropDisappearsOnIndex: -1,
69
- keyboardBehavior: 'interactive',
70
- enableHandleIndicator: true,
71
- enablePanDownToClose: true,
72
- enableDynamicSizing: false,
73
- };
74
- /**
75
- * Bottom sheet utilities
76
- */
77
- export const BottomSheetUtils = {
78
- /**
79
- * Create custom bottom sheet config
80
- */
81
- createConfig: (overrides) => {
82
- return {
83
- ...DEFAULT_BOTTOM_SHEET_CONFIG,
84
- ...overrides,
85
- };
86
- },
87
- /**
88
- * Get preset configuration
89
- */
90
- getPreset: (preset) => {
91
- return BOTTOM_SHEET_PRESETS[preset];
92
- },
93
- /**
94
- * Validate snap points
95
- */
96
- validateSnapPoints: (snapPoints) => {
97
- if (snapPoints.length === 0)
98
- return false;
99
- return snapPoints.every(point => {
100
- if (typeof point === 'number')
101
- return point > 0;
102
- if (typeof point === 'string') {
103
- if (point === 'CONTENT_HEIGHT')
104
- return true;
105
- if (point.endsWith('%')) {
106
- const value = parseInt(point);
107
- return value > 0 && value <= 100;
108
- }
109
- }
110
- return false;
111
- });
112
- },
113
- /**
114
- * Create backdrop config
115
- */
116
- createBackdropConfig: (appearsOnIndex = 0, disappearsOnIndex = -1, opacity = 0.5) => {
117
- return {
118
- appearsOnIndex,
119
- disappearsOnIndex,
120
- opacity,
121
- pressBehavior: 'close',
122
- };
123
- },
124
- };
125
- //# sourceMappingURL=BottomSheet.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../src/domain/entities/BottomSheet.ts"],"names":[],"mappings":"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"}
package/lib/index.d.ts DELETED
@@ -1,75 +0,0 @@
1
- /**
2
- * Bottom Sheet Domain - Barrel Export
3
- *
4
- * Public API for the bottom-sheet domain.
5
- * Provides modern, performant bottom sheets for React Native.
6
- *
7
- * Features:
8
- * - Preset configurations (small, medium, large, full)
9
- * - Custom snap points (percentage, fixed, dynamic)
10
- * - Backdrop with tap-to-close
11
- * - Keyboard handling (interactive, fillParent, extend)
12
- * - Theme-aware colors
13
- * - Handle indicator
14
- * - Pan down to close
15
- * - Smooth animations with Reanimated v3
16
- * - Offline-compatible (100% client-side)
17
- *
18
- * Usage:
19
- * ```tsx
20
- * import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';
21
- *
22
- * const MyScreen = () => {
23
- * const { sheetRef, open, close } = useBottomSheet();
24
- *
25
- * return (
26
- * <>
27
- * <Button onPress={open}>Open Sheet</Button>
28
- * <BottomSheet
29
- * ref={sheetRef}
30
- * preset="medium"
31
- * onClose={() => console.log('Closed')}
32
- * >
33
- * <View>
34
- * <Text>Bottom Sheet Content</Text>
35
- * </View>
36
- * </BottomSheet>
37
- * </>
38
- * );
39
- * };
40
- *
41
- * // Custom snap points
42
- * <BottomSheet
43
- * snapPoints={['25%', '50%', '90%']}
44
- * initialIndex={1}
45
- * enableBackdrop
46
- * >
47
- * <FilterForm />
48
- * </BottomSheet>
49
- *
50
- * // Keyboard-aware sheet
51
- * <BottomSheet
52
- * preset="large"
53
- * keyboardBehavior="fillParent"
54
- * >
55
- * <CommentForm />
56
- * </BottomSheet>
57
- * ```
58
- *
59
- * Presets:
60
- * - small: 25% height
61
- * - medium: 50% height
62
- * - large: 75% height
63
- * - full: Multi-snap (25%, 50%, 90%)
64
- *
65
- * Technical:
66
- * - Uses @gorhom/bottom-sheet library
67
- * - Animated with react-native-reanimated v3
68
- * - Gesture handling with react-native-gesture-handler
69
- * - Zero backend dependencies
70
- */
71
- export type { BottomSheetConfig, BottomSheetPreset, SnapPoint, KeyboardBehavior, BackdropConfig, } from './domain/entities/BottomSheet';
72
- export { BOTTOM_SHEET_PRESETS, DEFAULT_BOTTOM_SHEET_CONFIG, BottomSheetUtils, } from './domain/entities/BottomSheet';
73
- export { BottomSheet, type BottomSheetProps, type BottomSheetRef, } from './presentation/components/BottomSheet';
74
- export { useBottomSheet, type UseBottomSheetReturn, } from './presentation/hooks/useBottomSheet';
75
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAGH,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACL,oBAAoB,EACpB,2BAA2B,EAC3B,gBAAgB,GACjB,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,cAAc,GACpB,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,GAC1B,MAAM,qCAAqC,CAAC"}
package/lib/index.js DELETED
@@ -1,76 +0,0 @@
1
- /**
2
- * Bottom Sheet Domain - Barrel Export
3
- *
4
- * Public API for the bottom-sheet domain.
5
- * Provides modern, performant bottom sheets for React Native.
6
- *
7
- * Features:
8
- * - Preset configurations (small, medium, large, full)
9
- * - Custom snap points (percentage, fixed, dynamic)
10
- * - Backdrop with tap-to-close
11
- * - Keyboard handling (interactive, fillParent, extend)
12
- * - Theme-aware colors
13
- * - Handle indicator
14
- * - Pan down to close
15
- * - Smooth animations with Reanimated v3
16
- * - Offline-compatible (100% client-side)
17
- *
18
- * Usage:
19
- * ```tsx
20
- * import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';
21
- *
22
- * const MyScreen = () => {
23
- * const { sheetRef, open, close } = useBottomSheet();
24
- *
25
- * return (
26
- * <>
27
- * <Button onPress={open}>Open Sheet</Button>
28
- * <BottomSheet
29
- * ref={sheetRef}
30
- * preset="medium"
31
- * onClose={() => console.log('Closed')}
32
- * >
33
- * <View>
34
- * <Text>Bottom Sheet Content</Text>
35
- * </View>
36
- * </BottomSheet>
37
- * </>
38
- * );
39
- * };
40
- *
41
- * // Custom snap points
42
- * <BottomSheet
43
- * snapPoints={['25%', '50%', '90%']}
44
- * initialIndex={1}
45
- * enableBackdrop
46
- * >
47
- * <FilterForm />
48
- * </BottomSheet>
49
- *
50
- * // Keyboard-aware sheet
51
- * <BottomSheet
52
- * preset="large"
53
- * keyboardBehavior="fillParent"
54
- * >
55
- * <CommentForm />
56
- * </BottomSheet>
57
- * ```
58
- *
59
- * Presets:
60
- * - small: 25% height
61
- * - medium: 50% height
62
- * - large: 75% height
63
- * - full: Multi-snap (25%, 50%, 90%)
64
- *
65
- * Technical:
66
- * - Uses @gorhom/bottom-sheet library
67
- * - Animated with react-native-reanimated v3
68
- * - Gesture handling with react-native-gesture-handler
69
- * - Zero backend dependencies
70
- */
71
- export { BOTTOM_SHEET_PRESETS, DEFAULT_BOTTOM_SHEET_CONFIG, BottomSheetUtils, } from './domain/entities/BottomSheet';
72
- // Presentation Components
73
- export { BottomSheet, } from './presentation/components/BottomSheet';
74
- // Presentation Hooks
75
- export { useBottomSheet, } from './presentation/hooks/useBottomSheet';
76
- //# sourceMappingURL=index.js.map
package/lib/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAWH,OAAO,EACL,oBAAoB,EACpB,2BAA2B,EAC3B,gBAAgB,GACjB,MAAM,+BAA+B,CAAC;AAEvC,0BAA0B;AAC1B,OAAO,EACL,WAAW,GAGZ,MAAM,uCAAuC,CAAC;AAE/C,qBAAqB;AACrB,OAAO,EACL,cAAc,GAEf,MAAM,qCAAqC,CAAC"}
@@ -1,107 +0,0 @@
1
- /**
2
- * Bottom Sheet Component
3
- *
4
- * Main bottom sheet wrapper using @gorhom/bottom-sheet library.
5
- * Provides a clean, theme-aware API for bottom sheets across the app.
6
- *
7
- * Features:
8
- * - Snap point support (percentage, fixed, dynamic)
9
- * - Backdrop with tap-to-close
10
- * - Keyboard handling (interactive, fillParent, extend)
11
- * - Theme-aware colors
12
- * - Handle indicator
13
- * - Pan down to close
14
- * - Smooth animations with Reanimated v3
15
- *
16
- * Usage:
17
- * ```tsx
18
- * const sheetRef = useRef<BottomSheetRef>(null);
19
- *
20
- * <BottomSheet
21
- * ref={sheetRef}
22
- * preset="medium"
23
- * onClose={() => console.log('Closed')}
24
- * >
25
- * <View>
26
- * <Text>Bottom Sheet Content</Text>
27
- * </View>
28
- * </BottomSheet>
29
- * ```
30
- */
31
- import React from 'react';
32
- import type { BottomSheetPreset, SnapPoint, KeyboardBehavior } from '../../domain/entities/BottomSheet';
33
- /**
34
- * Bottom sheet ref methods
35
- */
36
- export interface BottomSheetRef {
37
- snapToIndex: (index: number) => void;
38
- snapToPosition: (position: string | number) => void;
39
- expand: () => void;
40
- collapse: () => void;
41
- close: () => void;
42
- }
43
- /**
44
- * Bottom sheet component props
45
- */
46
- export interface BottomSheetProps {
47
- /**
48
- * Bottom sheet content
49
- */
50
- children: React.ReactNode;
51
- /**
52
- * Preset configuration (small, medium, large, full)
53
- */
54
- preset?: BottomSheetPreset;
55
- /**
56
- * Custom snap points (overrides preset)
57
- */
58
- snapPoints?: SnapPoint[];
59
- /**
60
- * Initial snap point index
61
- */
62
- initialIndex?: number;
63
- /**
64
- * Enable backdrop
65
- */
66
- enableBackdrop?: boolean;
67
- /**
68
- * Backdrop appears at this snap index
69
- */
70
- backdropAppearsOnIndex?: number;
71
- /**
72
- * Backdrop disappears at this snap index
73
- */
74
- backdropDisappearsOnIndex?: number;
75
- /**
76
- * Keyboard behavior strategy
77
- */
78
- keyboardBehavior?: KeyboardBehavior;
79
- /**
80
- * Enable handle indicator
81
- */
82
- enableHandleIndicator?: boolean;
83
- /**
84
- * Enable pan down to close
85
- */
86
- enablePanDownToClose?: boolean;
87
- /**
88
- * Enable dynamic sizing
89
- */
90
- enableDynamicSizing?: boolean;
91
- /**
92
- * Callback when sheet changes position
93
- */
94
- onChange?: (index: number) => void;
95
- /**
96
- * Callback when sheet closes
97
- */
98
- onClose?: () => void;
99
- }
100
- /**
101
- * Bottom Sheet Component
102
- *
103
- * Modern, performant bottom sheet for React Native.
104
- * Uses @gorhom/bottom-sheet with Reanimated v3.
105
- */
106
- export declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
107
- //# sourceMappingURL=BottomSheet.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/BottomSheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAQhE,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAG3C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACpD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IAEzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFAsGvB,CAAC"}
@@ -1,108 +0,0 @@
1
- /**
2
- * Bottom Sheet Component
3
- *
4
- * Main bottom sheet wrapper using @gorhom/bottom-sheet library.
5
- * Provides a clean, theme-aware API for bottom sheets across the app.
6
- *
7
- * Features:
8
- * - Snap point support (percentage, fixed, dynamic)
9
- * - Backdrop with tap-to-close
10
- * - Keyboard handling (interactive, fillParent, extend)
11
- * - Theme-aware colors
12
- * - Handle indicator
13
- * - Pan down to close
14
- * - Smooth animations with Reanimated v3
15
- *
16
- * Usage:
17
- * ```tsx
18
- * const sheetRef = useRef<BottomSheetRef>(null);
19
- *
20
- * <BottomSheet
21
- * ref={sheetRef}
22
- * preset="medium"
23
- * onClose={() => console.log('Closed')}
24
- * >
25
- * <View>
26
- * <Text>Bottom Sheet Content</Text>
27
- * </View>
28
- * </BottomSheet>
29
- * ```
30
- */
31
- import React, { forwardRef, useCallback, useMemo } from 'react';
32
- import { StyleSheet } from 'react-native';
33
- import GorhomBottomSheet, { BottomSheetView, BottomSheetBackdrop, } from '@gorhom/bottom-sheet';
34
- import { useAppDesignTokens } from '@umituz/react-native-design-system';
35
- import { BottomSheetUtils } from '../../domain/entities/BottomSheet';
36
- /**
37
- * Bottom Sheet Component
38
- *
39
- * Modern, performant bottom sheet for React Native.
40
- * Uses @gorhom/bottom-sheet with Reanimated v3.
41
- */
42
- export const BottomSheet = forwardRef(({ children, preset = 'medium', snapPoints: customSnapPoints, initialIndex, enableBackdrop = true, backdropAppearsOnIndex, backdropDisappearsOnIndex, keyboardBehavior = 'interactive', enableHandleIndicator = true, enablePanDownToClose = true, enableDynamicSizing = false, onChange, onClose, }, ref) => {
43
- const tokens = useAppDesignTokens();
44
- // Get configuration from preset or custom
45
- const config = useMemo(() => {
46
- if (customSnapPoints) {
47
- return BottomSheetUtils.createConfig({
48
- snapPoints: customSnapPoints,
49
- initialIndex,
50
- enableBackdrop,
51
- backdropAppearsOnIndex,
52
- backdropDisappearsOnIndex,
53
- keyboardBehavior,
54
- enableHandleIndicator,
55
- enablePanDownToClose,
56
- enableDynamicSizing,
57
- });
58
- }
59
- return BottomSheetUtils.getPreset(preset);
60
- }, [
61
- preset,
62
- customSnapPoints,
63
- initialIndex,
64
- enableBackdrop,
65
- backdropAppearsOnIndex,
66
- backdropDisappearsOnIndex,
67
- keyboardBehavior,
68
- enableHandleIndicator,
69
- enablePanDownToClose,
70
- enableDynamicSizing,
71
- ]);
72
- // Render backdrop component
73
- const renderBackdrop = useCallback((props) => enableBackdrop ? (<BottomSheetBackdrop {...props} appearsOnIndex={config.backdropAppearsOnIndex ?? 0} disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1} opacity={0.5} pressBehavior="close"/>) : null, [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]);
74
- // Handle sheet changes
75
- const handleSheetChange = useCallback((index) => {
76
- onChange?.(index);
77
- if (index === -1) {
78
- onClose?.();
79
- }
80
- }, [onChange, onClose]);
81
- return (<GorhomBottomSheet ref={ref} index={config.initialIndex ?? 0} snapPoints={config.snapPoints} enableDynamicSizing={config.enableDynamicSizing} backdropComponent={renderBackdrop} keyboardBehavior={config.keyboardBehavior} enableHandlePanningGesture={config.enableHandleIndicator} enablePanDownToClose={config.enablePanDownToClose} onChange={handleSheetChange} backgroundStyle={[
82
- styles.background,
83
- { backgroundColor: tokens.colors.surface },
84
- ]} handleIndicatorStyle={[
85
- styles.handleIndicator,
86
- { backgroundColor: tokens.colors.border },
87
- ]}>
88
- <BottomSheetView style={styles.contentContainer}>
89
- {children}
90
- </BottomSheetView>
91
- </GorhomBottomSheet>);
92
- });
93
- BottomSheet.displayName = 'BottomSheet';
94
- const styles = StyleSheet.create({
95
- background: {
96
- borderTopLeftRadius: 16,
97
- borderTopRightRadius: 16,
98
- },
99
- handleIndicator: {
100
- width: 40,
101
- height: 4,
102
- borderRadius: 2,
103
- },
104
- contentContainer: {
105
- flex: 1,
106
- },
107
- });
108
- //# sourceMappingURL=BottomSheet.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../src/presentation/components/BottomSheet.tsx"],"names":[],"mappings":"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"}
@@ -1,70 +0,0 @@
1
- /**
2
- * useBottomSheet Hook
3
- *
4
- * React hook for managing bottom sheet state and interactions.
5
- * Provides a clean API for common bottom sheet operations.
6
- *
7
- * Features:
8
- * - Open/close bottom sheet
9
- * - Snap to specific index
10
- * - Expand to max height
11
- * - Collapse to min height
12
- * - Track current position
13
- * - Preset configurations
14
- *
15
- * Usage:
16
- * ```tsx
17
- * const { sheetRef, open, close, expand, collapse } = useBottomSheet();
18
- *
19
- * return (
20
- * <>
21
- * <Button onPress={open}>Open Sheet</Button>
22
- * <BottomSheet ref={sheetRef} preset="medium">
23
- * <Text>Content</Text>
24
- * </BottomSheet>
25
- * </>
26
- * );
27
- * ```
28
- */
29
- import type { BottomSheetRef } from '../components/BottomSheet';
30
- /**
31
- * Return type for useBottomSheet hook
32
- */
33
- export interface UseBottomSheetReturn {
34
- /**
35
- * Ref to attach to BottomSheet component
36
- */
37
- sheetRef: React.RefObject<BottomSheetRef>;
38
- /**
39
- * Open bottom sheet to initial index
40
- */
41
- open: () => void;
42
- /**
43
- * Close bottom sheet completely
44
- */
45
- close: () => void;
46
- /**
47
- * Expand to maximum height
48
- */
49
- expand: () => void;
50
- /**
51
- * Collapse to minimum height
52
- */
53
- collapse: () => void;
54
- /**
55
- * Snap to specific index
56
- */
57
- snapToIndex: (index: number) => void;
58
- /**
59
- * Snap to specific position
60
- */
61
- snapToPosition: (position: string | number) => void;
62
- }
63
- /**
64
- * useBottomSheet Hook
65
- *
66
- * Hook for managing bottom sheet state and interactions.
67
- * Provides imperative methods for controlling the sheet.
68
- */
69
- export declare const useBottomSheet: () => UseBottomSheetReturn;
70
- //# sourceMappingURL=useBottomSheet.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/presentation/hooks/useBottomSheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAE1C;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QAAO,oBAsDjC,CAAC"}
@@ -1,84 +0,0 @@
1
- /**
2
- * useBottomSheet Hook
3
- *
4
- * React hook for managing bottom sheet state and interactions.
5
- * Provides a clean API for common bottom sheet operations.
6
- *
7
- * Features:
8
- * - Open/close bottom sheet
9
- * - Snap to specific index
10
- * - Expand to max height
11
- * - Collapse to min height
12
- * - Track current position
13
- * - Preset configurations
14
- *
15
- * Usage:
16
- * ```tsx
17
- * const { sheetRef, open, close, expand, collapse } = useBottomSheet();
18
- *
19
- * return (
20
- * <>
21
- * <Button onPress={open}>Open Sheet</Button>
22
- * <BottomSheet ref={sheetRef} preset="medium">
23
- * <Text>Content</Text>
24
- * </BottomSheet>
25
- * </>
26
- * );
27
- * ```
28
- */
29
- import { useRef, useCallback } from 'react';
30
- /**
31
- * useBottomSheet Hook
32
- *
33
- * Hook for managing bottom sheet state and interactions.
34
- * Provides imperative methods for controlling the sheet.
35
- */
36
- export const useBottomSheet = () => {
37
- const sheetRef = useRef(null);
38
- /**
39
- * Open bottom sheet to first snap point
40
- */
41
- const open = useCallback(() => {
42
- sheetRef.current?.snapToIndex(0);
43
- }, []);
44
- /**
45
- * Close bottom sheet completely
46
- */
47
- const close = useCallback(() => {
48
- sheetRef.current?.close();
49
- }, []);
50
- /**
51
- * Expand to maximum height (last snap point)
52
- */
53
- const expand = useCallback(() => {
54
- sheetRef.current?.expand();
55
- }, []);
56
- /**
57
- * Collapse to minimum height (first snap point)
58
- */
59
- const collapse = useCallback(() => {
60
- sheetRef.current?.collapse();
61
- }, []);
62
- /**
63
- * Snap to specific index
64
- */
65
- const snapToIndex = useCallback((index) => {
66
- sheetRef.current?.snapToIndex(index);
67
- }, []);
68
- /**
69
- * Snap to specific position (percentage or fixed)
70
- */
71
- const snapToPosition = useCallback((position) => {
72
- sheetRef.current?.snapToPosition(position);
73
- }, []);
74
- return {
75
- sheetRef,
76
- open,
77
- close,
78
- expand,
79
- collapse,
80
- snapToIndex,
81
- snapToPosition,
82
- };
83
- };
84
- //# sourceMappingURL=useBottomSheet.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useBottomSheet.js","sourceRoot":"","sources":["../../../src/presentation/hooks/useBottomSheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA2C5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAyB,EAAE;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C;;OAEG;IACH,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAChD,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,QAAyB,EAAE,EAAE;QAC/D,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,QAAQ;QACR,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ;QACR,WAAW;QACX,cAAc;KACf,CAAC;AACJ,CAAC,CAAC"}