styled-react-modal - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0-alpha

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(4)()},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("react-dom")},function(e,t,r){"use strict";var n=r(5);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,a,u){if(u!==n){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t),r.d(t,"ModalProvider",(function(){return m})),r.d(t,"BaseModalBackground",(function(){return a}));var n=r(2),o=r.n(n),a=o.a.div.withConfig({displayName:"baseStyles__BaseModalBackground"})(["display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:30;background-color:rgba(0,0,0,0.5);align-items:center;justify-content:center;"]),u=r(0),c=r.n(u),i=r(1),l=r.n(i),f=c.a.createContext({}),s=f.Provider,p=f.Consumer;function d(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var u,c=e[Symbol.iterator]();!(n=(u=c.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return y(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function b(e){var t=e.backgroundComponent,r=e.children,n=Object(u.useRef)(null),o=d(Object(u.useState)(null),2),i=o[0],l=o[1],f=d(Object(u.useState)(a),2),p=f[0],y=f[1];return Object(u.useEffect)((function(){t&&y(t)}),[y,t]),Object(u.useEffect)((function(){l(n.current)}),[l,n]),c.a.createElement(s,{value:{modalNode:i,BackgroundComponent:p}},r,c.a.createElement("div",{ref:n}))}b.propTypes={backgroundComponent:l.a.oneOfType([l.a.element,l.a.object])};var m=b,v=r(3),O=r.n(v);function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var u,c=e[Symbol.iterator]();!(n=(u=c.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return j(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return j(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function w(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function S(e){var t,r=e.WrapperComponent,n=e.children,o=e.onBackgroundClick,a=e.onEscapeKeydown,i=e.allowScroll,l=e.beforeOpen,f=e.afterOpen,s=e.beforeClose,d=e.afterClose,y=e.backgroundProps,b=e.isOpen,m=w(e,["WrapperComponent","children","onBackgroundClick","onEscapeKeydown","allowScroll","beforeOpen","afterOpen","beforeClose","afterClose","backgroundProps","isOpen"]),v=Object(u.useRef)(null),j=Object(u.useRef)(null),S=Object(u.useRef)(!1),C=h(Object(u.useState)(!1),2),E=C[0],k=C[1];function P(e){v.current===e.target&&o&&o(e)}return Object(u.useEffect)((function(){function e(e){if(e)try{e().then((function(){return k(b)}))}catch(e){k(b)}else k(b)}E!==b&&e(b?l:s)}),[S,E,k,b,l,s]),Object(u.useEffect)((function(){E?f&&f():S.current&&d&&d()}),[S,E,f,d]),Object(u.useEffect)((function(){function e(e){"Escape"===e.key&&a&&a(e)}return E&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[E,a]),Object(u.useEffect)((function(){return E&&!i&&(j.current=document.body.style.overflow,document.body.style.overflow="hidden"),function(){i||(document.body.style.overflow=j.current||"")}}),[E,i]),Object(u.useEffect)((function(){S.current=!0}),[S]),t=r?c.a.createElement(r,m,n):n,c.a.createElement(p,null,(function(e){var r=e.modalNode,n=e.BackgroundComponent;return r&&n&&E?O.a.createPortal(c.a.createElement(n,g({},y,{onClick:P,ref:v}),t),r):null}))}S.styled=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];var n=t?o.a.div.withConfig({displayName:"Modal__wrap"}).apply(void 0,t):o.a.div.withConfig({displayName:"Modal__wrap"})();return function(e){return c.a.createElement(S,g({WrapperComponent:n},e))}},S.defaultProps={backgroundProps:{}},S.propTypes={WrapperComponent:l.a.oneOfType([l.a.element,l.a.object]),onBackgroundClick:l.a.func,onEscapeKeydown:l.a.func,allowScroll:l.a.bool,beforeOpen:l.a.func,afterOpen:l.a.func,beforeClose:l.a.func,afterClose:l.a.func,backgroundProps:l.a.object,isOpen:l.a.bool};var C=S;t.default=C}]);
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","styled-components","react","react-dom"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["styled-react-modal"]={},e.styled,e.React,e.ReactDOM)}(this,(function(e,n,t,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n),u=o(t),c=o(r),l=a.default.div.withConfig({displayName:"baseStyles__BaseModalBackground"})(["display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:30;background-color:rgba(0,0,0,0.5);align-items:center;justify-content:center;"]);var f=function(e){if(Array.isArray(e))return e};var i=function(e,n){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var t=[],r=!0,o=!1,a=void 0;try{for(var u,c=e[Symbol.iterator]();!(r=(u=c.next()).done)&&(t.push(u.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return t}};var p=function(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r};var s=function(e,n){if(e){if("string"==typeof e)return p(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?p(e,n):void 0}};var d=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var y=function(e,n){return f(e)||i(e,n)||s(e,n)||d()};function m(e,n){return e(n={exports:{}},n.exports),n.exports}function v(){}function b(){}b.resetWarningCache=v;var g=m((function(e){e.exports=function(){function e(e,n,t,r,o,a){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function n(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:b,resetWarningCache:v};return t.PropTypes=t,t}()})),h=u.default.createContext({}),O=h.Provider,w=h.Consumer;function C(e){var n=e.backgroundComponent,r=e.children,o=t.useRef(null),a=t.useState(null),c=y(a,2),f=c[0],i=c[1],p=t.useState(l),s=y(p,2),d=s[0],m=s[1];return t.useEffect((function(){n&&m(n)}),[m,n]),t.useEffect((function(){i(o.current)}),[i,o]),u.default.createElement(O,{value:{modalNode:f,BackgroundComponent:d}},r,u.default.createElement("div",{ref:o}))}C.propTypes={backgroundComponent:g.oneOfType([g.element,g.object])};var k=m((function(e){function n(){return e.exports=n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},n.apply(this,arguments)}e.exports=n}));var E=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o};var j=function(e,n){if(null==e)return{};var t,r,o=E(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o};function S(e){for(var n=arguments.length,t=new Array(n>1?n-1:0),r=1;r<n;r++)t[r-1]=arguments[r];e&&e.apply(void 0,t)}function P(e){var n,r=e.WrapperComponent,o=e.children,a=e.onBackgroundClick,l=e.onEscapeKeydown,f=e.allowScroll,i=e.beforeOpen,p=e.afterOpen,s=e.beforeClose,d=e.afterClose,m=e.backgroundProps,v=e.isOpen,b=j(e,["WrapperComponent","children","onBackgroundClick","onEscapeKeydown","allowScroll","beforeOpen","afterOpen","beforeClose","afterClose","backgroundProps","isOpen"]),g=t.useRef(null),h=t.useRef(null),O=t.useRef(!1),C=t.useState(!1),E=y(C,2),P=E[0],x=E[1];function T(e){g.current===e.target&&a&&a(e)}return t.useEffect((function(){function e(e){x(e),S(e?p:d)}function n(n){if(n){var t=n();"function"==typeof(null==t?void 0:t.then)?(O.current=!0,t.then((function(){e(v),O.current=!1}))):e(v)}else e(v)}P===v||O.current||n(v?i:s)}),[O,P,v,i,s,d,p]),t.useEffect((function(){function e(e){"Escape"===e.key&&l&&l(e)}return P&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[P,l]),t.useEffect((function(){return P&&!f&&(h.current=document.body.style.overflow,document.body.style.overflow="hidden"),function(){f||(document.body.style.overflow=h.current||"")}}),[P,f]),n=r?u.default.createElement(r,b,o):o,u.default.createElement(w,null,(function(e){var t=e.modalNode,r=e.BackgroundComponent;return t&&r&&P?c.default.createPortal(u.default.createElement(r,k({},m,{onClick:T,ref:g}),n),t):null}))}P.styled=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];var r=n?a.default.div.withConfig({displayName:"Modal__wrap"}).apply(void 0,n):a.default.div.withConfig({displayName:"Modal__wrap"})();return function(e){return u.default.createElement(P,k({WrapperComponent:r},e))}},P.defaultProps={backgroundProps:{}},P.propTypes={WrapperComponent:g.oneOfType([g.element,g.object]),onBackgroundClick:g.func,onEscapeKeydown:g.func,allowScroll:g.bool,beforeOpen:g.func,afterOpen:g.func,beforeClose:g.func,afterClose:g.func,backgroundProps:g.object,isOpen:g.bool},e.BaseModalBackground=l,e.ModalProvider=C,e.default=P,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "styled-react-modal",
-  "version": "2.1.0",
+  "version": "3.0.0-alpha",
   "description": "A React modal built with styled-components.",
   "main": "build/index.js",
+  "module": "build/index.mjs",
   "scripts": {
     "test": "jest --coverage --verbose",
-    "lint": "prettier src/ tests/ examples/",
-    "start": "webpack --watch",
-    "build": "webpack"
+    "lint": "prettier src/ tests/",
+    "build": "rollup -c rollup.config.js"
   },
@@ -40,4 +40,8 @@ "repository": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-runtime": "^7.16.5",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^3.0.1",
     "@testing-library/dom": "^7.2.0",
@@ -48,3 +52,2 @@ "@testing-library/jest-dom": "^5.3.0",
     "babel-jest": "^25.2.6",
-    "babel-loader": "^8.1.0",
     "babel-plugin-styled-components": "^1.10.7",
@@ -62,5 +65,6 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "react-test-renderer": "^16.13.1",
-    "styled-components": "^5.0.1",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11"
+    "rollup": "^2.61.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "styled-components": "^5.0.1"
   },
@@ -67,0 +71,0 @@ "resolutions": {

src/index.jsx

@@ -1,6 +0,5 @@
-import { BaseModalBackground } from './baseStyles'
-import ModalProvider from './ModalProvider'
-import Modal from './Modal'
+import { BaseModalBackground } from "./baseStyles";
+import ModalProvider from "./ModalProvider";
+import Modal from "./Modal";
 
-export { ModalProvider, BaseModalBackground }
-export default Modal
+export { Modal as default, ModalProvider, BaseModalBackground };

src/Modal.jsx

@@ -7,2 +7,6 @@ import React, { useState, useRef, useEffect } from "react";
 
+function callIfDefined(fun, ...args) {
+  fun && fun(...args);
+}
+
 function Modal({
@@ -24,21 +28,33 @@ WrapperComponent,
   const prevBodyOverflowStyle = useRef(null);
-  const isMounted = useRef(false);
+  const isTransitioning = useRef(false);
 
   const [isOpen, setIsOpen] = useState(false);
 
-  // Handle changing isOpen state and *before* isOpen change callbacks
+  // Handle opening and closing
   useEffect(() => {
+    function handleIsOpenChange(value) {
+      setIsOpen(value);
+      value ? callIfDefined(afterOpen) : callIfDefined(afterClose);
+    }
+
     function handleChange(callback) {
       if (callback) {
-        try {
-          callback().then(() => setIsOpen(isOpenProp));
-        } catch (e) {
-          setIsOpen(isOpenProp);
+        const maybePromise = callback();
+        if (typeof maybePromise?.then === "function") {
+          isTransitioning.current = true;
+
+          maybePromise.then(() => {
+            handleIsOpenChange(isOpenProp);
+
+            isTransitioning.current = false;
+          });
+        } else {
+          handleIsOpenChange(isOpenProp);
         }
       } else {
-        setIsOpen(isOpenProp);
+        handleIsOpenChange(isOpenProp);
       }
     }
 
-    if (isOpen !== isOpenProp) {
+    if (isOpen !== isOpenProp && !isTransitioning.current) {
       if (isOpenProp) {
@@ -50,15 +66,12 @@ handleChange(beforeOpen);
     }
-  }, [isMounted, isOpen, setIsOpen, isOpenProp, beforeOpen, beforeClose]);
+  }, [
+    isTransitioning,
+    isOpen,
+    isOpenProp,
+    beforeOpen,
+    beforeClose,
+    afterClose,
+    afterOpen
+  ]);
 
-  // Handle *after* isOpen change callbacks
-  useEffect(() => {
-    if (isOpen) {
-      afterOpen && afterOpen();
-    } else {
-      // The isMounted bit prevents the afterClose from getting called
-      // on the initial mount
-      isMounted.current && afterClose && afterClose();
-    }
-  }, [isMounted, isOpen, afterOpen, afterClose]);
-
   // Handle Escape keydown
@@ -95,7 +108,2 @@ useEffect(() => {
 
-  // Keep track of whether the modal is mounted to prevent misfiring callbacks
-  useEffect(() => {
-    isMounted.current = true;
-  }, [isMounted]);
-
   function handleBackgroundClick(e) {
@@ -102,0 +110,0 @@ if (node.current === e.target) {

tests/Modal.test.jsx

 import "@testing-library/jest-dom/extend-expect";
 
 import React, { useState } from "react";
+import { act } from "react-dom/test-utils";
 import styled from "styled-components";
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 import Modal, { ModalProvider } from "../src";
@@ -82,2 +83,19 @@
 
+  it("calls beforeOpen() before it opens and waits to call afterOpen() if it returns a promise", async () => {
+    const spy = jest.fn(
+      () => new Promise((resolve) => setTimeout(act(resolve), 100))
+    );
+    const afterOpenSpy = jest.fn();
+    const sleeper = jest.fn();
+    const { getByTestId } = renderWithProvider({
+      beforeOpen: spy,
+      afterOpen: afterOpenSpy,
+      beforeClose: sleeper
+    });
+    fireEvent.click(getByTestId("button"));
+    expect(spy.mock.calls.length).toBe(1);
+    await waitFor(() => expect(afterOpenSpy.mock.calls.length).toBe(1));
+    expect(sleeper).not.toHaveBeenCalled();
+  });
+
   it("calls afterOpen() after it opens", () => {
@@ -108,2 +126,20 @@ const spy = jest.fn();
 
+  it("calls beforeClose() before it closes and waits to call afterClose() if it returns a promise", async () => {
+    const spy = jest.fn(
+      () => new Promise((resolve) => setTimeout(act(resolve), 100))
+    );
+    const afterCloseSpy = jest.fn();
+    const sleeper = jest.fn();
+    const { getByTestId } = renderWithProvider({
+      isOpen: true,
+      beforeClose: spy,
+      afterClose: afterCloseSpy,
+      beforeOpen: sleeper
+    });
+    fireEvent.click(getByTestId("button"));
+    expect(spy.mock.calls.length).toBe(1);
+    await waitFor(() => expect(afterCloseSpy.mock.calls.length).toBe(1));
+    expect(sleeper.mock.calls.length).toBe(1);
+  });
+
   it("calls afterClose() after it closes", () => {
@@ -124,3 +160,3 @@ const spy = jest.fn();
     const Background = styled.div`
-      background: ${props => props.color || "green"};
+      background: ${(props) => props.color || "green"};
     `;
@@ -127,0 +163,0 @@

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

Total package byte prevSize

35149

increased by13.75%

Lines of code

464

increased by10.74%

Worsened metrics

Dev dependency count

28

increased by16.67%

Number of low quality alerts

2

increased by100%

No dependency changes