react-modal-global - npm Package Compare versions

Comparing version 0.9.32 to 0.9.33

dist/index.d.ts

@@ -1,40 +0,39 @@
-import { FunctionComponent, Component, ReactNode, ReactElement } from 'react';
+import { ReactElement, Component, ReactNode } from 'react';
 
-/*
-
-MIT License
-
-Copyright (c) 2022 Valery Zinchenko
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-*/
-
-
-type ModalComponent<P = {}> = FunctionComponent<P>
-
+declare type ModalComponent<P = unknown> = (props: P) => ReactElement;
 interface ModalParams {
-  id: string | number
-  closable: boolean
-  weak: boolean
-  fork: boolean
+    /**
+     * _Notice:_ Modals with different ids are interpreted as different - no data preservation will not be provided.
+     *
+     * @default 0
+     */
+    id: string | number;
+    /**
+     * Whether to enable built-in closing mechanisms.
+     *
+     * @default true
+     */
+    closable: boolean;
+    /**
+     * Whether to keep mounted modal until a new one is oped.
+     *
+     * @default false
+     */
+    weak: boolean;
+    /**
+     * Whether to open a new modal as a standalone. Each fork will be one layer above previous.
+     *
+     * @default false
+     */
+    fork: boolean;
 }
-
-interface ModalWindow<Params = {}> {
-  component: ModalComponent<ModalParams & Params>
-  params: ModalParams & Params
-  close: () => void
+interface ModalWindow<P = unknown> {
+    component: ModalComponent<ModalParams & P>;
+    params: ModalParams & P;
+    close: () => void;
 }
 
 declare class Modal {
-    static open<P extends object = {}, AC extends Partial<ModalParams> & P = Partial<ModalParams> & P>(component: ModalComponent<P>, ...[params]: keyof P extends never ? [AC?] : [AC]): PromiseLike<void> & ModalWindow<AC>;
-    static replace<P extends object = {}, AC extends Partial<ModalParams> & P = Partial<ModalParams> & P>(component: ModalComponent<P>, ...[params]: keyof P extends never ? [AC?] : [AC]): PromiseLike<void> & ModalWindow<AC>;
+    static open<P>(component: ModalComponent<P>, ...[modalParams]: keyof P extends never ? [Partial<ModalParams>?] : [Partial<ModalParams> & P]): ModalWindow<P> & PromiseLike<void>;
+    static replace<P>(component: ModalComponent<P>, ...[params]: keyof P extends never ? [Partial<ModalParams>?] : [Partial<ModalParams> & P]): ModalWindow<P> & PromiseLike<void>;
     private static add;
@@ -52,6 +51,6 @@ private static remove;
 }
-interface ModalContainerState {
+interface ModalContainerState<P = unknown> {
     active: boolean;
-    queue: ModalWindow[];
-    forkedQueue: ModalWindow[];
+    queue: ModalWindow<P>[];
+    forkedQueue: ModalWindow<P>[];
 }
@@ -67,4 +66,4 @@ declare class ModalContainer extends Component<ModalContainerProps, ModalContainerState> {
 
-declare function useModalContext(): ModalWindow<{}>;
+declare function useModalContext(): ModalWindow<unknown>;
 
 export { Modal, ModalContainer, useModalContext };

dist/index.ts

@@ -10,6 +10,6 @@ 'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,c){a.__proto__=c}||function(a,c){for(var e in c)Object.prototype.hasOwnProperty.call(c,e)&&(a[e]=c[e])};return extendStatics(d,b)};
 "__container",onClick:(null===(e=c.params)||void 0===e?0:e.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(d){var b=__spreadArray([],__read(containers),!1)[containers.size-1];null==b?console.warn("ModalError: no containers were mounted."):b.setState(d)}
-var Modal=function(){function d(){}d.open=function(b){for(var a=[],c=1;c<arguments.length;c++)a[c-1]=arguments[c];a=__read(a,1)[0];var e=function(){},f=new Promise(function(h){return e=h}),g={component:b,params:__assign(__assign({},DEFAULT_PARAMS),a),close:function(){e();d.remove(g)}};d.add(g);return __assign(__assign({},g),{then:function(h,k){return f.then(h,k)}})};d.replace=function(b){for(var a=[],c=1;c<arguments.length;c++)a[c-1]=arguments[c];a=__read(a,1)[0];dispatch(function(e){return __assign(__assign({},
+function dispatch(d){var b=__spreadArray([],__read(containers),!1).at(-1);null==b?console.warn("ModalError: no containers were mounted."):b.setState(d)}
+var Modal=function(){function d(){}d.open=function(b){for(var a=[],c=1;c<arguments.length;c++)a[c-1]=arguments[c];a=__read(a,1)[0];a=__assign(__assign({},DEFAULT_PARAMS),a);var e={component:b,params:a,close:function(){f();d.remove(e)}},f=function(){},g=new Promise(function(h){return f=h});d.add(e);return __assign(__assign({},e),{then:function(h,k){return g.then(h,k)}})};d.replace=function(b){for(var a=[],c=1;c<arguments.length;c++)a[c-1]=arguments[c];a=__read(a,1)[0];dispatch(function(e){return __assign(__assign({},
 e),{queue:e.queue.slice(0,-1)})});return d.open(b,a)};d.add=function(b){b.params.fork?this.fork(b):dispatch(function(a){var c;return(null===(c=b.params)||void 0===c||!c.weak)&&0<a.queue.length&&(c=a.queue[a.queue.length-1],serialize(c.params)===serialize(b.params)&&c.component===b.component)?__assign(__assign({},a),{active:!0,queue:[b]}):!1===a.active&&1===a.queue.length?__assign(__assign({},a),{active:!0,queue:[b]}):__assign(__assign({},a),{active:!0,queue:__spreadArray(__spreadArray([],__read(a.queue),
 !1),[b],!1)})})};d.remove=function(b){b.params.fork?dispatch(function(a){var c=a.forkedQueue.filter(function(e){return e!==b});return __assign(__assign({},a),{forkedQueue:c})}):dispatch(function(a){var c=a.queue.filter(function(f){return f!==b}),e=0===c.length;return!b.params.weak&&e?__assign(__assign({},a),{active:!1}):__assign(__assign({},a),{queue:c,active:!e})})};d.fork=function(b){dispatch(function(a){return __assign(__assign({},a),{forkedQueue:__spreadArray(__spreadArray([],__read(a.forkedQueue),
 !1),[b],!1)})})};d.closeAll=function(){dispatch(function(b){b.queue.forEach(function(a){return a.close()});return DEFAULT_STATE})};return d}();function useModalContext(){var d=react.useContext(modalContext);if(!d)throw Error("ModalError: Out of Modal context");return d}exports.Modal=Modal;exports.ModalContainer=ModalContainer;exports.useModalContext=useModalContext

package.json

 {
   "name": "react-modal-global",
-  "version": "0.9.32",
+  "version": "0.9.33",
   "description": "React Modal but Global",
@@ -12,3 +12,2 @@ "main": "dist/index.ts",
   "dependencies": {
-    "@vercel/ncc": "^0.34.0",
     "react": "^18.2.0"
@@ -45,4 +44,6 @@ },
     "react",
+    "modal",
     "popup",
-    "ts"
+    "ts",
+    "typescript"
   ],
@@ -49,0 +50,0 @@ "author": "FrameMuse",

README.md

@@ -117,8 +117,8 @@ # React Modal Global
 
-|Option|Description|
-|---|---|
-|`id`|Specifies id of a modal (default: `Date.now()`). In react it's used as a `key`. May be used to find and close specific modal or else.|
-|`closable`|Specifies if a modal closing is controlled itself|
-|`weak`|By default, a last closed modal will not be removed and if same modal will be request to open, it will _restore_ previous modal but with `weak: true` it will not happen.|
-|`fork`|Creates a new layer for a single modal|
+| Option     | Description                                                                                                                                                               |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`       | Specifies id of a modal (default: `Date.now()`). In react it's used as a `key`. May be used to find and close specific modal or else.                                     |
+| `closable` | Specifies if a modal closing is controlled itself                                                                                                                         |
+| `weak`     | By default, a last closed modal will not be removed and if same modal will be request to open, it will _restore_ previous modal but with `weak: true` it will not happen. |
+| `fork`     | Creates a new layer for a single modal                                                                                                                                    |
 
@@ -146,3 +146,3 @@ ### Modal Template
 
-import PopupLayout from "modal-layouts/PopupLayout/PopupLayout"
+import PopupLayout from "../modal/layouts/PopupLayout/PopupLayout"
 
@@ -149,0 +149,0 @@ function PopupMyFirst() {

No alert changes

Improved metrics

Total package byte prevSize

16928

increased by2.97%

Dependency count

1

decreased by-50%

Lines of code

88

increased by10%

Dependency changes

• - Removed@vercel/ncc@^0.34.0

• - Removed@vercel/ncc@0.34.0(transitive)