react-modal-global - npm Package Compare versions

Comparing version 1.1.0 to 2.22.2023-alpha

dist/index.d.ts

@@ -0,1 +1,2 @@
+import EventEmitter from 'eventemitter3';
 import { ReactElement, Component, ReactNode, ComponentLifecycle } from 'react';
@@ -39,3 +40,3 @@ import { HasRequiredKeys } from 'type-fest';
     /**
-     * Indicates that the `close` method has been called.
+     * Indicates that the `close` method has been called and the modal window is going to be removed.
      */
@@ -62,2 +63,11 @@ isClosed: boolean;
 
+interface ModalState {
+    isOpen: boolean;
+    windows: ModalWindow[];
+}
+interface Events {
+    add: [ModalWindow];
+    remove: [ModalWindow];
+    update: [];
+}
 /**
@@ -69,3 +79,11 @@ * Controller for opening and closing modal windows.
 declare class ModalController {
+    #private;
+    protected set isOpen(value: boolean);
     /**
+     * Whether any modals are shown.
+     */
+    get isOpen(): boolean;
+    protected windows: Set<ModalWindow>;
+    protected events: EventEmitter<Events>;
+    /**
      * Opens a modal window. Infers props from the component.
@@ -99,2 +117,5 @@ *
      * Adds a modal window to the queue.
+     *
+     * - Controls whether the modal is open.
+     * - Controls whether the order of windows.
      */
@@ -106,12 +127,8 @@ private add;
     private remove;
+    private findByComponent;
+    private findById;
     /**
-     * Forks a modal window and adds it to a forked queue.
-     *
-     * It means that the modal will be open over all other modals.
-     */
-    private fork;
-    /**
      * Closes all modals by its component (including forked) starting from the last one.
      */
-    closeByComponent<P>(component: ModalComponent<P>): void;
+    closeByComponent<Params>(component: ModalComponent<Params>, params?: ModalParams & Params): void;
     /**
@@ -125,2 +142,8 @@ * Closes all modals by its id (including forked) starting from the last one.
     closeAll(): void;
+    /**
+     * Subscribes on event.
+     *
+     * @returns `unsubscribe` method
+     */
+    observe(callback: (state: ModalState) => void): () => void;
 }
@@ -142,2 +165,6 @@ declare const Modal: ModalController;
     className?: string;
+    /**
+     * Modal controller. If not provided, will use default (global `Modal`) controller.
+     */
+    controller?: ModalController;
 }
