1+ import CustomText from '@components/display/customText' ;
2+ import BottomSheet , { BottomSheetBackdrop , BottomSheetView } from '@gorhom/bottom-sheet' ;
3+ import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons' ;
4+ import { BottomSheetItem } from '@utils/types' ;
5+ import React , { createContext , useCallback , useContext , useMemo , useRef , useState } from "react" ;
6+ import { StyleSheet } from 'react-native' ;
7+ import { Pressable } from 'react-native-gesture-handler' ;
8+
9+ type sheetContextType = {
10+ setSheetData : ( data : BottomSheetItem [ ] ) => void ;
11+ closeSheet : ( ) => void ;
12+ expandSheet : ( ) => void ;
13+ }
14+ const BottomSheetContext = createContext < sheetContextType | null > ( null ) ;
15+
16+ export function BottomSheetProvider ( { children } : { children : React . ReactNode } ) {
17+ const [ data , setData ] = useState < BottomSheetItem [ ] > ( [ ] ) ;
18+ const bottomSheetRef = useRef < BottomSheet > ( null ) ;
19+ const snapPoints = useMemo ( ( ) => [ "25%" , "50%" ] , [ ] ) ;
20+
21+ const renderBackdrop = useCallback (
22+ ( props : any ) => (
23+ < BottomSheetBackdrop
24+ { ...props }
25+ disappearsOnIndex = { 1 }
26+ appearsOnIndex = { 2 }
27+ />
28+ ) ,
29+ [ ]
30+ ) ;
31+
32+ function setSheetData ( data : BottomSheetItem [ ] ) {
33+ setData ( data ) ;
34+ }
35+ function closeSheet ( ) {
36+ bottomSheetRef . current ?. close ( ) ;
37+ }
38+ function expandSheet ( ) {
39+ bottomSheetRef . current ?. expand ( ) ;
40+ console . log ( "expanding" ) ;
41+ }
42+
43+ return (
44+ < BottomSheetContext . Provider
45+ value = { {
46+ setSheetData,
47+ closeSheet,
48+ expandSheet
49+ } }
50+ >
51+ { children }
52+ < BottomSheet
53+ handleIndicatorStyle = { { backgroundColor : "white" } }
54+ index = { - 1 }
55+ snapPoints = { snapPoints }
56+ enablePanDownToClose
57+ ref = { bottomSheetRef }
58+ backdropComponent = { renderBackdrop }
59+ backgroundStyle = { { backgroundColor : "#17171d" } }
60+
61+ >
62+ < BottomSheetView style = { styles . contentContainer } >
63+ {
64+ data . map ( ( item : BottomSheetItem ) => (
65+ < Pressable onPress = { item . func } key = { item . text } style = { styles . button } >
66+ < MaterialDesignIcons name = { item . icon } color = "#bec5d0ff" size = { 25 } />
67+ < CustomText style = { { marginLeft : 10 , color : "#bec5d0ff" } } >
68+ { item . text }
69+ </ CustomText >
70+ </ Pressable >
71+ ) )
72+ }
73+ </ BottomSheetView >
74+ </ BottomSheet >
75+
76+ </ BottomSheetContext . Provider >
77+ )
78+ }
79+
80+ const styles = StyleSheet . create ( {
81+ button : {
82+ width : "100%" ,
83+ flexDirection : "row" ,
84+ alignItems : "center" ,
85+ justifyContent : "flex-start" ,
86+ paddingVertical : 15
87+ } ,
88+ contentContainer : {
89+ backgroundColor : "#17171d" ,
90+ borderColor : "#25252f" ,
91+ flex : 1 ,
92+ padding : 36 ,
93+ alignItems : 'flex-start' ,
94+ zIndex : 1 ,
95+ } ,
96+ } ) ;
97+
98+ export function useBottomSheetContext ( ) {
99+ const context = useContext ( BottomSheetContext ) ;
100+ if ( ! context ) {
101+ throw new Error ( "useUser must be used within a ModalContext" ) ;
102+ }
103+ return context ;
104+ }
0 commit comments