styled-react-modal - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=4)}([function(e,n){e.exports=require("styled-components")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.BaseModalBackground=void 0;var o,r,i,l=(o=["\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 30;\n  background-color: rgba(0, 0, 0, 0.5);\n  align-items: center;\n  justify-content: center\n"],r=["\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 30;\n  background-color: rgba(0, 0, 0, 0.5);\n  align-items: center;\n  justify-content: center\n"],Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(r)}}))),u=t(0),a=(i=u)&&i.__esModule?i:{default:i};n.BaseModalBackground=a.default.div(l)},function(e,n){e.exports=require("react-dom")},function(e,n){e.exports=require("react")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.BaseModalBackground=n.ModalProvider=void 0;var o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},r=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),i=h(["",""],["",""]),l=h([""],[""]),u=t(3),a=f(u),s=f(t(2)),c=t(0),d=f(c),p=t(1);function f(e){return e&&e.__esModule?e:{default:e}}function h(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function y(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function v(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n}function O(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}var b=null,k=p.BaseModalBackground,g=function(e){function n(){return y(this,n),v(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return O(n,u.Component),r(n,[{key:"componentDidMount",value:function(){this.props.backgroundComponent&&(k=this.props.backgroundComponent)}},{key:"render",value:function(){return a.default.createElement(a.default.Fragment,null,this.props.children,a.default.createElement("div",{ref:function(e){b=e}}))}}]),n}(),m=function(e){function n(e){y(this,n);var t=v(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={isOpen:!1},t.node=null,t.InnerStyles=d.default.div(i,e.styles)||d.default.div(l),t.prevBodyOverflow=null,t.onKeydown=t.onKeydown.bind(t),t.onBackgroundClick=t.onBackgroundClick.bind(t),t.handleOpen=t.handleOpen.bind(t),t.handleClose=t.handleClose.bind(t),t}return O(n,u.Component),r(n,[{key:"componentDidUpdate",value:function(e,n){n.isOpen!==this.state.isOpen&&(this.state.isOpen?this.state.isOpen&&this.handleOpen():this.handleClose())}},{key:"componentWillUnmount",value:function(){this.state.isOpen&&this.handleClose()}},{key:"handleClose",value:function(){b&&this.node&&b.contains(this.node)&&b.removeChild(this.node),document.removeEventListener("keydown",this.onKeydown),this.props.allowScroll||(document.body.style.overflow=this.prevBodyOverflow||"")}},{key:"handleOpen",value:function(){document.addEventListener("keydown",this.onKeydown),this.props.allowScroll||(this.prevBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden")}},{key:"onKeydown",value:function(e){"Escape"===e.key&&this.props.onEscapeKeydown&&this.props.onEscapeKeydown(e)}},{key:"onBackgroundClick",value:function(e){this.node===e.target&&this.props.onBackgroundClick&&this.props.onBackgroundClick(e)}},{key:"render",value:function(){var e=this,n=this.props,t=n.isOpen,o=n.children,r=function(e,n){var t={};for(var o in e)n.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}(n,["isOpen","children"]);return t?s.default.createPortal(a.default.createElement(k,{onClick:this.onBackgroundClick,innerRef:function(n){e.node=n}},a.default.createElement(this.InnerStyles,r,o)),b):null}}],[{key:"styled",value:function(){var e=c.css.apply(void 0,arguments);return function(t){function i(){return y(this,i),v(this,(i.__proto__||Object.getPrototypeOf(i)).apply(this,arguments))}return O(i,u.Component),r(i,[{key:"render",value:function(){return a.default.createElement(n,o({styles:e},this.props))}}]),i}()}},{key:"getDerivedStateFromProps",value:function(e){return e.isOpen?e.isOpen?{isOpen:!0}:null:{isOpen:!1}}}]),n}();n.default=m,n.ModalProvider=g,n.BaseModalBackground=p.BaseModalBackground}]);
+module.exports=function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=4)}([function(e,n){e.exports=require("styled-components")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.BaseModalBackground=void 0;var o,r,i,u=(o=["\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 30;\n  background-color: rgba(0, 0, 0, 0.5);\n  align-items: center;\n  justify-content: center\n"],r=["\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 30;\n  background-color: rgba(0, 0, 0, 0.5);\n  align-items: center;\n  justify-content: center\n"],Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(r)}}))),l=t(0),a=(i=l)&&i.__esModule?i:{default:i};n.BaseModalBackground=a.default.div(u)},function(e,n){e.exports=require("react-dom")},function(e,n){e.exports=require("react")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.BaseModalBackground=n.ModalProvider=void 0;var o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},r=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),i=y(["",""],["",""]),u=y([""],[""]),l=t(3),a=f(l),c=f(t(2)),s=t(0),d=f(s),p=t(1);function f(e){return e&&e.__esModule?e:{default:e}}function y(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function h(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function v(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n}function b(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}var O=null,k=p.BaseModalBackground,g=function(e){function n(){return h(this,n),v(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return b(n,l.Component),r(n,[{key:"componentDidMount",value:function(){this.props.backgroundComponent&&(k=this.props.backgroundComponent)}},{key:"render",value:function(){return a.default.createElement(a.default.Fragment,null,this.props.children,a.default.createElement("div",{ref:function(e){O=e}}))}}]),n}(),m=function(e){function n(e){h(this,n);var t=v(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={isOpen:!1},t.node=null,t.InnerStyles=d.default.div(i,e.styles)||d.default.div(u),t.prevBodyOverflow=null,t.onKeydown=t.onKeydown.bind(t),t.onBackgroundClick=t.onBackgroundClick.bind(t),t.cleanUp=t.cleanUp.bind(t),t}return b(n,l.Component),r(n,[{key:"componentDidUpdate",value:function(e,n){n.isOpen!==this.state.isOpen&&(this.state.isOpen?this.state.isOpen&&(document.addEventListener("keydown",this.onKeydown),this.props.allowScroll||(this.prevBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden")):(O&&this.node&&O.removeChild(this.node),this.cleanUp()))}},{key:"componentWillUnmount",value:function(){this.state.isOpen&&this.cleanUp()}},{key:"cleanUp",value:function(){document.removeEventListener("keydown",this.onKeydown),this.props.allowScroll||(document.body.style.overflow=this.prevBodyOverflow||"")}},{key:"onKeydown",value:function(e){"Escape"===e.key&&this.props.onEscapeKeydown&&this.props.onEscapeKeydown(e)}},{key:"onBackgroundClick",value:function(e){this.node===e.target&&this.props.onBackgroundClick&&this.props.onBackgroundClick(e)}},{key:"render",value:function(){var e=this,n=this.props,t=n.isOpen,o=n.children,r=function(e,n){var t={};for(var o in e)n.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}(n,["isOpen","children"]);return t?c.default.createPortal(a.default.createElement(k,{onClick:this.onBackgroundClick,innerRef:function(n){e.node=n}},a.default.createElement(this.InnerStyles,r,o)),O):null}}],[{key:"styled",value:function(){var e=s.css.apply(void 0,arguments);return function(t){function i(){return h(this,i),v(this,(i.__proto__||Object.getPrototypeOf(i)).apply(this,arguments))}return b(i,l.Component),r(i,[{key:"render",value:function(){return a.default.createElement(n,o({styles:e},this.props))}}]),i}()}},{key:"getDerivedStateFromProps",value:function(e){return e.isOpen?e.isOpen?{isOpen:!0}:null:{isOpen:!1}}}]),n}();n.default=m,n.ModalProvider=g,n.BaseModalBackground=p.BaseModalBackground}]);

package.json

 {
   "name": "styled-react-modal",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A React modal built with styled-components.",
@@ -5,0 +5,0 @@ "main": "build/index.js",

src/index.jsx

@@ -38,4 +38,3 @@ import React, { Component } from 'react'
     this.onBackgroundClick = this.onBackgroundClick.bind(this)
-    this.handleOpen = this.handleOpen.bind(this)
-    this.handleClose = this.handleClose.bind(this)
+    this.cleanUp = this.cleanUp.bind(this)
   }
@@ -65,5 +64,11 @@
       if (!this.state.isOpen) {
-        this.handleClose()
+        modalNode && this.node && modalNode.removeChild(this.node)
+        this.cleanUp()
       } else if (this.state.isOpen) {
-        this.handleOpen()
+        document.addEventListener('keydown', this.onKeydown)
+
+        if (!this.props.allowScroll) {
+          this.prevBodyOverflow = document.body.style.overflow
+          document.body.style.overflow = 'hidden'
+        }
       }
@@ -74,10 +79,6 @@ }
   componentWillUnmount () {
-    if (this.state.isOpen) this.handleClose()
+    if (this.state.isOpen) this.cleanUp()
   }
 
-  handleClose () {
-    if (modalNode && this.node && modalNode.contains(this.node)) {
-      modalNode.removeChild(this.node)
-    }
-
+  cleanUp () {
     document.removeEventListener('keydown', this.onKeydown)
@@ -90,11 +91,2 @@
 
-  handleOpen () {
-    document.addEventListener('keydown', this.onKeydown)
-
-    if (!this.props.allowScroll) {
-      this.prevBodyOverflow = document.body.style.overflow
-      document.body.style.overflow = 'hidden'
-    }
-  }
-
   onKeydown (e) {
@@ -101,0 +93,0 @@ if (e.key === 'Escape') {

No alert changes

Worsened metrics

Total package byte prevSize

16582

decreased by-1.61%

Lines of code

195

decreased by-2.99%

No dependency changes