ldx-widgets
Version:
widgets
95 lines (82 loc) • 3.53 kB
JavaScript
(function() {
var Animation, _, easing;
Animation = require('ainojs-animation');
easing = require('ainojs-easing');
_ = require('lodash');
/*
Purpose: Easily add Enter and Leave animations to a React Component (that is a child of React's TransitionGroup)
The react component must have these properties for an Enter Animation
initialState: object - Only required when there are additional states to those being animated
The initial state of the component, which will have animated properties mixed in
Note: getInitialState on your component is overwritten by this mixin
ENTER ANIMATION PROPS
enterDuration: number (millisecoinds), defaults to 300
enterStateStart: object, required, no default
enterStateEnd: object, required, no default
enterEasing: string, defaults to 'linear' (ainojs-easing function name: https://github.com/aino/ainojs-easing)
LEAVE ANIMATION PROPS
leaveDuration: number (millisecoinds), defaults to 300
leaveStateStart: object, required, no default
leaveStateEnd: object, required, no default
leaveEasing: string, defaults to 'linear' (ainojs-easing function name: https://github.com/aino/ainojs-easing)
finaally, the @state properties must be applied as inline styles in the component's render method
*/
module.exports = {
getInitialState: function() {
return _.extend(this.initialState || {}, this.enterStateStart || this.leaveStateStart || {});
},
componentWillEnter: function(done) {
var stateStart;
if (!((this.enterStateStart != null) && (this.enterStateEnd != null))) {
if (process.env.NODE_ENV === "development") {
if (typeof console !== "undefined" && console !== null) {
console.warn("No 'enter' animation will be performed as @enterStateStart & @enterStateEnd are required.");
}
}
done();
return;
}
this.animation = new Animation({
duration: this.enterDuration || 300,
easing: easing(this.enterEasing || 'linear')
});
stateStart = _.clone(this.enterStateStart);
this.animation.init(stateStart);
this.animation.on('frame', this.onFrame);
this.animation.on('complete', done);
return this.animation.animateTo(this.enterStateEnd);
},
componentWillLeave: function(done) {
var stateStart;
if (!((this.leaveStateStart != null) && (this.leaveStateEnd != null))) {
if (process.env.NODE_ENV === "development") {
if (typeof console !== "undefined" && console !== null) {
console.warn("No 'leave' animation will be performed as @leaveStateStart & @leaveStateEnd are required.");
}
}
done();
return;
}
this.animation = new Animation({
duration: this.leaveDuration || 300,
easing: easing(this.leaveEasing || 'linear')
});
stateStart = _.clone(this.leaveStateStart);
this.animation.init(stateStart);
this.animation.on('frame', this.onFrame);
this.animation.on('complete', done);
return this.animation.animateTo(this.leaveStateEnd);
},
componentWillUnmount: function() {
var ref;
if ((ref = this.animation) != null ? ref.isAnimating() : void 0) {
return this.animation.destroy();
}
},
onFrame: function(e) {
if (this.isMounted()) {
return this.setState(e.values);
}
}
};
}).call(this);