react-modal-port 0.2.1 → 0.2.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/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +12 -5
- package/types/index.d.ts +3 -1
package/dist/index.cjs
CHANGED
|
@@ -1,2 +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],
|
|
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],s={stack:u,launchModal:function(e,t,r){void 0===r&&(r={});var n=Object.keys(t).reduce(function(e,r){var n=t[r];return e[r]=function(){try{return Promise.resolve(n.apply(void 0,[].slice.call(arguments))).then(function(e){return l(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});l([].concat(u,[{render:e,resolvers:n,props:r,state:{}}]))},updateStack:l,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),l(t)}};return e.jsx(n.Provider,{value:s,children:a})},exports.ModalPort=function(n){var a=n.onModalLaunch,c=n.onModalClose,u=n.render,l=o().stack,s=t.useMemo(function(){return l.length>0?l[l.length-1]:null},[l]),i=t.useCallback(function(e){e.currentTarget===e.target&&(null==s?void 0:s.resolvers.onBackdropClick)&&s.resolvers.onBackdropClick(e)},[s]);return t.useEffect(function(){s?a&&a():c&&c()},[s,a,c]),s&&e.jsx(u,{onBackdropClick:i,children:s.render(r({},s.resolvers,s.props))})||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
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \n type SyntheticEvent \n} from 'react';\nimport { \n type ModalStackItem,\n type ModalContextProperties,\n type LaunchModal,\n type LaunchModalResolvers,\n type ModalState,\n type UpdateModalState,\n} from '../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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.
|
|
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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.onBackdropClick &&\n currentModal.resolvers.onBackdropClick(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({\n ...currentModal.resolvers,\n ...currentModal.props,\n })}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","contextProperties","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","concat","state","newState","updatedStack","length","_extends","_jsx","Provider","value","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","useEffect","_useModalContext2","Error"],"mappings":"8RAeaA,EAAeC,EAAaA,cAAyB,CAChEC,MAAO,GACPC,YAAa,WAAQ,EACrBC,YAAa,WAAQ,EACrBC,YAAa,WAAK,aAqDJC,IACd,OAAOC,EAAAA,WAAWP,EACpB,8BApDoC,SAAHQ,GAAM,IAAAC,EAAQD,EAARC,SAErCC,EAA+BC,EAAAA,SAA2B,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAE1B,GA+BME,EAA4C,CAChDV,MAAAA,EACAC,YAjC+B,SAACU,EAAQC,EAAWC,QAAAA,IAAAA,IAAAA,EAAQ,CAAA,GAE3D,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,kBAAgCE,OAAAA,QAAAC,QACbF,EAAQG,WAAA,EAAA,GAAAC,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADA1B,EAAY,SAAA2B,UAAaA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAT,QAAAU,OAAAD,EACD,CAAA,EAAOZ,CACT,EAAG,IACHhB,KAAW8B,OACNhC,EACH,CAAA,CACEW,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAoB,MAAO,CAAA,KAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,EAAY,GAAAH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,KAAQH,GAC5ChC,EAAYiC,EACd,GASA,OAAOG,MAACxC,EAAayC,SAAQ,CAACC,MAAO9B,EAAiBH,SAAGA,GAE3D,oBCtD4C,SAA7BD,GACb,IAAAmC,EAAanC,EAAbmC,cACAC,EAAYpC,EAAZoC,aACQC,EAAQrC,EAAhBK,OAGQX,EAAUI,IAAVJ,MACF4C,EAAsCC,EAAOA,QACjD,kBAAM7C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE8C,EAAkBC,cAAY,SAACC,GAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAchC,UAAUkC,kBACxBF,EAAahC,UAAUkC,gBAAgBE,EACzC,EAAG,CAAEJ,IAUL,OARAO,EAASA,UAAC,WACJP,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLN,MAACK,EAAQ,CAACG,gBAAiBA,EAAevC,SACvCqC,EAAajC,OAAM0B,EACfO,CAAAA,EAAAA,EAAahC,UACbgC,EAAa/B,WAGjB,IACP,mBDmCgB,WAEd,OADwBT,IAAhBH,WAEV,kDAMgB,WACd,IAAAmD,EAA+BhD,IAAvBJ,EAAKoD,EAALpD,MAAOG,EAAWiD,EAAXjD,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAU,IAAAiB,MAAM,uDAElB,MAAO,CADOrD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n}from"react/jsx-runtime";import{createContext as r,useState as t,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 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,o=t([]),a=o[0],c=o[1],l={stack:a,launchModal:function(n,r,t){void 0===t&&(t={});var e=Object.keys(r).reduce(function(n,t){var e=r[t];return n[t]=function(){try{return Promise.resolve(e.apply(void 0,[].slice.call(arguments))).then(function(n){return c(function(n){return n.slice(0,-1)}),n})}catch(n){return Promise.reject(n)}},n},{});c([].concat(a,[{render:n,resolvers:e,props:t,state:{}}]))},updateStack:c,updateState:function(n){var r=[].concat(a);r[a.length-1].state=u({},n),c(r)}};return n(i.Provider,{value:l,children:e})};function s(){return e(i)}function d(){return s().launchModal}function f(){var n=s(),r=n.stack,t=n.updateState;if(0===r.length)throw new Error("Trying to access modal state while no modal is open");return[r[r.length-1].state,t]}var p=function(r){var t=r.onModalLaunch,e=r.onModalClose,i=r.render,l=s().stack,d=o(function(){return l.length>0?l[l.length-1]:null},[l]),f=a(function(n){n.currentTarget===n.target&&(null==d?void 0:d.resolvers.
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{createContext as r,useState as t,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 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,o=t([]),a=o[0],c=o[1],l={stack:a,launchModal:function(n,r,t){void 0===t&&(t={});var e=Object.keys(r).reduce(function(n,t){var e=r[t];return n[t]=function(){try{return Promise.resolve(e.apply(void 0,[].slice.call(arguments))).then(function(n){return c(function(n){return n.slice(0,-1)}),n})}catch(n){return Promise.reject(n)}},n},{});c([].concat(a,[{render:n,resolvers:e,props:t,state:{}}]))},updateStack:c,updateState:function(n){var r=[].concat(a);r[a.length-1].state=u({},n),c(r)}};return n(i.Provider,{value:l,children:e})};function s(){return e(i)}function d(){return s().launchModal}function f(){var n=s(),r=n.stack,t=n.updateState;if(0===r.length)throw new Error("Trying to access modal state while no modal is open");return[r[r.length-1].state,t]}var p=function(r){var t=r.onModalLaunch,e=r.onModalClose,i=r.render,l=s().stack,d=o(function(){return l.length>0?l[l.length-1]:null},[l]),f=a(function(n){n.currentTarget===n.target&&(null==d?void 0:d.resolvers.onBackdropClick)&&d.resolvers.onBackdropClick(n)},[d]);return c(function(){d?t&&t():e&&e()},[d,t,e]),d&&n(i,{onBackdropClick:f,children:d.render(u({},d.resolvers,d.props))})||null};export{l as ModalContextProvider,p as ModalPort,d as useModal,s as useModalContext,f as useModalState};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \n type SyntheticEvent \n} from 'react';\nimport { \n type ModalStackItem,\n type ModalContextProperties,\n type LaunchModal,\n type LaunchModalResolvers,\n type ModalState,\n type UpdateModalState,\n} from '../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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.
|
|
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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.onBackdropClick &&\n currentModal.resolvers.onBackdropClick(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({\n ...currentModal.resolvers,\n ...currentModal.props,\n })}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","ModalContextProvider","_ref","children","_useState","useState","contextProperties","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","concat","state","newState","updatedStack","length","_extends","_jsx","Provider","value","useModalContext","useContext","useModal","useModalState","_useModalContext2","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","useEffect"],"mappings":"iYAeaA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAa,WAAQ,EACrBC,YAAa,WAAQ,EACrBC,YAAa,WAAK,IAGPC,EAAuB,SAAHC,GAAM,IAAAC,EAAQD,EAARC,SAErCC,EAA+BC,EAA2B,IAAlDR,EAAKO,EAAEL,GAAAA,EAAWK,EAE1B,GA+BME,EAA4C,CAChDT,MAAAA,EACAC,YAjC+B,SAACS,EAAQC,EAAWC,QAAAA,IAAAA,IAAAA,EAAQ,CAAA,GAE3D,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,kBAAgCE,OAAAA,QAAAC,QACbF,EAAQG,WAAA,EAAA,GAAAC,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADAzB,EAAY,SAAA0B,UAAaA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAT,QAAAU,OAAAD,EACD,CAAA,EAAOZ,CACT,EAAG,IACHf,KAAW6B,OACN/B,EACH,CAAA,CACEU,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAoB,MAAO,CAAA,KAGb,EAaE9B,YAAAA,EACAC,YAZkB,SAAC8B,GACnB,IAAMC,EAAY,GAAAH,OACb/B,GAELkC,EAAalC,EAAMmC,OAAS,GAAGH,MAAKI,KAAQH,GAC5C/B,EAAYgC,EACd,GASA,OAAOG,EAACvC,EAAawC,SAAQ,CAACC,MAAO9B,EAAiBH,SAAGA,GAE3D,WAMgBkC,IACd,OAAOC,EAAW3C,EACpB,CAMgB,SAAA4C,IAEd,OADwBF,IAAhBvC,WAEV,CAMgB,SAAA0C,IACd,IAAAC,EAA+BJ,IAAvBxC,EAAK4C,EAAL5C,MAAOG,EAAWyC,EAAXzC,YACf,GAAqB,IAAjBH,EAAMmC,OACR,MAAU,IAAAU,MAAM,uDAElB,MAAO,CADO7C,EAAMA,EAAMmC,OAAS,GAAGH,MACtB7B,EAClB,CCnFM,IAAA2C,EAAsC,SAA7BzC,GACb,IAAA0C,EAAa1C,EAAb0C,cACAC,EAAY3C,EAAZ2C,aACQC,EAAQ5C,EAAhBK,OAGQV,EAAUwC,IAAVxC,MACFkD,EAAsCC,EAC1C,kBAAMnD,EAAMmC,OAAS,EAAInC,EAAMA,EAAMmC,OAAS,GAAK,IAAI,EACvD,CAAEnC,IAEEoD,EAAkBC,EAAY,SAACC,GAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAcvC,UAAUyC,kBACxBF,EAAavC,UAAUyC,gBAAgBE,EACzC,EAAG,CAAEJ,IAUL,OARAO,EAAU,WACJP,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLb,EAACY,EAAQ,CAACG,gBAAiBA,EAAe9C,SACvC4C,EAAaxC,OAAM0B,EACfc,CAAAA,EAAAA,EAAavC,UACbuC,EAAatC,WAGjB,IACP"}
|
package/dist/index.modern.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as r,useContext as n,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 r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},s.apply(this,arguments)}const l=e({stack:[],launchModal:()=>{},updateStack:()=>{},updateState:()=>{}}),u=({children:e})=>{const[n,o]=r([]);return t(l.Provider,{value:{stack:n,launchModal:(t,e,r={})=>{const a=Object.keys(e).reduce((t,r)=>{const n=e[r];return t[r]=async(...t)=>{const e=await n(...t);return o(t=>t.slice(0,-1)),e},t},{});o([...n,{render:t,resolvers:a,props:r,state:{}}])},updateStack:o,updateState:t=>{const e=[...n];e[n.length-1].state=s({},t),o(e)}},children:e})};function i(){return n(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:r,render:n})=>{const{stack:l}=i(),u=o(()=>l.length>0?l[l.length-1]:null,[l]),d=a(t=>{t.currentTarget===t.target&&(null==u?void 0:u.resolvers.
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as r,useContext as n,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 r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},s.apply(this,arguments)}const l=e({stack:[],launchModal:()=>{},updateStack:()=>{},updateState:()=>{}}),u=({children:e})=>{const[n,o]=r([]);return t(l.Provider,{value:{stack:n,launchModal:(t,e,r={})=>{const a=Object.keys(e).reduce((t,r)=>{const n=e[r];return t[r]=async(...t)=>{const e=await n(...t);return o(t=>t.slice(0,-1)),e},t},{});o([...n,{render:t,resolvers:a,props:r,state:{}}])},updateStack:o,updateState:t=>{const e=[...n];e[n.length-1].state=s({},t),o(e)}},children:e})};function i(){return n(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:r,render:n})=>{const{stack:l}=i(),u=o(()=>l.length>0?l[l.length-1]:null,[l]),d=a(t=>{t.currentTarget===t.target&&(null==u?void 0:u.resolvers.onBackdropClick)&&u.resolvers.onBackdropClick(t)},[u]);return c(()=>{u?e&&e():r&&r()},[u,e,r]),u&&t(n,{onBackdropClick:d,children:u.render(s({},u.resolvers,u.props))})||null};export{u as ModalContextProvider,h as ModalPort,d as useModal,i as useModalContext,p as useModalState};
|
|
2
2
|
//# sourceMappingURL=index.modern.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.mjs","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \n type SyntheticEvent \n} from 'react';\nimport { \n type ModalStackItem,\n type ModalContextProperties,\n type LaunchModal,\n type LaunchModalResolvers,\n type ModalState,\n type UpdateModalState,\n} from '../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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.
|
|
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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.onBackdropClick &&\n currentModal.resolvers.onBackdropClick(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({\n ...currentModal.resolvers,\n ...currentModal.props,\n })}\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","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","async","args","result","currStack","slice","state","newState","updatedStack","length","_extends","useModalContext","useContext","useModal","useModalState","Error","ModalPort","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","useEffect"],"mappings":"mYAeaA,EAAeC,EAAsC,CAChEC,MAAO,GACPC,YAAaA,OACbC,YAAaA,OACbC,YAAaA,SAGFC,EAAuBA,EAAGC,eAErC,MAAQL,EAAOE,GAAgBI,EAA2B,IAwC1D,OAAOC,EAACT,EAAaU,SAAQ,CAACC,MAPoB,CAChDT,QACAC,YAjC+BA,CAACS,EAAQC,EAAWC,EAAQ,CAAA,KAE3D,MAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,CAACC,EAAKC,KAC1D,MAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,GAAOE,SAAUC,KACnB,MAAMC,QAAeH,KAAYE,GAGjC,OADAnB,EAAYqB,GAAaA,EAAUC,MAAM,GAAI,IACtCF,GAEFL,GACN,CAA0B,GAC7Bf,EAAY,IACPF,EACH,CACEU,SACAC,UAAWE,EACXD,QACAa,MAAO,CAAA,IAGb,EAaEvB,cACAC,YAZmBuB,IACnB,MAAMC,EAAe,IAChB3B,GAEL2B,EAAa3B,EAAM4B,OAAS,GAAGH,MAAKI,EAAA,GAAQH,GAC5CxB,EAAYyB,EAAY,GAU4BtB,SAAGA,GAAQ,WAQnDyB,IACd,OAAOC,EAAWjC,EACpB,UAMgBkC,IACd,MAAM/B,YAAEA,GAAgB6B,IACxB,OAAO7B,CACT,UAMgBgC,IACd,MAAMjC,MAAEA,EAAKG,YAAEA,GAAgB2B,IAC/B,GAAqB,IAAjB9B,EAAM4B,OACR,UAAUM,MAAM,uDAElB,MAAO,CADOlC,EAAMA,EAAM4B,OAAS,GAAGH,MACtBtB,EAClB,CCnFM,MAAAgC,EAAsCA,EAC1CC,gBACAC,eACA3B,OAAQ4B,MAGR,MAAMtC,MAAEA,GAAU8B,IACZS,EAAsCC,EAC1C,IAAMxC,EAAM4B,OAAS,EAAI5B,EAAMA,EAAM4B,OAAS,GAAK,KACnD,CAAE5B,IAEEyC,EAAkBC,EAAaC,IAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAc5B,UAAU8B,kBACxBF,EAAa5B,UAAU8B,gBAAgBE,EACzC,EAAG,CAAEJ,IAUL,OARAO,EAAU,KACJP,EACFH,GAAiBA,IAEjBC,GAAgBA,GAClB,EACC,CAAEE,EAAcH,EAAeC,IAE3BE,GACLhC,EAAC+B,EAAQ,CAACG,gBAAiBA,EAAepC,SACvCkC,EAAa7B,OAAMmB,EAAA,CAAA,EACfU,EAAa5B,UACb4B,EAAa3B,WAGjB"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,2 +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.jsx,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],l={stack:u,launchModal:function(e,t,n){void 0===n&&(n={});var r=Object.keys(t).reduce(function(e,n){var r=t[n];return e[n]=function(){try{return Promise.resolve(r.apply(void 0,[].slice.call(arguments))).then(function(e){return i(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});i([].concat(u,[{render:e,resolvers:r,props:n,state:{}}]))},updateStack:i,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),i(t)}};return t.jsx(o.Provider,{value:l,children:a})},e.ModalPort=function(e){var o=e.onModalLaunch,c=e.onModalClose,u=e.render,i=a().stack,l=n.useMemo(function(){return i.length>0?i[i.length-1]:null},[i]),s=n.useCallback(function(e){e.currentTarget===e.target&&(null==l?void 0:l.resolvers.
|
|
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.jsx,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],l={stack:u,launchModal:function(e,t,n){void 0===n&&(n={});var r=Object.keys(t).reduce(function(e,n){var r=t[n];return e[n]=function(){try{return Promise.resolve(r.apply(void 0,[].slice.call(arguments))).then(function(e){return i(function(e){return e.slice(0,-1)}),e})}catch(e){return Promise.reject(e)}},e},{});i([].concat(u,[{render:e,resolvers:r,props:n,state:{}}]))},updateStack:i,updateState:function(e){var t=[].concat(u);t[u.length-1].state=r({},e),i(t)}};return t.jsx(o.Provider,{value:l,children:a})},e.ModalPort=function(e){var o=e.onModalLaunch,c=e.onModalClose,u=e.render,i=a().stack,l=n.useMemo(function(){return i.length>0?i[i.length-1]:null},[i]),s=n.useCallback(function(e){e.currentTarget===e.target&&(null==l?void 0:l.resolvers.onBackdropClick)&&l.resolvers.onBackdropClick(e)},[l]);return n.useEffect(function(){l?o&&o():c&&c()},[l,o,c]),l&&t.jsx(u,{onBackdropClick:s,children:l.render(r({},l.resolvers,l.props))})||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
2
|
//# sourceMappingURL=index.umd.js.map
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/context.tsx","../src/modal-port.tsx"],"sourcesContent":["import { \n createContext, \n useContext, \n useState, \n type SyntheticEvent \n} from 'react';\nimport { \n type ModalStackItem,\n type ModalContextProperties,\n type LaunchModal,\n type LaunchModalResolvers,\n type ModalState,\n type UpdateModalState,\n} from '../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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.
|
|
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, props = {}) => {\n // Wrap resolvers to update the stack\n const wrappedResovers = Object.keys(resolvers).reduce((acc, key) => {\n const resolver = resolvers[key];\n acc[key] = async (...args: any[]) => {\n const result = await resolver(...args);\n // update stack with an array conating all the items in the stack except the last one\n updateStack(currStack => currStack.slice(0, -1));\n return result;\n };\n return acc;\n }, {} as LaunchModalResolvers);\n updateStack([\n ...stack,\n {\n render,\n resolvers: wrappedResovers,\n props,\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?.resolvers.onBackdropClick &&\n currentModal.resolvers.onBackdropClick(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({\n ...currentModal.resolvers,\n ...currentModal.props,\n })}\n </Backdrop>\n ) || null;\n};\n\nexport default ModalPort;\n"],"names":["ModalContext","createContext","stack","launchModal","updateStack","updateState","useModalContext","useContext","_ref","children","_useState","useState","contextProperties","render","resolvers","props","wrappedResovers","Object","keys","reduce","acc","key","resolver","Promise","resolve","apply","slice","call","arguments","then","result","currStack","e","reject","concat","state","newState","updatedStack","length","_extends","_jsx","Provider","value","onModalLaunch","onModalClose","Backdrop","currentModal","useMemo","onBackdropClick","useCallback","ev","currentTarget","target","useEffect","_useModalContext2","Error"],"mappings":"4iBAeaA,EAAeC,EAAaA,cAAyB,CAChEC,MAAO,GACPC,YAAa,WAAQ,EACrBC,YAAa,WAAQ,EACrBC,YAAa,WAAK,aAqDJC,IACd,OAAOC,EAAAA,WAAWP,EACpB,wBApDoC,SAAHQ,GAAM,IAAAC,EAAQD,EAARC,SAErCC,EAA+BC,EAAAA,SAA2B,IAAlDT,EAAKQ,EAAEN,GAAAA,EAAWM,EAE1B,GA+BME,EAA4C,CAChDV,MAAAA,EACAC,YAjC+B,SAACU,EAAQC,EAAWC,QAAAA,IAAAA,IAAAA,EAAQ,CAAA,GAE3D,IAAMC,EAAkBC,OAAOC,KAAKJ,GAAWK,OAAO,SAACC,EAAKC,GAC1D,IAAMC,EAAWR,EAAUO,GAO3B,OANAD,EAAIC,kBAAgCE,OAAAA,QAAAC,QACbF,EAAQG,WAAA,EAAA,GAAAC,MAAAC,KADKC,aACIC,KAAhCC,SAAAA,GAGN,OADA1B,EAAY,SAAA2B,UAAaA,EAAUL,MAAM,GAAI,EAAE,GACxCI,CAAO,EAChB,CAAC,MAAAE,GAAA,OAAAT,QAAAU,OAAAD,EACD,CAAA,EAAOZ,CACT,EAAG,IACHhB,KAAW8B,OACNhC,EACH,CAAA,CACEW,OAAAA,EACAC,UAAWE,EACXD,MAAAA,EACAoB,MAAO,CAAA,KAGb,EAaE/B,YAAAA,EACAC,YAZkB,SAAC+B,GACnB,IAAMC,EAAY,GAAAH,OACbhC,GAELmC,EAAanC,EAAMoC,OAAS,GAAGH,MAAKI,KAAQH,GAC5ChC,EAAYiC,EACd,GASA,OAAOG,MAACxC,EAAayC,SAAQ,CAACC,MAAO9B,EAAiBH,SAAGA,GAE3D,cCtD4C,SAA7BD,GACb,IAAAmC,EAAanC,EAAbmC,cACAC,EAAYpC,EAAZoC,aACQC,EAAQrC,EAAhBK,OAGQX,EAAUI,IAAVJ,MACF4C,EAAsCC,EAAOA,QACjD,kBAAM7C,EAAMoC,OAAS,EAAIpC,EAAMA,EAAMoC,OAAS,GAAK,IAAI,EACvD,CAAEpC,IAEE8C,EAAkBC,cAAY,SAACC,GAC/BA,EAAGC,gBAAkBD,EAAGE,SAChB,MAAZN,OAAY,EAAZA,EAAchC,UAAUkC,kBACxBF,EAAahC,UAAUkC,gBAAgBE,EACzC,EAAG,CAAEJ,IAUL,OARAO,EAASA,UAAC,WACJP,EACFH,GAAiBA,IAEjBC,GAAgBA,GAEpB,EAAG,CAAEE,EAAcH,EAAeC,IAE3BE,GACLN,MAACK,EAAQ,CAACG,gBAAiBA,EAAevC,SACvCqC,EAAajC,OAAM0B,EACfO,CAAAA,EAAAA,EAAahC,UACbgC,EAAa/B,WAGjB,IACP,aDmCgB,WAEd,OADwBT,IAAhBH,WAEV,sCAMgB,WACd,IAAAmD,EAA+BhD,IAAvBJ,EAAKoD,EAALpD,MAAOG,EAAWiD,EAAXjD,YACf,GAAqB,IAAjBH,EAAMoC,OACR,MAAU,IAAAiB,MAAM,uDAElB,MAAO,CADOrD,EAAMA,EAAMoC,OAAS,GAAGH,MACtB9B,EAClB"}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -5,7 +5,18 @@ This small but neat package allows you to:
|
|
|
5
5
|
* Launch modals flexibly from anywhere in your React app.
|
|
6
6
|
* Have them render at one specific place in your DOM.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
**Demo:** https://codepen.io/oliverwehn/pen/YzMyoBr
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
- [Installation](#-installation)
|
|
12
|
+
- [Components](#-components)
|
|
13
|
+
- [ModalContextProvider](#modalcontextprovider)
|
|
14
|
+
- [ModalPort](#modalport)
|
|
15
|
+
- [Launching Modals](#-launching-modals)
|
|
16
|
+
- [Stacking Modals And Handling Modal State](#-stacking-modals-and-handling-modal-state)
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 🏁 Installation
|
|
9
20
|
|
|
10
21
|
```bash
|
|
11
22
|
$ npm install react-modal-port
|
|
@@ -25,7 +36,6 @@ Besides `children` a prop `onBackdropClick` is passed to `render`. It holds, if
|
|
|
25
36
|
|
|
26
37
|
|
|
27
38
|
```tsx
|
|
28
|
-
import React from 'react';
|
|
29
39
|
import { ModalContextProvider } from 'react-modal-port';
|
|
30
40
|
|
|
31
41
|
// Backdrop component to be passed to the `ModalPort`’s `render` prop
|
|
@@ -67,7 +77,6 @@ export default RootLayout;
|
|
|
67
77
|
Launching modals makes use of the `useModal` hook that provides you with the `launchModal` function.
|
|
68
78
|
|
|
69
79
|
```tsx
|
|
70
|
-
import React from 'react';
|
|
71
80
|
import { useModal } from 'react-modal-port';
|
|
72
81
|
import DecisionModal from './modals/decision';
|
|
73
82
|
|
|
@@ -122,7 +131,6 @@ The `launchModal` function expects the following arguments:
|
|
|
122
131
|
Modals can be created and designed to fully fit your needs. The only requirement is to define the functions to resolve them, for example, when clicking a button. The modal component for the example above could look like this:
|
|
123
132
|
|
|
124
133
|
```tsx
|
|
125
|
-
import React from 'react';
|
|
126
134
|
|
|
127
135
|
type DecisionModalProps = {
|
|
128
136
|
decideYay: () => void;
|
|
@@ -184,7 +192,6 @@ It then could cater the following modal functionality:
|
|
|
184
192
|
|
|
185
193
|
|
|
186
194
|
```tsx
|
|
187
|
-
import React from 'react';
|
|
188
195
|
|
|
189
196
|
type DecisionModalProps = {
|
|
190
197
|
decideYay: () => void;
|
package/types/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ export type LaunchModalProps = {
|
|
|
13
13
|
[key: string]: any;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
+
export type ModalProps = LaunchModalResolvers & LaunchModalProps;
|
|
17
|
+
|
|
16
18
|
export type ModalStackItem = {
|
|
17
19
|
render: React.FunctionComponent<LaunchModalResolvers>;
|
|
18
20
|
resolvers: LaunchModalResolvers;
|
|
@@ -21,7 +23,7 @@ export type ModalStackItem = {
|
|
|
21
23
|
};
|
|
22
24
|
|
|
23
25
|
export type LaunchModal = (
|
|
24
|
-
render: React.FunctionComponent<
|
|
26
|
+
render: React.FunctionComponent<ModalProps>,
|
|
25
27
|
resolvers: LaunchModalResolvers,
|
|
26
28
|
props?: LaunchModalProps,
|
|
27
29
|
) => void;
|