Various fixes to the velociraptor

* handle having a single child, rather than an array of children

* Correctly animate children which are added at the same time as the
  Velociraptor, rather than added afterwards

* Set the child to hidden at the end of the initial animation, if that is
  required by the style property.
pull/21833/head
Richard van der Hoff 2016-04-20 22:21:07 +01:00
parent 267bf10e69
commit 04ef0262af
1 changed files with 15 additions and 15 deletions

View File

@ -13,25 +13,24 @@ module.exports = React.createClass({
displayName: 'Velociraptor', displayName: 'Velociraptor',
propTypes: { propTypes: {
children: React.PropTypes.array, // either a list of child nodes, or a single child.
children: React.PropTypes.any,
// optional transition information for changing existing children
transition: React.PropTypes.object, transition: React.PropTypes.object,
container: React.PropTypes.string
}, },
componentWillMount: function() { componentWillMount: function() {
this.children = {}; this.children = {};
this.nodes = {}; this.nodes = {};
var self = this; this.componentWillReceiveProps(this.props);
React.Children.map(this.props.children, function(c) {
self.children[c.key] = c;
});
}, },
componentWillReceiveProps: function(nextProps) { componentWillReceiveProps: function(nextProps) {
var self = this; var self = this;
var oldChildren = this.children; var oldChildren = this.children;
this.children = {}; this.children = {};
React.Children.map(nextProps.children, function(c) { React.Children.toArray(nextProps.children).forEach(function(c) {
if (oldChildren[c.key]) { if (oldChildren[c.key]) {
var old = oldChildren[c.key]; var old = oldChildren[c.key];
var oldNode = ReactDom.findDOMNode(self.nodes[old.key]); var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
@ -92,22 +91,23 @@ module.exports = React.createClass({
//console.log("start: "+JSON.stringify(startStyles[i])); //console.log("start: "+JSON.stringify(startStyles[i]));
} }
// and then we animate to the resting state // and then we animate to the resting state
Velocity(domNode, node.props._restingStyle, transitionOpts[i-1]); Velocity(domNode, node.props._restingStyle,
transitionOpts[i-1])
.then(() => {
// once we've reached the resting state, hide the element if
// appropriate
domNode.style.visibility = node.props._restingStyle.visibility;
});
//console.log("enter: "+JSON.stringify(node.props._restingStyle)); //console.log("enter: "+JSON.stringify(node.props._restingStyle));
} }
this.nodes[k] = node; this.nodes[k] = node;
}, },
render: function() { render: function() {
var self = this;
var childList = Object.keys(this.children).map(function(k) {
return React.cloneElement(self.children[k], {
ref: self.collectNode.bind(self, self.children[k].key)
});
});
return ( return (
<span> <span>
{childList} {Object.values(this.children)}
</span> </span>
); );
}, },