chore(demo): improve icons demonstration (#5860)

taiga-family · Nov 7, 2023 · 0ba65da · 0ba65da
1 parent 6de319f
commit 0ba65da
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 53 deletions.
diff --git a/projects/cdk/directives/for-async/for-async.directive.ts b/projects/cdk/directives/for-async/for-async.directive.ts
@@ -10,6 +10,10 @@ import {
 import {from, of, Subject} from 'rxjs';
 import {concatMap, delay, takeUntil} from 'rxjs/operators';
 
+/**
+ * @deprecated:
+ * remove in v4.0
+ */
 @Directive({selector: '[tuiForAsync][tuiForAsyncOf]'})
 export class TuiForAsyncDirective<T extends readonly any[]>
     implements OnChanges, OnDestroy

diff --git a/projects/cdk/directives/for-async/for-async.module.ts b/projects/cdk/directives/for-async/for-async.module.ts
@@ -3,7 +3,8 @@ import {NgModule} from '@angular/core';
 import {TuiForAsyncDirective} from './for-async.directive';
 
 /**
- * @experimental
+ * @deprecated:
+ * remove in v4.0
  */
 @NgModule({
     declarations: [TuiForAsyncDirective],

diff --git a/projects/demo/src/modules/icons/icons-group/icons-group.module.ts b/projects/demo/src/modules/icons/icons-group/icons-group.module.ts
@@ -4,7 +4,6 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {
     TuiAutoFocusModule,
     TuiFilterPipeModule,
-    TuiForAsyncModule,
     TuiKeysPipeModule,
     TuiLetModule,
 } from '@taiga-ui/cdk';
@@ -19,7 +18,6 @@ import {IconsGroupDirective} from './icons-group.directive';
         CommonModule,
         TuiInputModule,
         TuiBadgeModule,
-        TuiForAsyncModule,
         TuiKeysPipeModule,
         TuiFilterPipeModule,
         TuiHintModule,

diff --git a/projects/demo/src/modules/icons/icons-group/icons-group.template.html b/projects/demo/src/modules/icons/icons-group/icons-group.template.html
@@ -12,39 +12,34 @@ <h2 class="title">Search by name</h2>
 
 <ng-content></ng-content>
 
-<ng-container
-    *tuiLet="{
-        search: (search$ | async) ?? '',
-        timeout: (search$ | async)?.length ?? 0 > 0 ? 0 : 10
-    } as options"
->
-    <ng-container *tuiForAsync="let key of icons | tuiKeys; timeout: options.timeout">
-        <ng-container *ngIf="icons[key] | tuiFilter: matcher : options.search as filtered">
-            <div
-                class="header-group"
-                [attr.data-heading]="key"
-            >
-                <h2 class="title">
-                    {{ key }}
-                </h2>
+<ng-container *ngFor="let key of icons | tuiKeys">
+    <ng-container *ngIf="icons[key] | tuiFilter: matcher : (search$ | async) ?? '' as filtered">
+        <div class="header-group">
+            <h2 class="title">
+                {{ key }}
+            </h2>
 
-                <tui-badge
-                    size="m"
-                    class="badge"
-                    [hoverable]="true"
-                    [status]="filtered.length ? 'success' : 'error'"
-                    [value]="filtered.length.toString()"
-                ></tui-badge>
-            </div>
-            <p *ngIf="!filtered.length">Nothing found</p>
+            <tui-badge
+                size="m"
+                class="badge"
+                [hoverable]="true"
+                [status]="filtered.length ? 'success' : 'error'"
+                [value]="filtered.length.toString()"
+            ></tui-badge>
+        </div>
+        <p *ngIf="!filtered.length">Nothing found</p>
 
-            <div class="icons">
-                <ng-container
-                    *tuiForAsync="let icon of filtered; timeout: options.timeout"
-                    [ngTemplateOutlet]="iconGroup?.template || null"
-                    [ngTemplateOutletContext]="{icon: icon, group: key, copyPath: copyPath}"
-                ></ng-container>
-            </div>
-        </ng-container>
+        <div class="icons">
+            <ng-container
+                *ngFor="let icon of filtered"
+                [ngTemplateOutlet]="iconGroup?.template || null"
+                [ngTemplateOutletContext]="{
+                    icon: icon,
+                    group: key,
+                    copyPath: copyPath,
+                    entry: {isIntersecting: false}
+                }"
+            ></ng-container>
+        </div>
     </ng-container>
 </ng-container>
diff --git a/projects/demo/src/modules/icons/icons.component.ts b/projects/demo/src/modules/icons/icons.component.ts
@@ -48,4 +48,8 @@ export class IconsComponent {
         @Inject(TUI_DEMO_ICONS) readonly icons: DemoTuiIconsTabs,
         @Inject(TuiModeDirective) private readonly mode: TuiModeDirective,
     ) {}
+
+    onIntersection(entries: IntersectionObserverEntry[]): boolean {
+        return entries[entries.length - 1]?.isIntersecting ?? false;
+    }
 }
diff --git a/projects/demo/src/modules/icons/icons.module.ts b/projects/demo/src/modules/icons/icons.module.ts
@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {IntersectionObserverModule} from '@ng-web-apis/intersection-observer';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiActiveZoneModule} from '@taiga-ui/cdk';
 import {
@@ -32,6 +33,7 @@ import {IconsGroupModule} from './icons-group/icons-group.module';
         TuiHostedDropdownModule,
         TuiColorSelectorModule,
         TuiActiveZoneModule,
+        IntersectionObserverModule,
     ],
     declarations: [IconsComponent],
     exports: [IconsComponent],

