From d9b83a8c360e5f70f8d532d7da95cf296ebe82bd Mon Sep 17 00:00:00 2001 From: Wendell Date: Mon, 1 Oct 2018 22:55:07 +0800 Subject: [PATCH] fix(module:cascader): fix support to nzLabelProperty close #2103 --- components/cascader/nz-cascader.component.ts | 28 ++++++++++++-------- components/cascader/nz-cascader.spec.ts | 28 ++++++++++++++++++++ components/select/demo/token.md | 14 ++++++++++ components/select/demo/token.ts | 0 4 files changed, 59 insertions(+), 11 deletions(-) create mode 100644 components/select/demo/token.md create mode 100644 components/select/demo/token.ts diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts index 246877ab1f5..f994958abd1 100644 --- 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 index aa69060f58a..057440e127c 100644 --- 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 { @@ -1644,28 +1665,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 } ] } ] diff --git a/components/select/demo/token.md b/components/select/demo/token.md new file mode 100644 index 00000000000..0b677a2e0af --- /dev/null +++ b/components/select/demo/token.md @@ -0,0 +1,14 @@ +--- +order: 12 +title: + zh-CN: 自动分词 + en-US: Search and Select Users +--- + +## zh-CN + +试下复制 `露西,杰克` 到输入框里。只在 tags 和 multiple 模式下可用。 + +## en-US + +Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode. diff --git a/components/select/demo/token.ts b/components/select/demo/token.ts new file mode 100644 index 00000000000..e69de29bb2d