Merge pull request #3 from andrew-giangrant/feature/virtualize

Feature/virtualize
agiangrant · Mar 26, 2021 · 636fcc1 · 636fcc1
2 parents 31160b6 + f14d4f3
commit 636fcc1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/src/lib/picker/category.component.ts b/src/lib/picker/category.component.ts
@@ -1,3 +1,4 @@
+import { Emoji, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -12,7 +13,6 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { Emoji, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import { Observable, Subject } from 'rxjs';
 import { EmojiFrequentlyService } from './emoji-frequently.service';
 
@@ -35,26 +35,28 @@ import { EmojiFrequentlyService } from './emoji-frequently.service';
       </div>
 
       <div
-        *ngIf="virtualize && filteredEmojis$ | async as filteredEmojis; else normalRenderTemplate"
+        *ngIf="virtualize; else normalRenderTemplate"
       >
-        <ngx-emoji
-          *ngFor="let emoji of filteredEmojis; trackBy: trackById"
-          [emoji]="emoji"
-          [size]="emojiSize"
-          [skin]="emojiSkin"
-          [isNative]="emojiIsNative"
-          [set]="emojiSet"
-          [sheetSize]="emojiSheetSize"
-          [forceSize]="emojiForceSize"
-          [tooltip]="emojiTooltip"
-          [backgroundImageFn]="emojiBackgroundImageFn"
-          [imageUrlFn]="emojiImageUrlFn"
-          [hideObsolete]="hideObsolete"
-          [useButton]="emojiUseButton"
-          (emojiOver)="emojiOver.emit($event)"
-          (emojiLeave)="emojiLeave.emit($event)"
-          (emojiClick)="emojiClick.emit($event)"
-        ></ngx-emoji>
+        <div *ngIf="filteredEmojis$ | async as filteredEmojis">
+          <ngx-emoji
+            *ngFor="let emoji of filteredEmojis; trackBy: trackById"
+            [emoji]="emoji"
+            [size]="emojiSize"
+            [skin]="emojiSkin"
+            [isNative]="emojiIsNative"
+            [set]="emojiSet"
+            [sheetSize]="emojiSheetSize"
+            [forceSize]="emojiForceSize"
+            [tooltip]="emojiTooltip"
+            [backgroundImageFn]="emojiBackgroundImageFn"
+            [imageUrlFn]="emojiImageUrlFn"
+            [hideObsolete]="hideObsolete"
+            [useButton]="emojiUseButton"
+            (emojiOver)="emojiOver.emit($event)"
+            (emojiLeave)="emojiLeave.emit($event)"
+            (emojiClick)="emojiClick.emit($event)"
+          ></ngx-emoji>
+        </div>
       </div>
 
       <div *ngIf="emojis && !emojis.length">
@@ -80,7 +82,7 @@ import { EmojiFrequentlyService } from './emoji-frequently.service';
     </section>
 
     <ng-template #normalRenderTemplate>
-      <div *ngIf="!virtualize && emojis">
+      <div *ngIf="emojis">
         <ngx-emoji
           *ngFor="let emoji of emojis; trackBy: trackById"
           [emoji]="emoji"
@@ -142,6 +144,7 @@ export class CategoryComponent implements OnChanges, OnInit, AfterViewInit {
   minMargin = 0;
   maxMargin = 0;
   top = 0;
+  rows = 0;
 
   constructor(
     public ref: ChangeDetectorRef,
@@ -173,14 +176,16 @@ export class CategoryComponent implements OnChanges, OnInit, AfterViewInit {
       return;
     }
 
-    const parent = this.container.nativeElement.parentNode.parentNode;
-    const { width } = parent.getBoundingClientRect();
+    this.emojis = this.filterEmojis();
 
-    const rows = Math.ceil((this.emojis.length * (this.emojiSize + 12)) / width);
+    const { width } = this.container.nativeElement.getBoundingClientRect();
+
+    const perRow = Math.floor(width / (this.emojiSize + 12));
+    this.rows = Math.ceil(this.emojis.length / perRow);
 
     this.containerStyles = {
       ...this.containerStyles,
-      minHeight: `${rows * (this.emojiSize + 12) + 28}px`,
+      minHeight: `${this.rows * (this.emojiSize + 12) + 28}px`,
     };
 
     this.ref?.detectChanges();
@@ -213,6 +218,8 @@ export class CategoryComponent implements OnChanges, OnInit, AfterViewInit {
 
       if (parentHeight + (parentHeight + this.virtualizeOffset) >= top && -height - (parentHeight + this.virtualizeOffset) <= top) {
         this.filteredEmojisSubject.next(this.emojis);
+      } else {
+        this.filteredEmojisSubject.next([]);
       }
     }
 
@@ -269,4 +276,19 @@ export class CategoryComponent implements OnChanges, OnInit, AfterViewInit {
   trackById(index: number, item: any) {
     return item;
   }
+
+  private filterEmojis(): any[] {
+    const newEmojis = [];
+    for (const emoji of this.emojis || []) {
+      if (!emoji) {
+        continue;
+      }
+      const data = this.emojiService.getData(emoji);
+      if (!data || (data.obsoletedBy && this.hideObsolete) || (!data.unified && !data.custom)) {
+        continue;
+      }
+      newEmojis.push(emoji);
+    }
+    return newEmojis;
+  }
 }
diff --git a/src/lib/picker/ngx-emoji/emoji.component.ts b/src/lib/picker/ngx-emoji/emoji.component.ts
@@ -5,7 +5,6 @@ import {
   Input,
   OnChanges,
   Output,
-  SimpleChanges,
 } from '@angular/core';
 
 import { EmojiData } from './data/data.interfaces';

diff --git a/src/lib/picker/preview.component.ts b/src/lib/picker/preview.component.ts
@@ -1,15 +1,14 @@
+import { Emoji, EmojiData, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
   OnChanges,
-  Output,
-  SimpleChanges,
+  Output
 } from '@angular/core';
 
-import { Emoji, EmojiData, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 
 @Component({
   selector: 'emoji-preview',