ldx-widgets
Version:
widgets
121 lines (107 loc) • 5.44 kB
JavaScript
(function() {
var Animation, clone, easing, extend;
Animation = require('ainojs-animation');
easing = require('ainojs-easing');
extend = require('lodash/extend');
clone = require('lodash/clone');
/*
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() {
var enterStateStart, leaveStateStart;
enterStateStart = (typeof this.enterStateStart === "function" ? this.enterStateStart() : void 0) || this.enterStateStart;
leaveStateStart = (typeof this.leaveStateStart === "function" ? this.leaveStateStart() : void 0) || this.leaveStateStart;
return extend(this.initialState || {}, enterStateStart || leaveStateStart || {});
},
componentWillEnter: function(done) {
var enterStateEnd, enterStateStart, stateStart;
if (!((this.enterStateStart != null) && (this.enterStateEnd != null))) {
done();
return;
}
this.animation = new Animation({
duration: (typeof this.enterDuration === "function" ? this.enterDuration() : void 0) || this.enterDuration || 300,
easing: easing((typeof this.enterEasing === "function" ? this.enterEasing() : void 0) || this.enterEasing || 'linear')
});
enterStateStart = (typeof this.enterStateStart === "function" ? this.enterStateStart() : void 0) || this.enterStateStart;
enterStateEnd = (typeof this.enterStateEnd === "function" ? this.enterStateEnd() : void 0) || this.enterStateEnd;
stateStart = clone(enterStateStart);
this.animation.init(stateStart);
this.animation.on('frame', this.onFrame);
this.animation.on('complete', done);
return this.animation.animateTo(enterStateEnd);
},
componentWillLeave: function(done) {
var k, leaveStateEnd, leaveStateStart, stateStart, v;
if (this.leaveStateEnd == null) {
done();
return;
}
this.animation = new Animation({
duration: (typeof this.leaveDuration === "function" ? this.leaveDuration() : void 0) || this.leaveDuration || 300,
easing: easing((typeof this.leaveEasing === "function" ? this.leaveEasing() : void 0) || this.leaveEasing || 'linear')
});
leaveStateStart = (typeof this.leaveStateStart === "function" ? this.leaveStateStart() : void 0) || this.leaveStateStart;
leaveStateEnd = (typeof this.leaveStateEnd === "function" ? this.leaveStateEnd() : void 0) || this.leaveStateEnd;
if (leaveStateStart == null) {
leaveStateStart = {};
for (k in leaveStateEnd) {
v = leaveStateEnd[k];
leaveStateStart[k] = this.state[k];
}
}
stateStart = clone(leaveStateStart);
this.animation.init(stateStart);
this.animation.on('frame', this.onFrame);
this.animation.on('complete', done);
return this.animation.animateTo(leaveStateEnd);
},
componentWillUnmount: function() {
var ref;
if ((ref = this.animation) != null ? ref.isAnimating() : void 0) {
return this.animation.destroy();
}
},
onFrame: function(e) {
return this.setState(e.values);
},
animateStateTo: function(options) {
var cb, duration, easingType, k, newState, stateStart, v;
newState = options.newState, duration = options.duration, easingType = options.easingType, cb = options.cb;
this.animation = new Animation({
duration: duration || (typeof this.enterDuration === "function" ? this.enterDuration() : void 0) || this.enterDuration || 300,
easing: easing(easingType || (typeof this.enterEasing === "function" ? this.enterEasing() : void 0) || this.enterEasing || 'linear')
});
stateStart = {};
for (k in newState) {
v = newState[k];
if (this.state[k] == null) {
return typeof console !== "undefined" && console !== null ? console.warn("State: " + k + " must be in component state to be animated") : void 0;
}
stateStart[k] = this.state[k];
}
this.animation.init(stateStart);
this.animation.on('frame', this.onFrame);
this.animation.on('complete', function() {
return typeof cb === "function" ? cb() : void 0;
});
return this.animation.animateTo(newState);
}
};
}).call(this);