fix bug with popup

if you closed/opened a popup for the previous animation was finished it did wonky things
jquense · Oct 23, 2014 · 0a18968 · 0a18968
1 parent 127c4f6
commit 0a18968
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/src/common/slide-transition.jsx b/src/common/slide-transition.jsx
@@ -23,10 +23,11 @@ var SlideChildGroup = React.createClass({
     width = direction === 'left' ? width : -width
 
     this.ORGINAL_POSITION = node.style.position;
-
+    
     $.css(node, { position: 'absolute', left: width + 'px' , top: 0 })
 
     $.animate(node, { left: 0 }, self.props.duration, function(){
+
         $.css(node, { 
           position:  self.ORGINAL_POSITION, 
           overflow: 'hidden'

diff --git a/src/popup/popup.jsx b/src/popup/popup.jsx
@@ -4,18 +4,17 @@ var React  = require('react')
   , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , $ = require('../util/dom');
 
-function childKey(children){
-  var nextChildMapping = React.Children.map(children, function(c){ return c })
-    , key;
 
-  for(key in nextChildMapping)
-    return key
-}
+var PopupContent = React.createClass({
+  render: function(){
+    return React.Children.only(this.props.children)
+  }
+})
+
 
 module.exports = React.createClass({
 
 	propTypes: {
-		//getAnchor:      React.PropTypes.func.isRequired,
     duration:       React.PropTypes.number,
     onRequestClose: React.PropTypes.func.isRequired,
     onClosing:      React.PropTypes.func,
@@ -47,18 +46,15 @@ module.exports = React.createClass({
   },
 
   componentDidUpdate: function(pvProps, pvState){
-    var self = this
-      , closing =  pvProps.open && !this.props.open
-      , opening = !pvProps.open && this.props.open
-      , same    = pvProps.open === this.props.open;
+    var closing =  pvProps.open && !this.props.open
+      , opening = !pvProps.open && this.props.open;
 
-    if (opening)      self.open()
-    else if (closing) self.close()
+    if (opening)      this.open()
+    else if (closing) this.close()
   },
 
 	render: function(){
-    var style   = _.extend({}, this.props.style || {}, { overflow: 'hidden', position: 'absolute', zIndex: 1005 })
-      , Content = mergeIntoProps(
+    var Content = mergeIntoProps(
           { className: 'rw-popup rw-widget' }
         , this.props.children);
 
@@ -85,8 +81,9 @@ module.exports = React.createClass({
       , anim = this.getDOMNode()
       , el   = this.refs.content.getDOMNode();
 
-    this.ORGINAL_POSITION = $.css(el, 'position');
+    this.ORGINAL_POSITION = $.css(el, 'position')
 
+    this._isOpening = true
     this.dimensions()
     this.props.onOpening()
 
@@ -96,6 +93,7 @@ module.exports = React.createClass({
       , { top: 0 }
       , self.props.duration
       , function(){
+          if ( !self._isOpening ) return
           el.style.position = self.ORGINAL_POSITION
           anim.style.overflow = 'visible'
           self.ORGINAL_POSITION = null
@@ -110,7 +108,9 @@ module.exports = React.createClass({
       , anim = this.getDOMNode()
       , ht   = anim.style.height;
 
-    this.ORGINAL_POSITION = $.css(el, 'position');
+    this.ORGINAL_POSITION = $.css(el, 'position')
+
+    this._isOpening = false
     this.dimensions()
     this.props.onClosing()
 
@@ -121,6 +121,7 @@ module.exports = React.createClass({
       , { top: '-100%' }
       , dur === undefined ? this.props.duration : dur
       , function() {
+          if ( self._isOpening ) return
           el.style.position = self.ORGINAL_POSITION
 
           anim.style.display = 'none'
@@ -132,8 +133,7 @@ module.exports = React.createClass({
 })
 
 
-var PopupContent = React.createClass({
-  render: function(){
-    return React.Children.only(this.props.children)
-  }
-})
+function childKey(children){
+  var nextChildMapping = React.Children.map(children, function(c){ return c });
+  for(var key in nextChildMapping) return key
+}