import { useStore, createStore } from "zustand"; interface ModalState { visible: boolean; screen: any; options: Record; props: Record; } interface ModalStore { modalState: ModalState; setModalState: (newState: Partial) => void; openModal: ( item: any, options?: Record, props?: Record ) => void; dismissModal: () => void; } const initialModalState: ModalState = { visible: false, screen: null, options: {}, props: {}, }; export const modalStore = createStore((set) => ({ modalState: initialModalState, setModalState: (newState) => set((state) => ({ modalState: { ...state.modalState, ...newState }, })), openModal: ({ item, options = {}, props }: OpenModalArg) => set({ modalState: { visible: true, screen: item, options: { animated: true, animationType: "slide", onShow: () => {}, presentationStyle: "overFullScreen", transparent: true, ...options, onDismiss: () => set({ modalState: initialModalState }), onRequestClose: () => set({ modalState: initialModalState }), }, props, }, }), dismissModal: () => set(() => ({ modalState: initialModalState })), })); export const useModalStore = (selector: (state: ModalStore) => T) => useStore(modalStore, selector); export const openModal = modalStore.getInitialState().openModal; export const dismissModal = modalStore.getInitialState().dismissModal; export const openBottomSheetModal = ({ ModalBottomSheetContent, modalBottomSheetContentProps, props = {}, options = {}, }: OpenModalBottomSheetArgs) => { openModal({ item: { ModalBottomSheetContent, modalBottomSheetContentProps, }, props, options: { animationType: "none", animated: false, ...options, }, }); }; export const useModalStoreState = (): ModalState => useModalStore((state) => state.modalState);