iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
No known key found for this signature in database
GPG Key ID: 537DD9CDA3032687
18 changed files with 82 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/animations/browser/src/dsl/animation_timeline_instruction.ts
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,

35
packages/animations/browser/src/dsl/animation_timeline_visitor.ts
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 !;
}

2
packages/animations/browser/src/dsl/animation_transition_factory.ts
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['*'] || {};

3
packages/animations/browser/src/dsl/animation_trigger.ts
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;
}
}

8
packages/animations/browser/src/dsl/animation_validator_visitor.ts
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} = {};
}

2
packages/animations/browser/src/render/animation_driver.ts
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;
}

10
packages/animations/browser/src/render/dom_animation_engine.ts
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};
}

4
packages/animations/browser/src/render/noop_animation_engine.ts
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 {

2
packages/animations/browser/src/render/web_animations/web_animations_player.ts
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(

2
packages/animations/browser/src/util.ts
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) {

24
packages/animations/browser/test/dsl/animation_trigger_spec.ts
View File

@ -64,7 +64,7 @@ export function main() {
const result = makeTrigger(
'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);
const trans = result.matchTransition('b', 'c');
const trans = result.matchTransition('b', 'c') !;
expect(trans.timelines.length).toEqual(1);
const timeline = trans.timelines[0];
expect(timeline.duration).toEqual(5678);
@ -76,13 +76,13 @@ export function main() {
transition('* => *', animate(9999))
]);
let trans = result.matchTransition('b', 'c');
let trans = result.matchTransition('b', 'c') !;
expect(trans.timelines[0].duration).toEqual(5678);
trans = result.matchTransition('a', 'b');
trans = result.matchTransition('a', 'b') !;
expect(trans.timelines[0].duration).toEqual(1234);
trans = result.matchTransition('c', 'c');
trans = result.matchTransition('c', 'c') !;
expect(trans.timelines[0].duration).toEqual(9999);
});
@ -125,7 +125,7 @@ export function main() {
transition(countAndReturn(true), animate(3333))
]);
const trans = result.matchTransition('a', 'b');
const trans = result.matchTransition('a', 'b') !;
expect(trans.timelines[0].duration).toEqual(3333);
expect(count).toEqual(3);
@ -134,23 +134,23 @@ export function main() {
it('should support bi-directional transition expressions', () => {
const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);
const t1 = result.matchTransition('a', 'b');
const t1 = result.matchTransition('a', 'b') !;
expect(t1.timelines[0].duration).toEqual(2222);
const t2 = result.matchTransition('b', 'a');
const t2 = result.matchTransition('b', 'a') !;
expect(t2.timelines[0].duration).toEqual(2222);
});
it('should support multiple transition statements in one string', () => {
const result = makeTrigger('name', [transition('a => b, b => a, c => *', animate(1234))]);
const t1 = result.matchTransition('a', 'b');
const t1 = result.matchTransition('a', 'b') !;
expect(t1.timelines[0].duration).toEqual(1234);
const t2 = result.matchTransition('b', 'a');
const t2 = result.matchTransition('b', 'a') !;
expect(t2.timelines[0].duration).toEqual(1234);
const t3 = result.matchTransition('c', 'a');
const t3 = result.matchTransition('c', 'a') !;
expect(t3.timelines[0].duration).toEqual(1234);
});
@ -158,14 +158,14 @@ export function main() {
it('should alias the :enter transition as void => *', () => {
const result = makeTrigger('name', [transition(':enter', animate(3333))]);
const trans = result.matchTransition('void', 'something');
const trans = result.matchTransition('void', 'something') !;
expect(trans.timelines[0].duration).toEqual(3333);
});
it('should alias the :leave transition as * => void', () => {
const result = makeTrigger('name', [transition(':leave', animate(3333))]);
const trans = result.matchTransition('something', 'void');
const trans = result.matchTransition('something', 'void') !;
expect(trans.timelines[0].duration).toEqual(3333);
});
});

48
packages/animations/browser/test/engine/dom_animation_engine_spec.ts
View File

