styled-react-modal - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

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,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}]);
+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),c=(i=l)&&i.__esModule?i:{default:i};n.BaseModalBackground=c.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),c=f(l),a=f(t(2)),s=t(0),p=f(s),d=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=d.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 c.default.createElement(c.default.Fragment,null,this.props.children,c.default.createElement("div",{ref:function(e){O=e}}))}}]),n}(),w=function(e){function n(e){h(this,n);var t=v(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.node=null,t.InnerStyles=p.default.div(i,e.styles)||p.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){e.isOpen!==this.props.isOpen&&(this.props.isOpen?this.props.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.props.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?a.default.createPortal(c.default.createElement(k,{onClick:this.onBackgroundClick,innerRef:function(n){e.node=n}},c.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 c.default.createElement(n,o({styles:e},this.props))}}]),i}()}}]),n}();n.default=w,n.ModalProvider=g,n.BaseModalBackground=d.BaseModalBackground}]);

package.json

 {
   "name": "styled-react-modal",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A React modal built with styled-components.",
@@ -38,5 +38,5 @@ "main": "build/index.js",
     "babel-preset-react": "^6.24.1",
-    "webpack": "^4.4.1",
+    "webpack": "^4.5.0",
     "webpack-cli": "^2.0.13"
   }
 }

src/index.jsx

@@ -30,4 +30,2 @@ import React, { Component } from 'react'
 
-    this.state = { isOpen: false }
-
     this.node = null
@@ -51,18 +49,8 @@ this.InnerStyles = styled.div`${props.styles}` || styled.div``
 
-  static getDerivedStateFromProps (nextProps) {
-    if (!nextProps.isOpen) {
-      return { isOpen: false }
-    } else if (nextProps.isOpen) {
-      return { isOpen: true }
-    }
-
-    return null
-  }
-
   componentDidUpdate (prevProps, prevState) {
-    if (prevState.isOpen !== this.state.isOpen) {
-      if (!this.state.isOpen) {
+    if (prevProps.isOpen !== this.props.isOpen) {
+      if (!this.props.isOpen) {
         modalNode && this.node && modalNode.removeChild(this.node)
         this.cleanUp()
-      } else if (this.state.isOpen) {
+      } else if (this.props.isOpen) {
         document.addEventListener('keydown', this.onKeydown)
@@ -79,3 +67,3 @@
   componentWillUnmount () {
-    if (this.state.isOpen) this.cleanUp()
+    if (this.props.isOpen) this.cleanUp()
   }
@@ -82,0 +70,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

16219

decreased by-2.19%

Lines of code

186

decreased by-4.62%

No dependency changes