rebuild for 1.5.0

Author: jquense

browser/react-widgets.js

@@ -9,11 +9,14 @@
 "use strict";
 
 var React = require('react')
+  , startsWith = require('../util/filter').startsWith
   , cloneWithProps = require('../util/transferProps').cloneWithProps
   , transferPropsTo = require('../util/transferProps').mergeIntoProps
   , $ = require('../util/dom')
   , _ = require('../util/_');
 
+
+
 module.exports = React.createClass({
 
   displayName: 'ReplaceTransitionGroup',
@@ -31,95 +34,94 @@ module.exports = React.createClass({
       component: React.DOM.span,
       childFactory: function(a){ return a },
 
-      onAnimating: function(){},
-      onAnimate:   function(){}
+      onAnimating: _.noop,
+      onAnimate:   _.noop
     };
   },
 
   getInitialState: function() {
     return {
-      children: React.Children.map(this.props.children, function(c){ return c })
+      children: _.splat(this.props.children)
     };
   },
 
   componentWillReceiveProps: function(nextProps) {
-    var nextChildMapping = React.Children.map(nextProps.children, function(c){ return c })
-      , prevChildMapping = this.state.children
-      , key, hasOther, isNext;
-
-    //console.log(prevChildMapping, nextChildMapping)
-    this.setState({
-      children: _.merge(prevChildMapping, nextChildMapping)
-    });
-
-    for(key in nextChildMapping) if( _.has(nextChildMapping, key) ) 
-    {
-      hasOther = prevChildMapping && _.has(prevChildMapping, key)
-      isNext   = !hasOther && !this.currentlyTransitioningKeys[key];
-
-      if ( isNext ) {
-        this.next = key
-        break
-      }
+    var nextChild = getChild(nextProps.children)
+      , stack     = this.state.children.slice()
+      , next      = stack[1]
+      , last      = stack[0];
+
+    var isLastChild = last && key(last) === key(nextChild)
+      , isNextChild = next && key(next) === key(nextChild);
+
+    //no children
+    if (!last) {
+      stack.push(nextChild)
+      this.entering = nextChild
     }
-
-    for(key in prevChildMapping) if( _.has(prevChildMapping, key) ) 
-    {
-      hasOther = nextChildMapping && _.has(nextChildMapping, key)
-      isNext   = !hasOther && !this.currentlyTransitioningKeys[key];
-
-      if ( isNext ) {
-        this.current = key
-        break
-      }
+    else if ( last && !next && !isLastChild) {
+      //new child
+      stack.push(nextChild)
+      this.leaving = last 
+      this.entering = nextChild
     }
+    else if ( last && next && !isLastChild && !isNextChild) {
+      // the child is not the current one, exit the current one, add the new one
+      //  - shift the stack down
+      stack.shift()
+      stack.push(nextChild)
+      this.leaving  = next
+      this.entering = nextChild
+    }
+    //new child that just needs to be re-rendered
+    else if (isLastChild) stack.splice(0, 1, nextChild) 
+    else if (isNextChild) stack.splice(1, 1, nextChild)
+
+    if( this.state.children[0] !== stack[0] || this.state.children[1] !== stack[1] ) 
+      this.setState({ children: stack });
   },
 
   componentWillMount: function() {
-    this.currentlyTransitioningKeys = {};
-    this.current = null;
-    this.next    = null;
+    this.animatingKeys = {};
+    this.leaving  = null;
+    this.entering = null;
   },
 
   componentDidUpdate: function() {
-    var current = this.current
-      , next    = this.next
-      , first = this.refs[current || next] 
-      , node  = this.getDOMNode()
-      , el    = first && first.getDOMNode()
-      , ht, wt;
-
-    if( el ) {
-      ht = $.height(el) + 'px'
-      wt = $.width(el) + 'px'
+    var entering = this.entering
+      , leaving  = this.leaving
+      , first    = this.refs[key(entering) || key(leaving)]
+      , node     = this.getDOMNode()
+      , el       = first && first.getDOMNode();
 
+    if( el )
       $.css(node, {
         overflow: 'hidden',
-        height: ht,
-        width: wt
+        height: $.height(el) + 'px',
+        width:  $.width(el) + 'px'
       })
-    }
-
+    
     this.props.onAnimating();
 
-    this.next = null;
-    this.current = null;
+    this.entering = null;
+    this.leaving  = null;
 
-    if ( next )   this.performEnter(next)
-    if ( current) this.performLeave(current)
+    if (entering) this.performEnter(key(entering))
+    if (leaving)  this.performLeave(key(leaving))
   },
 
   performEnter: function(key) {
-    this.currentlyTransitioningKeys[key] = true;
-
     var component = this.refs[key];
 
+    if(!component) return
+
+    this.animatingKeys[key] = true;
+
     if (component.componentWillEnter) 
       component.componentWillEnter(
         this._handleDoneEntering.bind(this, key));
     else 
       this._handleDoneEntering(key);
-    
   },
 
   _tryFinish: function(){
@@ -128,84 +130,72 @@ module.exports = React.createClass({
     if ( this.isTransitioning() )
       return 
 
-    $.css(node, {
-      overflow: 'visible',
-      height: '',
-      width: ''
-    })
+    $.css(node, { overflow: 'visible', height: '', width: '' })
 
     this.props.onAnimate() 
   }, 
 
-  _handleDoneEntering: function(key) {
-    var component = this.refs[key];
+  _handleDoneEntering: function(enterkey) {
+    var component = this.refs[enterkey];
 
-    if (component.componentDidEnter) 
+    if (component && component.componentDidEnter) 
       component.componentDidEnter();
 
-    delete this.currentlyTransitioningKeys[key];
-
-    var currentChildMapping = React.Children.map(this.props.children, function(c){ return c })
+    delete this.animatingKeys[enterkey];
 
-    if (!currentChildMapping || !_.has(currentChildMapping, key)) 
-      this.performLeave(key); // This was removed before it had fully entered. Remove it.
+    if ( key(this.props.children) !== enterkey) 
+      this.performLeave(enterkey); // This was removed before it had fully entered. Remove it.
 
     this._tryFinish()
   },
 
   isTransitioning: function(){
-    return Object.keys(this.currentlyTransitioningKeys).length !== 0
+    return Object.keys(this.animatingKeys).length !== 0
   },
 
   performLeave: function(key) {
     var component = this.refs[key];
 
-    this.currentlyTransitioningKeys[key] = true;
+    if(!component) return
+
+    this.animatingKeys[key] = true;
 
     if (component.componentWillLeave) 
       component.componentWillLeave(this._handleDoneLeaving.bind(this, key));
     else 
       this._handleDoneLeaving(key);
-    
   },
 
-  _handleDoneLeaving: function(key) {
-    var component = this.refs[key];
+  _handleDoneLeaving: function(leavekey) {
+    var component = this.refs[leavekey];
 
-    if (component.componentDidLeave) 
+    if (component && component.componentDidLeave) 
       component.componentDidLeave();
 
-    delete this.currentlyTransitioningKeys[key];
-
-    var currentChildMapping = React.Children.map(this.props.children, function(c){ return c })
+    delete this.animatingKeys[leavekey];
 
-    if (currentChildMapping && currentChildMapping.hasOwnProperty(key))
-      this.performEnter(key); // This entered again before it fully left. Add it again.
+    if (key(this.props.children) === leavekey )
+      this.performEnter(leavekey); // This entered again before it fully left. Add it again.
     else {
-      var newChildren = _.merge(this.state.children);
-      delete newChildren[key];
-      this.setState({children: newChildren});
+      var newChildren = _.filter(this.state.children, function(c)  {return key(c) !== leavekey;});
+      this.setState({ children: newChildren });
     }
 
     this._tryFinish() 
   },
 
   render: function() {
-    var childrenToRender = {};
-
-
-    for (var key in this.state.children) {
-
-      var child = this.state.children[key];
-
-      if (child) {
-        childrenToRender[key] = cloneWithProps(
-          this.props.childFactory(child),
-          { ref: key }
-        );
-      }
-    }
-
-    return transferPropsTo(this.props, this.props.component(null, childrenToRender));
+    var Component = this.props.component
+    return transferPropsTo(this.props, 
+            Component(null,  this.state.children.map(function(c)  {return this.props.childFactory(c, key(c));}.bind(this)) ));
   }
 });
+
+function getChild(children){
+  return React.Children.only(children)
+}
+
+//CHANGE 0.12.0
+function key(child){
+  return child && (startsWith(React.version, '0.12') ? child.key : child.props.key)
+}

dist/css/react-widgets.css

@@ -12,13 +12,8 @@ var SlideChildGroup = React.createClass({displayName: 'SlideChildGroup',
     direction: React.PropTypes.oneOf(['left', 'right'])
   },
 
-  getDefaultProps: function(){
-    return { duration: 250 }
-  },
-
   componentWillEnter: function(done) {
-    var self  = this
-      , node  = this.getDOMNode()
+    var node  = this.getDOMNode()
       , width = $.width(node)
       , direction = this.props.direction;
 
@@ -28,21 +23,20 @@ var SlideChildGroup = React.createClass({displayName: 'SlideChildGroup',
 
     $.css(node, { position: 'absolute', left: width + 'px' , top: 0 })
 
-    $.animate(node, { left: 0 }, self.props.duration, function(){
+    $.animate(node, { left: 0 }, this.props.duration, function()  {
 
         $.css(node, { 
-          position:  self.ORGINAL_POSITION, 
+          position:  this.ORGINAL_POSITION, 
           overflow: 'hidden'
         });
 
-        self.ORGINAL_POSITION = null
+        this.ORGINAL_POSITION = null
         done && done()
-      })
+      }.bind(this))
   },
 
   componentWillLeave: function(done) {
-    var self  = this
-      , node  = this.getDOMNode()
+    var node  = this.getDOMNode()
       , width = $.width(node)
       , direction = this.props.direction;
 
@@ -52,15 +46,15 @@ var SlideChildGroup = React.createClass({displayName: 'SlideChildGroup',
 
     $.css(node, { position: 'absolute', top: 0, left: 0})
 
-    $.animate(node, { left: width + 'px'}, self.props.duration, function(){
+    $.animate(node, { left: width + 'px' }, this.props.duration, function()  {
         $.css(node, { 
-          position: self.ORGINAL_POSITION, 
+          position: this.ORGINAL_POSITION, 
           overflow: 'hidden'
         });
 
-        self.ORGINAL_POSITION = null
+        this.ORGINAL_POSITION = null
         done && done()
-      })
+      }.bind(this))
   },
 
   render: function() {
@@ -73,17 +67,19 @@ var SlideChildGroup = React.createClass({displayName: 'SlideChildGroup',
 module.exports = React.createClass({displayName: 'exports',
 
   propTypes: {
-    direction: React.PropTypes.oneOf(['left', 'right'])
+    direction: React.PropTypes.oneOf(['left', 'right']),
+    duration:  React.PropTypes.number
   },
 
   getDefaultProps: function(){
     return {
-      direction: 'left'
+      direction: 'left',
+      duration: 250
     }
   },
 
-  _wrapChild: function(child) {
-    return (SlideChildGroup({direction: this.props.direction}, child))
+  _wrapChild: function(child, ref) {
+    return (SlideChildGroup({ref: ref, direction: this.props.direction, duration: this.props.duration}, child))
   },
 
   render: function() {

docs/docs.js

@@ -137,7 +137,7 @@
 }
 
 ul.rw-list,
-ul.rw-checkboxlist {
+ul.rw-selectlist {
 	.list-unstyled();
   padding: 5px 0;
   overflow: auto;