react-modal-port 0.1.1 → 0.1.3
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/cjs/index.cjs +2 -0
- package/dist/cjs/index.cjs.map +1 -0
- package/dist/esm/index.mjs +2 -0
- package/dist/esm/index.mjs.map +1 -0
- package/dist/esm/index.modern.mjs +2 -0
- package/dist/esm/index.modern.mjs.map +1 -0
- package/dist/umd/index.umd.js +2 -0
- package/dist/umd/index.umd.js.map +1 -0
- package/package.json +16 -10
- package/types/index.d.ts +1 -0
- package/dist/cjs/context.js +0 -140
- package/dist/cjs/index.js +0 -12
- package/dist/cjs/modal-port.js +0 -26
- package/dist/esm/context.js +0 -133
- package/dist/esm/index.js +0 -2
- package/dist/esm/modal-port.js +0 -24
|
@@ -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],s=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 s(u.slice(0,-1)),e})}catch(e){return Promise.reject(e)}},e},{});s([].concat(u,[{render:e,resolvers:n,onBackdropClickUse:r,state:{}}]))},updateStack:s,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),s(t)}},children:a})},exports.ModalPort=function(r){var n=r.onModalLaunch,a=r.onModalClose,c=r.render,u=o().stack,s=t.useMemo(function(){return u.length>0?u[u.length-1]:null},[u]),l=t.useCallback(function(e){e.currentTarget===e.target&&(null==s?void 0:s.onBackdropClickUse)&&s.resolvers[s.onBackdropClickUse](e)},[s]);return t.useEffect(function(){s?n&&n():a&&a()},[s,n,a]),s&&e.jsx(c,{onBackdropClick:l,children:s.render(s.resolvers)})||null},exports.useModal=function(){return o().launchModal},exports.useModalContext=o,exports.useModalState=function(){var e=o(),t=e.stack,r=e.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,r]};
|
|
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","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","_useModalContext2","Error"],"mappings":"0RAea,IAAAA,EAAeC,EAAAA,cAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,aACbC,YAAa,WACd,IAmDe,SAAAC,IACd,OAAOC,aAAWP,EACpB,8BAnDoC,SAAHQ,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAmB,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAAA,GAuC1B,OAAOE,EAAAC,IAACb,EAAac,SAAQ,CAACC,MAPoB,CAChDb,MAAAA,EACAC,YAhC+B,SAACa,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,OADA1B,EAAYF,EAAM6B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAAA,GACHnB,KAAW8B,OACNhC,EACH,CAAA,CACEc,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,KAAYH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5ChC,EAAYiC,EACd,GASsD5B,SAAGA,GAE3D,oBCrD4C,SAA7BD,GAIV,IAHHgC,EAAahC,EAAbgC,cACAC,EAAYjC,EAAZiC,aACQC,EAAQlC,EAAhBQ,OAGQd,EAAUI,IAAVJ,MACFyC,EAAsCC,EAAOA,QACjD,WAAA,OAAM1C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE2C,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,GACL/B,EAAAA,IAAC8B,EAAS,CAAAG,gBAAiBA,EACxBpC,SAAAkC,EAAa3B,OAAO2B,EAAa1B,cAEjC,IACP,8BDuCE,OADwBX,IAAhBH,WAEV,6DAOE,IAAA+C,EAA+B5C,IAAvBJ,EAAKgD,EAALhD,MAAOG,EAAW6C,EAAX7C,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAM,IAAIa,MAAM,uDAElB,MAAO,CADOjD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{createContext as t,useState as r,useContext as e,useMemo as o,useCallback as a,useEffect as c}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)Object.prototype.hasOwnProperty.call(r,e)&&(n[e]=r[e])}return n},u.apply(this,arguments)}var i=t({stack:[],launchModal:function(){},updateStack:function(){},updateState:function(){}}),l=function(t){var e=t.children,o=r([]),a=o[0],c=o[1];return n(i.Provider,{value:{stack:a,launchModal:function(n,t,r){var e=Object.keys(t).reduce(function(n,r){var e=t[r];return n[r]=function(n){try{return Promise.resolve(e(n)).then(function(n){return c(a.slice(0,-1)),n})}catch(n){return Promise.reject(n)}},n},{});c([].concat(a,[{render:n,resolvers:e,onBackdropClickUse:r,state:{}}]))},updateStack:c,updateState:function(n){var t=[].concat(a);t[a.length-1].state=u({},n),c(t)}},children:e})};function s(){return e(i)}function d(){return s().launchModal}function f(){var n=s(),t=n.stack,r=n.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,r]}var h=function(t){var r=t.onModalLaunch,e=t.onModalClose,u=t.render,i=s().stack,l=o(function(){return i.length>0?i[i.length-1]:null},[i]),d=a(function(n){n.currentTarget===n.target&&(null==l?void 0:l.onBackdropClickUse)&&l.resolvers[l.onBackdropClickUse](n)},[l]);return c(function(){l?r&&r():e&&e()},[l,r,e]),l&&n(u,{onBackdropClick:d,children:l.render(l.resolvers)})||null};export{l as ModalContextProvider,h as ModalPort,d as useModal,s as useModalContext,f as useModalState};
|
|
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","useModalState","_useModalContext2","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","currentTarget","target","useEffect"],"mappings":"6XAea,IAAAA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,aACbC,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,CAAA,GACHjB,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,UAMgBsC,IACd,IAAAC,EAA+BJ,IAAvBpC,EAAKwC,EAALxC,MAAOG,EAAWqC,EAAXrC,YACf,GAAqB,IAAjBH,EAAMkC,OACR,MAAM,IAAIO,MAAM,uDAElB,MAAO,CADOzC,EAAMA,EAAMkC,OAAS,GAAGH,MACtB5B,EAClB,CClFM,IAAAuC,EAAsC,SAA7BrC,GAIV,IAHHsC,EAAatC,EAAbsC,cACAC,EAAYvC,EAAZuC,aACQC,EAAQxC,EAAhBO,OAGQZ,EAAUoC,IAAVpC,MACF8C,EAAsCC,EAC1C,WAAA,OAAM/C,EAAMkC,OAAS,EAAIlC,EAAMA,EAAMkC,OAAS,GAAK,IAAI,EACvD,CAAElC,IAEEgD,EAAkBC,EAAY,SAAC3B,GAC/BA,EAAG4B,gBAAkB5B,EAAG6B,SAChB,MAAZL,OAAY,EAAZA,EAAchC,qBACdgC,EAAajC,UAAUiC,EAAahC,oBAAoBQ,EAC1D,EAAG,CAAEwB,IAUL,OARAM,EAAU,WACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLrC,EAACoC,EAAS,CAAAG,gBAAiBA,EACxB1C,SAAAwC,EAAalC,OAAOkC,EAAajC,cAEjC,IACP"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as n,useContext as r,useMemo as o,useCallback as a,useEffect as c}from"react";function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},s.apply(this,arguments)}const l=e({stack:[],launchModal:()=>{},updateStack:()=>{},updateState:()=>{}}),u=({children:e})=>{const[r,o]=n([]);return t(l.Provider,{value:{stack:r,launchModal:(t,e,n)=>{const a=Object.keys(e).reduce((t,n)=>{const a=e[n];return t[n]=async t=>{const e=await a(t);return o(r.slice(0,-1)),e},t},{});o([...r,{render:t,resolvers:a,onBackdropClickUse:n,state:{}}])},updateStack:o,updateState:t=>{const e=[...r];e[r.length-1].state=s({},t),o(e)}},children:e})};function i(){return r(l)}function d(){const{launchModal:t}=i();return t}function p(){const{stack:t,updateState:e}=i();if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,e]}const h=({onModalLaunch:e,onModalClose:n,render:r})=>{const{stack:s}=i(),l=o(()=>s.length>0?s[s.length-1]:null,[s]),u=a(t=>{t.currentTarget===t.target&&(null==l?void 0:l.onBackdropClickUse)&&l.resolvers[l.onBackdropClickUse](t)},[l]);return c(()=>{l?e&&e():n&&n()},[l,e,n]),l&&t(r,{onBackdropClick:u,children:l.render(l.resolvers)})||null};export{u as ModalContextProvider,h as ModalPort,d as useModal,i as useModalContext,p as useModalState};
|
|
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","useModalState","Error","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,IACHf,EAAY,IACPF,EACH,CACEU,SACAC,UAAWE,EACXD,qBACAY,MAAO,CACR,IACF,EAcDtB,cACAC,YAZmBsB,IACnB,MAAMC,EAAe,IAChB1B,GAEL0B,EAAa1B,EAAM2B,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5CvB,EAAYwB,EAAY,GAU4BrB,SAAGA,GAAQ,EAQnD,SAAAwB,IACd,OAAOC,EAAWhC,EACpB,CAMgB,SAAAiC,IACd,MAAM9B,YAAEA,GAAgB4B,IACxB,OAAO5B,CACT,UAMgB+B,IACd,MAAMhC,MAAEA,EAAKG,YAAEA,GAAgB0B,IAC/B,GAAqB,IAAjB7B,EAAM2B,OACR,MAAM,IAAIM,MAAM,uDAElB,MAAO,CADOjC,EAAMA,EAAM2B,OAAS,GAAGH,MACtBrB,EAClB,CClFM,MAAA+B,EAAsCA,EAC1CC,gBACAC,eACA1B,OAAQ2B,MAGR,MAAMrC,MAAEA,GAAU6B,IACZS,EAAsCC,EAC1C,IAAMvC,EAAM2B,OAAS,EAAI3B,EAAMA,EAAM2B,OAAS,GAAK,KACnD,CAAE3B,IAEEwC,EAAkBC,EAAanB,IAC/BA,EAAGoB,gBAAkBpB,EAAGqB,eAC5BL,SAAAA,EAAc1B,qBACd0B,EAAa3B,UAAU2B,EAAa1B,oBAAoBU,EAAE,EACzD,CAAEgB,IAUL,OARAM,EAAU,KACJN,EACFH,GAAiBA,IAEjBC,GAAgBA,GAClB,EACC,CAAEE,EAAcH,EAAeC,IAE3BE,GACL/B,EAAC8B,EAAS,CAAAG,gBAAiBA,EACxBnC,SAAAiC,EAAa5B,OAAO4B,EAAa3B,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 a(){return n.useContext(o)}e.ModalContextProvider=function(e){var a=e.children,c=n.useState([]),u=c[0],i=c[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:a})},e.ModalPort=function(e){var r=e.onModalLaunch,o=e.onModalClose,c=e.render,u=a().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(c,{onBackdropClick:l,children:i.render(i.resolvers)})||null},e.useModal=function(){return a().launchModal},e.useModalContext=a,e.useModalState=function(){var e=a(),t=e.stack,n=e.updateState;if(0===t.length)throw new Error("Trying to access modal state while no modal is open");return[t[t.length-1].state,n]}});
|
|
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","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","_useModalContext2","Error"],"mappings":"+iBAea,IAAAA,EAAeC,EAAAA,cAAsC,CAChEC,MAAO,GACPC,YAAa,WAAK,EAClBC,YAAa,aACbC,YAAa,WACd,IAmDe,SAAAC,IACd,OAAOC,aAAWP,EACpB,wBAnDoC,SAAHQ,GAA6D,IAAvDC,EAAQD,EAARC,SAErCC,EAA+BC,EAAQA,SAAmB,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAAA,GAuC1B,OAAOE,EAAAC,IAACb,EAAac,SAAQ,CAACC,MAPoB,CAChDb,MAAAA,EACAC,YAhC+B,SAACa,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,OADA1B,EAAYF,EAAM6B,MAAM,GAAI,IACrBD,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAL,QAAAM,OAAAD,EAAA,CAAA,EACMT,CACT,EAAG,CAAA,GACHnB,KAAW8B,OACNhC,EACH,CAAA,CACEc,OAAAA,EACAC,UAAWE,EACXD,mBAAAA,EACAiB,MAAO,MAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,KAAYH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,EAAA,CAAA,EAAQH,GAC5ChC,EAAYiC,EACd,GASsD5B,SAAGA,GAE3D,cCrD4C,SAA7BD,GAIV,IAHHgC,EAAahC,EAAbgC,cACAC,EAAYjC,EAAZiC,aACQC,EAAQlC,EAAhBQ,OAGQd,EAAUI,IAAVJ,MACFyC,EAAsCC,EAAOA,QACjD,WAAA,OAAM1C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE2C,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,GACL/B,EAAAA,IAAC8B,EAAS,CAAAG,gBAAiBA,EACxBpC,SAAAkC,EAAa3B,OAAO2B,EAAa1B,cAEjC,IACP,wBDuCE,OADwBX,IAAhBH,WAEV,iDAOE,IAAA+C,EAA+B5C,IAAvBJ,EAAKgD,EAALhD,MAAOG,EAAW6C,EAAX7C,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAM,IAAIa,MAAM,uDAElB,MAAO,CADOjD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}
|
package/package.json
CHANGED
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-modal-port",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Launch modals from any React component.",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
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.
|
|
11
|
-
"require": "./dist/cjs/index.
|
|
12
|
-
"types": "./types/index.d.ts"
|
|
12
|
+
"import": "./dist/esm/index.mjs",
|
|
13
|
+
"require": "./dist/cjs/index.cjs",
|
|
14
|
+
"types": "./types/index.d.ts",
|
|
15
|
+
"default": "./dist/esm/index.modern.mjs"
|
|
13
16
|
},
|
|
14
17
|
"files": [
|
|
15
18
|
"dist",
|
|
16
19
|
"types"
|
|
17
20
|
],
|
|
18
21
|
"scripts": {
|
|
19
|
-
"build": "npm run build:esm && npm run build:cjs",
|
|
20
|
-
"build:esm": "
|
|
21
|
-
"build:
|
|
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",
|
package/types/index.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ declare module 'react-modal-port' {
|
|
|
45
45
|
const ModalContextProvider: React.FC<PropsWithChildren>;
|
|
46
46
|
const useModalContext: () => ModalContextProperties;
|
|
47
47
|
const useModal: () => ModalContextProperties['launchModal'];
|
|
48
|
+
const useModalState: () => ModalState;
|
|
48
49
|
const ModalPort: React.FC<ModalPortProps>;
|
|
49
50
|
|
|
50
51
|
}
|
package/dist/cjs/context.js
DELETED
|
@@ -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; } });
|
package/dist/cjs/modal-port.js
DELETED
|
@@ -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;
|
package/dist/esm/context.js
DELETED
|
@@ -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
package/dist/esm/modal-port.js
DELETED
|
@@ -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;
|