styled-react-modal - npm Package Compare versions

Comparing version 0.2.2 to 1.0.0

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),d=f(c),p=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:p.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,a=void 0;return a=n?s.default.createElement(n,r,o):o,s.default.createElement(k,null,function(t){var n=t.modalNode,o=t.BackgroundComponent;if(n&&o&&i)return l.default.createPortal(s.default.createElement(o,{onClick:e.onBackgroundClick,innerRef:function(t){e.node=t}},a),n)})}}],[{key:"styled",value:function(){var e=d.default.div(i,c.css.apply(void 0,arguments))||d.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=p.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,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},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=1)}([function(e,t){e.exports=require("styled-components")},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(2),l=f(u),s=f(n(3)),c=n(0),d=f(c),p=n(4);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 y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function v(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=l.default.createContext(null),O=m.Provider,g=m.Consumer,k=function(e){function t(e){y(this,t);var n=v(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={modalNode:null,BackgroundComponent:p.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 l.default.createElement(O,{value:{modalNode:this.state.modalNode,BackgroundComponent:this.state.BackgroundComponent}},this.props.children,l.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){y(this,t);var n=v(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,a=void 0;return a=n?l.default.createElement(n,r,o):o,l.default.createElement(g,null,function(t){var n=t.modalNode,o=t.BackgroundComponent;return n&&o&&i?s.default.createPortal(l.default.createElement(o,{onClick:e.onBackgroundClick,innerRef:function(t){e.node=t}},a),n):null})}}],[{key:"styled",value:function(){var e=(0,d.default)("div")(i,c.css.apply(void 0,arguments))||(0,d.default)("div")(a);return function(n){function i(){return y(this,i),v(this,(i.__proto__||Object.getPrototypeOf(i)).apply(this,arguments))}return b(i,u.Component),r(i,[{key:"render",value:function(){return l.default.createElement(t,o({WrapperComponent:e},this.props))}}]),i}()}}]),t}();t.default=w,t.ModalProvider=k,t.BaseModalBackground=p.BaseModalBackground},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("react-dom")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BaseModalBackground=void 0;var o=function(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\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"],["\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=function(e){return e&&e.__esModule?e:{default:e}}(n(0));t.BaseModalBackground=(0,r.default)("div")(o)}]);

package.json

 {
   "name": "styled-react-modal",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "description": "A React modal built with styled-components.",
@@ -33,8 +33,9 @@ "main": "build/index.js",
   "peerDependencies": {
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "styled-components": "^3.2.6"
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "styled-components": "^3.4.5"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-jest": "^23.4.2",
     "babel-loader": "^7.1.4",
@@ -45,8 +46,14 @@ "babel-plugin-styled-components": "^1.5.1",
     "babel-preset-react": "^6.24.1",
-    "jest": "^23.4.2",
-    "react-test-renderer": "^16.4.1",
+    "enzyme": "^3.5.0",
+    "enzyme-adapter-react-16": "^1.3.1",
+    "jest": "^23.5.0",
+    "jest-enzyme": "^6.0.4",
+    "react-test-renderer": "^16.4.2",
     "standard": "^11.0.1",
     "webpack": "^4.5.0",
     "webpack-cli": "^2.0.13"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "<rootDir>tests/setupTests.js"
   }
 }

readme.md

 # Styled React Modal
 
-[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![npm version](https://img.shields.io/npm/v/styled-react-modal.svg)](https://www.npmjs.com/package/styled-react-modal) [![npm downloads](https://img.shields.io/npm/dm/styled-react-modal.svg)](https://www.npmjs.com/package/styled-react-modal)
+[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![npm version](https://img.shields.io/npm/v/styled-react-modal.svg)](https://www.npmjs.com/package/styled-react-modal) [![npm downloads](https://img.shields.io/npm/dm/styled-react-modal.svg)](https://www.npmjs.com/package/styled-react-modal) [![Build Status](https://travis-ci.com/AlexanderRichey/styled-react-modal.svg?branch=master)](https://travis-ci.com/AlexanderRichey/styled-react-modal)
 
@@ -85,3 +85,3 @@ Styled React Modal is built with styled-components. It uses the latest React 16.x features and exposes a familiar, easy to use API. It supports `beforeOpen()`, `afterOpen()`, and other lifecycle hooks so that animations can be handled easily. Unlike several other modal implementations in React, it does not pollute the DOM with excessive nodes.
 
-# API
+## API
 
@@ -95,2 +95,4 @@ #### Top-Level Exports
 
+<hr>
+
 ### `<ModalProvider>`
@@ -97,0 +99,0 @@

src/index.jsx

@@ -161,2 +161,4 @@ import React, { Component } from 'react'
             ), modalNode)
+          } else {
+            return null
           }
@@ -163,0 +165,0 @@ }}

Fixed 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

24892

increased by27.61%

Number of package files

13

increased by44.44%

Lines of code

353

increased by48.95%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

215

increased by0.94%

Worsened metrics

Dev dependency count

15

increased by36.36%

No dependency changes