From ee6d18bf901396749fbfc34418d7dd9359dbdc61 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Thu, 25 Apr 2019 13:04:45 +0800 Subject: [PATCH] feat(module:tree-select): add the public methods (#3335) --- components/core/tree/nz-tree-base.ts | 94 +++++++++++++++++++ components/core/tree/public-api.ts | 1 + components/tree-select/doc/index.en-US.md | 12 +++ components/tree-select/doc/index.zh-CN.md | 12 +++ .../tree-select/nz-tree-select.component.ts | 18 ++-- components/tree/nz-tree.component.ts | 63 ++----------- 6 files changed, 132 insertions(+), 68 deletions(-) create mode 100644 components/core/tree/nz-tree-base.ts diff --git a/components/core/tree/nz-tree-base.ts b/components/core/tree/nz-tree-base.ts new file mode 100644 index 00000000000..09997a6dff0 --- /dev/null +++ b/components/core/tree/nz-tree-base.ts @@ -0,0 +1,94 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { NzTreeNode } from './nz-tree-base-node'; +import { NzTreeBaseService } from './nz-tree-base.service'; + +export class NzTreeBase { + constructor(public nzTreeService: NzTreeBaseService) {} + + /** + * Coerces a value({@link any[]}) to a TreeNodes({@link NzTreeNode[]}) + */ + coerceTreeNodes( + // tslint:disable-next-line:no-any + value: any[] + ): NzTreeNode[] { + let nodes: NzTreeNode[] = []; + if (!this.nzTreeService.isArrayOfNzTreeNode(value)) { + // has not been new NzTreeNode + nodes = value.map(item => new NzTreeNode(item, null, this.nzTreeService)); + } else { + nodes = value.map((item: NzTreeNode) => { + item.service = this.nzTreeService; + return item; + }); + } + return nodes; + } + + /** + * Get all nodes({@link NzTreeNode}) + */ + getTreeNodes(): NzTreeNode[] { + return this.nzTreeService.rootNodes; + } + + /** + * Get {@link NzTreeNode} with key + */ + getTreeNodeByKey(key: string): NzTreeNode | null { + // flat tree nodes + const nodes: NzTreeNode[] = []; + const getNode = (node: NzTreeNode): void => { + nodes.push(node); + node.getChildren().forEach(n => { + getNode(n); + }); + }; + this.getTreeNodes().forEach(n => { + getNode(n); + }); + return nodes.find(n => n.key === key) || null; + } + + /** + * Get checked nodes(merged) + */ + getCheckedNodeList(): NzTreeNode[] { + return this.nzTreeService.getCheckedNodeList(); + } + + /** + * Get selected nodes + */ + getSelectedNodeList(): NzTreeNode[] { + return this.nzTreeService.getSelectedNodeList(); + } + + /** + * Get half checked nodes + */ + getHalfCheckedNodeList(): NzTreeNode[] { + return this.nzTreeService.getHalfCheckedNodeList(); + } + + /** + * Get expanded nodes + */ + getExpandedNodeList(): NzTreeNode[] { + return this.nzTreeService.getExpandedNodeList(); + } + + /** + * Get matched nodes(if nzSearchValue is not null) + */ + getMatchedNodeList(): NzTreeNode[] { + return this.nzTreeService.getMatchedNodeList(); + } +} diff --git a/components/core/tree/public-api.ts b/components/core/tree/public-api.ts index 8dee94e3ab8..4a57afa78f4 100644 --- a/components/core/tree/public-api.ts +++ b/components/core/tree/public-api.ts @@ -2,3 +2,4 @@ export * from './nz-tree-base-node'; export * from './nz-tree-base.definitions'; export * from './nz-tree-base.service'; export * from './nz-tree-service.resolver'; +export * from './nz-tree-base'; diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md index 985c4b8b461..65eee48d240 100755 --- a/components/tree-select/doc/index.en-US.md +++ b/components/tree-select/doc/index.en-US.md @@ -45,3 +45,15 @@ import { NzTreeSelectModule } from 'ng-zorro-antd'; | `[nzMaxTagCount]` | Max tag count to show| number | - | | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - | | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed |`EventEmitter` | - | + +#### Methods + +| Property | Description | Type | +| -------- | ----------- | ---- | +| getTreeNodes | get all nodes(NzTreeNode) | `NzTreeNode[]` | +| getTreeNodeByKey | get NzTreeNode with key | `NzTreeNode` | +| getCheckedNodeList | get checked nodes(merged) | `NzTreeNode[]` | +| getSelectedNodeList | get selected nodes | `NzTreeNode[]` | +| getHalfCheckedNodeList | get half checked nodes | `NzTreeNode[]` | +| getExpandedNodeList | get expanded nodes | `NzTreeNode[]` | +| getMatchedNodeList | get matched nodes(if nzSearchValue is not null) | `NzTreeNode[]` | diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md index 1abb88c3152..99c548c761e 100755 --- a/components/tree-select/doc/index.zh-CN.md +++ b/components/tree-select/doc/index.zh-CN.md @@ -45,3 +45,15 @@ import { NzTreeSelectModule } from 'ng-zorro-antd'; | `[nzMaxTagCount]` | 最多显示多少个 tag | number | - | | `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - | | `(nzExpandChange)` | 点击展开树节点图标调用 | `EventEmitter` | - | + +#### 方法 + +| 方法名 | 说明 | 返回值 +| --- | --- | --- | +| getTreeNodes | 获取组件 NzTreeNode 节点 | `NzTreeNode[]` | +| getTreeNodeByKey | 按 key 获取 NzTreeNode 节点 | `NzTreeNode` | +| getCheckedNodeList | 获取组件 checkBox 被点击选中的节点 | `NzTreeNode[]` | +| getSelectedNodeList | 获取组件被选中的节点 | `NzTreeNode[]` | +| getHalfCheckedNodeList | 获取组件半选状态节点 | `NzTreeNode[]` | +| getExpandedNodeList | 获取组件展开状态节点 | `NzTreeNode[]` | +| getMatchedNodeList | 获取组搜索匹配到的节点 | `NzTreeNode[]` | diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts index 98dcade4384..31a1a836aa8 100644 --- a/components/tree-select/nz-tree-select.component.ts +++ b/components/tree-select/nz-tree-select.component.ts @@ -41,6 +41,7 @@ import { NzFormatEmitEvent, NzNoAnimationDirective, NzSizeLDSType, + NzTreeBase, NzTreeBaseService, NzTreeHigherOrderServiceToken, NzTreeNode, @@ -95,7 +96,7 @@ export function higherOrderServiceFactory(injector: Injector): NzTreeBaseService ` ] }) -export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges { +export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAccessor, OnInit, OnDestroy, OnChanges { @Input() @InputBoolean() nzAllowClear = true; @Input() @InputBoolean() nzShowExpand = true; @Input() @InputBoolean() nzShowLine = false; @@ -176,12 +177,13 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe } constructor( + nzTreeService: NzTreeSelectService, private renderer: Renderer2, private cdr: ChangeDetectorRef, - private nzTreeService: NzTreeSelectService, private elementRef: ElementRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective ) { + super(nzTreeService); this.renderer.addClass(this.elementRef.nativeElement, 'ant-select'); } @@ -356,14 +358,8 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe updateSelectedNodes(init: boolean = false): void { if (init) { - let nodes; + const nodes = this.coerceTreeNodes(this.nzNodes); this.nzTreeService.isMultiple = this.isMultiple; - if (!this.nzTreeService.isArrayOfNzTreeNode(this.nzNodes)) { - // has not been new NzTreeNode - nodes = this.nzNodes.map(item => new NzTreeNode(item, undefined, this.nzTreeService)); - } else { - nodes = this.nzNodes.map(item => new NzTreeNode({ ...item.origin }, undefined, this.nzTreeService)); - } this.nzTreeService.initTree(nodes); if (this.nzCheckable) { this.nzTreeService.calcCheckedKeys(this.value, nodes); @@ -371,9 +367,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe this.nzTreeService.calcSelectedKeys(this.value, nodes, this.isMultiple); } } - this.selectedNodes = [ - ...(this.nzCheckable ? this.nzTreeService.getCheckedNodeList() : this.nzTreeService.getSelectedNodeList()) - ]; + this.selectedNodes = [...(this.nzCheckable ? this.getCheckedNodeList() : this.getSelectedNodeList())]; } updatePosition(): void { diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts index 0b673814f1a..9e8f7930d97 100644 --- a/components/tree/nz-tree.component.ts +++ b/components/tree/nz-tree.component.ts @@ -35,6 +35,7 @@ import { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzNoAnimationDirective, + NzTreeBase, NzTreeBaseService, NzTreeHigherOrderServiceToken, NzTreeNode @@ -68,7 +69,7 @@ export function NzTreeServiceFactory( } ] }) -export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges { +export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, ControlValueAccessor, OnChanges { @Input() @InputBoolean() nzShowIcon = false; @Input() @InputBoolean() nzShowExpand = true; @Input() @InputBoolean() nzShowLine = false; @@ -205,48 +206,6 @@ export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor, onChange: (value: NzTreeNode[]) => void = () => null; onTouched: () => void = () => null; - getTreeNodes(): NzTreeNode[] { - return this.nzTreeService.rootNodes; - } - - getTreeNodeByKey(key: string): NzTreeNode | null { - // flat tree nodes - const nodes: NzTreeNode[] = []; - const getNode = (node: NzTreeNode): void => { - nodes.push(node); - node.getChildren().forEach(n => { - getNode(n); - }); - }; - this.nzNodes.forEach(n => { - getNode(n); - }); - return nodes.find(n => n.key === key) || null; - } - - /** - * public function - */ - getCheckedNodeList(): NzTreeNode[] { - return this.nzTreeService.getCheckedNodeList(); - } - - getSelectedNodeList(): NzTreeNode[] { - return this.nzTreeService.getSelectedNodeList(); - } - - getHalfCheckedNodeList(): NzTreeNode[] { - return this.nzTreeService.getHalfCheckedNodeList(); - } - - getExpandedNodeList(): NzTreeNode[] { - return this.nzTreeService.getExpandedNodeList(); - } - - getMatchedNodeList(): NzTreeNode[] { - return this.nzTreeService.getMatchedNodeList(); - } - setClassMap(): void { this.classMap = { [this.prefixCls]: true, @@ -272,28 +231,20 @@ export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor, // tslint:disable-next-line:no-any initNzData(value: any[]): void { - let nzNodes: NzTreeNode[] = []; if (Array.isArray(value)) { - if (!this.nzTreeService.isArrayOfNzTreeNode(value)) { - // has not been new NzTreeNode - nzNodes = value.map(item => new NzTreeNode(item, null, this.nzTreeService)); - } else { - nzNodes = value.map((item: NzTreeNode) => { - item.service = this.nzTreeService; - return item; - }); - } this.nzTreeService.isCheckStrictly = this.nzCheckStrictly; this.nzTreeService.isMultiple = this.nzMultiple; - this.nzTreeService.initTree(nzNodes); + this.nzTreeService.initTree(this.coerceTreeNodes(value)); } } constructor( - public nzTreeService: NzTreeBaseService, + nzTreeService: NzTreeBaseService, private cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective - ) {} + ) { + super(nzTreeService); + } ngOnInit(): void { this.setClassMap();