react-portal - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

examples/index.js

@@ -5,2 +5,3 @@ var React = require('react');
 var LoadingBar = require('./loadingbar');
+var AbsolutePosition = require('./absoluteposition');
 
@@ -24,2 +25,16 @@ // Main React app component
     var button2 = <button>Another portal</button>;
+    var button3 = (
+      <button onClick={(function(e) {
+          var bodyRect = document.body.getBoundingClientRect();
+          var targetRect = e.target.getBoundingClientRect();
+          this.setState({
+            isOpened: true,
+            top: targetRect.top - bodyRect.top,
+            left:  targetRect.left - bodyRect.left,
+            width: targetRect.width
+          });
+        }).bind(this)}>
+        {'Open portal on top of button'}
+      </button>
+    );
 
@@ -55,2 +70,15 @@ return (
 
+        <div className="absolutePosition">
+          {button3}
+          <Portal
+            closeOnOutsideClick={true}
+            isOpened={this.state.isOpened}
+            onClose={(function() {
+              this.setState({isOpened: false});
+              this.onClose();
+            }).bind(this)}>
+            <AbsolutePosition top={this.state.top} left={this.state.left} width={this.state.width} />
+          </Portal>
+        </div>
+
         <button onClick={this.changeValue}>
@@ -57,0 +85,0 @@ Change randomly value: {this.state.someValue}

lib/portal.js

@@ -25,2 +25,3 @@ import React, {findDOMNode} from 'react';
       document.addEventListener('mousedown', this.handleOutsideMouseClick);
+      document.addEventListener('touchstart', this.handleOutsideMouseClick);
     }
@@ -31,3 +32,3 @@ }
     if (this.props.isOpened) {
-      this.openPortal();
+      this.openPortal(this.props);
     }
@@ -43,3 +44,3 @@ }
         } else {
-          this.openPortal();
+          this.openPortal(newProps);
         }
@@ -65,2 +66,3 @@ }
       document.removeEventListener('mousedown', this.handleOutsideMouseClick);
+      document.removeEventListener('touchstart', this.handleOutsideMouseClick);
     }
@@ -79,7 +81,7 @@
       this.node = document.createElement('div');
-      if (this.props.className) {
-        this.node.className = this.props.className;
+      if (props.className) {
+        this.node.className = props.className;
       }
-      if (this.props.style) {
-        CSSPropertyOperations.setValueForStyles(this.node, this.props.style);
+      if (props.style) {
+        CSSPropertyOperations.setValueForStyles(this.node, props.style);
       }
@@ -93,3 +95,3 @@ document.body.appendChild(this.node);
     if (this.props.openByClickOn) {
-      return <div className="openByClickOn" onClick={this.openPortal}>{this.props.openByClickOn}</div>;
+      return <div className="openByClickOn" onClick={this.openPortal.bind(this, this.props)}>{this.props.openByClickOn}</div>;
     } else {
@@ -100,3 +102,3 @@ return null;
 
-  openPortal(e) {
+  openPortal(props, e) {
     if (e) {
@@ -107,3 +109,3 @@ e.preventDefault();
     this.setState({active: true});
-    this.renderPortal(this.props);
+    this.renderPortal(props);
   }
@@ -142,2 +144,4 @@
 Portal.propTypes = {
+  className: React.PropTypes.string,
+  style: React.PropTypes.object,
   children: React.PropTypes.element.isRequired,
@@ -144,0 +148,0 @@ openByClickOn: React.PropTypes.element,

package.json

@@ -6,3 +6,3 @@ {
   "author": "Vojtech Miksu",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
@@ -9,0 +9,0 @@ "repository": {

portal.js

@@ -54,2 +54,3 @@ 'use strict';
         document.addEventListener('mousedown', this.handleOutsideMouseClick);
+        document.addEventListener('touchstart', this.handleOutsideMouseClick);
       }
@@ -61,3 +62,3 @@ }
       if (this.props.isOpened) {
-        this.openPortal();
+        this.openPortal(this.props);
       }
@@ -74,3 +75,3 @@ }
           } else {
-            this.openPortal();
+            this.openPortal(newProps);
           }
@@ -97,2 +98,3 @@ }
         document.removeEventListener('mousedown', this.handleOutsideMouseClick);
+        document.removeEventListener('touchstart', this.handleOutsideMouseClick);
       }
@@ -112,7 +114,7 @@
         this.node = document.createElement('div');
-        if (this.props.className) {
-          this.node.className = this.props.className;
+        if (props.className) {
+          this.node.className = props.className;
         }
-        if (this.props.style) {
-          _CSSPropertyOperations2['default'].setValueForStyles(this.node, this.props.style);
+        if (props.style) {
+          _CSSPropertyOperations2['default'].setValueForStyles(this.node, props.style);
         }
@@ -129,3 +131,3 @@ document.body.appendChild(this.node);
           'div',
-          { className: 'openByClickOn', onClick: this.openPortal },
+          { className: 'openByClickOn', onClick: this.openPortal.bind(this, this.props) },
           this.props.openByClickOn
@@ -139,3 +141,3 @@ );
     key: 'openPortal',
-    value: function openPortal(e) {
+    value: function openPortal(props, e) {
       if (e) {
@@ -146,3 +148,3 @@ e.preventDefault();
       this.setState({ active: true });
-      this.renderPortal(this.props);
+      this.renderPortal(props);
     }
@@ -192,2 +194,4 @@ }, {
 Portal.propTypes = {
+  className: _React$findDOMNode2['default'].PropTypes.string,
+  style: _React$findDOMNode2['default'].PropTypes.object,
   children: _React$findDOMNode2['default'].PropTypes.element.isRequired,
@@ -194,0 +198,0 @@ openByClickOn: _React$findDOMNode2['default'].PropTypes.element,

README.md

@@ -137,2 +137,2 @@ React-portal
 
-Vojtech Miksu 2015, [miksu.cz](https://miksu.cz), [@vmiksu](https://twitter.com/vmiksu)
+Vojtech Miksu 2015, [miksu.cz](https://miksu.cz), [@vmiksu](https://twitter.com/vmiksu)

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

1719332

increased by0.63%

Number of package files

15

increased by7.14%

Lines of code

22646

increased by0.76%

Number of lines in readme file

138

increased by0.73%

No dependency changes