();
@ViewChild('scrollRef') private scrollRef?: ElementRef;
@ViewChild('previewRef') private previewRef?: PreviewComponent;
+ @ViewChild('searchRef') private searchRef?: SearchComponent;
@ViewChildren('categoryRef')
private categoryRefs?: QueryList;
scrollHeight = 0;
clientHeight = 0;
selected?: string;
+ nextScroll?: string;
scrollTop?: number;
firstRender = true;
recent?: string[];
@@ -114,7 +121,10 @@ export class PickerComponent implements OnInit, AfterViewInit {
this.set
}/sheets-256/${this.sheetSize}.png`
- constructor(private frequently: EmojiFrequentlyService) {}
+ constructor(
+ private ref: ChangeDetectorRef,
+ private frequently: EmojiFrequentlyService,
+ ) {}
ngOnInit() {
// measure scroll
@@ -150,12 +160,7 @@ export class PickerComponent implements OnInit, AfterViewInit {
});
}
- for (
- let categoryIndex = 0;
- categoryIndex < allCategories.length;
- categoryIndex++
- ) {
- const category = allCategories[categoryIndex];
+ for (const category of allCategories) {
const isIncluded =
this.include && this.include.length
? this.include.indexOf(category.id) > -1
@@ -212,12 +217,17 @@ export class PickerComponent implements OnInit, AfterViewInit {
this.categories.unshift(this.SEARCH_CATEGORY);
this.selected = this.categories.filter(category => category.first)[0].name;
- }
+ this.activeCategories = this.categories.slice(0, 3);
+ setTimeout(() => {
+ this.activeCategories = this.categories;
+ this.ref.markForCheck();
+ this.updateCategoriesSize();
+ });
+ }
ngAfterViewInit() {
this.updateCategoriesSize();
}
-
updateCategoriesSize() {
this.categoryRefs!.forEach(component => component.memoizeSize());
@@ -227,90 +237,63 @@ export class PickerComponent implements OnInit, AfterViewInit {
this.clientHeight = target.clientHeight;
}
}
-
handleAnchorClick($event: { category: EmojiCategory; index: number }) {
const component = this.categoryRefs!.find(n => n.id === $event.category.id);
- let scrollToComponent = null;
-
- scrollToComponent = () => {
- if (component) {
- let { top } = component;
-
- if ($event.category.first) {
- top = 0;
- } else {
- top += 1;
- }
- this.scrollRef!.nativeElement.scrollTop = top;
- }
- };
if (this.SEARCH_CATEGORY.emojis) {
- // this.handleSearch(null);
- // this.search.clear();
+ this.handleSearch(null);
+ this.searchRef!.clear();
+ }
+ if (component) {
+ let { top } = component;
- window.requestAnimationFrame(scrollToComponent);
- } else {
- scrollToComponent();
+ if ($event.category.first) {
+ top = 0;
+ } else {
+ top += 1;
+ }
+ this.scrollRef!.nativeElement.scrollTop = top;
}
+ this.selected = $event.category.name;
+ this.nextScroll = $event.category.name;
}
categoryTrack(index: number, item: any) {
return item.id;
}
handleScroll() {
+ if (this.nextScroll) {
+ this.selected = this.nextScroll;
+ this.nextScroll = undefined;
+ return;
+ }
if (!this.scrollRef) {
return;
}
let activeCategory = null;
- let scrollTop;
-
if (this.SEARCH_CATEGORY.emojis) {
activeCategory = this.SEARCH_CATEGORY;
} else {
const target = this.scrollRef.nativeElement;
- scrollTop = target.scrollTop;
- const scrollingDown = scrollTop > (this.scrollTop || 0);
- let minTop = 0;
-
- for (let i = 0, l = this.categories.length; i < l; i++) {
- const ii = scrollingDown ? this.categories.length - 1 - i : i;
- const category = this.categories[ii];
- const component = this.categoryRefs!.find(n => n.id === category.id);
-
- if (component) {
- const active = component.handleScroll(scrollTop);
-
- if (!minTop || component.top < minTop) {
- if (component.top > 0) {
- minTop = component.top;
- }
- }
-
- if (active && !activeCategory) {
+ // check scroll is not at bottom
+ if (target.scrollHeight - target.scrollTop !== this.clientHeight) {
+ for (const category of this.categories) {
+ const component = this.categoryRefs!.find(n => n.id === category.id);
+ const active = component!.handleScroll(target.scrollTop);
+ if (active) {
activeCategory = category;
}
}
- }
-
- if (scrollTop < minTop) {
- activeCategory = this.categories.filter(
- category => !(category.anchor === false),
- )[0];
- } else if (scrollTop + this.clientHeight >= this.scrollHeight) {
+ } else {
+ // scrolled to bottom activate last category
activeCategory = this.categories[this.categories.length - 1];
}
- }
+ this.scrollTop = target.scrollTop;
+ }
if (activeCategory) {
- const { name: categoryName } = activeCategory;
-
- if (this.selected !== categoryName) {
- this.selected = categoryName;
- }
+ this.selected = activeCategory.name;
}
-
- this.scrollTop = scrollTop;
}
handleSearch($emojis: any) {
this.SEARCH_CATEGORY.emojis = $emojis;
diff --git a/src/lib/picker/search.component.ts b/src/lib/picker/search.component.ts
index a077be48..aa083a93 100644
--- a/src/lib/picker/search.component.ts
+++ b/src/lib/picker/search.component.ts
@@ -1,6 +1,5 @@
import {
AfterViewInit,
- ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
@@ -21,8 +20,6 @@ import { EmojiSearch } from './emoji-search.service';
/>
`,
- styles: [],
- changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
})
export class SearchComponent implements AfterViewInit {
@@ -45,6 +42,9 @@ export class SearchComponent implements AfterViewInit {
this.inputRef.nativeElement.focus();
}
}
+ clear() {
+ this.query = '';
+ }
handleEnterKey($event: Event) {
this.enterKey.emit($event);
$event.preventDefault();