feat(module:mention): add prefix property to nzOnSearchChange payload (…

…#1296)

components/mention/demo/async.ts

@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { MentionOnSearchTypes } from 'ng-zorro-antd';
 
 @Component({
   selector     : 'nz-demo-mention-async',
@@ -20,7 +21,7 @@ export class NzDemoMentionAsyncComponent {
   loading = false;
   suggestions = [];
 
-  onSearchChange(value: string): void {
+  onSearchChange({value}: MentionOnSearchTypes): void {
     console.log(`search: ${value}`);
     this.loading = true;
     this.fetchSuggestions(value, (suggestions) => {

components/mention/demo/multiple-trigger.ts

@@ -1,11 +1,13 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { MentionOnSearchTypes } from 'ng-zorro-antd';
 
 @Component({
   selector     : 'nz-demo-mention-multiple-trigger',
   encapsulation: ViewEncapsulation.None,
   template     : `
   <nz-mention
     [nzSuggestions]="suggestions"
+    (nzOnSearchChange)="onSearchChange($event)"
     [nzPrefix]="['#', '@']">
     <input
       placeholder="input @ to mention people, # to mention tag"
@@ -17,6 +19,13 @@ import { Component, ViewEncapsulation } from '@angular/core';
 })
 export class NzDemoMentionMultipleTriggerComponent {
   inputValue: string;
-  suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
+  suggestions = [];
+  users = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
+  tags = ['1.0', '2.0', '3.0'];
+
+  onSearchChange({value, prefix}: MentionOnSearchTypes): void {
+    console.log('nzOnSearchChange', value, prefix);
+    this.suggestions = prefix === '@' ? this.users : this.tags;
+  }
 
 }

components/mention/doc/index.en-US.md

@@ -35,7 +35,7 @@ When need to mention someone or something.
 | nzSuggestions | Suggestion content | `any[]` | `[]` |
 | nzValueWith | Function that maps an suggestion's value  | `(any) => string` | `(value: string) => string` |
 | (nzOnSelect) | Callback function called when select from suggestions | `EventEmitter<any>` | - |
-| (onSearchChange) | Callback function called when search content changes| `EventEmitter<string>` | - |
+| (onSearchChange) | Callback function called when search content changes| `EventEmitter<MentionOnSearchTypes>` | - |
 
 ### Methods
 
@@ -72,3 +72,9 @@ Customize the suggestion template
   </nz-mention>
 ```
 
+### MentionOnSearchTypes
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| value | Search keyword | string | - |
+| prefix | prefix | string | - |

components/mention/doc/index.zh-CN.md

@@ -36,7 +36,7 @@ title: Mention
 | nzSuggestions | 建议内容 | `any[]` | `[]` |
 | nzValueWith | 建议选项的取值方法  | `(any) => string` | `(value: string) => string` |
 | (nzOnSelect) | 下拉框选择建议时回调 | `EventEmitter<any>` | - |
-| (onSearchChange) | 输入框中 @ 变化时回调 | `EventEmitter<string>` | - |
+| (onSearchChange) | 输入框中 @ 变化时回调 | `EventEmitter<MentionOnSearchTypes>` | - |
 
 ### 方法
 
@@ -71,4 +71,11 @@ title: Mention
         <span>{{ item.label }} - {{ item.value }}</span>
     </ng-container>
   </nz-mention>
-```
+```
+
+### MentionOnSearchTypes
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 搜索关键词 | string | - |
+| prefix | 触发前缀 | string | - |

components/mention/mention.component.ts

@@ -15,6 +15,11 @@ import { getCaretCoordinates } from '../core/util/textarea-caret-position';
 import { NzMentionSuggestionDirective } from './mention-suggestions';
 import { NzMentionTriggerDirective } from './mention-trigger';
 
+export interface MentionOnSearchTypes {
+  value: string;
+  prefix: string;
+}
+
 @Component({
   selector: 'nz-mention',
   templateUrl: './mention.component.html',
@@ -34,7 +39,7 @@ import { NzMentionTriggerDirective } from './mention-trigger';
 export class NzMentionComponent implements OnDestroy, AfterContentInit {
 
   @Output() nzOnSelect: EventEmitter<string | {}> = new EventEmitter();
-  @Output() nzOnSearchChange: EventEmitter<string> = new EventEmitter();
+  @Output() nzOnSearchChange: EventEmitter<MentionOnSearchTypes> = new EventEmitter();
 
   @Input() nzValueWith: (value: any) => string = value => value; // tslint:disable-line:no-any
   @Input() nzPrefix: string | string[] = '@';
@@ -171,12 +176,16 @@ export class NzMentionComponent implements OnDestroy, AfterContentInit {
   }
 
   private suggestionsFilter(value: string, emit: boolean): void {
+    const suggestions = value.substring(1);
     if (this.previousValue === value) { return; }
     this.previousValue = value;
     if (emit) {
-      this.nzOnSearchChange.emit(this.cursorMention);
+      this.nzOnSearchChange.emit({
+        value: this.cursorMention.substring(1),
+        prefix:  this.cursorMention[0]
+      });
     }
-    const searchValue = value.toLowerCase();
+    const searchValue = suggestions.toLowerCase();
     this.filteredSuggestions = this.nzSuggestions
     .filter(suggestion => this.nzValueWith(suggestion).toLowerCase().includes(searchValue));
   }
@@ -188,7 +197,7 @@ export class NzMentionComponent implements OnDestroy, AfterContentInit {
       return;
     }
     this.suggestionsFilter(this.cursorMention, emit);
-    const activeIndex = this.filteredSuggestions.indexOf(this.cursorMention);
+    const activeIndex = this.filteredSuggestions.indexOf(this.cursorMention.substring(1));
     this.activeIndex = activeIndex >= 0 ? activeIndex : 0;
     this.openDropdown();
   }
@@ -227,7 +236,7 @@ export class NzMentionComponent implements OnDestroy, AfterContentInit {
         this.cursorMentionStart =  -1;
         this.cursorMentionEnd =  -1;
       } else {
-        this.cursorMention =  mention.substring(1);
+        this.cursorMention =  mention;
         this.cursorMentionStart =  startPos;
         this.cursorMentionEnd =  endPos;
         return;

components/mention/mention.spec.ts

@@ -474,7 +474,6 @@ class NzTestSimpleMentionComponent {
     [nzValueWith]="valueWith"
     [nzPrefix]="prefix"
     [nzPlacement]="'top'"
-    (nzOnSearchChange)="onSearchChange($event)"
     [nzLoading]="loading">
      <textarea
         nz-input