react-modal-port 0.2.6 → 1.0.0

package/dist/index.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.umd.js","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n  createContext, \n  useContext, \n  useState, \n  useCallback,\n  type SyntheticEvent \n} from 'react';\nimport { \n  type ModalStackItem,\n  type ModalContextProperties,\n  type LaunchModal,\n  type LaunchModalResolvers,\n  type ModalState,\n  type UpdateModalState,\n  ModalProps,\n} from './types';\n\nexport const ModalContext = createContext<ModalContextProperties | null>(null);\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n  const [ stack, updateStack ] = useState<ModalStackItem<any>[]>([]);\n\n  const launchModal = useCallback(<P extends Record<string, any> = Record<string, any>>(\n    render: React.FunctionComponent<ModalProps<P>>, \n    resolvers: LaunchModalResolvers,\n    props: any = {}\n  ) => {\n    // Wrap resolvers to update the stack\n    const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n      const resolver = resolvers[key];\n      acc[key] = async (...args: any[]) => {\n        const result = await resolver(...args);\n        // update stack with an array containing all the items in the stack except the last one\n        updateStack(currStack => currStack.slice(0, -1));\n        return result;\n      };\n      return acc;\n    }, {} as LaunchModalResolvers);\n\n    updateStack(prevStack => [\n      ...prevStack,\n      {\n        render,\n        resolvers: wrappedResovers,\n        props,\n        state: {},\n      },\n    ]);\n  }, []);\n\n  const updateState = useCallback((newState: ModalState) => {\n    updateStack(prevStack => {\n      const updatedStack = [...prevStack];\n      if (updatedStack.length > 0) {\n        updatedStack[updatedStack.length - 1] = {\n          ...updatedStack[updatedStack.length - 1],\n          state: { ...newState }\n        };\n      }\n      return updatedStack;\n    });\n  }, []);\n\n  const contextProperties: ModalContextProperties = {\n    stack,\n    launchModal,\n    updateStack,\n    updateState,\n  };\n\n  return <ModalContext.Provider value={contextProperties}>{children}</ModalContext.Provider>;\n\n};\n\n/**\n * Get properties from the modal context\n * @returns {ModalContextProperties} Object with the modal context properties\n */\nexport function useModalContext(): ModalContextProperties {\n  const context = useContext(ModalContext);\n  if (!context) {\n    throw new Error('useModalContext must be used within a ModalContextProvider');\n  }\n  return context;\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal() {\n  const { launchModal } = useModalContext();\n  return launchModal;\n}\n\n/**\n * Get access to the current modal state and a function to update it\n * @returns {[ ModalState | null, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState | null, UpdateModalState ] {\n  const { stack, updateState } = useModalContext();\n  if (stack.length === 0) {\n    return [null, updateState];\n  }\n  const state = stack[stack.length - 1].state;\n  return [ state, updateState ];\n}\n","import { \n  ModalProps,\n  type ModalPortProps, \n  type ModalStackItem \n} from \"./types\";\nimport { useModalContext } from \"./context\";\nimport { \n  type SyntheticEvent, \n  useCallback, \n  useEffect, \n  useMemo,\n  useRef,\n  type ReactElement\n} from \"react\";\n\nconst ModalPort: React.FC<ModalPortProps> = ({\n  onModalLaunch,\n  onModalClose,\n  render: Backdrop\n}) => {\n\n  const { stack } = useModalContext();\n  const currentModal: ModalStackItem<ModalProps> | null = useMemo(\n    () => stack.length > 0 ? stack[stack.length - 1] : null,\n    [ stack ]\n  );\n  \n  const previousModalRef = useRef<ModalStackItem<ModalProps> | null>(null);\n  \n  const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n    if (ev.currentTarget !== ev.target) return;\n    if (currentModal?.resolvers.onBackdropClick) {\n      currentModal.resolvers.onBackdropClick(ev);\n    }\n  }, [ currentModal ]);\n\n  useEffect(() => {\n    const previousModal = previousModalRef.current;\n    \n    // Modal was launched (went from no modal to having a modal)\n    if (!previousModal && currentModal) {\n      onModalLaunch?.();\n    }\n    // Modal was closed (went from having a modal to no modal)\n    else if (previousModal && !currentModal) {\n      onModalClose?.();\n    }\n    \n    // Update the ref for next time\n    previousModalRef.current = currentModal;\n  }, [ currentModal, onModalLaunch, onModalClose ]);\n\n  const ModalContent = currentModal?.render;\n\n  return (\n    <>\n      {ModalContent && (\n        <Backdrop onBackdropClick={onBackdropClick}>\n          <ModalContent\n            {...currentModal.resolvers}\n            {...currentModal.props}\n          />\n        </Backdrop>\n      ) || null}\n    </>\n  );\n};\n\nexport default ModalPort;\nexport { ModalPort };\n"],"names":["ModalContext","createContext","useModalContext","context","useContext","Error","_ref","children","_useState","useState","stack","updateStack","launchModal","useCallback","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","prevStack","concat","state","updateState","newState","updatedStack","length","_extends","_jsx","Provider","value","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","previousModalRef","useRef","onBackdropClick","ev","currentTarget","target","useEffect","previousModal","current","ModalContent","_Fragment","jsx","_useModalContext2"],"mappings":"giBAiBaA,EAAeC,EAAaA,cAAgC,MA8DzD,SAAAC,IACd,IAAMC,EAAUC,EAAUA,WAACJ,GAC3B,IAAKG,EACH,MAAU,IAAAE,MAAM,8DAElB,OAAOF,CACT,wBAlEoC,SAAHG,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAwB,IAAvDC,EAAKF,EAAA,GAAEG,EAAWH,EAE1B,GAAMI,EAAcC,EAAAA,YAAY,SAC9BC,EACAC,EACAC,QAAAA,IAAAA,IAAAA,EAAa,IAGb,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,GAAI,WAAA,IAA4B,OAAAE,QAAAC,QACbF,EAAQG,WAAAC,EAAAA,GAAAA,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADApB,EAAY,SAAAqB,GAAa,OAAAA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,UAAAT,QAAAU,OAAAD,EAAA,CAAA,EACMZ,CACT,EAAG,CAAA,GAEHV,EAAY,SAAAwB,GAAS,MAAA,GAAAC,OAChBD,EACH,CAAA,CACErB,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAqB,MAAO,CAAA,IAEV,EACH,EAAG,IAEGC,EAAczB,cAAY,SAAC0B,GAC/B5B,EAAY,SAAAwB,GACV,IAAMK,EAAYJ,GAAAA,OAAOD,GAOzB,OANIK,EAAaC,OAAS,IACxBD,EAAaA,EAAaC,OAAS,GAAEC,EAChCF,CAAAA,EAAAA,EAAaA,EAAaC,OAAS,GACtCJ,CAAAA,MAAKK,KAAOH,MAGTC,CACT,EACF,EAAG,IASH,OAAOG,EAAAA,IAAC3C,EAAa4C,SAAQ,CAACC,MAPoB,CAChDnC,MAAAA,EACAE,YAAAA,EACAD,YAAAA,EACA2B,YAAAA,GAGoD/B,SAAGA,GAE3D,cC1D4C,SAA7BD,GACb,IAAAwC,EAAaxC,EAAbwC,cACAC,EAAYzC,EAAZyC,aACQC,EAAQ1C,EAAhBQ,OAGQJ,EAAUR,IAAVQ,MACFuC,EAAkDC,EAAAA,QACtD,WAAA,OAAMxC,EAAM+B,OAAS,EAAI/B,EAAMA,EAAM+B,OAAS,GAAK,IAAI,EACvD,CAAE/B,IAGEyC,EAAmBC,SAA0C,MAE7DC,EAAkBxC,EAAAA,YAAY,SAACyC,GAC/BA,EAAGC,gBAAkBD,EAAGE,cACxBP,GAAAA,EAAclC,UAAUsC,iBAC1BJ,EAAalC,UAAUsC,gBAAgBC,EAE3C,EAAG,CAAEL,IAELQ,EAAAA,UAAU,WACR,IAAMC,EAAgBP,EAAiBQ,SAGlCD,GAAiBT,EACP,MAAbH,GAAAA,IAGOY,IAAkBT,IACzBF,MAAAA,GAAAA,KAIFI,EAAiBQ,QAAUV,CAC7B,EAAG,CAAEA,EAAcH,EAAeC,IAElC,IAAMa,EAAeX,MAAAA,OAAAA,EAAAA,EAAcnC,OAEnC,OACE6B,EAAAA,IAAAkB,EAAAA,SAAA,CAAAtD,SACGqD,GACCjB,EAAAmB,IAACd,EAAQ,CAACK,gBAAiBA,EAAe9C,SACxCoC,EAACmB,IAAAF,EAAYlB,EACPO,CAAAA,EAAAA,EAAalC,UACbkC,EAAajC,WAGlB,MAGX,wBD2BE,OADwBd,IAAhBU,WAEV,iDAOE,IAAAmD,EAA+B7D,IAAvBQ,EAAKqD,EAALrD,MAAO4B,EAAWyB,EAAXzB,YACf,OAAqB,IAAjB5B,EAAM+B,OACD,CAAC,KAAMH,GAGT,CADO5B,EAAMA,EAAM+B,OAAS,GAAGJ,MACtBC,EAClB"}

package/types/context.d.ts

@@ -1,20 +0,0 @@
-import { type ModalContextProperties, type LaunchModalResolvers, type ModalState, type UpdateModalState, ModalProps } from './types';
-export declare const ModalContext: import("react").Context<ModalContextProperties | null>;
-export declare const ModalContextProvider: ({ children }: Readonly<{
-    children: React.ReactNode;
-}>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Get properties from the modal context
- * @returns {ModalContextProperties} Object with the modal context properties
- */
-export declare function useModalContext(): ModalContextProperties;
-/**
- * Short-hand for `useModalContext().launchModal`
- * @returns {LaunchModal} The launchModal function
- */
-export declare function useModal(): <P extends Record<string, any> = Record<string, any>>(render: React.FunctionComponent<ModalProps<P>>, resolvers: LaunchModalResolvers, props?: import("./types").LaunchModalProps) => void;
-/**
- * Get access to the current modal state and a function to update it
- * @returns {[ ModalState | null, UpdateModalState ]} A tuple with the current modal state and a function to update it
- */
-export declare function useModalState(): [ModalState | null, UpdateModalState];

package/types/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAEhB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACtB,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,YAAY,wDAAqD,CAAC;AAE/E,eAAO,MAAM,oBAAoB,GAAI,cAAc,QAAQ,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,4CAkDzF,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,sBAAsB,CAMxD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAGtC;AAED;;;GAGG;AACH,wBAAgB,aAAa,IAAI,CAAE,UAAU,GAAG,IAAI,EAAE,gBAAgB,CAAE,CAOvE"}

package/types/index.d.ts

@@ -1,3 +0,0 @@
-export { ModalContextProvider, useModalContext, useModal, useModalState, } from './context';
-export { ModalPort } from './modal-port';
-export type { ModalResolver, LaunchModalResolvers, LaunchModalProps, ModalProps, ModalStackItem, LaunchModal, ModalState, UpdateModalState, ModalContextProperties, ModalPortRenderProps, ModalPortProps } from './types';

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,QAAQ,EACR,aAAa,GACd,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/types/modal-port.d.ts

@@ -1,4 +0,0 @@
-import { type ModalPortProps } from "./types";
-declare const ModalPort: React.FC<ModalPortProps>;
-export default ModalPort;
-export { ModalPort };

package/types/modal-port.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal-port.d.ts","sourceRoot":"","sources":["../src/modal-port.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,UAAU,CAAC;AAWlB,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+DvC,CAAC;AAEF,eAAe,SAAS,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/types/setupTests.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/types/types.d.ts

@@ -1,34 +0,0 @@
-import { type SyntheticEvent } from "react";
-export type ModalResolver = (...args: any[]) => Promise<void> | void;
-export type LaunchModalResolvers = {
-    [key: string]: ModalResolver;
-};
-export type LaunchModalProps = {
-    [key: string]: any;
-};
-export type ModalProps<P = Record<string, any>> = P;
-export type ModalStackItem<P extends Record<string, any> = Record<string, any>> = {
-    render: React.FunctionComponent<ModalProps<P>>;
-    resolvers: LaunchModalResolvers;
-    props: LaunchModalProps;
-    state: ModalState;
-};
-export type LaunchModal<P extends Record<string, any> = Record<string, any>> = (render: React.FunctionComponent<ModalProps<P>>, resolvers: LaunchModalResolvers, props?: LaunchModalProps) => void;
-export type ModalState = {
-    [key: string]: any;
-};
-export type UpdateModalState = (newState: ModalState) => void;
-export type ModalContextProperties = {
-    stack: ModalStackItem<any>[];
-    launchModal: <P extends Record<string, any> = Record<string, any>>(render: React.FunctionComponent<ModalProps<P>>, resolvers: LaunchModalResolvers, props?: LaunchModalProps) => void;
-    updateStack: (newStack: ModalStackItem<any>[]) => void;
-    updateState: (newState: ModalState) => void;
-};
-export type ModalPortRenderProps = React.PropsWithChildren & {
-    onBackdropClick?: (ev: SyntheticEvent) => void;
-};
-export type ModalPortProps = {
-    onModalLaunch?: () => void | null;
-    onModalClose?: () => void | null;
-    render: React.FC<ModalPortRenderProps>;
-};