Add nested modal management

Author: AlexDemzz

README.md

@@ -2,7 +2,7 @@
 
 [![bundle size](https://img.shields.io/bundlephobia/minzip/react-easy-modals)](https://bundlephobia.com/result?p=react-easy-modals)
 
-A simple, flexible, zero-dependency, type-safe modal manager for React (port of [svelte-modals](https://github.com/mattjennings/svelte-modals)).
+A simple, flexible, zero-dependency, type-safe modal manager for React.
 
 [📚 Documentation](https://react-easy-modals-docs.vercel.app/)
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-easy-modals",
   "version": "1.2.0",
-  "description": "A simple, flexible, headless, zero-dependency modal stack manager for React (port of svelte-modals).",
+  "description": "A simple, flexible, headless, zero-dependency modal stack manager for React.",
   "homepage": "https://react-easy-modals-docs.vercel.app/",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/context.tsx

@@ -1,6 +1,11 @@
-import { createContext, useContext } from "react";
+import { createContext, ReactNode, useContext } from "react";
 import { ModalItemProvider } from "./item-context";
-import { ModalManager, ModalProviderProps } from "./types";
+import {
+  InternalModalInstance,
+  ModalInstance,
+  ModalManager,
+  ModalProviderProps,
+} from "./types";
 import { useModalManager } from "./use-modal-manager";
 
 const ModalContext = createContext<ModalManager | null>(null);
@@ -27,26 +32,46 @@ function Modals({
   modal,
 }: Omit<ModalProviderProps, "children">) {
   const modalManager = useModals();
-  const { stack, isLoading } = modalManager;
+  const { stack, isLoading, createOpen } = modalManager;
+
+  const renderModal = (internalModal: InternalModalInstance, isNested: boolean = false): ReactNode => {
+    const open = createOpen(internalModal.id);
+
+    const nestedElement = internalModal.nested
+      ? renderModal(internalModal.nested, true)
+      : null;
+
+    const modalInstance: ModalInstance = {
+      ...internalModal,
+      nested: nestedElement,
+      open,
+      isNested,
+    };
+
+    return (
+      <ModalItemProvider key={modalInstance.id} modal={modalInstance}>
+        {modal ? (
+          modal(modalInstance, modalManager)
+        ) : (
+          <modalInstance.component
+            {...modalInstance.props}
+            close={modalInstance.close}
+            isOpen={modalInstance.isOpen}
+            isNested={isNested}
+            id={modalInstance.id}
+            index={modalInstance.index}
+            open={modalInstance.open}
+            nested={nestedElement}
+          />
+        )}
+      </ModalItemProvider>
+    );
+  };
 
   return (
     <>
       {isLoading && loading && loading(modalManager)}
-      {stack.map((modalInstance) => (
-        <ModalItemProvider key={modalInstance.id} modal={modalInstance}>
-          {modal ? (
-            modal(modalInstance, modalManager)
-          ) : (
-            <modalInstance.component
-              {...modalInstance.props}
-              close={modalInstance.close}
-              isOpen={modalInstance.isOpen}
-              id={modalInstance.id}
-              index={modalInstance.index}
-            />
-          )}
-        </ModalItemProvider>
-      ))}
+      {stack.map((internalModal) => renderModal(internalModal))}
       {(isLoading || stack.length > 0) && backdrop && backdrop(modalManager)}
     </>
   );

src/index.ts

@@ -1,4 +1,4 @@
 export { ModalProvider, useModals } from "./context";
-export { useBeforeClose } from "./item-context";
+export { useBeforeClose, useModal } from "./item-context";
 export type { ModalProps } from "./types";
 export { useModalManager } from "./use-modal-manager";

src/item-context.tsx

@@ -14,7 +14,11 @@ export function useModal() {
 }
 
 export function useBeforeClose<R = unknown>(callback: (value?: R) => boolean) {
-  const modal = useModal();
+  const modal = useContext(ModalItemContext);
+
+  if (!modal) {
+    throw new Error("useBeforeClose must be called inside a modal component");
+  }
 
   useEffect(() => {
     modal.onBeforeClose(callback as (value?: any) => boolean);

src/types.ts

@@ -12,11 +12,30 @@ export interface ModalProviderProps {
   modal?: (modal: ModalInstance, modals: ModalManager) => ReactElement;
 }
 
+export type OpenFunction = {
+  <T extends Record<string, never>, R = unknown>(
+    component:
+      | ModalComponent<T, R>
+      | (() => Promise<{ default: ModalComponent<T, R> }>),
+    options?: ModalOptions
+  ): Promise<R>;
+  <T, R = unknown>(
+    component:
+      | ModalComponent<T, R>
+      | (() => Promise<{ default: ModalComponent<T, R> }>),
+    props: Omit<T, keyof ModalProps<R>>,
+    options?: ModalOptions
+  ): Promise<R>;
+};
+
 export interface ModalProps<ReturnValue = any> {
   index: number;
   id: string;
   isOpen: boolean;
+  isNested: boolean;
   close: (value?: ReturnValue) => void;
+  open: OpenFunction;
+  nested?: ReactNode;
 }
 
 // Type commun pour les composants modaux
@@ -29,9 +48,12 @@ export interface ModalInstance<T = any, ReturnValue = any> {
   id: string;
   props?: Omit<T, keyof ModalProps<ReturnValue>>;
   isOpen: boolean;
+  isNested: boolean;
   close: (value?: ReturnValue) => void;
   index: number;
   onBeforeClose: (callback: (value?: ReturnValue) => boolean) => void;
+  nested: ReactNode;
+  open: OpenFunction;
 }
 
 export interface ModalManager {
@@ -53,9 +75,21 @@ export interface ModalManager {
   close: (n?: number) => boolean;
   closeById: (id: string) => boolean;
   closeAll: () => boolean;
-  stack: ModalInstance[];
+  stack: InternalModalInstance[];
   action: ModalAction;
   isLoading: boolean;
+  createOpen: (parentId: string) => OpenFunction;
+}
+
+export interface InternalModalInstance<T = any, ReturnValue = any> {
+  component: ModalComponent<T, ReturnValue>;
+  id: string;
+  props?: Omit<T, keyof ModalProps<ReturnValue>>;
+  isOpen: boolean;
+  close: (value?: ReturnValue) => void;
+  index: number;
+  onBeforeClose: (callback: (value?: ReturnValue) => boolean) => void;
+  nested?: InternalModalInstance;
 }
 
 export type ModalAction = "none" | "push" | "replace" | "pop";