mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Various fixes to the velociraptor

Browse source 
* 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.
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/Velociraptor.js
View file

@ -13,25 +13,24 @@ module.exports = React.createClass({
displayName: 'Velociraptor',
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,
container: React.PropTypes.string
},
componentWillMount: function() {
this.children = {};
this.nodes = {};
var self = this;
React.Children.map(this.props.children, function(c) {
self.children[c.key] = c;
});
this.componentWillReceiveProps(this.props);
},
componentWillReceiveProps: function(nextProps) {
var self = this;
var oldChildren = this.children;
this.children = {};
React.Children.map(nextProps.children, function(c) {
React.Children.toArray(nextProps.children).forEach(function(c) {
if (oldChildren[c.key]) {
var old = oldChildren[c.key];
var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
@ -92,22 +91,23 @@ module.exports = React.createClass({
//console.log("start: "+JSON.stringify(startStyles[i]));
}
// 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));
}
this.nodes[k] = node;
},
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 (
<span>
{childList}
{Object.values(this.children)}
</span>
);
},