fix(module:cascader): fix support to nzLabelProperty (#2231)

close #2103
NG-ZORRO · Oct 18, 2018 · 37523c8 · 37523c8
1 parent ab3cdfb
commit 37523c8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -74,6 +74,7 @@ export interface CascaderSearchOption extends CascaderOption {
 
 export interface NzShowSearchOptions {
   filter?(inputValue: string, path: CascaderOption[]): boolean;
+
   sorter?(a: CascaderOption[], b: CascaderOption[], inputValue: string): number;
 }
 
@@ -1207,18 +1208,20 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     const defaultFilter = (inputValue: string, p: CascaderOption[]): boolean => {
       let flag = false;
       p.forEach(n => {
-        if (n.label.indexOf(inputValue) > -1) {
+        const labelName = this.nzLabelProperty;
+        if (n[ labelName ] && n[ labelName ].indexOf(inputValue) > -1) {
           flag = true;
         }
       });
       return flag;
     };
+
     const filter: (inputValue: string, p: CascaderOption[]) => boolean =
-            this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).filter ?
-              (this.nzShowSearch as NzShowSearchOptions).filter :
-              defaultFilter;
+      this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).filter
+        ? (this.nzShowSearch as NzShowSearchOptions).filter
+        : defaultFilter;
     const sorter: (a: CascaderOption[], b: CascaderOption[], inputValue: string) => number =
-            this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).sorter;
+      this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).sorter;
     const loopParent = (node: CascaderOption, forceDisabled = false) => {
       const disabled = forceDisabled || node.disabled;
       path.push(node);
@@ -1241,17 +1244,20 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
       const cPath = Array.from(path);
       if (filter(this._inputValue, cPath)) {
         const disabled = forceDisabled || node.disabled;
-        results.push({
+        const option: CascaderSearchOption = {
           disabled,
-          isLeaf: true,
-          path  : cPath,
-          label : cPath.map(p => p.label).join(' / ')
-        } as CascaderSearchOption);
+          isLeaf                             : true,
+          path                               : cPath,
+          [ this.nzLabelProperty ]: cPath.map(p => p.label).join(' / ')
+        };
+        results.push(option);
       }
       path.pop();
     };
 
-    this.oldColumnsHolder[ 0 ].forEach(node => (node.isLeaf || !node.children || !node.children.length) ? loopChild(node) : loopParent(node));
+    this.oldColumnsHolder[ 0 ].forEach(node => (node.isLeaf || !node.children || !node.children.length)
+      ? loopChild(node)
+      : loopParent(node));
     if (sorter) {
       results.sort((a, b) => sorter(a.path, b.path, this._inputValue));
     }

diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts
@@ -1325,6 +1325,27 @@ describe('cascader', () => {
         done();
       });
     });
+    it('should support nzLabelProperty', (done) => {
+      testComponent.nzShowSearch = true;
+      testComponent.nzLabelProperty = 'l';
+      fixture.detectChanges();
+      cascader.nativeElement.click();
+      fixture.detectChanges();
+      testComponent.cascader.inputValue = 'o';
+      testComponent.cascader.setMenuVisible(true);
+      fixture.detectChanges();
+      const itemEl1 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(1) .ant-cascader-menu-item:nth-child(1)') as HTMLElement;
+      expect(testComponent.cascader.inSearch).toBe(true);
+      expect(itemEl1.innerText).toBe('Zhejiang / Hangzhou / West Lake');
+      itemEl1.click();
+      fixture.whenStable().then(() => {
+        expect(testComponent.cascader.inSearch).toBe(false);
+        expect(testComponent.cascader.menuVisible).toBe(false);
+        expect(testComponent.cascader.inputValue).toBe('');
+        expect(testComponent.values.join(',')).toBe('zhejiang,hangzhou,xihu');
+        done();
+      });
+    });
     it('should support custom filter', (done) => {
       testComponent.nzShowSearch = {
         filter(inputValue: string, path: CascaderOption[]): boolean {
@@ -1643,28 +1664,35 @@ const ID_NAME_LIST = [ {
 const options1 = [ {
   value   : 'zhejiang',
   label   : 'Zhejiang',
+  l       : 'Zhejiang',
   children: [ {
     value   : 'hangzhou',
     label   : 'Hangzhou',
+    l       : 'Hangzhou',
     children: [ {
       value : 'xihu',
+      l     : 'West Lake',
       label : 'West Lake',
       isLeaf: true
     } ]
   }, {
     value : 'ningbo',
     label : 'Ningbo',
+    l     : 'Ningbo',
     isLeaf: true
   } ]
 }, {
   value   : 'jiangsu',
   label   : 'Jiangsu',
+  l       : 'Jiangsu',
   children: [ {
     value   : 'nanjing',
     label   : 'Nanjing',
+    l       : 'Nanjing',
     children: [ {
       value : 'zhonghuamen',
       label : 'Zhong Hua Men',
+      l     : 'Zhong Hua Men',
       isLeaf: true
     } ]
   } ]