@ -34,7 +34,7 @@ export function main() {
element = el('<div></div>');
});
function makeEngine(normalizer: AnimationStyleNormalizer = null) {
function makeEngine(normalizer?: AnimationStyleNormalizer) {
return new DomAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer());
}
@ -163,7 +163,7 @@ export function main() {
engine.flush();
expect(count).toEqual(0);
const player = engine.activePlayers.pop();
const player = engine.activePlayers.pop() !;
player.finish();
expect(count).toEqual(1);
@ -275,7 +275,7 @@ export function main() {
engine.setProperty(element, 'myTrigger', '123');
engine.flush();
let capture: AnimationEvent = null;
let capture: AnimationEvent = null !;
engine.listen(element, 'myTrigger', 'start', (e) => capture = e);
engine.listen(element, 'myTrigger', 'done', (e) => capture = e);
engine.setProperty(element, 'myTrigger', '456');
@ -290,8 +290,8 @@ export function main() {
totalTime: 1234
});
capture = null;
const player = engine.activePlayers.pop();
capture = null !;
const player = engine.activePlayers.pop() !;
player.finish();
expect(capture).toEqual({
@ -314,7 +314,7 @@ export function main() {
transition('on => off', animate(9876))
]);
const instruction = trig.matchTransition('on', 'off');
const instruction = trig.matchTransition('on', 'off') !;
expect(MockAnimationDriver.log.length).toEqual(0);
engine.animateTransition(element, instruction);
@ -376,7 +376,7 @@ export function main() {
transition('on => off', animate(9876))
]);
const instruction = trig.matchTransition('on', 'off');
const instruction = trig.matchTransition('on', 'off') !;
const player = engine.animateTransition(element, instruction);
expect(element.style.height).not.toEqual('0px');
@ -392,13 +392,13 @@ export function main() {
state('c', style({width: '200px'})), transition('* => *', animate(9876))
]);
const instruction1 = trig.matchTransition('a', 'b');
const instruction1 = trig.matchTransition('a', 'b') !;
const player1 = engine.animateTransition(element, instruction1);
player1.finish();
expect(element.style.height).toEqual('500px');
const instruction2 = trig.matchTransition('b', 'c');
const instruction2 = trig.matchTransition('b', 'c') !;
const player2 = engine.animateTransition(element, instruction2);
expect(element.style.height).not.toEqual('500px');
@ -423,8 +423,8 @@ export function main() {
let doneCount = 0;
function doneCallback() { doneCount++; }
const instruction1 = trig1.matchTransition('a', 'b');
const instruction2 = trig2.matchTransition('x', 'y');
const instruction1 = trig1.matchTransition('a', 'b') !;
const instruction2 = trig2.matchTransition('x', 'y') !;
const player1 = engine.animateTransition(element, instruction1);
player1.onDone(doneCallback);
expect(doneCount).toEqual(0);
@ -451,8 +451,8 @@ export function main() {
state('z', style({opacity: 1})), transition('* => *', animate(1000))
]);
const instruction1 = trig.matchTransition('x', 'y');
const instruction2 = trig.matchTransition('y', 'z');
const instruction1 = trig.matchTransition('x', 'y') !;
const instruction2 = trig.matchTransition('y', 'z') !;
expect(parseFloat(element.style.opacity)).not.toEqual(.5);
@ -476,9 +476,9 @@ export function main() {
state('z', style({opacity: 1})), transition('* => *', animate(1000))
]);
const instruction1 = trig.matchTransition('x', 'y');
const instruction2 = trig.matchTransition('y', 'z');
const instruction3 = trig.matchTransition('z', 'x');
const instruction1 = trig.matchTransition('x', 'y') !;
const instruction2 = trig.matchTransition('y', 'z') !;
const instruction3 = trig.matchTransition('z', 'x') !;
const player1 = engine.animateTransition(element, instruction1);
engine.flush();
@ -502,10 +502,10 @@ export function main() {
let doneCount = 0;
function doneCallback() { doneCount++; }
const instruction1 = trig.matchTransition('m', 'n');
const instruction1 = trig.matchTransition('m', 'n') !;
const instructions2 =
buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]);
const instruction3 = trig.matchTransition('n', 'void');
buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]) !;
const instruction3 = trig.matchTransition('n', 'void') !;
const player1 = engine.animateTransition(element, instruction1);
player1.onDone(doneCallback);
@ -528,7 +528,7 @@ export function main() {
transition('* => *', [animate(1000, style({height: '200px'}))])
]);
const instruction = trig.matchTransition('0', '1');
const instruction = trig.matchTransition('0', '1') !;
const player = engine.animateTransition(element, instruction);
expect(element.style.width).not.toEqual('100px');
@ -545,7 +545,7 @@ export function main() {
transition('* => *', animate(1000))
]);
const instruction = trig.matchTransition('a', 'z');
const instruction = trig.matchTransition('a', 'z') !;
engine.animateTransition(element, instruction).finish();
expect(parseFloat(element.style.opacity)).toEqual(.5);
@ -558,7 +558,7 @@ export function main() {
transition('* => *', animate(1000))
]);
const instruction = trig.matchTransition('a', 'void');
const instruction = trig.matchTransition('a', 'void') !;
engine.animateTransition(element, instruction).finish();
expect(parseFloat(element.style.opacity)).toEqual(.8);
@ -600,7 +600,7 @@ export function main() {
transition('on => off', animate(9876))
]);
const instruction = trig.matchTransition('on', 'off');
const instruction = trig.matchTransition('on', 'off') !;
const player = <MockAnimationPlayer>engine.animateTransition(element, instruction);
expect(player.keyframes).toEqual([
@ -633,7 +633,7 @@ export function main() {
state('b', style({left: '100px', width: '100px'})), transition('a => b', animate(9876))
]);
const instruction = trig.matchTransition('a', 'b');
const instruction = trig.matchTransition('a', 'b') !;
let errorMessage = '';
try {

2
packages/animations/src/animation_metadata.ts
View File

@ -13,7 +13,7 @@ export interface ɵStyleData { [key: string]: string|number; }
export declare type AnimateTimings = {
duration: number,
delay: number,
easing: string
easing: string | null
};
/**

2
packages/animations/src/players/animation_group_player.ts
View File

@ -17,7 +17,7 @@ export class AnimationGroupPlayer implements AnimationPlayer {
private _destroyed = false;
private _onDestroyFns: Function[] = [];
public parentPlayer: AnimationPlayer = null;
public parentPlayer: AnimationPlayer|null = null;
constructor(private _players: AnimationPlayer[]) {
let count = 0;

6
packages/animations/src/players/animation_player.ts
View File

@ -24,8 +24,8 @@ export abstract class AnimationPlayer {
abstract reset(): void;
abstract setPosition(p: any /** TODO #9100 */): void;
abstract getPosition(): number;
get parentPlayer(): AnimationPlayer { throw new Error('NOT IMPLEMENTED: Base Class'); }
set parentPlayer(player: AnimationPlayer) { throw new Error('NOT IMPLEMENTED: Base Class'); }
get parentPlayer(): AnimationPlayer|null { throw new Error('NOT IMPLEMENTED: Base Class'); }
set parentPlayer(player: AnimationPlayer|null) { throw new Error('NOT IMPLEMENTED: Base Class'); }
}
/**
@ -38,7 +38,7 @@ export class NoopAnimationPlayer implements AnimationPlayer {
private _started = false;
private _destroyed = false;
private _finished = false;
public parentPlayer: AnimationPlayer = null;
public parentPlayer: AnimationPlayer|null = null;
constructor() {}
private _onFinish() {
if (!this._finished) {

1
packages/animations/tsconfig-build.json
View File

@ -15,6 +15,7 @@
"target": "es2015",
"lib": ["es2015", "dom"],
"skipLibCheck": true,
"strictNullChecks": true,
// don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
"types": []
},

6
tools/public_api_guard/animations/animations.d.ts vendored
View File

@ -5,7 +5,7 @@ export declare function animate(timings: string | number, styles?: AnimationStyl
export declare type AnimateTimings = {
duration: number;
delay: number;
easing: string;
easing: string | null;
};
/** @experimental */
@ -52,7 +52,7 @@ export declare const enum AnimationMetadataType {
/** @experimental */
export declare abstract class AnimationPlayer {
parentPlayer: AnimationPlayer;
parentPlayer: AnimationPlayer | null;
abstract destroy(): void;
abstract finish(): void;
abstract getPosition(): number;
@ -112,7 +112,7 @@ export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKey
/** @experimental */
export declare class NoopAnimationPlayer implements AnimationPlayer {
parentPlayer: AnimationPlayer;
parentPlayer: AnimationPlayer | null;
constructor();
destroy(): void;
finish(): void;

2
tools/public_api_guard/animations/browser.d.ts vendored
View File

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