@applicaster/zapp-react-native-utils/modalState/index.ts

Applicaster Zapp React Native utilities package

import { useStore, createStore } from "zustand";

interface ModalState {
  visible: boolean;
  screen: any;
  options: Record<string, unknown>;
  props: Record<string, unknown>;
}

interface ModalStore {
  modalState: ModalState;
  setModalState: (newState: Partial<ModalState>) => void;
  openModal: (
    item: any,
    options?: Record<string, unknown>,
    props?: Record<string, unknown>
  ) => void;
  dismissModal: () => void;
}

const initialModalState: ModalState = {
  visible: false,
  screen: null,
  options: {},
  props: {},
};

export const modalStore = createStore<ModalStore>((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 = <T>(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<ModalState>((state) => state.modalState);