feat: allow anchor and search icons to be overridden

scttcper · Aug 7, 2018 · f4cee5f · f4cee5f
1 parent dc1e7ae
commit f4cee5f
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -23,13 +23,23 @@ This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by
 - [Installation](#installation)
 - [Components](#components)
   - [Picker](#picker)
+    - [I18n](#i18n)
+    - [Sheet sizes](#sheet-sizes)
+    - [Examples of `emoji` object:](#examples-of-emoji-object)
   - [Emoji](#emoji)
+    - [Unsupported emojis fallback](#unsupported-emojis-fallback)
 - [Custom emojis](#custom-emojis)
 - [Headless search](#headless-search)
 - [Storage](#storage)
 - [Features](#features)
   - [Powerful search](#powerful-search)
+    - [Short name, name and keywords](#short-name-name-and-keywords)
+    - [Emoticons](#emoticons)
   - [Fully customizable](#fully-customizable)
+    - [Anchors color, title and default emoji](#anchors-color-title-and-default-emoji)
+    - [Emojis sizes and length](#emojis-sizes-and-length)
+    - [Default skin color](#default-skin-color)
+    - [Multiple sets supported](#multiple-sets-supported)
 
 ## Installation
 
@@ -89,6 +99,9 @@ use component
 | **style**              |                           | Inline styles applied to the root element. Useful for positioning                                                                                                     |
 | **title**              | `Emoji Mart™`             | The title shown when no emojis are hovered                                                                                                                            |
 | **hideObsolete**       | `true`                    | Hides ex: "cop" emoji in favor of female and male emoji                                                                                                               |
+| **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                                                                                                                               |
 
 #### I18n
 

diff --git a/src/lib/picker/anchors.component.ts b/src/lib/picker/anchors.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 
 import { EmojiCategory } from '@ctrl/ngx-emoji-mart/ngx-emoji';
-import { categories } from './svgs';
 
 @Component({
   selector: 'emoji-mart-anchors',
@@ -24,7 +23,7 @@ import { categories } from './svgs';
       >
         <div>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <path [attr.d]="svgs[category.id]" />
+            <path [attr.d]="icons[category.id]" />
           </svg>
         </div>
         <span
@@ -43,8 +42,8 @@ export class AnchorsComponent {
   @Input() color?: string;
   @Input() selected?: string;
   @Input() i18n: any;
+  @Input() icons?: { [key: string]: string };
   @Output() anchorClick = new EventEmitter<{ category: EmojiCategory, index: number }>();
-  svgs = categories;
 
   trackByFn(idx: number, cat: EmojiCategory) {
     return cat.id;

diff --git a/src/lib/picker/category.component.ts b/src/lib/picker/category.component.ts
@@ -49,7 +49,7 @@ import { EmojiFrequentlyService } from './emoji-frequently.service';
     <div *ngIf="emojis && !emojis.length">
       <div>
         <ngx-emoji
-          emoji="sleuth_or_spy"
+          [emoji]="notFoundEmoji"
           size="38"
           [skin]="emojiSkin"
           [native]="emojiNative"
@@ -82,6 +82,7 @@ export class CategoryComponent implements OnInit {
   @Input() i18n: any;
   @Input() id: any;
   @Input() hideObsolete = true;
+  @Input() notFoundEmoji?: string;
   @Input() emojiNative?: Emoji['native'];
   @Input() emojiSkin?: Emoji['skin'];
   @Input() emojiSize?: Emoji['size'];

diff --git a/src/lib/picker/picker.component.html b/src/lib/picker/picker.component.html
@@ -8,6 +8,7 @@
       [color]="color"
       [selected]="selected"
       [i18n]="i18n"
+      [icons]="categoriesIcons"
     ></emoji-mart-anchors>
   </div>
   <emoji-search
@@ -19,6 +20,7 @@
     [exclude]="exclude"
     [custom]="custom"
     [autoFocus]="autoFocus"
+    [icons]="searchIcons"
     [emojisToShowFilter]="emojisToShowFilter"
   ></emoji-search>
   <div #scrollRef class="emoji-mart-scroll" (scroll)="handleScroll()">
@@ -33,6 +35,7 @@
       [hasStickyPosition]="native"
       [i18n]="i18n"
       [hideObsolete]="hideObsolete"
+      [notFoundEmoji]="notFoundEmoji"
       [custom]="category.id == RECENT_CATEGORY.id ? CUSTOM_CATEGORY.emojis : undefined"
       [recent]="category.id == RECENT_CATEGORY.id ? recent : undefined"
       [emojiNative]="native"

diff --git a/src/lib/picker/picker.component.ts b/src/lib/picker/picker.component.ts
@@ -23,6 +23,7 @@ import { CategoryComponent } from './category.component';
 import { EmojiFrequentlyService } from './emoji-frequently.service';
 import { PreviewComponent } from './preview.component';
 import { SearchComponent } from './search.component';
+import * as icons from './svgs';
 import { measureScrollbar } from './utils';
 
 
@@ -76,6 +77,9 @@ export class PickerComponent implements OnInit {
   @Input() hideRecent = true;
   @Input() include?: string[];
   @Input() exclude?: string[];
+  @Input() notFoundEmoji = 'sleuth_or_spy';
+  @Input() categoriesIcons = icons.categories;
+  @Input() searchIcons = icons.search;
   @Output() emojiClick = new EventEmitter<any>();
   @Output() emojiSelect = new EventEmitter<any>();
   @ViewChild('scrollRef') private scrollRef!: ElementRef;
@@ -194,6 +198,9 @@ export class PickerComponent implements OnInit {
       } else {
         this.categories.push(category);
       }
+
+      this.categoriesIcons = { ...icons.categories, ...this.categoriesIcons };
+      this.searchIcons = { ...icons.search, ...this.searchIcons };
     }
 
     const includeRecent =
@@ -282,7 +289,7 @@ export class PickerComponent implements OnInit {
         // scrolling
         for (const category of this.categories) {
           const component = this.categoryRefs.find(n => n.id === category.id);
-          const active = component.handleScroll(target.scrollTop);
+          const active = component!.handleScroll(target.scrollTop);
           if (active) {
             activeCategory = category;
           }

diff --git a/src/lib/picker/search.component.ts b/src/lib/picker/search.component.ts
@@ -4,12 +4,12 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnInit,
   Output,
   ViewChild,
 } from '@angular/core';
-import { EmojiSearch } from './emoji-search.service';
 
-import { search as icons } from './svgs';
+import { EmojiSearch } from './emoji-search.service';
 
 @Component({
   selector: 'emoji-search',
@@ -31,23 +31,27 @@ import { search as icons } from './svgs';
   `,
   preserveWhitespaces: false,
 })
-export class SearchComponent implements AfterViewInit {
+export class SearchComponent implements AfterViewInit, OnInit {
   @Input() maxResults = 75;
   @Input() autoFocus = false;
   @Input() i18n: any;
   @Input() include: string[] = [];
   @Input() exclude: string[] = [];
   @Input() custom: any[] = [];
+  @Input() icons?: { [key: string]: string };
   @Input() emojisToShowFilter?: (x: any) => boolean;
   @Output() search = new EventEmitter<any>();
   @Output() enterKey = new EventEmitter<any>();
   @ViewChild('inputRef') private inputRef!: ElementRef;
   isSearching = false;
-  icon = icons.search;
+  icon?: string;
   query = '';
 
   constructor(private emojiSearch: EmojiSearch) {}
 
+  ngOnInit() {
+    this.icon = this.icons!.search;
+  }
   ngAfterViewInit() {
     if (this.autoFocus) {
       this.inputRef.nativeElement.focus();
@@ -63,10 +67,10 @@ export class SearchComponent implements AfterViewInit {
   }
   handleSearch(value: string) {
     if (value === '') {
-      this.icon = icons.search;
+      this.icon = this.icons!.search;
       this.isSearching = false;
     } else {
-      this.icon = icons.delete;
+      this.icon = this.icons!.delete;
       this.isSearching = true;
     }
     this.search.emit(