react-use-hook-modal/dist/index.esm.js

A React Hook library for declaratively managing modals, eliminating the need for state declarations. Props can be passed directly through function calls, simplifying modal control in your application.

import r,{createContext as e,useState as n,useEffect as o,useRef as t,useCallback as i,useMemo as a,useContext as u}from"react";import{createPortal as l}from"react-dom";var p=function(){return p=Object.assign||function(r){for(var e,n=1,o=arguments.length;n<o;n++)for(var t in e=arguments[n])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},p.apply(this,arguments)};function c(r,e,n){if(n||2===arguments.length)for(var o,t=0,i=e.length;t<i;t++)!o&&t in e||(o||(o=Array.prototype.slice.call(e,0,t)),o[t]=e[t]);return r.concat(o||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var s=e(null),d=e({openModal:function(){throw new Error("ModalProvider is missing or useModal must be called within a ModalProvider. Please ensure that your component is wrapped within <ModalProvider>.")},closeModal:function(){throw new Error("ModalProvider is missing or useModal must be called within a ModalProvider. Please ensure that your component is wrapped within <ModalProvider>.")},clearModals:function(){throw new Error("ModalProvider is missing or useModal must be called within a ModalProvider. Please ensure that your component is wrapped within <ModalProvider>.")}});function f(e){var t=e.component,i=e.props,a=e.portalTarget,u=n(null),c=u[0],s=u[1];return o((function(){s(a||document.body)}),[a]),c?l(r.createElement(t,p({},i)),c):null}function v(e){var n=e.container,o=void 0===n?r.Fragment:n,t=e.modals;return r.createElement(o,null,t.map((function(e){var n=e.Component,o=e.props,t=e.key,i=e.portalTarget;return r.createElement(f,{key:t,component:n,props:o,portalTarget:i})})))}function m(e){var u=e.children,l=e.container,f=e.clearTime,m=void 0===f?3e3:f,y=e.onAfterOpen,M=e.onAfterClose,h=n([]),w=h[0],P=h[1],g=t([]);o((function(){var r=g.current;w.forEach((function(e){var n=r.find((function(r){return r.key===e.key}));n&&n.props.isOpen||!e.props.isOpen||!y||y(e),n&&!e.props.isOpen&&n.props.isOpen&&M&&M(e)})),g.current=w}),[w,y,M]);var k=i((function(r){var e=r.Component,n=r.props,o=r.key,t=r.portalTarget,i=p(p({},n),{isOpen:!0});P((function(r){var n=r.findIndex((function(r){return r.key===o}));if(-1!==n){var a=c([],r,!0);return a[n]=p(p({},a[n]),{props:i}),a}return c(c([],r,!0),[{Component:e,props:i,key:o,portalTarget:t}],!1)}))}),[]),E=i((function(r){var e=r.key,n=r.clearTime;P((function(r){return r.map((function(r){return r.key===e?p(p({},r),{props:p(p({},r.props),{isOpen:!1})}):r}))})),setTimeout((function(){P((function(r){var n=r.find((function(r){return r.key===e}));return n&&!0!==n.props.isOpen?r.filter((function(r){return r.key!==e})):r}))}),"number"==typeof n?n:m)}),[m]),O=i((function(){P((function(r){return r.map((function(r){return p(p({},r),{props:p(p({},r.props),{isOpen:!1})})}))})),setTimeout((function(){P((function(r){return r.filter((function(r){return!0===r.props.isOpen}))}))}),m)}),[m]),T=a((function(){return{openModal:k,closeModal:E,clearModals:O}}),[k,E,O]);return r.createElement(s.Provider,{value:{modals:w}},r.createElement(d.Provider,{value:T},u,r.createElement(v,{container:l,modals:w})))}function y(r){var e=u(d),n=e.openModal,o=e.closeModal,t=a((function(){return function(r){void 0===r&&(r=21);for(var e="",n=crypto.getRandomValues(new Uint8Array(r));r--;)e+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&n[r]];return e}()}),[]),l=i((function(e,o){var i;n({Component:r,props:e,key:null!==(i=null==o?void 0:o.key)&&void 0!==i?i:t,portalTarget:null==o?void 0:o.portalTarget})}),[r,t,n]);return{open:l,close:i((function(r){var e="string"==typeof(null==r?void 0:r.key)||"number"==typeof(null==r?void 0:r.key)?r.key:t;o({key:e,clearTime:null==r?void 0:r.clearTime})}),[o,t]),key:t}}function M(){var r=u(s);if(null===r)throw new Error("ModalProvider is missing or useModalsState must be called within a ModalProvider. Please ensure that your component is wrapped within <ModalProvider>.");return r}function h(){return u(d)}export{m as ModalProvider,h as useClearModals,y as useModal,M as useModalsState};
//# sourceMappingURL=index.esm.js.map