feat(animations): Update types for TypeScript nullability support

Closes #15870
This commit is contained in:
Miško Hevery
2017-03-24 09:56:34 -07:00
committed by Hans Larsen
parent 04fb29b589
commit 38d75d410e
18 changed files with 82 additions and 81 deletions

View File

@ -13,12 +13,12 @@ export interface AnimationTimelineInstruction extends AnimationEngineInstruction
duration: number;
delay: number;
totalTime: number;
easing: string;
easing: string|null|undefined;
}
export function createTimelineInstruction(
keyframes: ɵStyleData[], duration: number, delay: number,
easing: string): AnimationTimelineInstruction {
easing: string | null | undefined): AnimationTimelineInstruction {
return {
type: AnimationTransitionInstructionType.TimelineAnimation,
keyframes,

View File

@ -112,13 +112,13 @@ export declare type StyleAtTime = {
export class AnimationTimelineContext {
currentTimeline: TimelineBuilder;
currentAnimateTimings: AnimateTimings;
currentAnimateTimings: AnimateTimings|null;
previousNode: AnimationMetadata = <AnimationMetadata>{};
subContextCount = 0;
constructor(
public errors: any[], public timelines: TimelineBuilder[],
initialTimeline: TimelineBuilder = null) {
initialTimeline?: TimelineBuilder) {
this.currentTimeline = initialTimeline || new TimelineBuilder(0);
timelines.push(this.currentTimeline);
}
@ -262,7 +262,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
}
private _applyStyles(
styles: ɵStyleData, easing: string, treatAsEmptyStep: boolean,
styles: ɵStyleData, easing: string|null, treatAsEmptyStep: boolean,
context: AnimationTimelineContext) {
if (styles.hasOwnProperty('easing')) {
easing = easing || styles['easing'] as string;
@ -284,10 +284,10 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
}
const startTime = context.currentTimeline.duration;
const duration = context.currentAnimateTimings.duration;
const duration = context.currentAnimateTimings !.duration;
const innerContext = context.createSubContext();
const innerTimeline = innerContext.currentTimeline;
innerTimeline.easing = context.currentAnimateTimings.easing;
innerTimeline.easing = context.currentAnimateTimings !.easing;
ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
const normalizedStyles = normalizeStyles(step.styles);
@ -311,21 +311,20 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
export class TimelineBuilder {
public duration: number = 0;
public easing: string = '';
public easing: string|null = '';
private _previousKeyframe: ɵStyleData = {};
private _currentKeyframe: ɵStyleData;
private _keyframes = new Map<number, ɵStyleData>();
private _styleSummary: {[prop: string]: StyleAtTime} = {};
private _localTimelineStyles: ɵStyleData;
private _backFill: ɵStyleData = {};
private _currentEmptyStepKeyframe: ɵStyleData = null;
private _currentEmptyStepKeyframe: ɵStyleData|null = null;
private _globalTimelineStyles: ɵStyleData;
constructor(public startTime: number, private _globalTimelineStyles: ɵStyleData = null) {
constructor(public startTime: number, globalTimelineStyles?: ɵStyleData) {
this._localTimelineStyles = Object.create(this._backFill, {});
if (!this._globalTimelineStyles) {
this._globalTimelineStyles = this._localTimelineStyles;
}
this._globalTimelineStyles =
globalTimelineStyles ? globalTimelineStyles : this._localTimelineStyles;
this._loadKeyframe();
}
@ -341,7 +340,7 @@ export class TimelineBuilder {
if (this._currentKeyframe) {
this._previousKeyframe = this._currentKeyframe;
}
this._currentKeyframe = this._keyframes.get(this.duration);
this._currentKeyframe = this._keyframes.get(this.duration) !;
if (!this._currentKeyframe) {
this._currentKeyframe = Object.create(this._backFill, {});
this._keyframes.set(this.duration, this._currentKeyframe);
@ -360,15 +359,15 @@ export class TimelineBuilder {
private _updateStyle(prop: string, value: string|number) {
this._localTimelineStyles[prop] = value;
this._globalTimelineStyles[prop] = value;
this._globalTimelineStyles ![prop] = value;
this._styleSummary[prop] = {time: this.currentTime, value};
}
allowOnlyTimelineStyles() { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }
setStyles(styles: ɵStyleData, easing: string = null, treatAsEmptyStep: boolean = false) {
setStyles(styles: ɵStyleData, easing: string|null = null, treatAsEmptyStep: boolean = false) {
if (easing) {
this._previousKeyframe['easing'] = easing;
this._previousKeyframe !['easing'] = easing;
}
if (treatAsEmptyStep) {
@ -405,7 +404,7 @@ export class TimelineBuilder {
snapshotCurrentStyles() { copyStyles(this._localTimelineStyles, false, this._currentKeyframe); }
getFinalKeyframe() { return this._keyframes.get(this.duration); }
getFinalKeyframe(): ɵStyleData { return this._keyframes.get(this.duration) !; }
get properties() {
const properties: string[] = [];
@ -467,5 +466,5 @@ function getOffset(ast: AnimationStyleMetadata): number {
offset = styles['offset'] as number;
}
}
return offset;
return offset !;
}

View File

@ -24,7 +24,7 @@ export class AnimationTransitionFactory {
this._animationAst = normalizedAst;
}
match(currentState: any, nextState: any): AnimationTransitionInstruction {
match(currentState: any, nextState: any): AnimationTransitionInstruction|undefined {
if (!oneOrMoreTransitionsMatch(this.matchFns, currentState, nextState)) return;
const backupStateStyles = this._stateStyles['*'] || {};

View File

@ -64,11 +64,12 @@ export class AnimationTrigger {
nextStateStyles, []);
}
matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction {
matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction|null {
for (let i = 0; i < this.transitionFactories.length; i++) {
let result = this.transitionFactories[i].match(currentState, nextState);
if (result) return result;
}
return null;
}
}

View File

@ -175,13 +175,13 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
const limit = length - 1;
const currentTime = context.currentTime;
const animateDuration = context.currentAnimateTimings.duration;
const animateDuration = context.currentAnimateTimings !.duration;
ast.steps.forEach((step, i) => {
const offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
const durationUpToThisFrame = offset * animateDuration;
context.currentTime =
currentTime + context.currentAnimateTimings.delay + durationUpToThisFrame;
context.currentAnimateTimings.duration = durationUpToThisFrame;
currentTime + context.currentAnimateTimings !.delay + durationUpToThisFrame;
context.currentAnimateTimings !.duration = durationUpToThisFrame;
this.visitStyle(step, context);
});
}
@ -190,6 +190,6 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
export class AnimationValidatorContext {
public errors: string[] = [];
public currentTime: number = 0;
public currentAnimateTimings: AnimateTimings;
public currentAnimateTimings: AnimateTimings|null;
public collectedStyles: {[propName: string]: StyleTimeTuple} = {};
}

View File

@ -28,5 +28,5 @@ export abstract class AnimationDriver {
static NOOP: AnimationDriver = new NoopAnimationDriver();
abstract animate(
element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
easing: string, previousPlayers?: any[]): any;
easing?: string|null, previousPlayers?: any[]): any;
}

View File

@ -59,7 +59,7 @@ export class DomAnimationEngine {
return players;
}
registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
name = name || trigger.name;
if (this._triggers[name]) {
return;
@ -84,7 +84,7 @@ export class DomAnimationEngine {
if (lookupRef) {
const possibleTriggers = Object.keys(lookupRef);
const hasRemoval = possibleTriggers.some(triggerName => {
const oldValue = lookupRef[triggerName];
const oldValue = lookupRef ![triggerName];
const instruction = this._triggers[triggerName].matchTransition(oldValue, VOID_STATE);
return !!instruction;
});
@ -194,7 +194,7 @@ export class DomAnimationEngine {
// we make a copy of the array because the actual source array is modified
// each time a player is finished/destroyed (the forEach loop would fail otherwise)
return copyArray(this._activeElementAnimations.get(element));
return copyArray(this._activeElementAnimations.get(element) !);
}
animateTransition(element: any, instruction: AnimationTransitionInstruction): AnimationPlayer {
@ -321,7 +321,7 @@ export class DomAnimationEngine {
private _flushQueuedAnimations() {
parentLoop: while (this._queuedTransitionAnimations.length) {
const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift();
const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift() !;
let parent = element;
while (parent = parent.parentNode) {
@ -512,7 +512,7 @@ function copyAnimationEvent(e: AnimationEvent): AnimationEvent {
}
function makeAnimationEvent(
element: any, triggerName: string, fromState: string, toState: string, phaseName: string,
element: any, triggerName: string, fromState: string, toState: string, phaseName: string | null,
totalTime: number): AnimationEvent {
return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
}

View File

@ -35,7 +35,7 @@ export class NoopAnimationEngine extends AnimationEngine {
private _triggerStyles: {[triggerName: string]: {[stateName: string]: ɵStyleData}} =
Object.create(null);
registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
name = name || trigger.name;
if (this._triggerStyles[name]) {
return;
@ -139,7 +139,7 @@ export class NoopAnimationEngine extends AnimationEngine {
// remove all the listeners after everything is complete
Array.from(this._listeners.keys()).forEach(element => {
const listenersToKeep = this._listeners.get(element).filter(l => !l.doRemove);
const listenersToKeep = this._listeners.get(element) !.filter(l => !l.doRemove);
if (listenersToKeep.length) {
this._listeners.set(element, listenersToKeep);
} else {

View File

@ -22,7 +22,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
private _finalKeyframe: {[key: string]: string | number};
public time = 0;
public parentPlayer: AnimationPlayer = null;
public parentPlayer: AnimationPlayer|null = null;
public previousStyles: {[styleName: string]: string | number};
constructor(

View File

@ -13,7 +13,7 @@ export function parseTimeExpression(exp: string | number, errors: string[]): Ani
const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
let duration: number;
let delay: number = 0;
let easing: string = null;
let easing: string|null = null;
if (typeof exp === 'string') {
const matches = exp.match(regex);
if (matches === null) {