@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 +8 -7
- package/src/index.ts +12 -0
- package/src/presentation/components/BottomSheet.tsx +24 -3
- package/src/presentation/components/BottomSheetModal.tsx +282 -0
- package/src/presentation/hooks/useBottomSheetModal.ts +134 -0
- package/lib/domain/entities/BottomSheet.d.ts +0 -113
- package/lib/domain/entities/BottomSheet.d.ts.map +0 -1
- package/lib/domain/entities/BottomSheet.js +0 -125
- package/lib/domain/entities/BottomSheet.js.map +0 -1
- package/lib/index.d.ts +0 -75
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -76
- package/lib/index.js.map +0 -1
- package/lib/presentation/components/BottomSheet.d.ts +0 -107
- package/lib/presentation/components/BottomSheet.d.ts.map +0 -1
- package/lib/presentation/components/BottomSheet.js +0 -108
- package/lib/presentation/components/BottomSheet.js.map +0 -1
- package/lib/presentation/hooks/useBottomSheet.d.ts +0 -70
- package/lib/presentation/hooks/useBottomSheet.d.ts.map +0 -1
- package/lib/presentation/hooks/useBottomSheet.js +0 -84
- package/lib/presentation/hooks/useBottomSheet.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-bottom-sheet",
|
|
3
|
-
"version": "1.
|
|
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": "./
|
|
6
|
-
"types": "./
|
|
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-
|
|
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={
|
|
214
|
-
index={
|
|
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
|
package/lib/index.d.ts.map
DELETED
|
@@ -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"}
|