diff --git a/projects/demo/src/modules/icons/icons.style.less b/projects/demo/src/modules/icons/icons.style.less
@@ -1,7 +1,14 @@
 @import 'taiga-ui-local';
 
+.icon-place {
+    width: 4.25rem;
+    height: 4.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .icon {
-    margin: @space * 3;
     transition: all 0.5s ease-in;
     border: 1px solid var(--tui-base-03);
     box-shadow: 0 0.05rem 0.5rem #3333;

diff --git a/projects/demo/src/modules/icons/icons.template.html b/projects/demo/src/modules/icons/icons.template.html
@@ -35,7 +35,11 @@
             token, which is responsible for removing malicious code from the svg.
         </p>
 
-        <icons-group [icons]="icons[key]">
+        <icons-group
+            waIntersectionObserver
+            waIntersectionThreshold="0.5"
+            [icons]="icons[key]"
+        >
             <div class="icons-customization">
                 <tui-hosted-dropdown
                     tuiDropdownAlign="left"
@@ -82,24 +86,31 @@
             <ng-template
                 iconGroup
                 let-copyPath="copyPath"
+                let-entry="entry"
                 let-icon="icon"
             >
-                <button
-                    appearance="icon"
-                    size="m"
-                    title="Copy"
-                    tuiIconButton
-                    type="button"
-                    class="icon"
-                    [attr.aria-label]="icon"
-                    [class.t-appearance]="appearance"
-                    [class.t-background]="transparent"
-                    [class.t-wrapper-icons_dark]="(mode$ | async) === 'onDark'"
-                    [icon]="icon"
-                    [style.--tui-text-01-night]="color"
-                    [style.--tui-text-01]="color"
-                    (click)="copyPath(icon)"
-                ></button>
+                <div
+                    class="icon-place"
+                    (waIntersectionObservee)="entry.isIntersecting = entry.isIntersecting || onIntersection($event)"
+                >
+                    <button
+                        *ngIf="entry.isIntersecting"
+                        appearance="icon"
+                        size="m"
+                        title="Copy"
+                        tuiIconButton
+                        type="button"
+                        class="icon"
+                        [attr.aria-label]="icon"
+                        [class.t-appearance]="appearance"
+                        [class.t-background]="transparent"
+                        [class.t-wrapper-icons_dark]="(mode$ | async) === 'onDark'"
+                        [icon]="icon"
+                        [style.--tui-text-01-night]="color"
+                        [style.--tui-text-01]="color"
+                        (click)="copyPath(icon)"
+                    ></button>
+                </div>
             </ng-template>
         </icons-group>
     </ng-template>