feat: add show one category at a time option (#202)

Here's a quick demonstration of the performance that can be gained from only showing one category at a time.
scttcper · Mar 14, 2019 · 3aecbd9 · 3aecbd9
1 parent 31ce681
commit 3aecbd9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,7 @@ use component
 | **notFoundEmoji**      | `sleuth_or_spy`           | The emoji shown when there are no search results                                                                                                                                         |
 | **categoriesIcons**    | see `svgs/index.ts`       | the anchor icons                                                                                                                                                                         |
 | **searchIcons**        | see `svgs/index.ts`       | the search/close icon in the search bar                                                                                                                                                  |
+| **showSingleCategory** |                           | show only one category at a time to increase rendering performance                                                                                                                        |
 
 #### I18n
 

diff --git a/src/lib/picker/picker.component.ts b/src/lib/picker/picker.component.ts
@@ -82,6 +82,7 @@ export class PickerComponent implements OnInit {
   @Input() notFoundEmoji = 'sleuth_or_spy';
   @Input() categoriesIcons = icons.categories;
   @Input() searchIcons = icons.search;
+  @Input() showSingleCategory = false;
   @Output() emojiClick = new EventEmitter<any>();
   @Output() emojiSelect = new EventEmitter<any>();
   @Output() skinChange = new EventEmitter<Emoji['skin']>();
@@ -226,13 +227,21 @@ export class PickerComponent implements OnInit {
     this.categories.unshift(this.SEARCH_CATEGORY);
     this.selected = this.categories.filter(category => category.first)[0].name;
 
-    this.activeCategories = this.categories.slice(0, 3);
+    this.setActiveCategories(this.activeCategories = this.categories.slice(0, 3));
+
     setTimeout(() => {
-      this.activeCategories = this.categories;
+      this.setActiveCategories(this.categories);
       this.ref.markForCheck();
       setTimeout(() => this.updateCategoriesSize());
     });
   }
+  setActiveCategories(categoriesToMakeActive: Array<EmojiCategory>) {
+    if (this.showSingleCategory) {
+      this.activeCategories = categoriesToMakeActive.filter(x => x.name === this.selected);
+    } else {
+      this.activeCategories = categoriesToMakeActive;
+    }
+  }
   updateCategoriesSize() {
     this.categoryRefs.forEach(component => component.memoizeSize());
 
@@ -244,6 +253,8 @@ export class PickerComponent implements OnInit {
   }
   handleAnchorClick($event: { category: EmojiCategory; index: number }) {
     this.updateCategoriesSize();
+    this.selected = $event.category.name;
+    this.setActiveCategories(this.categories);
     const component = this.categoryRefs.find(n => n.id === $event.category.id);
 
     if (this.SEARCH_CATEGORY.emojis) {
@@ -275,6 +286,9 @@ export class PickerComponent implements OnInit {
     if (!this.scrollRef) {
       return;
     }
+    if (this.showSingleCategory) {
+      return;
+    }
 
     let activeCategory = null;
     if (this.SEARCH_CATEGORY.emojis) {