Skip to content

update(ripple): remove deprecated speed factor option #12258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 21, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/lib/chips/chip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -234,10 +234,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);

if (globalOptions) {
// TODO(paul): Do not copy each option manually. Allow dynamic global option changes: #9729
this._ripplesGloballyDisabled = !!globalOptions.disabled;
// TODO(paul): Once the speedFactor is removed, we no longer need to copy each single option.
this.rippleConfig = {
speedFactor: globalOptions.baseSpeedFactor,
animation: globalOptions.animation,
terminateOnPointerUp: globalOptions.terminateOnPointerUp,
};
Expand Down
7 changes: 1 addition & 6 deletions src/lib/core/ripple/ripple-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ export type RippleConfig = {
persistent?: boolean;
animation?: RippleAnimationConfig;
terminateOnPointerUp?: boolean;
/**
* @deprecated Use the `animation` property instead.
* @breaking-change 7.0.0
*/
speedFactor?: number;
};

/**
Expand Down Expand Up @@ -140,7 +135,7 @@ export class RippleRenderer {
const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
const offsetX = x - containerRect.left;
const offsetY = y - containerRect.top;
const duration = animationConfig.enterDuration / (config.speedFactor || 1);
const duration = animationConfig.enterDuration;

const ripple = document.createElement('div');
ripple.classList.add('mat-ripple-element');
Expand Down
56 changes: 10 additions & 46 deletions src/lib/core/ripple/ripple.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ describe('MatRipple', () => {
fixture = TestBed.createComponent(BasicRippleContainer);
fixture.detectChanges();

rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
rippleDirective = fixture.componentInstance.ripple;
});

Expand Down Expand Up @@ -262,7 +262,7 @@ describe('MatRipple', () => {
fixture = TestBed.createComponent(RippleContainerWithNgIf);
fixture.detectChanges();

rippleTarget = fixture.debugElement.nativeElement.querySelector('[mat-ripple]');
rippleTarget = fixture.debugElement.nativeElement.querySelector('.mat-ripple');

fixture.componentInstance.isDestroyed = true;
fixture.detectChanges();
Expand Down Expand Up @@ -377,7 +377,7 @@ describe('MatRipple', () => {
fixture = TestBed.createComponent(BasicRippleContainer);
fixture.detectChanges();

rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
rippleDirective = fixture.componentInstance.ripple;
});

Expand Down Expand Up @@ -492,7 +492,7 @@ describe('MatRipple', () => {
fixture = TestBed.createComponent(testComponent);
fixture.detectChanges();

rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
rippleDirective = fixture.componentInstance.ripple;
}

Expand Down Expand Up @@ -534,41 +534,6 @@ describe('MatRipple', () => {
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
});

it('should support changing the baseSpeedFactor', fakeAsync(() => {
createTestComponent({ baseSpeedFactor: 0.5 });

dispatchMouseEvent(rippleTarget, 'mousedown');
dispatchMouseEvent(rippleTarget, 'mouseup');

expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);

// Calculates the speedFactor for the duration. Those factors needs to be inverted, because
// a lower speed factor, will make the duration longer. For example: 0.5 => 2x duration.
let fadeInFactor = 1 / 0.5;

// Calculates the duration for fading-in and fading-out the ripple.
tick(enterDuration * fadeInFactor + exitDuration);

expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));

it('should combine individual speed factor with baseSpeedFactor', fakeAsync(() => {
createTestComponent({ baseSpeedFactor: 0.5 });

rippleDirective.launch(0, 0, { speedFactor: 1.5 });

expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);

// Calculates the speedFactor for the duration. Those factors needs to be inverted, because
// a lower speed factor, will make the duration longer. For example: 0.5 => 2x duration.
let fadeInFactor = 1 / (0.5 * 1.5);

// Calculates the duration for fading-in and fading-out the ripple.
tick(enterDuration * fadeInFactor + exitDuration);

expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));

it('should support changing the animation duration', fakeAsync(() => {
createTestComponent({
animation: {enterDuration: 100, exitDuration: 100}
Expand Down Expand Up @@ -619,7 +584,7 @@ describe('MatRipple', () => {
fixture = TestBed.createComponent(BasicRippleContainer);
fixture.detectChanges();

rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
rippleDirective = fixture.componentInstance.ripple;
});

Expand All @@ -637,7 +602,7 @@ describe('MatRipple', () => {
fixture.detectChanges();

controller = fixture.debugElement.componentInstance;
rippleTarget = fixture.debugElement.nativeElement.querySelector('[mat-ripple]');
rippleTarget = fixture.debugElement.nativeElement.querySelector('.mat-ripple');
});

it('sets ripple color', () => {
Expand Down Expand Up @@ -757,7 +722,7 @@ describe('MatRipple', () => {

@Component({
template: `
<div id="container" #ripple="matRipple" mat-ripple [matRippleSpeedFactor]="0"
<div id="container" #ripple="matRipple" matRipple
style="position: relative; width:300px; height:200px;">
</div>
`,
Expand All @@ -769,8 +734,7 @@ class BasicRippleContainer {
@Component({
template: `
<div id="container" style="position: relative; width:300px; height:200px;"
mat-ripple
[matRippleSpeedFactor]="0"
matRipple
[matRippleTrigger]="trigger"
[matRippleCentered]="centered"
[matRippleRadius]="radius"
Expand All @@ -792,11 +756,11 @@ class RippleContainerWithInputBindings {
}

@Component({
template: `<div id="container" #ripple="matRipple" mat-ripple></div>`,
template: `<div id="container" #ripple="matRipple" matRipple></div>`,
})
class RippleContainerWithoutBindings {}

@Component({ template: `<div id="container" mat-ripple [matRippleSpeedFactor]="0"
@Component({ template: `<div id="container" matRipple
*ngIf="!isDestroyed"></div>` })
class RippleContainerWithNgIf {
@ViewChild(MatRipple) ripple: MatRipple;
Expand Down
19 changes: 0 additions & 19 deletions src/lib/core/ripple/ripple.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,6 @@ export interface RippleGlobalOptions {
*/
animation?: RippleAnimationConfig;

/**
* If set, the default duration of the fade-in animation is divided by this value. For example,
* setting it to 0.5 will cause the ripple fade-in animation to take twice as long.
* A changed speedFactor will not affect the fade-out duration of the ripples.
* @deprecated Use the `animation` global option instead.
* @breaking-change 7.0.0
*/
baseSpeedFactor?: number;

/**
* Whether ripples should start fading out immediately after the mouse our touch is released. By
* default, ripples will wait for the enter animation to complete and for mouse or touch release.
Expand Down Expand Up @@ -86,15 +77,6 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
*/
@Input('matRippleRadius') radius: number = 0;

/**
* If set, the normal duration of ripple animations is divided by this value. For example,
* setting it to 0.5 will cause the animations to take twice as long.
* A changed speedFactor will not modify the fade-out duration of the ripples.
* @deprecated Use the [matRippleAnimation] binding instead.
* @breaking-change 7.0.0
*/
@Input('matRippleSpeedFactor') speedFactor: number = 1;

/**
* Configuration for the ripple animation. Allows modifying the enter and exit animation
* duration of the ripples. The animation durations will be overwritten if the
Expand Down Expand Up @@ -174,7 +156,6 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
color: this.color,
animation: {...this._globalOptions.animation, ...this.animation},
terminateOnPointerUp: this._globalOptions.terminateOnPointerUp,
speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
};
}

Expand Down
7 changes: 1 addition & 6 deletions src/lib/schematics/update/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,9 @@
*/

import {Rule} from '@angular-devkit/schematics';
import {TargetVersion} from './target-version';
import {createUpdateRule} from './update';

/** Possible versions that can be automatically migrated by `ng update`. */
export enum TargetVersion {
V6,
V7,
}

/** Entry point for the migration schematics with target of Angular Material 6.0.0 */
export function updateToV6(): Rule {
return createUpdateRule(TargetVersion.V6);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';
import {TargetVersion} from '../../index';

export interface MaterialAttributeSelectorData {
/** The attribute name to replace. */
Expand Down
2 changes: 1 addition & 1 deletion src/lib/schematics/update/material/data/class-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialClassNameData {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

/**
Expand Down
2 changes: 1 addition & 1 deletion src/lib/schematics/update/material/data/css-selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialCssSelectorData {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialElementSelectorData {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/schematics/update/material/data/input-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialInputNameData {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialMethodCallData {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/schematics/update/material/data/output-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialOutputNameData {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/schematics/update/material/data/property-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

import {TargetVersion} from '../../index';
import {TargetVersion} from '../../target-version';
import {VersionChanges} from '../transform-change-data';

export interface MaterialPropertyNameData {
Expand Down
3 changes: 2 additions & 1 deletion src/lib/schematics/update/material/transform-change-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {TargetVersion} from '../index';

import {TargetVersion} from '../target-version';

export type VersionChanges<T> = {
[target in TargetVersion]?: ReadableChange<T>[];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

/** Converts the specified speed factor into the exact static enter duration. */
export function convertSpeedFactorToDuration(factor: number) {
// Based on the numeric speed factor value that only affected the `enterDuration` we can
// now calculate the exact `enterDuration`. 450ms is the enter duration without factor.
return 450 / (factor || 1);
}

/**
* Creates a runtime TypeScript expression that can be used in order to calculate the duration
* from the speed factor expression that couldn't be statically analyzed.
*
* @param speedFactorValue Speed factor expression that couldn't be statically analyzed.
*/
export function createSpeedFactorConvertExpression(speedFactorValue: string): string {
// To be sure that the speed factor value expression is calculated properly, we need to add
// the according parenthesis.
return `450 / (${speedFactorValue})`;
}
Loading