From 555088cc8779c893f884de1dabd3db0269cd69c5 Mon Sep 17 00:00:00 2001 From: mmart1n Date: Thu, 28 Oct 2021 18:20:00 +0300 Subject: [PATCH] refactor(carousel): add migration for CarouselAnimationType - add leaveAnimationDone and enterAnimationDone events - rename animationDuration Co-authored-by: MonikaKirkova --- .../migrations/migration-collection.json | 5 ++ .../update-13_0_0/changes/classes.json | 8 +++ .../migrations/update-13_0_0/index.spec.ts | 70 +++++++++++++++++++ .../migrations/update-13_0_0/index.ts | 11 +++ .../src/lib/carousel/README.md | 2 +- .../src/lib/carousel/carousel-base.ts | 26 ++++--- .../lib/carousel/carousel.component.spec.ts | 8 +-- .../src/lib/carousel/carousel.component.ts | 12 ++-- 8 files changed, 123 insertions(+), 19 deletions(-) create mode 100644 projects/igniteui-angular/migrations/update-13_0_0/changes/classes.json create mode 100644 projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts create mode 100644 projects/igniteui-angular/migrations/update-13_0_0/index.ts diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index b00301e1fdc..b4206ea4131 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -105,6 +105,11 @@ "version": "12.1.0", "description": "Updates Ignite UI for Angular from v11.1.x to v12.1.0", "factory": "./update-12_1_0" + }, + "migration-22": { + "version": "13.0.0", + "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0", + "factory": "./update-13_0_0" } } } diff --git a/projects/igniteui-angular/migrations/update-13_0_0/changes/classes.json b/projects/igniteui-angular/migrations/update-13_0_0/changes/classes.json new file mode 100644 index 00000000000..ec58fda9821 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_0_0/changes/classes.json @@ -0,0 +1,8 @@ +{ + "$schema": "../../common/schema/class.schema.json", + "changes": [{ + "name": "CarouselAnimationType", + "replaceWith": "HorizontalAnimationType" + } + ] +} diff --git a/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts b/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts new file mode 100644 index 00000000000..f6e3398bf8b --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts @@ -0,0 +1,70 @@ +import * as path from 'path'; + +import { EmptyTree } from '@angular-devkit/schematics'; +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; + +const version = '13.0.0'; + +describe(`Update to ${version}`, () => { + let appTree: UnitTestTree; + const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json')); + const configJson = { + defaultProject: 'testProj', + projects: { + testProj: { + sourceRoot: '/testSrc' + } + }, + schematics: { + '@schematics/angular:component': { + prefix: 'appPrefix' + } + } + }; + + const migrationName = 'migration-22'; + + beforeEach(() => { + appTree = new UnitTestTree(new EmptyTree()); + appTree.create('/angular.json', JSON.stringify(configJson)); + }); + + it('should rename CarouselAnimationType to HorizontalAnimationType', async () => { + appTree.create( + '/testSrc/appPrefix/component/test.component.ts', + `import { Component, ViewChild } from '@angular/core'; + import { CarouselAnimationType } from 'igniteui-angular'; + + @Component({ + selector: 'animationType', + templateUrl: './test.component.html', + styleUrls: ['./test.component.scss'] + }) + export class AnimationType { + public animationType: CarouselAnimationType = CarouselAnimationType.slide; + } + `); + const tree = await schematicRunner + .runSchematicAsync(migrationName, {}, appTree) + .toPromise(); + + const expectedContent = `import { Component, ViewChild } from '@angular/core'; + import { HorizontalAnimationType } from 'igniteui-angular'; + + @Component({ + selector: 'animationType', + templateUrl: './test.component.html', + styleUrls: ['./test.component.scss'] + }) + export class AnimationType { + public animationType: HorizontalAnimationType = HorizontalAnimationType.slide; + } + `; + + expect( + tree.readContent( + '/testSrc/appPrefix/component/test.component.ts' + ) + ).toEqual(expectedContent); + }); +}); diff --git a/projects/igniteui-angular/migrations/update-13_0_0/index.ts b/projects/igniteui-angular/migrations/update-13_0_0/index.ts new file mode 100644 index 00000000000..ab7fddb6b1c --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_0_0/index.ts @@ -0,0 +1,11 @@ +import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; +import { UpdateChanges } from '../common/UpdateChanges'; + +const version = '13.0.0'; + +export default (): Rule => (host: Tree, context: SchematicContext) => { + context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); + + const update = new UpdateChanges(__dirname, host, context); + update.applyChanges(); +}; diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md index 54d009d4a73..b1433017bc2 100644 --- a/projects/igniteui-angular/src/lib/carousel/README.md +++ b/projects/igniteui-angular/src/lib/carousel/README.md @@ -17,7 +17,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics | `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. | | `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `5`. | | `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls whether the indicators should be previewed on top or on bottom of carousel. Defaults to `bottom`. | -| `animationType` | CarouselAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. | +| `animationType` | HorizontalAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. | | `total` | number | The number of slides the carousel currently has. | | `current` | number | The index of the slide currently showing. | | `isPlaying` | boolean | Returns whether the carousel is paused/playing. | diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts index 87f27b56c83..3de3a208164 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts @@ -1,16 +1,17 @@ import { AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations'; +import { EventEmitter } from '@angular/core'; import { fadeIn } from '../animations/fade'; import { slideInLeft } from '../animations/slide'; import { mkenum } from '../core/utils'; export enum Direction { NONE, NEXT, PREV } -export const CarouselAnimationType = mkenum({ +export const HorizontalAnimationType = mkenum({ none: 'none', slide: 'slide', fade: 'fade' }); -export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType]; +export type HorizontalAnimationType = (typeof HorizontalAnimationType)[keyof typeof HorizontalAnimationType]; export interface CarouselAnimationSettings { enterAnimation: AnimationReferenceMetadata; @@ -26,7 +27,12 @@ export interface IgxSlideComponentBase { /** @hidden */ export abstract class IgxCarouselComponentBase { /** @hidden */ - public animationType = CarouselAnimationType.slide; + public animationType: HorizontalAnimationType = HorizontalAnimationType.slide; + + /** @hidden @internal */ + public enterAnimationDone = new EventEmitter(); + /** @hidden @internal */ + public leaveAnimationDone = new EventEmitter(); /** @hidden */ protected currentItem: IgxSlideComponentBase; @@ -37,7 +43,7 @@ export abstract class IgxCarouselComponentBase { /** @hidden */ protected leaveAnimationPlayer?: AnimationPlayer; /** @hidden */ - protected animationDuration = 320; + protected defaultAnimationDuration = 320; /** @hidden */ protected animationPosition = 0; /** @hidden */ @@ -48,7 +54,7 @@ export abstract class IgxCarouselComponentBase { /** @hidden */ protected triggerAnimations() { - if (this.animationType !== CarouselAnimationType.none) { + if (this.animationType !== HorizontalAnimationType.none) { if (this.animationStarted(this.leaveAnimationPlayer) || this.animationStarted(this.enterAnimationPlayer)) { requestAnimationFrame(() => { this.resetAnimations(); @@ -74,10 +80,12 @@ export abstract class IgxCarouselComponentBase { private resetAnimations() { if (this.animationStarted(this.leaveAnimationPlayer)) { this.leaveAnimationPlayer.reset(); + this.leaveAnimationDone.emit(); } if (this.animationStarted(this.enterAnimationPlayer)) { this.enterAnimationPlayer.reset(); + this.enterAnimationDone.emit(); } } @@ -86,11 +94,11 @@ export abstract class IgxCarouselComponentBase { if (this.newDuration) { duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration; } else { - duration = this.animationPosition ? this.animationPosition * this.animationDuration : this.animationDuration; + duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration; } switch (this.animationType) { - case CarouselAnimationType.slide: + case HorizontalAnimationType.slide: const trans = this.animationPosition ? this.animationPosition * 100 : 100; return { enterAnimation: useAnimation(slideInLeft, @@ -116,7 +124,7 @@ export abstract class IgxCarouselComponentBase { } }) }; - case CarouselAnimationType.fade: + case HorizontalAnimationType.fade: return { enterAnimation: useAnimation(fadeIn, { params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }), @@ -146,6 +154,7 @@ export abstract class IgxCarouselComponentBase { this.animationPosition = 0; this.newDuration = 0; this.previousItem.previous = false; + this.enterAnimationDone.emit(); }); this.previousItem.previous = true; this.enterAnimationPlayer.play(); @@ -167,6 +176,7 @@ export abstract class IgxCarouselComponentBase { } this.animationPosition = 0; this.newDuration = 0; + this.leaveAnimationDone.emit(); }); this.leaveAnimationPlayer.play(); } diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index 59cf590d689..eddc5445e45 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -11,7 +11,7 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSlideComponent } from './slide.component'; -import { CarouselAnimationType } from './carousel-base'; +import { HorizontalAnimationType } from './carousel-base'; describe('Carousel', () => { configureTestSuite(); @@ -589,7 +589,7 @@ describe('Carousel', () => { await wait(); expect(carousel.get(0).active).toBeTruthy(); expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); - expect(carousel.animationType).toBe(CarouselAnimationType.slide); + expect(carousel.animationType).toBe(HorizontalAnimationType.slide); carousel.next(); fixture.detectChanges(); await wait(200); @@ -616,12 +616,12 @@ describe('Carousel', () => { it('Test fade animation', async () => { await wait(); - carousel.animationType = CarouselAnimationType.fade; + carousel.animationType = HorizontalAnimationType.fade; fixture.detectChanges(); expect(carousel.get(0).active).toBeTruthy(); expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy(); - expect(carousel.animationType).toBe(CarouselAnimationType.fade); + expect(carousel.animationType).toBe(HorizontalAnimationType.fade); carousel.next(); fixture.detectChanges(); await wait(200); diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 1f1912c7677..d55a083864e 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -30,7 +30,7 @@ import { IgxSlideComponent } from './slide.component'; import { ICarouselResourceStrings } from '../core/i18n/carousel-resources'; import { CurrentResourceStrings } from '../core/i18n/resources'; import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; -import { CarouselAnimationType, Direction, IgxCarouselComponentBase } from './carousel-base'; +import { HorizontalAnimationType, Direction, IgxCarouselComponentBase } from './carousel-base'; let NEXT_ID = 0; @@ -227,7 +227,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On * * @memberOf IgxSlideComponent */ - @Input() public animationType = CarouselAnimationType.slide; + @Input() public animationType: HorizontalAnimationType = HorizontalAnimationType.slide; /** * The custom template, if any, that should be used when rendering carousel indicators @@ -647,18 +647,18 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On this.incomingSlide.direction = event.deltaX < 0 ? Direction.NEXT : Direction.PREV; this.incomingSlide.previous = false; - this.animationPosition = this.animationType === CarouselAnimationType.fade ? + this.animationPosition = this.animationType === HorizontalAnimationType.fade ? deltaX / slideWidth : (slideWidth - deltaX) / slideWidth; if (velocity > 1) { - this.newDuration = this.animationDuration / velocity; + this.newDuration = this.defaultAnimationDuration / velocity; } this.incomingSlide.active = true; } else { this.currentItem.direction = event.deltaX > 0 ? Direction.NEXT : Direction.PREV; this.previousItem = this.incomingSlide; this.previousItem.previous = true; - this.animationPosition = this.animationType === CarouselAnimationType.fade ? + this.animationPosition = this.animationType === HorizontalAnimationType.fade ? Math.abs((slideWidth - deltaX) / slideWidth) : deltaX / slideWidth; this.playAnimations(); } @@ -912,7 +912,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On } this.incomingSlide.previous = true; - if (this.animationType === CarouselAnimationType.fade) { + if (this.animationType === HorizontalAnimationType.fade) { this.currentItem.nativeElement.style.opacity = `${Math.abs(offset) / slideWidth}`; } else { this.currentItem.nativeElement.style.transform = `translateX(${deltaX}px)`;