styled-react-modal - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

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),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}]);
+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,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=t(0),l=(i=u)&&i.__esModule?i:{default:i};n.BaseModalBackground=l.default.div(a)},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=v(["",""],["",""]),a=v([""],[""]),u=t(3),l=f(u),c=f(t(2)),d=t(0),s=f(d),p=t(1);function f(e){return e&&e.__esModule?e:{default:e}}function v(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 h(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 m=l.default.createContext(null),k=m.Provider,g=m.Consumer,O=function(e){function n(e){y(this,n);var t=h(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={modalNode:null,BackgroundComponent:p.BaseModalBackground},t.setModalNode=t.setModalNode.bind(t),t}return b(n,u.Component),r(n,[{key:"setModalNode",value:function(e){this.setState({modalNode:e})}},{key:"render",value:function(){return l.default.createElement(k,{value:{modalNode:this.state.modalNode,BackgroundComponent:this.state.BackgroundComponent}},this.props.children,l.default.createElement("div",{ref:this.setModalNode}))}}],[{key:"getDerivedStateFromProps",value:function(e,n){return e.backgroundComponent!==n.BackgroundComponent?{BackgroundComponent:e.backgroundComponent}:null}}]),n}(),w=function(e){function n(e){y(this,n);var t=h(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.node=null,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,u.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")):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.WrapperComponent,r=n.children,i=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","WrapperComponent","children"]);return l.default.createElement(g,null,function(n){var a=n.modalNode,u=n.BackgroundComponent;if(a&&u&&t)return c.default.createPortal(l.default.createElement(u,{onClick:e.onBackgroundClick,innerRef:function(n){e.node=n}},l.default.createElement(o,i,r)),a)})}}],[{key:"styled",value:function(){var e=s.default.div(i,d.css.apply(void 0,arguments))||s.default.div(a);return function(t){function i(){return y(this,i),h(this,(i.__proto__||Object.getPrototypeOf(i)).apply(this,arguments))}return b(i,u.Component),r(i,[{key:"render",value:function(){return l.default.createElement(n,o({WrapperComponent:e},this.props))}}]),i}()}}]),n}();n.default=w,n.ModalProvider=O,n.BaseModalBackground=p.BaseModalBackground}]);

package.json

 {
   "name": "styled-react-modal",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A React modal built with styled-components.",
@@ -35,2 +35,3 @@ "main": "build/index.js",
     "babel-loader": "^7.1.4",
+    "babel-plugin-styled-components": "^1.5.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -41,3 +42,8 @@ "babel-preset-env": "^1.6.1",
     "webpack-cli": "^2.0.13"
+  },
+  "dependencies": {
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "styled-components": "^3.2.6"
   }
 }

src/index.jsx

@@ -6,18 +6,37 @@ import React, { Component } from 'react'
 
-let modalNode = null
-let BackgroundComponent = BaseModalBackground
+const { Provider, Consumer } = React.createContext(null)
 
 class ModalProvider extends Component {
-  componentDidMount () {
-    if (this.props.backgroundComponent) {
-      BackgroundComponent = this.props.backgroundComponent
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      modalNode: null,
+      BackgroundComponent: BaseModalBackground
     }
+
+    this.setModalNode = this.setModalNode.bind(this)
   }
 
+  static getDerivedStateFromProps (nextProps, prevState) {
+    if (nextProps.backgroundComponent !== prevState.BackgroundComponent) {
+      return { BackgroundComponent: nextProps.backgroundComponent }
+    }
+
+    return null
+  }
+
+  setModalNode (node) {
+    this.setState({ modalNode: node })
+  }
+
   render () {
     return (
-      <React.Fragment>
+      <Provider value={{
+        modalNode: this.state.modalNode,
+        BackgroundComponent: this.state.BackgroundComponent
+      }}>
         {this.props.children}
-        <div ref={node => { modalNode = node }} />
-      </React.Fragment>
+        <div ref={this.setModalNode} />
+      </Provider>
     )
@@ -32,3 +51,2 @@ }
     this.node = null
-    this.InnerStyles = styled.div`${props.styles}` || styled.div``
     this.prevBodyOverflow = null
@@ -42,6 +60,6 @@
   static styled (...args) {
-    const styles = css(...args)
+    const styles = styled.div`${css(...args)}` || styled.div``
     return class __StyledModal extends Component {
       render () {
-        return <Modal styles={styles} {...this.props} />
+        return <Modal WrapperComponent={styles} {...this.props} />
       }
@@ -54,3 +72,2 @@ }
       if (!this.props.isOpen) {
-        modalNode && this.node && modalNode.removeChild(this.node)
         this.cleanUp()
@@ -93,17 +110,21 @@ } else if (this.props.isOpen) {
   render () {
-    const { isOpen, children, ...rest } = this.props
+    const { isOpen, WrapperComponent, children, ...rest } = this.props
 
-    if (isOpen) {
-      return ReactDOM.createPortal((
-        <BackgroundComponent
-          onClick={this.onBackgroundClick}
-          innerRef={node => { this.node = node }}>
-          <this.InnerStyles {...rest}>
-            {children}
-          </this.InnerStyles>
-        </BackgroundComponent>
-      ), modalNode)
-    } else {
-      return null
-    }
+    return (
+      <Consumer>
+        {({ modalNode, BackgroundComponent }) => {
+          if (modalNode && BackgroundComponent && isOpen) {
+            return ReactDOM.createPortal((
+              <BackgroundComponent
+                onClick={this.onBackgroundClick}
+                innerRef={node => { this.node = node }}>
+                <WrapperComponent {...rest}>
+                  {children}
+                </WrapperComponent>
+              </BackgroundComponent>
+            ), modalNode)
+          }
+        }}
+      </Consumer>
+    )
   }
@@ -110,0 +131,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17421

increased by7.41%

Lines of code

202

increased by8.6%

Worsened metrics

Dependency count

6

increased by100%

Dev dependency count

8

increased by14.29%

Dependency changes

• + Addedreact@^16.3.2

• + Addedreact-dom@^16.3.2

• + Addedstyled-components@^3.2.6