UNPKG

reoverlay

Version:

A tiny, typed modal manager for React.

2 lines 4.13 kB
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var d={CONFIG:"config",HIDE_MODAL:"hide_modal",SHOW_MODAL:"show_modal"},s={CHANGE_MODAL:"change_modal",HIDE_ALL:"hide_all",HIDE_MODAL:"hide_modal",SHOW_MODAL:"show_modal"};var T=(()=>{let e=new Map,o=(a,i)=>(e.has(a)||e.set(a,new Set),e.get(a)?.add(i),()=>t(a,i)),t=(a,i)=>{if(!a){e.clear();return}if(!i){e.delete(a);return}let l=e.get(a);l?.delete(i),l?.size===0&&e.delete(a);};return {emit:(a,i)=>{e.get(a)?.forEach(l=>{l(i);});},listenerCount:a=>e.get(a)?.size??0,off:t,on:o}})(),m=T;var g=e=>e[e.length-1],E=e=>new Set(e).size===e.length,y=e=>typeof e=="string"||e instanceof String,A=e=>typeof e=="object"&&e!==null&&"$$typeof"in e;var R=e=>typeof e=="function"||react.isValidElement(e)||A(e),f=(e,o)=>{switch(e){case d.CONFIG:{if(!Array.isArray(o))throw new Error("Reoverlay: Config data must be an array. Pass an array to Reoverlay.config().");let t=o;t.forEach(n=>{if(!n.name||!n.component)throw new Error("Reoverlay: Each config item must contain a 'name' and 'component' property.")});let r=t.map(n=>n.name);if(!E(r))throw new Error("Reoverlay: Modal config names must be unique.");return true}case d.SHOW_MODAL:{let t=()=>{throw new Error("Reoverlay: Method 'showModal' requires a React component, React element, or configured modal name.")};return o||t(),y(o)?"string":R(o)?"component":(t(),false)}case d.HIDE_MODAL:{if(y(o))return true;throw new Error(`Reoverlay: Method 'hideModal' accepts an optional string modal name, got ${typeof o}.`)}default:return false}};var H=()=>{let[e,o]=react.useState([]);return react.useEffect(()=>m.on(s.CHANGE_MODAL,o),[]),jsxRuntime.jsx("div",{className:"reOverlay",children:e.map(({modalKey:t,component:r,props:n})=>react.isValidElement(r)?jsxRuntime.jsx(react.Fragment,{children:react.cloneElement(r,n)},`id-${t}`):jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(r,{...n})},`id-${t}`))})},k=H;var w=0,V=()=>(w+=1,`reoverlay-${w}`),x={modals:new Map,snapshots:new Map,config(e=[]){f(d.CONFIG,e),e.forEach(o=>{this.modals.set(o.name,o.component);});},showModal(e,o={}){if(f(d.SHOW_MODAL,e)==="string"){let r=e,n=this.modals.get(r);if(!n)throw new Error(`Reoverlay: Modal not found. Make sure "${r}" has been passed to Reoverlay.config().`);this.applyModal({component:n,modalKey:r,props:o,type:s.SHOW_MODAL});return}this.applyModal({component:e,modalKey:V(),props:o,type:s.SHOW_MODAL});},getSnapshotsArray(){return Array.from(this.snapshots.entries()).map(([e,o])=>({modalKey:e,...o}))},hideModal(e=null){if(e){f(d.HIDE_MODAL,e);let t=e,r=this.snapshots.get(t);if(!r)throw new Error("Reoverlay: Snapshot not found. You're trying to hide a missing modal.");this.applyModal({...r,modalKey:t,type:s.HIDE_MODAL});return}let o=g(this.getSnapshotsArray())??null;if(o){this.applyModal({...o,type:s.HIDE_MODAL});return}console.error("Reoverlay: There's no active modal to be hidden.");},hideAll(){this.applyModal({type:s.HIDE_ALL});},applyModal({component:e,modalKey:o,props:t,type:r}){switch(r){case s.SHOW_MODAL:e&&o&&this.snapshots.set(o,{component:e,props:t??{}});break;case s.HIDE_ALL:this.snapshots.clear();break;default:o&&this.snapshots.delete(o);break}m.emit(s.CHANGE_MODAL,this.getSnapshotsArray());}},M=x;var N=({"aria-describedby":e,"aria-label":o,"aria-labelledby":t,animation:r="fade",children:n=null,closeOnEscape:a=true,contentContainerClassName:i="",onClose:l=()=>{M.hideModal();},role:D="dialog",wrapperClassName:O=""})=>{let u=react.useRef(null);react.useEffect(()=>{if(!a)return;let p=h=>{h.key==="Escape"&&l(h);};return document.addEventListener("keydown",p),()=>{document.removeEventListener("keydown",p);}},[a,l]);let v=p=>{p.target===u.current&&l(p);};return jsxRuntime.jsx("div",{"aria-describedby":e,"aria-label":o,"aria-labelledby":t,"aria-modal":"true",className:`reOverlay__modalWrapper -ro-${r} ${O}`.trim(),onClick:v,ref:u,role:D,children:jsxRuntime.jsx("div",{className:`reOverlay__modalContainer ${i}`.trim(),children:n})})},F=N;exports.ModalContainer=k;exports.ModalWrapper=F;exports.Reoverlay=M;//# sourceMappingURL=index.cjs.map //# sourceMappingURL=index.cjs.map