styled-react-modal - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){e.exports=require("styled-components")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModalBackground=void 0;var o,r,i,a=(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=n(0),s=(i=u)&&i.__esModule?i:{default:i};t.BaseModalBackground=s.default.div(a)},function(e,t){e.exports=require("react-dom")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModalBackground=t.ModalProvider=void 0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=h(["",""],["",""]),a=h([""],[""]),u=n(3),s=f(u),l=f(n(2)),c=n(0),p=f(c),d=n(1);function f(e){return e&&e.__esModule?e:{default:e}}function h(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function y(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function b(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var O=s.default.createContext(null),m=O.Provider,k=O.Consumer,g=function(e){function t(e){v(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={modalNode:null,BackgroundComponent:d.BaseModalBackground},n.setModalNode=n.setModalNode.bind(n),n}return b(t,u.Component),r(t,[{key:"setModalNode",value:function(e){this.setState({modalNode:e})}},{key:"render",value:function(){return s.default.createElement(m,{value:{modalNode:this.state.modalNode,BackgroundComponent:this.state.BackgroundComponent}},this.props.children,s.default.createElement("div",{ref:this.setModalNode}))}}],[{key:"getDerivedStateFromProps",value:function(e,t){return e.backgroundComponent!==t.BackgroundComponent?{BackgroundComponent:e.backgroundComponent}:null}}]),t}(),w=function(e){function t(e){v(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={isOpen:!1},n.node=null,n.prevBodyOverflow=null,n.onKeydown=n.onKeydown.bind(n),n.onBackgroundClick=n.onBackgroundClick.bind(n),n.cleanUp=n.cleanUp.bind(n),n}return b(t,u.Component),r(t,[{key:"componentDidUpdate",value:function(e,t){t.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"),this.props.afterOpen&&this.props.afterOpen()):(this.cleanUp(),this.props.afterClose&&this.props.afterClose())),e.isOpen!==this.props.isOpen&&(this.props.isOpen?this.handleChange("beforeOpen",{isOpen:!0}):this.handleChange("beforeClose",{isOpen:!1}))}},{key:"handleChange",value:function(e,t){var n=this;if(this.props[e])try{this.props[e]().then(function(){return n.setState(t)})}catch(e){this.setState(t)}else this.setState(t)}},{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,t=this.props,n=t.WrapperComponent,o=t.children,r=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}(t,["WrapperComponent","children"]),i=this.state.isOpen;return s.default.createElement(k,null,function(t){var a=t.modalNode,u=t.BackgroundComponent;if(a&&u&&i)return l.default.createPortal(s.default.createElement(u,{onClick:e.onBackgroundClick,innerRef:function(t){e.node=t}},s.default.createElement(n,r,o)),a)})}}],[{key:"styled",value:function(){var e=p.default.div(i,c.css.apply(void 0,arguments))||p.default.div(a);return function(n){function i(){return v(this,i),y(this,(i.__proto__||Object.getPrototypeOf(i)).apply(this,arguments))}return b(i,u.Component),r(i,[{key:"render",value:function(){return s.default.createElement(t,o({WrapperComponent:e},this.props))}}]),i}()}}]),t}();t.default=w,t.ModalProvider=g,t.BaseModalBackground=d.BaseModalBackground}]);
+module.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){e.exports=require("styled-components")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModalBackground=void 0;var o,r,i,a=(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=n(0),s=(i=u)&&i.__esModule?i:{default:i};t.BaseModalBackground=s.default.div(a)},function(e,t){e.exports=require("react-dom")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModalBackground=t.ModalProvider=void 0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=h(["",""],["",""]),a=h([""],[""]),u=n(3),s=f(u),l=f(n(2)),c=n(0),p=f(c),d=n(1);function f(e){return e&&e.__esModule?e:{default:e}}function h(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function y(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function b(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var m=s.default.createContext(null),O=m.Provider,k=m.Consumer,g=function(e){function t(e){v(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={modalNode:null,BackgroundComponent:d.BaseModalBackground},n.setModalNode=n.setModalNode.bind(n),n}return b(t,u.Component),r(t,[{key:"setModalNode",value:function(e){this.setState({modalNode:e})}},{key:"render",value:function(){return s.default.createElement(O,{value:{modalNode:this.state.modalNode,BackgroundComponent:this.state.BackgroundComponent}},this.props.children,s.default.createElement("div",{ref:this.setModalNode}))}}],[{key:"getDerivedStateFromProps",value:function(e,t){return e.backgroundComponent!==t.BackgroundComponent&&e.backgroundComponent?{BackgroundComponent:e.backgroundComponent}:null}}]),t}(),w=function(e){function t(e){v(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={isOpen:!1},n.node=null,n.prevBodyOverflow=null,n.onKeydown=n.onKeydown.bind(n),n.onBackgroundClick=n.onBackgroundClick.bind(n),n.cleanUp=n.cleanUp.bind(n),n}return b(t,u.Component),r(t,[{key:"componentDidUpdate",value:function(e,t){t.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"),this.props.afterOpen&&this.props.afterOpen()):(this.cleanUp(),this.props.afterClose&&this.props.afterClose())),e.isOpen!==this.props.isOpen&&(this.props.isOpen?this.handleChange("beforeOpen",{isOpen:!0}):this.handleChange("beforeClose",{isOpen:!1}))}},{key:"handleChange",value:function(e,t){var n=this;if(this.props[e])try{this.props[e]().then(function(){return n.setState(t)})}catch(e){this.setState(t)}else this.setState(t)}},{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,t=this.props,n=t.WrapperComponent,o=t.children,r=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}(t,["WrapperComponent","children"]),i=this.state.isOpen;return s.default.createElement(k,null,function(t){var a=t.modalNode,u=t.BackgroundComponent;if(a&&u&&i)return l.default.createPortal(s.default.createElement(u,{onClick:e.onBackgroundClick,innerRef:function(t){e.node=t}},s.default.createElement(n,r,o)),a)})}}],[{key:"styled",value:function(){var e=p.default.div(i,c.css.apply(void 0,arguments))||p.default.div(a);return function(n){function i(){return v(this,i),y(this,(i.__proto__||Object.getPrototypeOf(i)).apply(this,arguments))}return b(i,u.Component),r(i,[{key:"render",value:function(){return s.default.createElement(t,o({WrapperComponent:e},this.props))}}]),i}()}}]),t}();t.default=w,t.ModalProvider=g,t.BaseModalBackground=d.BaseModalBackground}]);

package.json

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

src/index.jsx

@@ -21,3 +21,4 @@ import React, { Component } from 'react'
   static getDerivedStateFromProps (nextProps, prevState) {
-    if (nextProps.backgroundComponent !== prevState.BackgroundComponent) {
+    if (nextProps.backgroundComponent !== prevState.BackgroundComponent &&
+        nextProps.backgroundComponent) {
       return { BackgroundComponent: nextProps.backgroundComponent }
@@ -24,0 +25,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

19149

increased by0.34%

Lines of code

228

increased by0.44%

No dependency changes