react-portal - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

examples/index.js

@@ -7,2 +7,3 @@ import React from 'react';
 import AbsolutePosition from './absoluteposition';
+import TWEEN from 'tween.js';
 
@@ -25,3 +26,29 @@ // Main React app component
 
+  onOpen(node) {
+    let tween = new TWEEN.Tween( { opacity: 0 } )
+      .to( { opacity: 1 }, 500 )
+      .easing( TWEEN.Easing.Cubic.In )
+      .onUpdate( function () {
+        node.style.opacity = this.opacity;
+      }).start();
+  }
+
+  beforeClose(node, removeFromDom) {
+    let tween = new TWEEN.Tween( { opacity: 1 } )
+      .to( { opacity: 0 }, 500 )
+      .easing( TWEEN.Easing.Cubic.In )
+      .onUpdate( function () {
+        node.style.opacity = this.opacity;
+      })
+      .onComplete(removeFromDom)
+      .start();
+  } 
+
   render() {
+    function animate(time) {
+      requestAnimationFrame(animate);
+      TWEEN.update(time);
+    }
+    requestAnimationFrame(animate);
+
     const button1 = <button>Open portal with pseudo modal</button>;
@@ -43,2 +70,3 @@ const button2 = <button>Another portal</button>;
     );
+    const button4 = <button>Animation Example</button>;
 
@@ -89,2 +117,14 @@ return (
 
+        <Portal 
+          closeOnEsc
+          closeOnOutsideClick 
+          onOpen={this.onOpen} 
+          beforeClose={this.beforeClose}
+          openByClickOn={button4}
+          style={{opacity: 0}}
+        > 
+          <div style={{border: '1px solid black', margin: 10, padding: 10}}>
+            <p>Trigger Animations, or any arbitrary function, before removing the portal from the DOM, animates out on both click outside and on esc press</p>
+          </div>
+        </Portal>
       </div>
@@ -91,0 +131,0 @@ );

lib/portal.js

@@ -101,12 +101,23 @@ import React from 'react';
     this.renderPortal(props);
+    if (this.props.onOpen) {
+      this.props.onOpen(this.node);
+    }
   }
 
   closePortal() {
-    if (this.node) {
-      ReactDOM.unmountComponentAtNode(this.node);
-      document.body.removeChild(this.node);
+    const resetPortalState = () => {
+      if (this.node) {
+        ReactDOM.unmountComponentAtNode(this.node);
+        document.body.removeChild(this.node);
+      }
+      this.portal = null;
+      this.node = null;
+      this.setState({active: false});
+    };
+
+    if (this.props.beforeClose) {
+      this.props.beforeClose(this.node, resetPortalState);
+    } else {
+      resetPortalState(this.node);
     }
-    this.portal = null;
-    this.node = null;
-    this.setState({active: false});
 
@@ -142,3 +153,5 @@ if (this.props.onClose) {
   isOpened: React.PropTypes.bool,
-  onClose: React.PropTypes.func
+  onOpen: React.PropTypes.func,
+  onClose: React.PropTypes.func,
+  beforeClose: React.PropTypes.func
 };
@@ -145,0 +158,0 @@

package.json

@@ -6,3 +6,3 @@ {
   "author": "Vojtech Miksu <[e-mail]>",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "MIT",
@@ -26,6 +26,2 @@ "repository": {
   ],
-  "engines": {
-    "node": "^4.0.0",
-    "npm": "^3.0.0"
-  },
   "peerDependencies": {
@@ -45,2 +41,3 @@ "react": "^0.14.0",
     "gulp-livereload": "^3.8.1",
+    "tween.js": "^16.3.1",
     "vinyl-source-stream": "^1.1.0",
@@ -47,0 +44,0 @@ "watchify": "^3.4.0"

README.md

@@ -96,5 +96,12 @@ React-portal
 
+#### onOpen: func(DOMNode) (optional)
+This callback is called when the portal is opened and rendered (useful for animating the DOMNode).
+
+#### beforeClose: func(DOMNode, removeFromDOM) (optional)
+This callback is called when the closing event is triggered but it prevents normal removal from the DOM. So, you can do some DOMNode animation first and then call removeFromDOM() that removes the portal from DOM.
+
 #### onClose: func (optional)
-This callback is called when the portal closes.
+This callback is called when the portal closes and after beforeClose.
 
+
 ## Tips & Tricks
@@ -101,0 +108,0 @@ - Does your modal have a fullscreen overlay and the `closeOnOutsideClick` doesn't work? [There is a simple solution](https://github.com/tajo/react-portal/issues/2#issuecomment-92058826).

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

1866914

increased by1.94%

Lines of code

23044

increased by3.11%

Number of lines in readme file

170

increased by4.29%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes