react-modal-port 0.2.2 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +19 -10
- package/readme.md +21 -7
- package/types/context.d.ts +20 -0
- package/types/context.d.ts.map +1 -0
- package/types/index.d.ts +3 -60
- package/types/index.d.ts.map +1 -0
- package/types/modal-port.d.ts +4 -0
- package/types/modal-port.d.ts.map +1 -0
- package/types/setupTests.d.ts +1 -0
- package/types/types.d.ts +34 -0
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=require("react/jsx-runtime"),
|
|
1
|
+
var e=require("react/jsx-runtime"),r=require("react");function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},n.apply(null,arguments)}var t=r.createContext(null);function o(){var e=r.useContext(t);if(!e)throw new Error("useModalContext must be used within a ModalContextProvider");return e}exports.ModalContextProvider=function(o){var u=o.children,a=r.useState([]),l=a[0],c=a[1],s=r.useCallback(function(e,r,n){void 0===n&&(n={});var t=Object.keys(r).reduce(function(e,n){var t=r[n];return e[n]=function(){try{return Promise.resolve(t.apply(void 0,[].slice.call(arguments))).then(function(e){return c(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});c(function(r){return[].concat(r,[{render:e,resolvers:t,props:n,state:{}}])})},[]),i=r.useCallback(function(e){c(function(r){var t=[].concat(r);return t.length>0&&(t[t.length-1]=n({},t[t.length-1],{state:n({},e)})),t})},[]);return e.jsx(t.Provider,{value:{stack:l,launchModal:s,updateStack:c,updateState:i},children:u})},exports.ModalPort=function(t){var u=t.onModalLaunch,a=t.onModalClose,l=t.render,c=o().stack,s=r.useMemo(function(){return c.length>0?c[c.length-1]:null},[c]),i=r.useRef(null),d=r.useCallback(function(e){e.currentTarget===e.target&&null!=s&&s.resolvers.onBackdropClick&&s.resolvers.onBackdropClick(e)},[s]);r.useEffect(function(){var e=i.current;!e&&s?null==u||u():e&&!s&&(null==a||a()),i.current=s},[s,u,a]);var v=null==s?void 0:s.render;return e.jsx(e.Fragment,{children:v&&e.jsx(l,{onBackdropClick:d,children:e.jsx(v,n({},s.resolvers,s.props))})||null})},exports.useModal=function(){return o().launchModal},exports.useModalContext=o,exports.useModalState=function(){var e=o(),r=e.stack,n=e.updateState;return 0===r.length?[null,n]:[r[r.length-1].state,n]};
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \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} from '
|
|
1
|
+
{"version":3,"file":"index.cjs","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":"kRAiBaA,EAAeC,EAAaA,cAAgC,MA8DzD,SAAAC,IACd,IAAMC,EAAUC,EAAUA,WAACJ,GAC3B,IAAKG,EACH,MAAU,IAAAE,MAAM,8DAElB,OAAOF,CACT,8BAlEoC,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,oBC1D4C,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,8BD2BE,OADwBd,IAAhBU,WAEV,6DAOE,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/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n}from"react/jsx-runtime";import{createContext as
|
|
1
|
+
import{jsx as r,Fragment as n}from"react/jsx-runtime";import{createContext as t,useState as e,useCallback as o,useContext as l,useMemo as u,useRef as c,useEffect as a}from"react";function i(){return i=Object.assign?Object.assign.bind():function(r){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var e in t)({}).hasOwnProperty.call(t,e)&&(r[e]=t[e])}return r},i.apply(null,arguments)}var s=t(null),d=function(n){var t=n.children,l=e([]),u=l[0],c=l[1],a=o(function(r,n,t){void 0===t&&(t={});var e=Object.keys(n).reduce(function(r,t){var e=n[t];return r[t]=function(){try{return Promise.resolve(e.apply(void 0,[].slice.call(arguments))).then(function(r){return c(function(r){return r.slice(0,-1)}),r})}catch(r){return Promise.reject(r)}},r},{});c(function(n){return[].concat(n,[{render:r,resolvers:e,props:t,state:{}}])})},[]),d=o(function(r){c(function(n){var t=[].concat(n);return t.length>0&&(t[t.length-1]=i({},t[t.length-1],{state:i({},r)})),t})},[]);return r(s.Provider,{value:{stack:u,launchModal:a,updateStack:c,updateState:d},children:t})};function v(){var r=l(s);if(!r)throw new Error("useModalContext must be used within a ModalContextProvider");return r}function f(){return v().launchModal}function h(){var r=v(),n=r.stack,t=r.updateState;return 0===n.length?[null,t]:[n[n.length-1].state,t]}var p=function(t){var e=t.onModalLaunch,l=t.onModalClose,s=t.render,d=v().stack,f=u(function(){return d.length>0?d[d.length-1]:null},[d]),h=c(null),p=o(function(r){r.currentTarget===r.target&&null!=f&&f.resolvers.onBackdropClick&&f.resolvers.onBackdropClick(r)},[f]);a(function(){var r=h.current;!r&&f?null==e||e():r&&!f&&(null==l||l()),h.current=f},[f,e,l]);var g=null==f?void 0:f.render;return r(n,{children:g&&r(s,{onBackdropClick:p,children:r(g,i({},f.resolvers,f.props))})||null})};export{d as ModalContextProvider,p as ModalPort,f as useModal,v as useModalContext,h as useModalState};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \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} from '
|
|
1
|
+
{"version":3,"file":"index.mjs","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","ModalContextProvider","_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","useModalContext","context","useContext","Error","useModal","useModalState","_useModalContext2","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","previousModalRef","useRef","onBackdropClick","ev","currentTarget","target","useEffect","previousModal","current","ModalContent","_Fragment"],"mappings":"+YAiBaA,EAAeC,EAA6C,MAE5DC,EAAuB,SAAHC,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAgC,IAAvDC,EAAKF,EAAA,GAAEG,EAAWH,EAE1B,GAAMI,EAAcC,EAAY,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,EAAY,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,EAACxC,EAAayC,SAAQ,CAACC,MAPoB,CAChDnC,MAAAA,EACAE,YAAAA,EACAD,YAAAA,EACA2B,YAAAA,GAGoD/B,SAAGA,GAE3D,EAMgB,SAAAuC,IACd,IAAMC,EAAUC,EAAW7C,GAC3B,IAAK4C,EACH,MAAU,IAAAE,MAAM,8DAElB,OAAOF,CACT,UAMgBG,IAEd,OADwBJ,IAAhBlC,WAEV,UAMgBuC,IACd,IAAAC,EAA+BN,IAAvBpC,EAAK0C,EAAL1C,MAAO4B,EAAWc,EAAXd,YACf,OAAqB,IAAjB5B,EAAM+B,OACD,CAAC,KAAMH,GAGT,CADO5B,EAAMA,EAAM+B,OAAS,GAAGJ,MACtBC,EAClB,CC5FM,IAAAe,EAAsC,SAA7B/C,GACb,IAAAgD,EAAahD,EAAbgD,cACAC,EAAYjD,EAAZiD,aACQC,EAAQlD,EAAhBQ,OAGQJ,EAAUoC,IAAVpC,MACF+C,EAAkDC,EACtD,WAAA,OAAMhD,EAAM+B,OAAS,EAAI/B,EAAMA,EAAM+B,OAAS,GAAK,IAAI,EACvD,CAAE/B,IAGEiD,EAAmBC,EAA0C,MAE7DC,EAAkBhD,EAAY,SAACiD,GAC/BA,EAAGC,gBAAkBD,EAAGE,cACxBP,GAAAA,EAAc1C,UAAU8C,iBAC1BJ,EAAa1C,UAAU8C,gBAAgBC,EAE3C,EAAG,CAAEL,IAELQ,EAAU,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,EAAc3C,OAEnC,OACE6B,EAAA0B,EAAA,CAAA9D,SACG6D,GACCzB,EAACa,EAAQ,CAACK,gBAAiBA,EAAetD,SACxCoC,EAACyB,EAAY1B,EACPe,CAAAA,EAAAA,EAAa1C,UACb0C,EAAazC,WAGlB,MAGX"}
|
package/dist/index.modern.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{createContext as
|
|
1
|
+
import{jsx as n,Fragment as t}from"react/jsx-runtime";import{createContext as r,useState as e,useCallback as o,useContext as l,useMemo as c,useRef as s,useEffect as a}from"react";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)({}).hasOwnProperty.call(r,e)&&(n[e]=r[e])}return n},u.apply(null,arguments)}const i=r(null),d=({children:t})=>{const[r,l]=e([]),c=o((n,t,r={})=>{const e=Object.keys(t).reduce((n,r)=>{const e=t[r];return n[r]=async(...n)=>{const t=await e(...n);return l(n=>n.slice(0,-1)),t},n},{});l(t=>[...t,{render:n,resolvers:e,props:r,state:{}}])},[]),s=o(n=>{l(t=>{const r=[...t];return r.length>0&&(r[r.length-1]=u({},r[r.length-1],{state:u({},n)})),r})},[]);return n(i.Provider,{value:{stack:r,launchModal:c,updateStack:l,updateState:s},children:t})};function h(){const n=l(i);if(!n)throw new Error("useModalContext must be used within a ModalContextProvider");return n}function p(){const{launchModal:n}=h();return n}function g(){const{stack:n,updateState:t}=h();return 0===n.length?[null,t]:[n[n.length-1].state,t]}const k=({onModalLaunch:r,onModalClose:e,render:l})=>{const{stack:i}=h(),d=c(()=>i.length>0?i[i.length-1]:null,[i]),p=s(null),g=o(n=>{n.currentTarget===n.target&&null!=d&&d.resolvers.onBackdropClick&&d.resolvers.onBackdropClick(n)},[d]);a(()=>{const n=p.current;!n&&d?null==r||r():n&&!d&&(null==e||e()),p.current=d},[d,r,e]);const k=null==d?void 0:d.render;return n(t,{children:k&&n(l,{onBackdropClick:g,children:n(k,u({},d.resolvers,d.props))})||null})};export{d as ModalContextProvider,k as ModalPort,p as useModal,h as useModalContext,g as useModalState};
|
|
2
2
|
//# sourceMappingURL=index.modern.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \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} from '
|
|
1
|
+
{"version":3,"file":"index.modern.mjs","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","ModalContextProvider","children","stack","updateStack","useState","launchModal","useCallback","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","async","args","result","currStack","slice","prevStack","state","updateState","newState","updatedStack","length","_extends","_jsx","Provider","value","useModalContext","context","useContext","Error","useModal","useModalState","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","previousModalRef","useRef","onBackdropClick","ev","currentTarget","target","useEffect","previousModal","current","ModalContent","_Fragment"],"mappings":"iZAiBaA,EAAeC,EAA6C,MAE5DC,EAAuBA,EAAGC,eAErC,MAAQC,EAAOC,GAAgBC,EAAgC,IAEzDC,EAAcC,EAAY,CAC9BC,EACAC,EACAC,EAAa,CAAE,KAGf,MAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,CAACC,EAAKC,KAC1D,MAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,GAAOE,SAAUC,KACnB,MAAMC,QAAeH,KAAYE,GAGjC,OADAf,EAAYiB,GAAaA,EAAUC,MAAM,GAAI,IACtCF,GAEFL,GACN,CAA0B,GAE7BX,EAAYmB,GAAa,IACpBA,EACH,CACEf,SACAC,UAAWE,EACXD,QACAc,MAAO,CAAA,MAGV,IAEGC,EAAclB,EAAamB,IAC/BtB,EAAYmB,IACV,MAAMI,EAAe,IAAIJ,GAOzB,OANII,EAAaC,OAAS,IACxBD,EAAaA,EAAaC,OAAS,GAAEC,EAChCF,GAAAA,EAAaA,EAAaC,OAAS,GACtCJ,CAAAA,MAAKK,EAAA,CAAA,EAAOH,MAGTC,GACR,EACA,IASH,OAAOG,EAAC/B,EAAagC,SAAQ,CAACC,MAPoB,CAChD7B,QACAG,cACAF,cACAqB,eAGoDvB,SAAGA,GAAQ,EAQnD,SAAA+B,IACd,MAAMC,EAAUC,EAAWpC,GAC3B,IAAKmC,EACH,UAAUE,MAAM,8DAElB,OAAOF,CACT,UAMgBG,IACd,MAAM/B,YAAEA,GAAgB2B,IACxB,OAAO3B,CACT,UAMgBgC,IACd,MAAMnC,MAAEA,EAAKsB,YAAEA,GAAgBQ,IAC/B,OAAqB,IAAjB9B,EAAMyB,OACD,CAAC,KAAMH,GAGT,CADOtB,EAAMA,EAAMyB,OAAS,GAAGJ,MACtBC,EAClB,CC5FM,MAAAc,EAAsCA,EAC1CC,gBACAC,eACAjC,OAAQkC,MAGR,MAAMvC,MAAEA,GAAU8B,IACZU,EAAkDC,EACtD,IAAMzC,EAAMyB,OAAS,EAAIzB,EAAMA,EAAMyB,OAAS,GAAK,KACnD,CAAEzB,IAGE0C,EAAmBC,EAA0C,MAE7DC,EAAkBxC,EAAayC,IAC/BA,EAAGC,gBAAkBD,EAAGE,QACZ,MAAZP,GAAAA,EAAclC,UAAUsC,iBAC1BJ,EAAalC,UAAUsC,gBAAgBC,EACzC,EACC,CAAEL,IAELQ,EAAU,KACR,MAAMC,EAAgBP,EAAiBQ,SAGlCD,GAAiBT,EACP,MAAbH,GAAAA,IAGOY,IAAkBT,IACb,MAAZF,GAAAA,KAIFI,EAAiBQ,QAAUV,CAAAA,EAC1B,CAAEA,EAAcH,EAAeC,IAElC,MAAMa,EAA2B,MAAZX,OAAY,EAAZA,EAAcnC,OAEnC,OACEsB,EAAAyB,EAAA,CAAArD,SACGoD,GACCxB,EAACY,EAAQ,CAACK,gBAAiBA,EAAe7C,SACxC4B,EAACwB,EAAYzB,EAAA,CAAA,EACPc,EAAalC,UACbkC,EAAajC,WAGlB,MAAI"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],n):n((e||self).reactModalPort={},e.jsx,e.react)}(this,function(e,n,t){function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},r.apply(null,arguments)}var o=t.createContext(null);function u(){var e=t.useContext(o);if(!e)throw new Error("useModalContext must be used within a ModalContextProvider");return e}e.ModalContextProvider=function(e){var u=e.children,a=t.useState([]),l=a[0],c=a[1],i=t.useCallback(function(e,n,t){void 0===t&&(t={});var r=Object.keys(n).reduce(function(e,t){var r=n[t];return e[t]=function(){try{return Promise.resolve(r.apply(void 0,[].slice.call(arguments))).then(function(e){return c(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});c(function(n){return[].concat(n,[{render:e,resolvers:r,props:t,state:{}}])})},[]),s=t.useCallback(function(e){c(function(n){var t=[].concat(n);return t.length>0&&(t[t.length-1]=r({},t[t.length-1],{state:r({},e)})),t})},[]);return n.jsx(o.Provider,{value:{stack:l,launchModal:i,updateStack:c,updateState:s},children:u})},e.ModalPort=function(e){var o=e.onModalLaunch,a=e.onModalClose,l=e.render,c=u().stack,i=t.useMemo(function(){return c.length>0?c[c.length-1]:null},[c]),s=t.useRef(null),d=t.useCallback(function(e){e.currentTarget===e.target&&null!=i&&i.resolvers.onBackdropClick&&i.resolvers.onBackdropClick(e)},[i]);t.useEffect(function(){var e=s.current;!e&&i?null==o||o():e&&!i&&(null==a||a()),s.current=i},[i,o,a]);var f=null==i?void 0:i.render;return n.jsx(n.Fragment,{children:f&&n.jsx(l,{onBackdropClick:d,children:n.jsx(f,r({},i.resolvers,i.props))})||null})},e.useModal=function(){return u().launchModal},e.useModalContext=u,e.useModalState=function(){var e=u(),n=e.stack,t=e.updateState;return 0===n.length?[null,t]:[n[n.length-1].state,t]}});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \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} from '
|
|
1
|
+
{"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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-modal-port",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"description": "Launch modals from any React component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -25,7 +25,9 @@
|
|
|
25
25
|
"build:cjs": "microbundle -o dist/index.cjs --format cjs --globals react/jsx-runtime=jsx",
|
|
26
26
|
"build:umd": "microbundle -o dist/index.umd.js --format umd --globals react/jsx-runtime=jsx",
|
|
27
27
|
"prepare": "npm run build",
|
|
28
|
-
"test": "
|
|
28
|
+
"test": "jest",
|
|
29
|
+
"test:watch": "jest --watch",
|
|
30
|
+
"test:coverage": "jest --coverage"
|
|
29
31
|
},
|
|
30
32
|
"repository": {
|
|
31
33
|
"type": "git",
|
|
@@ -50,16 +52,23 @@
|
|
|
50
52
|
"homepage": "https://github.com/oliverwehn/react-modal-port#readme",
|
|
51
53
|
"dependencies": {},
|
|
52
54
|
"devDependencies": {
|
|
53
|
-
"react": "^
|
|
54
|
-
"react-dom": "^
|
|
55
|
-
"@types/react": "^
|
|
56
|
-
"@types/react-dom": "^
|
|
55
|
+
"react": "^19.0.0",
|
|
56
|
+
"react-dom": "^19.0.0",
|
|
57
|
+
"@types/react": "^19.0.0",
|
|
58
|
+
"@types/react-dom": "^19.0.0",
|
|
59
|
+
"@types/jest": "^29.5.14",
|
|
57
60
|
"microbundle": "^0.15.1",
|
|
58
|
-
"typescript": "^5.
|
|
61
|
+
"typescript": "^5.7.2",
|
|
62
|
+
"jest": "^29.7.0",
|
|
63
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
64
|
+
"ts-jest": "^29.2.5",
|
|
65
|
+
"@testing-library/react": "^16.3.0",
|
|
66
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
67
|
+
"@testing-library/user-event": "^14.5.2"
|
|
59
68
|
},
|
|
60
69
|
"peerDependencies": {
|
|
61
|
-
"@types/react": "^18",
|
|
62
|
-
"react": "^18",
|
|
63
|
-
"react-dom": "^18"
|
|
70
|
+
"@types/react": "^18.0.0 || ^19.0.0",
|
|
71
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
72
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
64
73
|
}
|
|
65
74
|
}
|
package/readme.md
CHANGED
|
@@ -5,7 +5,19 @@ This small but neat package allows you to:
|
|
|
5
5
|
* Launch modals flexibly from anywhere in your React app.
|
|
6
6
|
* Have them render at one specific place in your DOM.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
**Demo:** https://codepen.io/oliverwehn/pen/YzMyoBr?editors=0010
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
- [Installation](#-installation)
|
|
12
|
+
- [Components](#-components)
|
|
13
|
+
- [ModalContextProvider](#modalcontextprovider)
|
|
14
|
+
- [ModalPort](#modalport)
|
|
15
|
+
- [Usage Example](#usage-example)
|
|
16
|
+
- [Launching Modals](#-launching-modals)
|
|
17
|
+
- [Stacking Modals And Handling Modal State](#-stacking-modals-and-handling-modal-state)
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 🏁 Installation
|
|
9
21
|
|
|
10
22
|
```bash
|
|
11
23
|
$ npm install react-modal-port
|
|
@@ -19,13 +31,14 @@ The `ModalContextProvider` wraps your app to allow your app’s components to la
|
|
|
19
31
|
|
|
20
32
|
### ModalPort
|
|
21
33
|
|
|
22
|
-
The `ModalPort`
|
|
34
|
+
The `ModalPort` defines the outlet in your app through which your modals will be rendered. It requires one prop, `render`, that expects a `React.FunctionComponent`. Any modal you’ll launch will be rendered as the child of the component passed via the prop. Typically, this component will provide a backdrop the modal is rendered on top.
|
|
23
35
|
|
|
24
|
-
Besides `children
|
|
36
|
+
Besides `children`, a prop `onBackdropClick` is passed to `render`. It holds, if provided to the modal on launch, the click handler function that should be called if the backdrop is clicked, e.g. to dismiss the modal.
|
|
25
37
|
|
|
38
|
+
The `ModalPort` accepts two addtional optional props `onModalLauch` and `onModalClose` that both expect a function. The provided functions will be called in the event of a modal being launched or, respectively, a modal being closed.
|
|
26
39
|
|
|
40
|
+
### Usage Example
|
|
27
41
|
```tsx
|
|
28
|
-
import React from 'react';
|
|
29
42
|
import { ModalContextProvider } from 'react-modal-port';
|
|
30
43
|
|
|
31
44
|
// Backdrop component to be passed to the `ModalPort`’s `render` prop
|
|
@@ -54,6 +67,10 @@ const RootLayout:React.FC<PropsWithChildren> = ({ children }) => (
|
|
|
54
67
|
<ModalContextProvider>
|
|
55
68
|
<div style="width: 100%; min-height: 100vh;">
|
|
56
69
|
{children}
|
|
70
|
+
{
|
|
71
|
+
/* The ModalPort defines the place in the app
|
|
72
|
+
* where your modals will be rendered */
|
|
73
|
+
}
|
|
57
74
|
<ModalPort render={Backdrop} />
|
|
58
75
|
</div>
|
|
59
76
|
</ModalContextProvider>
|
|
@@ -67,7 +84,6 @@ export default RootLayout;
|
|
|
67
84
|
Launching modals makes use of the `useModal` hook that provides you with the `launchModal` function.
|
|
68
85
|
|
|
69
86
|
```tsx
|
|
70
|
-
import React from 'react';
|
|
71
87
|
import { useModal } from 'react-modal-port';
|
|
72
88
|
import DecisionModal from './modals/decision';
|
|
73
89
|
|
|
@@ -122,7 +138,6 @@ The `launchModal` function expects the following arguments:
|
|
|
122
138
|
Modals can be created and designed to fully fit your needs. The only requirement is to define the functions to resolve them, for example, when clicking a button. The modal component for the example above could look like this:
|
|
123
139
|
|
|
124
140
|
```tsx
|
|
125
|
-
import React from 'react';
|
|
126
141
|
|
|
127
142
|
type DecisionModalProps = {
|
|
128
143
|
decideYay: () => void;
|
|
@@ -184,7 +199,6 @@ It then could cater the following modal functionality:
|
|
|
184
199
|
|
|
185
200
|
|
|
186
201
|
```tsx
|
|
187
|
-
import React from 'react';
|
|
188
202
|
|
|
189
203
|
type DecisionModalProps = {
|
|
190
204
|
decideYay: () => void;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type ModalContextProperties, type LaunchModalResolvers, type ModalState, type UpdateModalState, ModalProps } from './types';
|
|
2
|
+
export declare const ModalContext: import("react").Context<ModalContextProperties | null>;
|
|
3
|
+
export declare const ModalContextProvider: ({ children }: Readonly<{
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
}>) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
/**
|
|
7
|
+
* Get properties from the modal context
|
|
8
|
+
* @returns {ModalContextProperties} Object with the modal context properties
|
|
9
|
+
*/
|
|
10
|
+
export declare function useModalContext(): ModalContextProperties;
|
|
11
|
+
/**
|
|
12
|
+
* Short-hand for `useModalContext().launchModal`
|
|
13
|
+
* @returns {LaunchModal} The launchModal function
|
|
14
|
+
*/
|
|
15
|
+
export declare function useModal(): <P extends Record<string, any> = Record<string, any>>(render: React.FunctionComponent<ModalProps<P>>, resolvers: LaunchModalResolvers, props?: import("./types").LaunchModalProps) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Get access to the current modal state and a function to update it
|
|
18
|
+
* @returns {[ ModalState | null, UpdateModalState ]} A tuple with the current modal state and a function to update it
|
|
19
|
+
*/
|
|
20
|
+
export declare function useModalState(): [ModalState | null, UpdateModalState];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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
CHANGED
|
@@ -1,60 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export type ModalResolver = (...args: any[]) => Promise<void>|void;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export type LaunchModalResolvers = {
|
|
9
|
-
[key: string]: ModalResolver;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export type LaunchModalProps = {
|
|
13
|
-
[key: string]: any;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export type ModalProps = LaunchModalResolvers & LaunchModalProps;
|
|
17
|
-
|
|
18
|
-
export type ModalStackItem = {
|
|
19
|
-
render: React.FunctionComponent<LaunchModalResolvers>;
|
|
20
|
-
resolvers: LaunchModalResolvers;
|
|
21
|
-
props: LaunchModalProps;
|
|
22
|
-
state: ModalState;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export type LaunchModal = (
|
|
26
|
-
render: React.FunctionComponent<ModalProps>,
|
|
27
|
-
resolvers: LaunchModalResolvers,
|
|
28
|
-
props?: LaunchModalProps,
|
|
29
|
-
) => void;
|
|
30
|
-
|
|
31
|
-
export type ModalState = { [key: string]: any };
|
|
32
|
-
export type UpdateModalState = (newState: ModalState) => void;
|
|
33
|
-
|
|
34
|
-
export type ModalContextProperties = {
|
|
35
|
-
stack: ModalStackItem[];
|
|
36
|
-
launchModal: LaunchModal;
|
|
37
|
-
updateStack: (newStack: ModalStackItem[]) => void;
|
|
38
|
-
updateState: (newState: ModalState) => void;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export type ModalPortRenderProps = React.PropsWithChildren & {
|
|
42
|
-
onBackdropClick?: (ev: React.SyntheticEvent) => void;
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export type ModalPortProps = {
|
|
46
|
-
onModalLaunch?: () => void | null;
|
|
47
|
-
onModalClose?: () => void | null;
|
|
48
|
-
render: React.FC<ModalPortRenderProps>;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
declare module 'react-modal-port' {
|
|
52
|
-
|
|
53
|
-
const ModalContextProvider: React.FC<PropsWithChildren>;
|
|
54
|
-
const useModalContext: () => ModalContextProperties;
|
|
55
|
-
const useModal: () => ModalContextProperties['launchModal'];
|
|
56
|
-
const useModalState: () => ModalState;
|
|
57
|
-
const ModalPort: React.FC<ModalPortProps>;
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
1
|
+
export { ModalContextProvider, useModalContext, useModal, useModalState, } from './context';
|
|
2
|
+
export { ModalPort } from './modal-port';
|
|
3
|
+
export type { ModalResolver, LaunchModalResolvers, LaunchModalProps, ModalProps, ModalStackItem, LaunchModal, ModalState, UpdateModalState, ModalContextProperties, ModalPortRenderProps, ModalPortProps } from './types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
package/types/types.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { type SyntheticEvent } from "react";
|
|
2
|
+
export type ModalResolver = (...args: any[]) => Promise<void> | void;
|
|
3
|
+
export type LaunchModalResolvers = {
|
|
4
|
+
[key: string]: ModalResolver;
|
|
5
|
+
};
|
|
6
|
+
export type LaunchModalProps = {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
};
|
|
9
|
+
export type ModalProps<P = Record<string, any>> = P;
|
|
10
|
+
export type ModalStackItem<P extends Record<string, any> = Record<string, any>> = {
|
|
11
|
+
render: React.FunctionComponent<ModalProps<P>>;
|
|
12
|
+
resolvers: LaunchModalResolvers;
|
|
13
|
+
props: LaunchModalProps;
|
|
14
|
+
state: ModalState;
|
|
15
|
+
};
|
|
16
|
+
export type LaunchModal<P extends Record<string, any> = Record<string, any>> = (render: React.FunctionComponent<ModalProps<P>>, resolvers: LaunchModalResolvers, props?: LaunchModalProps) => void;
|
|
17
|
+
export type ModalState = {
|
|
18
|
+
[key: string]: any;
|
|
19
|
+
};
|
|
20
|
+
export type UpdateModalState = (newState: ModalState) => void;
|
|
21
|
+
export type ModalContextProperties = {
|
|
22
|
+
stack: ModalStackItem<any>[];
|
|
23
|
+
launchModal: <P extends Record<string, any> = Record<string, any>>(render: React.FunctionComponent<ModalProps<P>>, resolvers: LaunchModalResolvers, props?: LaunchModalProps) => void;
|
|
24
|
+
updateStack: (newStack: ModalStackItem<any>[]) => void;
|
|
25
|
+
updateState: (newState: ModalState) => void;
|
|
26
|
+
};
|
|
27
|
+
export type ModalPortRenderProps = React.PropsWithChildren & {
|
|
28
|
+
onBackdropClick?: (ev: SyntheticEvent) => void;
|
|
29
|
+
};
|
|
30
|
+
export type ModalPortProps = {
|
|
31
|
+
onModalLaunch?: () => void | null;
|
|
32
|
+
onModalClose?: () => void | null;
|
|
33
|
+
render: React.FC<ModalPortRenderProps>;
|
|
34
|
+
};
|