react-use-hook-modal/dist/index.cjs.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.

"use strict";var e=require("react"),r=require("react-dom"),n=function(){return n=Object.assign||function(e){for(var r,n=1,o=arguments.length;n<o;n++)for(var t in r=arguments[n])Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t]);return e},n.apply(this,arguments)};function o(e,r,n){if(n||2===arguments.length)for(var o,t=0,a=r.length;t<a;t++)!o&&t in r||(o||(o=Array.prototype.slice.call(r,0,t)),o[t]=r[t]);return e.concat(o||Array.prototype.slice.call(r))}"function"==typeof SuppressedError&&SuppressedError;var t=e.createContext(null),a=e.createContext({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 i(o){var t=o.component,a=o.props,i=o.portalTarget,u=e.useState(null),l=u[0],s=u[1];return e.useEffect((function(){s(i||document.body)}),[i]),l?r.createPortal(e.createElement(t,n({},a)),l):null}function u(r){var n=r.container,o=void 0===n?e.Fragment:n,t=r.modals;return e.createElement(o,null,t.map((function(r){var n=r.Component,o=r.props,t=r.key,a=r.portalTarget;return e.createElement(i,{key:t,component:n,props:o,portalTarget:a})})))}exports.ModalProvider=function(r){var i=r.children,l=r.container,s=r.clearTime,p=void 0===s?3e3:s,c=r.onAfterOpen,d=r.onAfterClose,f=e.useState([]),v=f[0],m=f[1],y=e.useRef([]);e.useEffect((function(){var e=y.current;v.forEach((function(r){var n=e.find((function(e){return e.key===r.key}));n&&n.props.isOpen||!r.props.isOpen||!c||c(r),n&&!r.props.isOpen&&n.props.isOpen&&d&&d(r)})),y.current=v}),[v,c,d]);var M=e.useCallback((function(e){var r=e.Component,t=e.props,a=e.key,i=e.portalTarget,u=n(n({},t),{isOpen:!0});m((function(e){var t=e.findIndex((function(e){return e.key===a}));if(-1!==t){var l=o([],e,!0);return l[t]=n(n({},l[t]),{props:u}),l}return o(o([],e,!0),[{Component:r,props:u,key:a,portalTarget:i}],!1)}))}),[]),h=e.useCallback((function(e){var r=e.key,o=e.clearTime;m((function(e){return e.map((function(e){return e.key===r?n(n({},e),{props:n(n({},e.props),{isOpen:!1})}):e}))})),setTimeout((function(){m((function(e){var n=e.find((function(e){return e.key===r}));return n&&!0!==n.props.isOpen?e.filter((function(e){return e.key!==r})):e}))}),"number"==typeof o?o:p)}),[p]),k=e.useCallback((function(){m((function(e){return e.map((function(e){return n(n({},e),{props:n(n({},e.props),{isOpen:!1})})}))})),setTimeout((function(){m((function(e){return e.filter((function(e){return!0===e.props.isOpen}))}))}),p)}),[p]),w=e.useMemo((function(){return{openModal:M,closeModal:h,clearModals:k}}),[M,h,k]);return e.createElement(t.Provider,{value:{modals:v}},e.createElement(a.Provider,{value:w},i,e.createElement(u,{container:l,modals:v})))},exports.useClearModals=function(){return e.useContext(a)},exports.useModal=function(r){var n=e.useContext(a),o=n.openModal,t=n.closeModal,i=e.useMemo((function(){return function(e){void 0===e&&(e=21);for(var r="",n=crypto.getRandomValues(new Uint8Array(e));e--;)r+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&n[e]];return r}()}),[]);return{open:e.useCallback((function(e,n){var t;o({Component:r,props:e,key:null!==(t=null==n?void 0:n.key)&&void 0!==t?t:i,portalTarget:null==n?void 0:n.portalTarget})}),[r,i,o]),close:e.useCallback((function(e){var r="string"==typeof(null==e?void 0:e.key)||"number"==typeof(null==e?void 0:e.key)?e.key:i;t({key:r,clearTime:null==e?void 0:e.clearTime})}),[t,i]),key:i}},exports.useModalsState=function(){var r=e.useContext(t);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};
//# sourceMappingURL=index.cjs.js.map