react-modal-port 0.1.1 → 0.1.2

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.
@@ -0,0 +1,2 @@
1
+ var e=require("react/jsx-runtime"),t=require("react");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}var n=t.createContext({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}});function o(){return t.useContext(n)}exports.ModalContextProvider=function(o){var a=o.children,c=t.useState([]),u=c[0],l=c[1];return e.jsx(n.Provider,{value:{stack:u,launchModal:function(e,t,r){var n=Object.keys(t).reduce(function(e,r){var n=t[r];return e[r]=function(e){try{return Promise.resolve(n(e)).then(function(e){return l(u.slice(0,-1)),e})}catch(e){return Promise.reject(e)}},e},{});l([].concat(u,[{render:e,resolvers:n,onBackdropClickUse:r,state:{}}]))},updateStack:l,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),l(t)}},children:a})},exports.ModalPort=function(r){var n=r.onModalLaunch,a=r.onModalClose,c=r.render,u=o().stack,l=t.useMemo(function(){return u.length>0?u[u.length-1]:null},[u]),s=t.useCallback(function(e){e.currentTarget===e.target&&(null==l?void 0:l.onBackdropClickUse)&&l.resolvers[l.onBackdropClickUse](e)},[l]);return t.useEffect(function(){l?n&&n():a&&a()},[l,n,a]),l&&e.jsx(c,{onBackdropClick:s,children:l.render(l.resolvers)})||null},exports.useModal=function(){return o().launchModal},exports.useModalContext=o;
2
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +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 '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n stack: [],\n launchModal: () => {},\n updateStack: () => {},\n updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\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 (ev?: SyntheticEvent) => {\n const result = await resolver(ev);\n updateStack(stack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n onBackdropClickUse,\n state: {},\n },\n ]);\n };\n\n const updateState = (newState: ModalState) => {\n const updatedStack = [\n ...stack,\n ];\n updatedStack[stack.length - 1].state = { ...newState };\n updateStack(updatedStack);\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 return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\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, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n const { stack, updateState } = useModalContext();\n if (stack.length === 0) \n throw new Error('Trying to access modal state while no modal is open');\n const state = stack[stack.length - 1].state;\n return [ state, updateState ];\n}\n","import { \n type ModalPortProps, \n type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n type SyntheticEvent, \n useCallback, \n useEffect, \n useMemo\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 | null = useMemo(\n () => stack.length > 0 ? stack[stack.length - 1] : null,\n [ stack ]\n );\n const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n if (ev.currentTarget !== ev.target) return;\n currentModal?.onBackdropClickUse &&\n currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n }, [ currentModal ]);\n\n useEffect(() => {\n if (currentModal) {\n onModalLaunch && onModalLaunch();\n } else {\n onModalClose && onModalClose();\n }\n }, [ currentModal, onModalLaunch, onModalClose ]);\n\n return currentModal && (\n <Backdrop onBackdropClick={onBackdropClick}>\n {currentModal.render(currentModal.resolvers)}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","_jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","ev","Promise","resolve","then","result","slice","e","reject","concat","state","newState","updatedStack","length","_extends","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"0RAea,IAAAA,EAAeC,EAAAA,cAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,WAAQ,EACrBC,YAAa,WACd,IAmDe,SAAAC,IACd,OAAOC,EAAAA,WAAWP,EACpB,8BAnDoC,SAAHQ,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAmB,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAAA,GAuC1B,OAAOE,EAAAA,IAACZ,EAAaa,SAAQ,CAACC,MAPoB,CAChDZ,MAAAA,EACAC,YAhC+B,SAACY,EAAQC,EAAWC,GAEnD,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,YAAcE,GAAmB,WAAIC,QAAAC,QAClBH,EAASC,IAAGG,KAA3BC,SAAAA,GAEN,OADAzB,EAAYF,EAAM4B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAA0B,GAC7BlB,KAAW6B,OACN/B,EACH,CAAA,CACEa,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE9B,YAAAA,EACAC,YAZkB,SAAC8B,GACnB,IAAMC,KAAYH,OACb/B,GAELkC,EAAalC,EAAMmC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5C/B,EAAYgC,EACd,GASsD3B,SAAGA,GAE3D,oBCrD4C,SAA7BD,GAIV,IAHH+B,EAAa/B,EAAb+B,cACAC,EAAYhC,EAAZgC,aACQC,EAAQjC,EAAhBO,OAGQb,EAAUI,IAAVJ,MACFwC,EAAsCC,EAAOA,QACjD,WAAA,OAAMzC,EAAMmC,OAAS,EAAInC,EAAMA,EAAMmC,OAAS,GAAK,IAAI,EACvD,CAAEnC,IAEE0C,EAAkBC,EAAWA,YAAC,SAACpB,GAC/BA,EAAGqB,gBAAkBrB,EAAGsB,SAChB,MAAZL,OAAY,EAAZA,EAAczB,qBACdyB,EAAa1B,UAAU0B,EAAazB,oBAAoBQ,EAC1D,EAAG,CAAEiB,IAUL,OARAM,EAAAA,UAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACL9B,EAAAA,IAAC6B,EAAS,CAAAG,gBAAiBA,EACxBnC,SAAAiC,EAAa3B,OAAO2B,EAAa1B,cAEjC,IACP,8BDuCE,OADwBV,IAAhBH,WAEV"}
@@ -0,0 +1,2 @@
1
+ import{jsx as n}from"react/jsx-runtime";import{createContext as r,useState as t,useContext as e,useMemo as c,useCallback as o,useEffect as a}from"react";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n},u.apply(this,arguments)}var i=r({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}}),l=function(r){var e=r.children,c=t([]),o=c[0],a=c[1];return n(i.Provider,{value:{stack:o,launchModal:function(n,r,t){var e=Object.keys(r).reduce(function(n,t){var e=r[t];return n[t]=function(n){try{return Promise.resolve(e(n)).then(function(n){return a(o.slice(0,-1)),n})}catch(n){return Promise.reject(n)}},n},{});a([].concat(o,[{render:n,resolvers:e,onBackdropClickUse:t,state:{}}]))},updateStack:a,updateState:function(n){var r=[].concat(o);r[o.length-1].state=u({},n),a(r)}},children:e})};function s(){return e(i)}function d(){return s().launchModal}var f=function(r){var t=r.onModalLaunch,e=r.onModalClose,u=r.render,i=s().stack,l=c(function(){return i.length>0?i[i.length-1]:null},[i]),d=o(function(n){n.currentTarget===n.target&&(null==l?void 0:l.onBackdropClickUse)&&l.resolvers[l.onBackdropClickUse](n)},[l]);return a(function(){l?t&&t():e&&e()},[l,t,e]),l&&n(u,{onBackdropClick:d,children:l.render(l.resolvers)})||null};export{l as ModalContextProvider,f as ModalPort,d as useModal,s as useModalContext};
2
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +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 '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n stack: [],\n launchModal: () => {},\n updateStack: () => {},\n updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\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 (ev?: SyntheticEvent) => {\n const result = await resolver(ev);\n updateStack(stack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n onBackdropClickUse,\n state: {},\n },\n ]);\n };\n\n const updateState = (newState: ModalState) => {\n const updatedStack = [\n ...stack,\n ];\n updatedStack[stack.length - 1].state = { ...newState };\n updateStack(updatedStack);\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 return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\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, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n const { stack, updateState } = useModalContext();\n if (stack.length === 0) \n throw new Error('Trying to access modal state while no modal is open');\n const state = stack[stack.length - 1].state;\n return [ state, updateState ];\n}\n","import { \n type ModalPortProps, \n type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n type SyntheticEvent, \n useCallback, \n useEffect, \n useMemo\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 | null = useMemo(\n () => stack.length > 0 ? stack[stack.length - 1] : null,\n [ stack ]\n );\n const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n if (ev.currentTarget !== ev.target) return;\n currentModal?.onBackdropClickUse &&\n currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n }, [ currentModal ]);\n\n useEffect(() => {\n if (currentModal) {\n onModalLaunch && onModalLaunch();\n } else {\n onModalClose && onModalClose();\n }\n }, [ currentModal, onModalLaunch, onModalClose ]);\n\n return currentModal && (\n <Backdrop onBackdropClick={onBackdropClick}>\n {currentModal.render(currentModal.resolvers)}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","_ref","children","_useState","useState","_jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","ev","Promise","resolve","then","result","slice","e","reject","concat","state","newState","updatedStack","length","_extends","useModalContext","useContext","useModal","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"6XAea,IAAAA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,WAAQ,EACrBC,YAAa,WACd,IAEYC,EAAuB,SAAHC,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAA2B,IAAlDR,EAAKO,EAAEL,GAAAA,EAAWK,EAAA,GAuC1B,OAAOE,EAACX,EAAaY,SAAQ,CAACC,MAPoB,CAChDX,MAAAA,EACAC,YAhC+B,SAACW,EAAQC,EAAWC,GAEnD,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,YAAcE,GAAmB,WAAIC,QAAAC,QAClBH,EAASC,IAAGG,KAA3BC,SAAAA,GAEN,OADAxB,EAAYF,EAAM2B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAA0B,GAC7BjB,KAAW4B,OACN9B,EACH,CAAA,CACEY,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE7B,YAAAA,EACAC,YAZkB,SAAC6B,GACnB,IAAMC,KAAYH,OACb9B,GAELiC,EAAajC,EAAMkC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5C9B,EAAY+B,EACd,GASsD3B,SAAGA,GAE3D,EAMgB,SAAA8B,IACd,OAAOC,EAAWvC,EACpB,UAMgBwC,IAEd,OADwBF,IAAhBnC,WAEV,CCtEM,IAAAsC,EAAsC,SAA7BlC,GAIV,IAHHmC,EAAanC,EAAbmC,cACAC,EAAYpC,EAAZoC,aACQC,EAAQrC,EAAhBO,OAGQZ,EAAUoC,IAAVpC,MACF2C,EAAsCC,EAC1C,WAAA,OAAM5C,EAAMkC,OAAS,EAAIlC,EAAMA,EAAMkC,OAAS,GAAK,IAAI,EACvD,CAAElC,IAEE6C,EAAkBC,EAAY,SAACxB,GAC/BA,EAAGyB,gBAAkBzB,EAAG0B,SAChB,MAAZL,OAAY,EAAZA,EAAc7B,qBACd6B,EAAa9B,UAAU8B,EAAa7B,oBAAoBQ,EAC1D,EAAG,CAAEqB,IAUL,OARAM,EAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLlC,EAACiC,EAAS,CAAAG,gBAAiBA,EACxBvC,SAAAqC,EAAa/B,OAAO+B,EAAa9B,cAEjC,IACP"}
@@ -0,0 +1,2 @@
1
+ import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as r,useContext as n,useMemo as c,useCallback as o,useEffect as a}from"react";function l(){return l=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},l.apply(this,arguments)}const s=e({stack:[],launchModal:()=>{},updateStack:()=>{},updateState:()=>{}}),u=({children:e})=>{const[n,c]=r([]);return t(s.Provider,{value:{stack:n,launchModal:(t,e,r)=>{const o=Object.keys(e).reduce((t,r)=>{const o=e[r];return t[r]=async t=>{const e=await o(t);return c(n.slice(0,-1)),e},t},{});c([...n,{render:t,resolvers:o,onBackdropClickUse:r,state:{}}])},updateStack:c,updateState:t=>{const e=[...n];e[n.length-1].state=l({},t),c(e)}},children:e})};function d(){return n(s)}function i(){const{launchModal:t}=d();return t}const p=({onModalLaunch:e,onModalClose:r,render:n})=>{const{stack:l}=d(),s=c(()=>l.length>0?l[l.length-1]:null,[l]),u=o(t=>{t.currentTarget===t.target&&(null==s?void 0:s.onBackdropClickUse)&&s.resolvers[s.onBackdropClickUse](t)},[s]);return a(()=>{s?e&&e():r&&r()},[s,e,r]),s&&t(n,{onBackdropClick:u,children:s.render(s.resolvers)})||null};export{u as ModalContextProvider,p as ModalPort,i as useModal,d as useModalContext};
2
+ //# sourceMappingURL=index.modern.mjs.map
@@ -0,0 +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 '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n stack: [],\n launchModal: () => {},\n updateStack: () => {},\n updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\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 (ev?: SyntheticEvent) => {\n const result = await resolver(ev);\n updateStack(stack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n onBackdropClickUse,\n state: {},\n },\n ]);\n };\n\n const updateState = (newState: ModalState) => {\n const updatedStack = [\n ...stack,\n ];\n updatedStack[stack.length - 1].state = { ...newState };\n updateStack(updatedStack);\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 return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\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, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n const { stack, updateState } = useModalContext();\n if (stack.length === 0) \n throw new Error('Trying to access modal state while no modal is open');\n const state = stack[stack.length - 1].state;\n return [ state, updateState ];\n}\n","import { \n type ModalPortProps, \n type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n type SyntheticEvent, \n useCallback, \n useEffect, \n useMemo\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 | null = useMemo(\n () => stack.length > 0 ? stack[stack.length - 1] : null,\n [ stack ]\n );\n const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n if (ev.currentTarget !== ev.target) return;\n currentModal?.onBackdropClickUse &&\n currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n }, [ currentModal ]);\n\n useEffect(() => {\n if (currentModal) {\n onModalLaunch && onModalLaunch();\n } else {\n onModalClose && onModalClose();\n }\n }, [ currentModal, onModalLaunch, onModalClose ]);\n\n return currentModal && (\n <Backdrop onBackdropClick={onBackdropClick}>\n {currentModal.render(currentModal.resolvers)}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","children","useState","_jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","async","result","ev","slice","state","newState","updatedStack","length","_extends","useModalContext","useContext","useModal","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"6XAea,MAAAA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAaA,OACbC,YAAaA,OACbC,YAAaA,SAGFC,EAAuBA,EAAGC,eAErC,MAAQL,EAAOE,GAAgBI,EAA2B,IAuC1D,OAAOC,EAACT,EAAaU,SAAQ,CAACC,MAPoB,CAChDT,QACAC,YAhC+BA,CAACS,EAAQC,EAAWC,KAEnD,MAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,CAACC,EAAKC,KAC1D,MAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,GAAOE,UACT,MAAMC,QAAeF,EAASG,GAE9B,OADApB,EAAYF,EAAMuB,MAAM,GAAI,IACrBF,GAEFJ,GACN,CAA0B,GAC7Bf,EAAY,IACPF,EACH,CACEU,SACAC,UAAWE,EACXD,qBACAY,MAAO,CAAA,IAGb,EAaEtB,cACAC,YAZmBsB,IACnB,MAAMC,EAAe,IAChB1B,GAEL0B,EAAa1B,EAAM2B,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5CvB,EAAYwB,EACd,GASsDrB,SAAGA,GAAQ,EAQnD,SAAAwB,IACd,OAAOC,EAAWhC,EACpB,CAMgB,SAAAiC,IACd,MAAM9B,YAAEA,GAAgB4B,IACxB,OAAO5B,CACT,CCtEM,MAAA+B,EAAsCA,EAC1CC,gBACAC,eACAxB,OAAQyB,MAGR,MAAMnC,MAAEA,GAAU6B,IACZO,EAAsCC,EAC1C,IAAMrC,EAAM2B,OAAS,EAAI3B,EAAMA,EAAM2B,OAAS,GAAK,KACnD,CAAE3B,IAEEsC,EAAkBC,EAAajB,IAC/BA,EAAGkB,gBAAkBlB,EAAGmB,eAC5BL,SAAAA,EAAcxB,qBACdwB,EAAazB,UAAUyB,EAAaxB,oBAAoBU,EAAE,EACzD,CAAEc,IAUL,OARAM,EAAU,KACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAClB,EACC,CAAEE,EAAcH,EAAeC,IAE3BE,GACL7B,EAAC4B,EAAS,CAAAG,gBAAiBA,EACxBjC,SAAA+B,EAAa1B,OAAO0B,EAAazB,cAEjC"}
@@ -0,0 +1,2 @@
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e||self).reactModalPort={},e.jsxRuntime,e.react)}(this,function(e,t,n){function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(this,arguments)}var o=n.createContext({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}});function c(){return n.useContext(o)}e.ModalContextProvider=function(e){var c=e.children,a=n.useState([]),u=a[0],i=a[1];return t.jsx(o.Provider,{value:{stack:u,launchModal:function(e,t,n){var r=Object.keys(t).reduce(function(e,n){var r=t[n];return e[n]=function(e){try{return Promise.resolve(r(e)).then(function(e){return i(u.slice(0,-1)),e})}catch(e){return Promise.reject(e)}},e},{});i([].concat(u,[{render:e,resolvers:r,onBackdropClickUse:n,state:{}}]))},updateStack:i,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),i(t)}},children:c})},e.ModalPort=function(e){var r=e.onModalLaunch,o=e.onModalClose,a=e.render,u=c().stack,i=n.useMemo(function(){return u.length>0?u[u.length-1]:null},[u]),l=n.useCallback(function(e){e.currentTarget===e.target&&(null==i?void 0:i.onBackdropClickUse)&&i.resolvers[i.onBackdropClickUse](e)},[i]);return n.useEffect(function(){i?r&&r():o&&o()},[i,r,o]),i&&t.jsx(a,{onBackdropClick:l,children:i.render(i.resolvers)})||null},e.useModal=function(){return c().launchModal},e.useModalContext=c});
2
+ //# sourceMappingURL=index.umd.js.map
@@ -0,0 +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 '../types';\n\nexport const ModalContext = createContext<ModalContextProperties>({\n stack: [],\n launchModal: () => {},\n updateStack: () => {},\n updateState: () => {},\n});\n\nexport const ModalContextProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {\n\n const [ stack, updateStack ] = useState<ModalStackItem[]>([]);\n\n const launchModal: LaunchModal = (render, resolvers, onBackdropClickUse) => {\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 (ev?: SyntheticEvent) => {\n const result = await resolver(ev);\n updateStack(stack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n onBackdropClickUse,\n state: {},\n },\n ]);\n };\n\n const updateState = (newState: ModalState) => {\n const updatedStack = [\n ...stack,\n ];\n updatedStack[stack.length - 1].state = { ...newState };\n updateStack(updatedStack);\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 return useContext(ModalContext);\n}\n\n/**\n * Short-hand for `useModalContext().launchModal`\n * @returns {LaunchModal} The launchModal function\n */\nexport function useModal(): LaunchModal {\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, UpdateModalState ]} A tuple with the current modal state and a function to update it\n */\nexport function useModalState(): [ ModalState, UpdateModalState ] {\n const { stack, updateState } = useModalContext();\n if (stack.length === 0) \n throw new Error('Trying to access modal state while no modal is open');\n const state = stack[stack.length - 1].state;\n return [ state, updateState ];\n}\n","import { \n type ModalPortProps, \n type ModalStackItem \n} from \"../types\";\nimport { useModalContext } from \"./context\";\nimport { \n type SyntheticEvent, \n useCallback, \n useEffect, \n useMemo\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 | null = useMemo(\n () => stack.length > 0 ? stack[stack.length - 1] : null,\n [ stack ]\n );\n const onBackdropClick = useCallback((ev: SyntheticEvent) => {\n if (ev.currentTarget !== ev.target) return;\n currentModal?.onBackdropClickUse &&\n currentModal.resolvers[currentModal.onBackdropClickUse](ev);\n }, [ currentModal ]);\n\n useEffect(() => {\n if (currentModal) {\n onModalLaunch && onModalLaunch();\n } else {\n onModalClose && onModalClose();\n }\n }, [ currentModal, onModalLaunch, onModalClose ]);\n\n return currentModal && (\n <Backdrop onBackdropClick={onBackdropClick}>\n {currentModal.render(currentModal.resolvers)}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","_jsx","Provider","value","render","resolvers","onBackdropClickUse","wrappedResovers","Object","keys","reduce","acc","key","resolver","ev","Promise","resolve","then","result","slice","e","reject","concat","state","newState","updatedStack","length","_extends","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"+iBAea,IAAAA,EAAeC,EAAAA,cAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,WAAQ,EACrBC,YAAa,WACd,IAmDe,SAAAC,IACd,OAAOC,EAAAA,WAAWP,EACpB,wBAnDoC,SAAHQ,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAmB,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAAA,GAuC1B,OAAOE,EAAAA,IAACZ,EAAaa,SAAQ,CAACC,MAPoB,CAChDZ,MAAAA,EACAC,YAhC+B,SAACY,EAAQC,EAAWC,GAEnD,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAM3B,OALAD,EAAIC,YAAcE,GAAmB,WAAIC,QAAAC,QAClBH,EAASC,IAAGG,KAA3BC,SAAAA,GAEN,OADAzB,EAAYF,EAAM4B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAA0B,GAC7BlB,KAAW6B,OACN/B,EACH,CAAA,CACEa,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE9B,YAAAA,EACAC,YAZkB,SAAC8B,GACnB,IAAMC,KAAYH,OACb/B,GAELkC,EAAalC,EAAMmC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5C/B,EAAYgC,EACd,GASsD3B,SAAGA,GAE3D,cCrD4C,SAA7BD,GAIV,IAHH+B,EAAa/B,EAAb+B,cACAC,EAAYhC,EAAZgC,aACQC,EAAQjC,EAAhBO,OAGQb,EAAUI,IAAVJ,MACFwC,EAAsCC,EAAOA,QACjD,WAAA,OAAMzC,EAAMmC,OAAS,EAAInC,EAAMA,EAAMmC,OAAS,GAAK,IAAI,EACvD,CAAEnC,IAEE0C,EAAkBC,EAAWA,YAAC,SAACpB,GAC/BA,EAAGqB,gBAAkBrB,EAAGsB,SAChB,MAAZL,OAAY,EAAZA,EAAczB,qBACdyB,EAAa1B,UAAU0B,EAAazB,oBAAoBQ,EAC1D,EAAG,CAAEiB,IAUL,OARAM,EAAAA,UAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACL9B,EAAAA,IAAC6B,EAAS,CAAAG,gBAAiBA,EACxBnC,SAAAiC,EAAa3B,OAAO2B,EAAa1B,cAEjC,IACP,wBDuCE,OADwBV,IAAhBH,WAEV"}
package/package.json CHANGED
@@ -1,14 +1,17 @@
1
1
  {
2
2
  "name": "react-modal-port",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Launch modals from any React component.",
5
5
  "type": "module",
6
- "types": "./types/index.d.ts",
7
- "main": "./dist/cjs/index.js",
8
- "module": "./dist/esm/index.js",
6
+ "source": "src/index.ts",
7
+ "types": "types/index.d.ts",
8
+ "main": "dist/cjs/index.cjs",
9
+ "main:umd": "dist/umd/index.js",
10
+ "module": "dist/esm/index.mjs",
9
11
  "exports": {
10
- "import": "./dist/esm/index.js",
11
- "require": "./dist/cjs/index.js",
12
+ "default": "./dist/esm/index.modern.mjs",
13
+ "import": "./dist/esm/index.mjs",
14
+ "require": "./dist/cjs/index.cjs",
12
15
  "types": "./types/index.d.ts"
13
16
  },
14
17
  "files": [
@@ -16,9 +19,11 @@
16
19
  "types"
17
20
  ],
18
21
  "scripts": {
19
- "build": "npm run build:esm && npm run build:cjs",
20
- "build:esm": "tsc --outDir dist/esm --module esnext",
21
- "build:cjs": "tsc --outDir dist/cjs --module commonjs",
22
+ "build": "npm run build:esm && npm run build:esm-modern && npm run build:cjs && npm run build:umd",
23
+ "build:esm": "microbundle -o dist/esm/index.mjs --format esm",
24
+ "build:esm-modern": "microbundle -o dist/esm/index.modern.mjs --format modern",
25
+ "build:cjs": "microbundle -o dist/cjs/index.cjs --format cjs",
26
+ "build:umd": "microbundle -o dist/umd/index.js --format umd",
22
27
  "prepare": "npm run build",
23
28
  "test": "echo \"Error: no test specified\" && exit 1"
24
29
  },
@@ -46,6 +51,7 @@
46
51
  "devDependencies": {
47
52
  "@types/react": "^18",
48
53
  "@types/react-dom": "^18.2.19",
54
+ "microbundle": "^0.15.1",
49
55
  "react": "^18.2.0",
50
56
  "react-dom": "^18",
51
57
  "tslib": "^2.6.2",
@@ -1,140 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
- return new (P || (P = Promise))(function (resolve, reject) {
16
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
- step((generator = generator.apply(thisArg, _arguments || [])).next());
20
- });
21
- };
22
- var __generator = (this && this.__generator) || function (thisArg, body) {
23
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
- function verb(n) { return function (v) { return step([n, v]); }; }
26
- function step(op) {
27
- if (f) throw new TypeError("Generator is already executing.");
28
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
29
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
- if (y = 0, t) op = [op[0] & 2, t.value];
31
- switch (op[0]) {
32
- case 0: case 1: t = op; break;
33
- case 4: _.label++; return { value: op[1], done: false };
34
- case 5: _.label++; y = op[1]; op = [0]; continue;
35
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
- default:
37
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
- if (t[2]) _.ops.pop();
42
- _.trys.pop(); continue;
43
- }
44
- op = body.call(thisArg, _);
45
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
- }
48
- };
49
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
50
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
51
- if (ar || !(i in from)) {
52
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
53
- ar[i] = from[i];
54
- }
55
- }
56
- return to.concat(ar || Array.prototype.slice.call(from));
57
- };
58
- Object.defineProperty(exports, "__esModule", { value: true });
59
- exports.useModalState = exports.useModal = exports.useModalContext = exports.ModalContextProvider = exports.ModalContext = void 0;
60
- var jsx_runtime_1 = require("react/jsx-runtime");
61
- var react_1 = require("react");
62
- exports.ModalContext = (0, react_1.createContext)({
63
- stack: [],
64
- launchModal: function () { },
65
- updateStack: function () { },
66
- updateState: function () { },
67
- });
68
- var ModalContextProvider = function (_a) {
69
- var children = _a.children;
70
- var _b = (0, react_1.useState)([]), stack = _b[0], updateStack = _b[1];
71
- var launchModal = function (render, resolvers, onBackdropClickUse) {
72
- // Wrap resolvers to update the stack
73
- var wrappedResovers = Object.keys(resolvers).reduce(function (acc, key) {
74
- var resolver = resolvers[key];
75
- acc[key] = function (ev) { return __awaiter(void 0, void 0, void 0, function () {
76
- var result;
77
- return __generator(this, function (_a) {
78
- switch (_a.label) {
79
- case 0: return [4 /*yield*/, resolver(ev)];
80
- case 1:
81
- result = _a.sent();
82
- updateStack(stack.slice(0, -1));
83
- return [2 /*return*/, result];
84
- }
85
- });
86
- }); };
87
- return acc;
88
- }, {});
89
- updateStack(__spreadArray(__spreadArray([], stack, true), [
90
- {
91
- render: render,
92
- resolvers: wrappedResovers,
93
- onBackdropClickUse: onBackdropClickUse,
94
- state: {},
95
- },
96
- ], false));
97
- };
98
- var updateState = function (newState) {
99
- var updatedStack = __spreadArray([], stack, true);
100
- updatedStack[stack.length - 1].state = __assign({}, newState);
101
- updateStack(updatedStack);
102
- };
103
- var contextProperties = {
104
- stack: stack,
105
- launchModal: launchModal,
106
- updateStack: updateStack,
107
- updateState: updateState,
108
- };
109
- return (0, jsx_runtime_1.jsx)(exports.ModalContext.Provider, { value: contextProperties, children: children });
110
- };
111
- exports.ModalContextProvider = ModalContextProvider;
112
- /**
113
- * Get properties from the modal context
114
- * @returns {ModalContextProperties} Object with the modal context properties
115
- */
116
- function useModalContext() {
117
- return (0, react_1.useContext)(exports.ModalContext);
118
- }
119
- exports.useModalContext = useModalContext;
120
- /**
121
- * Short-hand for `useModalContext().launchModal`
122
- * @returns {LaunchModal} The launchModal function
123
- */
124
- function useModal() {
125
- var launchModal = useModalContext().launchModal;
126
- return launchModal;
127
- }
128
- exports.useModal = useModal;
129
- /**
130
- * Get access to the current modal state and a function to update it
131
- * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it
132
- */
133
- function useModalState() {
134
- var _a = useModalContext(), stack = _a.stack, updateState = _a.updateState;
135
- if (stack.length === 0)
136
- throw new Error('Trying to access modal state while no modal is open');
137
- var state = stack[stack.length - 1].state;
138
- return [state, updateState];
139
- }
140
- exports.useModalState = useModalState;
package/dist/cjs/index.js DELETED
@@ -1,12 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ModalPort = exports.useModal = exports.useModalContext = exports.ModalContextProvider = void 0;
7
- var context_1 = require("./context");
8
- Object.defineProperty(exports, "ModalContextProvider", { enumerable: true, get: function () { return context_1.ModalContextProvider; } });
9
- Object.defineProperty(exports, "useModalContext", { enumerable: true, get: function () { return context_1.useModalContext; } });
10
- Object.defineProperty(exports, "useModal", { enumerable: true, get: function () { return context_1.useModal; } });
11
- var modal_port_1 = require("./modal-port");
12
- Object.defineProperty(exports, "ModalPort", { enumerable: true, get: function () { return __importDefault(modal_port_1).default; } });
@@ -1,26 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var jsx_runtime_1 = require("react/jsx-runtime");
4
- var context_1 = require("./context");
5
- var react_1 = require("react");
6
- var ModalPort = function (_a) {
7
- var onModalLaunch = _a.onModalLaunch, onModalClose = _a.onModalClose, Backdrop = _a.render;
8
- var stack = (0, context_1.useModalContext)().stack;
9
- var currentModal = (0, react_1.useMemo)(function () { return stack.length > 0 ? stack[stack.length - 1] : null; }, [stack]);
10
- var onBackdropClick = (0, react_1.useCallback)(function (ev) {
11
- if (ev.currentTarget !== ev.target)
12
- return;
13
- (currentModal === null || currentModal === void 0 ? void 0 : currentModal.onBackdropClickUse) &&
14
- currentModal.resolvers[currentModal.onBackdropClickUse](ev);
15
- }, [currentModal]);
16
- (0, react_1.useEffect)(function () {
17
- if (currentModal) {
18
- onModalLaunch && onModalLaunch();
19
- }
20
- else {
21
- onModalClose && onModalClose();
22
- }
23
- }, [currentModal, onModalLaunch, onModalClose]);
24
- return currentModal && ((0, jsx_runtime_1.jsx)(Backdrop, { onBackdropClick: onBackdropClick, children: currentModal.render(currentModal.resolvers) })) || null;
25
- };
26
- exports.default = ModalPort;
@@ -1,133 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
14
- return new (P || (P = Promise))(function (resolve, reject) {
15
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
16
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
17
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
18
- step((generator = generator.apply(thisArg, _arguments || [])).next());
19
- });
20
- };
21
- var __generator = (this && this.__generator) || function (thisArg, body) {
22
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
23
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
24
- function verb(n) { return function (v) { return step([n, v]); }; }
25
- function step(op) {
26
- if (f) throw new TypeError("Generator is already executing.");
27
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
28
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
29
- if (y = 0, t) op = [op[0] & 2, t.value];
30
- switch (op[0]) {
31
- case 0: case 1: t = op; break;
32
- case 4: _.label++; return { value: op[1], done: false };
33
- case 5: _.label++; y = op[1]; op = [0]; continue;
34
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
35
- default:
36
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
37
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
38
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
39
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
40
- if (t[2]) _.ops.pop();
41
- _.trys.pop(); continue;
42
- }
43
- op = body.call(thisArg, _);
44
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
45
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
46
- }
47
- };
48
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
49
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
50
- if (ar || !(i in from)) {
51
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
52
- ar[i] = from[i];
53
- }
54
- }
55
- return to.concat(ar || Array.prototype.slice.call(from));
56
- };
57
- import { jsx as _jsx } from "react/jsx-runtime";
58
- import { createContext, useContext, useState } from 'react';
59
- export var ModalContext = createContext({
60
- stack: [],
61
- launchModal: function () { },
62
- updateStack: function () { },
63
- updateState: function () { },
64
- });
65
- export var ModalContextProvider = function (_a) {
66
- var children = _a.children;
67
- var _b = useState([]), stack = _b[0], updateStack = _b[1];
68
- var launchModal = function (render, resolvers, onBackdropClickUse) {
69
- // Wrap resolvers to update the stack
70
- var wrappedResovers = Object.keys(resolvers).reduce(function (acc, key) {
71
- var resolver = resolvers[key];
72
- acc[key] = function (ev) { return __awaiter(void 0, void 0, void 0, function () {
73
- var result;
74
- return __generator(this, function (_a) {
75
- switch (_a.label) {
76
- case 0: return [4 /*yield*/, resolver(ev)];
77
- case 1:
78
- result = _a.sent();
79
- updateStack(stack.slice(0, -1));
80
- return [2 /*return*/, result];
81
- }
82
- });
83
- }); };
84
- return acc;
85
- }, {});
86
- updateStack(__spreadArray(__spreadArray([], stack, true), [
87
- {
88
- render: render,
89
- resolvers: wrappedResovers,
90
- onBackdropClickUse: onBackdropClickUse,
91
- state: {},
92
- },
93
- ], false));
94
- };
95
- var updateState = function (newState) {
96
- var updatedStack = __spreadArray([], stack, true);
97
- updatedStack[stack.length - 1].state = __assign({}, newState);
98
- updateStack(updatedStack);
99
- };
100
- var contextProperties = {
101
- stack: stack,
102
- launchModal: launchModal,
103
- updateStack: updateStack,
104
- updateState: updateState,
105
- };
106
- return _jsx(ModalContext.Provider, { value: contextProperties, children: children });
107
- };
108
- /**
109
- * Get properties from the modal context
110
- * @returns {ModalContextProperties} Object with the modal context properties
111
- */
112
- export function useModalContext() {
113
- return useContext(ModalContext);
114
- }
115
- /**
116
- * Short-hand for `useModalContext().launchModal`
117
- * @returns {LaunchModal} The launchModal function
118
- */
119
- export function useModal() {
120
- var launchModal = useModalContext().launchModal;
121
- return launchModal;
122
- }
123
- /**
124
- * Get access to the current modal state and a function to update it
125
- * @returns {[ ModalState, UpdateModalState ]} A tuple with the current modal state and a function to update it
126
- */
127
- export function useModalState() {
128
- var _a = useModalContext(), stack = _a.stack, updateState = _a.updateState;
129
- if (stack.length === 0)
130
- throw new Error('Trying to access modal state while no modal is open');
131
- var state = stack[stack.length - 1].state;
132
- return [state, updateState];
133
- }
package/dist/esm/index.js DELETED
@@ -1,2 +0,0 @@
1
- export { ModalContextProvider, useModalContext, useModal, } from './context';
2
- export { default as ModalPort } from './modal-port';
@@ -1,24 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useModalContext } from "./context";
3
- import { useCallback, useEffect, useMemo } from "react";
4
- var ModalPort = function (_a) {
5
- var onModalLaunch = _a.onModalLaunch, onModalClose = _a.onModalClose, Backdrop = _a.render;
6
- var stack = useModalContext().stack;
7
- var currentModal = useMemo(function () { return stack.length > 0 ? stack[stack.length - 1] : null; }, [stack]);
8
- var onBackdropClick = useCallback(function (ev) {
9
- if (ev.currentTarget !== ev.target)
10
- return;
11
- (currentModal === null || currentModal === void 0 ? void 0 : currentModal.onBackdropClickUse) &&
12
- currentModal.resolvers[currentModal.onBackdropClickUse](ev);
13
- }, [currentModal]);
14
- useEffect(function () {
15
- if (currentModal) {
16
- onModalLaunch && onModalLaunch();
17
- }
18
- else {
19
- onModalClose && onModalClose();
20
- }
21
- }, [currentModal, onModalLaunch, onModalClose]);
22
- return currentModal && (_jsx(Backdrop, { onBackdropClick: onBackdropClick, children: currentModal.render(currentModal.resolvers) })) || null;
23
- };
24
- export default ModalPort;