fix: pr fixes

taiga-family · Sep 19, 2023 · 69eb47b · 69eb47b
1 parent 90111bc
commit 69eb47b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 38 deletions.
diff --git a/apps/demo/src/app/pages/view-transition/view-transition-page.component.html b/apps/demo/src/app/pages/view-transition/view-transition-page.component.html
@@ -7,26 +7,30 @@ <h2>How to use</h2>
 <pre><code [highlight]="codeSample" [languages]="['ts']"></code></pre>
 <h2>Basic example</h2>
 
-<div *ngIf="!showDetails" class="photos">
-    <div
-        *ngFor="let item of data; let index = index"
-        class="photo"
-        (click)="open(index)"
-    >
-        <span class="author">
-            Photo by
-            <a target="_blank" [href]="item.url">{{item.author}}</a>
-        </span>
-        <img
-            [src]="item.src"
-            [style.viewTransitionName]="activeIndex === index ? 'expandable-image' : null"
-        />
+<ng-container
+    *tuiLet="{ detailInfo: detailInfo$ | async, activeIndex: activeIndex$ | async } as context"
+>
+    <div *ngIf="!context.detailInfo" class="photos">
+        <div
+            *ngFor="let item of data; let index = index"
+            class="photo"
+            (click)="open(index)"
+        >
+            <span class="author">
+                Photo by
+                <a target="_blank" [href]="item.url">{{item.author}}</a>
+            </span>
+            <img
+                [src]="item.src"
+                [style.viewTransitionName]="context.activeIndex === index ? 'expandable-image' : null"
+            />
+        </div>
     </div>
-</div>
 
-<div *ngIf="showDetails" class="expanded-photo">
-    <img [src]="detailInfo?.src" (click)="close()" />
-</div>
+    <div *ngIf="context.detailInfo" class="expanded-photo">
+        <img [src]="context.detailInfo.src" (click)="close()" />
+    </div>
+</ng-container>
 
 <a tuiLink href="https://www.pexels.com" target="_blank">
     Photos provided by Pexels

diff --git a/apps/demo/src/app/pages/view-transition/view-transition-page.component.ts b/apps/demo/src/app/pages/view-transition/view-transition-page.component.ts
@@ -1,14 +1,15 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
-import {finalize} from 'rxjs';
+import {BehaviorSubject, takeUntil} from 'rxjs';
 import {ViewTransitionService} from '@ng-web-apis/view-transition';
+import {TuiDestroyService} from '@taiga-ui/cdk';
 
 interface Photo {
     src: string;
     author: string;
     url: string;
 }
 
-const PHOTOS = [
+const PHOTOS: readonly Photo[] = [
     {
         src: 'https://images.pexels.com/photos/16316785/pexels-photo-16316785/free-photo-of-fluffy-cat-on-blooming-tree-background.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
         author: 'Peng Louis',
@@ -48,44 +49,39 @@ const USAGE_SAMPLE = `
     templateUrl: `./view-transition-page.component.html`,
     styleUrls: [`./view-transition-page.component.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TuiDestroyService],
 })
 export class ViewTransitionPageComponent {
-    codeSample = USAGE_SAMPLE;
-    activeIndex = -1;
-    showDetails = false;
-    detailInfo: Photo | undefined = undefined;
-    data = PHOTOS;
+    readonly codeSample = USAGE_SAMPLE;
+    readonly data = PHOTOS;
+    readonly activeIndex$ = new BehaviorSubject(-1);
+    readonly detailInfo$ = new BehaviorSubject<Photo | undefined>(undefined);
 
     constructor(
         private readonly viewTransitionService: ViewTransitionService,
         private readonly cdr: ChangeDetectorRef,
+        private readonly destroy$: TuiDestroyService,
     ) {}
 
     open(index: number): void {
-        this.activeIndex = index;
-        this.detailInfo = this.data[index];
-        this.cdr.detectChanges();
-
+        this.activeIndex$.next(index);
         this.viewTransitionService
             .startViewTransition(() => {
-                this.showDetails = true;
+                this.detailInfo$.next(this.data[index]);
                 this.cdr.detectChanges();
             })
+            .pipe(takeUntil(this.destroy$))
             .subscribe();
     }
 
     close(): void {
         this.viewTransitionService
             .startViewTransition(() => {
-                this.showDetails = false;
+                this.detailInfo$.next(undefined);
                 this.cdr.detectChanges();
+                this.activeIndex$.next(-1);
             })
-            .pipe(
-                finalize(() => {
-                    this.activeIndex = -1;
-                    this.detailInfo = undefined;
-                }),
-            )
+            .pipe(takeUntil(this.destroy$))
             .subscribe();
     }
 }
diff --git a/apps/demo/src/app/pages/view-transition/view-transition-page.module.ts b/apps/demo/src/app/pages/view-transition/view-transition-page.module.ts
@@ -4,12 +4,14 @@ import {RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {HighlightModule} from 'ngx-highlightjs';
 import {TuiLinkModule} from '@taiga-ui/core';
+import {TuiLetModule} from '@taiga-ui/cdk';
 
 @NgModule({
     imports: [
         CommonModule,
         HighlightModule,
         TuiLinkModule,
+        TuiLetModule,
         RouterModule.forChild([{path: '', component: ViewTransitionPageComponent}]),
     ],
     declarations: [ViewTransitionPageComponent],

diff --git a/libs/view-transition/package.json b/libs/view-transition/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ng-web-apis/view-transition",
-    "version": "3.0.2",
+    "version": "3.0.0",
     "description": "This is a library for declarative use of View Transition API with Angular",
     "keywords": [
         "angular",