styled-react-modal
Advanced tools
Comparing version
@@ -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})})); |
{ | ||
"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": { |
@@ -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 }; |
@@ -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) { |
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 @@ |
Sorry, the diff of this file is not supported yet
Explicitly Unlicensed Item
License(Experimental) Something was found which is explicitly marked as unlicensed.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Explicitly Unlicensed Item
License(Experimental) Something was found which is explicitly marked as unlicensed.
Found 1 instance in 1 package
35149
13.75%464
10.74%28
16.67%3
200%