@@ -157,4 +184,2 @@ interface ModalContainerState<P = unknown> {
     get className(): string;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
     render(): JSX.Element;
@@ -161,0 +186,0 @@ renderForks(): JSX.Element[];

dist/index.ts

@@ -1,16 +0,13 @@
-'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),extendStatics=function(e,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,c){a.__proto__=c}||function(a,c){for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])};return extendStatics(e,b)};
-function __extends(e,b){function a(){this.constructor=e}if("function"!==typeof b&&null!==b)throw new TypeError("Class extends value "+String(b)+" is not a constructor or null");extendStatics(e,b);e.prototype=null===b?Object.create(b):(a.prototype=b.prototype,new a)}var __assign=function(){__assign=Object.assign||function(e){for(var b,a=1,c=arguments.length;a<c;a++){b=arguments[a];for(var d in b)Object.prototype.hasOwnProperty.call(b,d)&&(e[d]=b[d])}return e};return __assign.apply(this,arguments)};
-function __read(e,b){var a="function"===typeof Symbol&&e[Symbol.iterator];if(!a)return e;e=a.call(e);var c,d=[];try{for(;(void 0===b||0<b--)&&!(c=e.next()).done;)d.push(c.value)}catch(g){var f={error:g}}finally{try{c&&!c.done&&(a=e["return"])&&a.call(e)}finally{if(f)throw f.error;}}return d}function __spreadArray(e,b,a){if(a||2===arguments.length)for(var c=0,d=b.length,f;c<d;c++)!f&&c in b||(f||(f=Array.prototype.slice.call(b,0,c)),f[c]=b[c]);return e.concat(f||Array.prototype.slice.call(b))}
-var modalContext=react.createContext(null);function classWithModifiers(e){for(var b=[],a=1;a<arguments.length;a++)b[a-1]=arguments[a];b=b.filter(Boolean);if(!b.length)return e;b=b.map(function(c){return e+"--"+c});return e+" "+b.join(" ")}
-function serialize(e){function b(){var a=new WeakSet;return function(c,d){if("object"===typeof d&&null!==d){if(a.has(d))return;a.add(d)}return d}}return null==e?String(e):JSON.stringify(e,function(a,c){c=b()(a,c);a=c instanceof Function?c.name===a?c.toString():c.name:c;return a})}function stopPropagation(e){return function(b){var a=b.target;b=b.currentTarget;a instanceof Element&&b instanceof Element&&a!==b||(null===e||void 0===e?void 0:e())}}
-var containers=new Set,ModalContainer=function(e){function b(){var a=null!==e&&e.apply(this,arguments)||this;a.state={active:!1,queue:[],forkedQueue:[]};return a}__extends(b,e);Object.defineProperty(b.prototype,"className",{get:function(){return this.props.className||"modal"},enumerable:!1,configurable:!0});b.prototype.componentDidMount=function(){containers.add(this)};b.prototype.componentWillUnmount=function(){containers.delete(this)};b.prototype.render=function(){var a,c,d=this.state,f=d.active;
-d=d.queue.at(-1);var g=(null===(a=null===d||void 0===d?void 0:d.params)||void 0===a?0:a.closable)?stopPropagation(d.close):void 0;a=this.props.template||react.Fragment;var h=d?__assign(__assign({},d),{isClosed:!f}):null;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",__assign({className:classWithModifiers(this.className,f&&"active"),"aria-modal":!0,"aria-hidden":!f},{children:jsxRuntime.jsx("div",__assign({className:this.className+"__container",onClick:g},{children:jsxRuntime.jsx(modalContext.Provider,
-__assign({value:h},{children:jsxRuntime.jsx(a,{children:(null===d||void 0===d?void 0:d.component)&&react.createElement(d.component,__assign({},d.params,{key:null===(c=null===d||void 0===d?void 0:d.params)||void 0===c?void 0:c.id}))})}))}))})),this.renderForks()]})};b.prototype.renderForks=function(){var a=this;return this.state.forkedQueue.map(function(c){var d;return jsxRuntime.jsx("div",__assign({className:classWithModifiers(a.className,"active"),"aria-modal":!0},{children:jsxRuntime.jsx("div",
-__assign({className:a.className+"__container",onClick:(null===(d=c.params)||void 0===d?0:d.closable)?stopPropagation(c.close):void 0},{children:jsxRuntime.jsx(modalContext.Provider,__assign({value:c},{children:jsxRuntime.jsx(c.component,__assign({},c.params))}))}))}),c.params.id)})};return b}(react.Component),DEFAULT_STATE={active:!1,queue:[],forkedQueue:[]},DEFAULT_PARAMS={id:0,closable:!0,weak:!1,fork:!1};
-function dispatch(e){var b=__spreadArray([],__read(containers),!1).at(-1);null==b?console.warn("ModalError: no containers were mounted."):b.setState(e)}
-var ModalController=function(){function e(){}e.prototype.open=function(b){for(var a=this,c=[],d=1;d<arguments.length;d++)c[d-1]=arguments[d];c=__read(c,1)[0];var f=function(){},g=new Promise(function(k){return f=k});c=__assign(__assign({},DEFAULT_PARAMS),c);var h={component:b,params:c,close:function(){a.remove(h);f()},isClosed:!1};this.add(h);return __assign(__assign({},h),{then:function(k,l){return g.then(k,l)}})};e.prototype.replace=function(b){for(var a=[],c=1;c<arguments.length;c++)a[c-1]=arguments[c];
-a=__read(a,1)[0];dispatch(function(d){return __assign(__assign({},d),{queue:d.queue.slice(0,-1)})});return this.open(b,a)};e.prototype.add=function(b){b.params.fork?this.fork(b):dispatch(function(a){var c;if((null===(c=b.params)||void 0===c||!c.weak)&&0<a.queue.length){var d=a.queue[a.queue.length-1];c=serialize(b.params)===serialize(d.params);d=b.component===d.component;if(c&&d)return __assign(__assign({},a),{active:!0})}return!1===a.active&&0<a.queue.length?__assign(__assign({},a),{active:!0,queue:[b]}):
-__assign(__assign({},a),{active:!0,queue:__spreadArray(__spreadArray([],__read(a.queue),!1),[b],!1)})})};e.prototype.remove=function(b){b.params.fork?dispatch(function(a){var c=a.forkedQueue.filter(function(d){return d!==b});return __assign(__assign({},a),{forkedQueue:c})}):dispatch(function(a){var c=a.queue.filter(function(f){return f!==b}),d=0===c.length;return d&&!b.params.weak?__assign(__assign({},a),{active:!1}):__assign(__assign({},a),{queue:c,active:!d})})};e.prototype.fork=function(b){dispatch(function(a){return __assign(__assign({},
-a),{forkedQueue:__spreadArray(__spreadArray([],__read(a.forkedQueue),!1),[b],!1)})})};e.prototype.closeByComponent=function(b){dispatch(function(a){var c=__spreadArray([],__read(a.queue.filter(function(f){return f.component===b})),!1),d=__spreadArray([],__read(a.forkedQueue.filter(function(f){return f.component===b})),!1);c.reverse().forEach(function(f){return f.close()});d.reverse().forEach(function(f){return f.close()});return a})};e.prototype.closeById=function(b){dispatch(function(a){var c=a.queue.filter(function(f){return f.params.id===
-b}),d=a.forkedQueue.filter(function(f){return f.params.id===b});c.forEach(function(f){return f.close()});d.forEach(function(f){return f.close()});return a})};e.prototype.closeAll=function(){dispatch(function(b){b.queue.forEach(function(a){return a.close()});return DEFAULT_STATE})};return e}(),Modal=new ModalController;function useModalContext(){var e=react.useContext(modalContext);if(!e)throw Error("ModalError: useModalContext must be used within a modalContext");return e}exports.Modal=Modal;
-exports.ModalContainer=ModalContainer;exports.ModalController=ModalController;exports.useModalContext=useModalContext
+'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var EventEmitter=require("eventemitter3"),jsxRuntime=require("react/jsx-runtime"),react=require("react");function _interopDefaultLegacy(a){return a&&"object"===typeof a&&"default"in a?a:{"default":a}}var EventEmitter__default=_interopDefaultLegacy(EventEmitter);
+function __classPrivateFieldGet(a,b,c,e){if("a"===c&&!e)throw new TypeError("Private accessor was defined without a getter");if("function"===typeof b?a!==b||!e:!b.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===c?e:"a"===c?e.call(a):e?e.value:b.get(a)}
+function __classPrivateFieldSet(a,b,c,e,d){if("m"===e)throw new TypeError("Private method is not writable");if("a"===e&&!d)throw new TypeError("Private accessor was defined without a setter");if("function"===typeof b?a!==b||!d:!b.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===e?d.call(a,c):d?d.value=c:b.set(a,c),c}
+function classWithModifiers(a,...b){b=b.filter(Boolean);if(!b.length)return a;b=b.map(c=>a+"--"+c);return a+" "+b.join(" ")}function serialize(a){function b(){let c=new WeakSet;return(e,d)=>{if("object"===typeof d&&null!==d){if(c.has(d))return;c.add(d)}return d}}return null==a?String(a):JSON.stringify(a,function(c,e){e=b()(c,e);c=e instanceof Function?e.name===c?e.toString():e.name:e;return c})}
+function stopPropagation(a){return({target:b,currentTarget:c})=>{b instanceof Element&&c instanceof Element&&b!==c||(null===a||void 0===a?void 0:a())}}var _ModalController_isOpen;let DEFAULT_PARAMS={id:0,closable:!0,weak:!1,fork:!1};
+class ModalController{constructor(){_ModalController_isOpen.set(this,!1);this.windows=new Set;this.events=new EventEmitter__default["default"]}set isOpen(a){__classPrivateFieldSet(this,_ModalController_isOpen,a,"f")}get isOpen(){return __classPrivateFieldGet(this,_ModalController_isOpen,"f")}open(a,...[b]){let c=()=>{},e=new Promise(f=>c=f);b=Object.assign(Object.assign({},DEFAULT_PARAMS),b);let d={component:a,params:b,close:()=>{this.remove(d);c()},isClosed:!1};this.add(d);return Object.assign(Object.assign({},
+d),{then(f,g){return e.then(f,g)}})}replace(a,...[b]){let c=[...this.windows].at(-1);null!=c&&this.windows.delete(c);return this.open(a,b)}add(a){!1===this.isOpen&&0<this.windows.size&&this.windows.clear();this.isOpen=!0;this.windows.add(a);this.events.emit("add",a)}remove(a){if(this.windows.has(a)){if(1===this.windows.size&&(this.isOpen=!1,!a.params.weak)){this.events.emit("update");return}this.windows.delete(a);this.events.emit("remove",a)}}findByComponent(a,b){return[...this.windows].filter(c=>
+c.component!==a?!1:null!=b?serialize(b)===serialize(c.params):!0)}findById(a){return[...this.windows].filter(b=>b.params.id===a)}closeByComponent(a,b){this.findByComponent(a,b).forEach(c=>c.close())}closeById(a){this.findById(a).forEach(b=>b.close())}closeAll(){this.isOpen=!1;this.events.emit("update")}observe(a){let b=()=>{const c={isOpen:this.isOpen,windows:[...this.windows]};a(c)};this.events.on("add",b);this.events.on("remove",b);this.events.on("update",b);return()=>{this.events.off("add",b);
+this.events.off("remove",b);this.events.off("update",b)}}}_ModalController_isOpen=new WeakMap;let Modal=new ModalController,modalContext=react.createContext(null);
+class ModalContainer extends react.Component{constructor(){super(...arguments);this.state={active:!1,queue:[],forkedQueue:[]}}get className(){return this.props.className||"modal"}render(){var a,b;let {active:c,queue:e}=this.state,d=e.at(-1),f=(null===(a=null===d||void 0===d?void 0:d.params)||void 0===a?0:a.closable)?stopPropagation(d.close):void 0;a=this.props.template||react.Fragment;let g=d?Object.assign(Object.assign({},d),{isClosed:!c}):null;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",
+Object.assign({className:classWithModifiers(this.className,c&&"active"),"aria-modal":!0,"aria-hidden":!c},{children:jsxRuntime.jsx("div",Object.assign({className:this.className+"__container",onClick:f},{children:jsxRuntime.jsx(modalContext.Provider,Object.assign({value:g},{children:jsxRuntime.jsx(a,{children:(null===d||void 0===d?void 0:d.component)&&react.createElement(d.component,Object.assign({},d.params,{key:null===(b=null===d||void 0===d?void 0:d.params)||void 0===b?void 0:b.id}))})}))}))})),
+this.renderForks()]})}renderForks(){return this.state.forkedQueue.map(a=>{var b;return jsxRuntime.jsx("div",Object.assign({className:classWithModifiers(this.className,"active"),"aria-modal":!0},{children:jsxRuntime.jsx("div",Object.assign({className:this.className+"__container",onClick:(null===(b=a.params)||void 0===b?0:b.closable)?stopPropagation(a.close):void 0},{children:jsxRuntime.jsx(modalContext.Provider,Object.assign({value:a},{children:jsxRuntime.jsx(a.component,Object.assign({},a.params))}))}))}),
+a.params.id)})}}function useModalContext(){let a=react.useContext(modalContext);if(!a)throw Error("ModalError: useModalContext must be used within a modalContext");return a}exports.Modal=Modal;exports.ModalContainer=ModalContainer;exports.ModalController=ModalController;exports.useModalContext=useModalContext

package.json

 {
   "name": "react-modal-global",
-  "version": "1.1.0",
+  "version": "2.22.2023-alpha",
   "description": "Highly reusable React Modal that can be run from useEffect.",
@@ -26,2 +26,3 @@ "main": "dist/index.ts",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "eventemitter3": "^5.0.0",
     "rollup": "^2.77.0",
@@ -28,0 +29,0 @@ "rollup-plugin-dts": "^4.2.2",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

211

increased by8.76%

Worsened metrics

Total package byte prevSize

25526

decreased by-3.55%

Dev dependency count

18

increased by5.88%

Number of low quality alerts

1

increased byInfinity%

No dependency changes