1import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types'; 2import {atom, useAtom} from 'jotai'; 3import {MutableRefObject, useEffect, useRef} from 'react'; 4import {BackHandler, NativeEventSubscription} from 'react-native'; 5import panels from './types'; 6 7type IPanel = typeof panels; 8type IPanelkeys = keyof IPanel; 9 10const panelNameAtom = atom<IPanelkeys | null>(null); 11const payloadAtom = atom<any>(null); 12 13export function _usePanel(ref?: MutableRefObject<BottomSheetMethods | undefined | null>) { 14 const [panelName, setPanelName] = useAtom(panelNameAtom); 15 const [payload, setPayload] = useAtom(payloadAtom); 16 const backHandlerRef = useRef<NativeEventSubscription>(); 17 18 function showPanel<T extends IPanelkeys>( 19 name: T, 20 payload?: Parameters<IPanel[T]>[0], 21 ) { 22 setPanelName(name); 23 setPayload(payload); 24 } 25 26 useEffect(() => { 27 if (backHandlerRef.current) { 28 backHandlerRef.current?.remove(); 29 backHandlerRef.current = undefined; 30 } 31 if (ref) { 32 backHandlerRef.current = BackHandler.addEventListener( 33 'hardwareBackPress', 34 () => { 35 ref.current?.close(); 36 return true; 37 }, 38 ); 39 } 40 return () => { 41 if (backHandlerRef.current) { 42 backHandlerRef.current?.remove(); 43 backHandlerRef.current = undefined; 44 } 45 }; 46 }, []); 47 48 function unmountPanel() { 49 setPanelName(null); 50 setPayload(null); 51 } 52 53 return {payload, panelName, showPanel, unmountPanel}; 54} 55 56export default function usePanel() { 57 const {showPanel, unmountPanel} = _usePanel(); 58 return {showPanel, unmountPanel}; 59} 60