feat(module:tree-select): support virtual scroll (#5760)

close #5589
NG-ZORRO · Sep 14, 2020 · 1f2d816 · 1f2d816
1 parent 602ea93
commit 1f2d816
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 6 deletions.
diff --git a/components/tree-select/demo/virtual-scroll.md b/components/tree-select/demo/virtual-scroll.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 虚拟滚动
+  en-US: Virtual Scroll
+---
+
+## zh-CN
+
+设定 `nzVirtualHeight` 开启虚拟滚动。
+
+## en-US
+
+Set `nzVirtualHeight` to enable virtual scroll.
diff --git a/components/tree-select/demo/virtual-scroll.ts b/components/tree-select/demo/virtual-scroll.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+
+@Component({
+  selector: 'nz-demo-tree-select-virtual-scroll',
+  template: `
+    <nz-tree-select
+      style="width: 250px"
+      [nzNodes]="nodes"
+      nzShowSearch
+      nzPlaceHolder="Please select"
+      nzVirtualHeight="300px"
+    ></nz-tree-select>
+  `
+})
+export class NzDemoTreeSelectVirtualScrollComponent implements OnInit {
+  nodes: NzTreeNodeOptions[] = [];
+
+  ngOnInit(): void {
+    const dig = (path = '0', level = 3) => {
+      const list = [];
+      for (let i = 0; i < 10; i += 1) {
+        const key = `${path}-${i}`;
+        const treeNode: NzTreeNodeOptions = {
+          title: key,
+          key,
+          expanded: true,
+          children: [],
+          isLeaf: false
+        };
+
+        if (level > 0) {
+          treeNode.children = dig(key, level - 1);
+        } else {
+          treeNode.isLeaf = true;
+        }
+
+        list.push(treeNode);
+      }
+      return list;
+    };
+
+    this.nodes = dig();
+  }
+}
diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
@@ -46,6 +46,10 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzMaxTagCount]` | Max tag count to show| number | - |
 | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
 | `[nzTreeTemplate]` | Custom Nodes | `TemplateRef<{ $implicit: NzTreeNode }>` | - |
+| `[nzVirtualHeight]` | The height of virtual scroll | `string` | `-` |
+| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
+| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `500` |
+| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
 | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed |`EventEmitter<NzFormatEmitEvent>` | - |
 
 #### Methods

diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
@@ -46,6 +46,10 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
 | `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
 | `[nzTreeTemplate]` | 自定义节点 | `TemplateRef<{ $implicit: NzTreeNode }>` | - |
+| `[nzVirtualHeight]` | 虚拟滚动的总高度 | `string` | `-` |
+| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
+| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `500` |
+| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
 | `(nzExpandChange)` | 点击展开树节点图标调用 | `EventEmitter<NzFormatEmitEvent>` | - |
 
 #### 方法

diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
@@ -88,6 +88,7 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
           [hidden]="isNotFound"
           nzNoAnimation
           nzSelectMode
+          nzBlockNode
           [nzData]="nzNodes"
           [nzMultiple]="nzMultiple"
           [nzSearchValue]="inputValue"
@@ -104,6 +105,10 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
           [nzSelectedKeys]="!nzCheckable ? value : []"
           [nzTreeTemplate]="treeTemplate"
           [nzCheckStrictly]="nzCheckStrictly"
+          [nzVirtualItemSize]="nzVirtualItemSize"
+          [nzVirtualMaxBufferPx]="nzVirtualMaxBufferPx"
+          [nzVirtualMinBufferPx]="nzVirtualMinBufferPx"
+          [nzVirtualHeight]="nzVirtualHeight"
           (nzExpandChange)="onExpandedKeysChange($event)"
           (nzClick)="nzTreeClick.emit($event)"
           (nzCheckedKeysChange)="updateSelectedNodes()"
@@ -231,6 +236,10 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   @Input() @InputBoolean() nzMultiple = false;
   @Input() @InputBoolean() nzDefaultExpandAll = false;
   @Input() @InputBoolean() nzCheckStrictly = false;
+  @Input() nzVirtualItemSize = 28;
+  @Input() nzVirtualMaxBufferPx = 500;
+  @Input() nzVirtualMinBufferPx = 28;
+  @Input() nzVirtualHeight: string | null = null;
   @Input() nzExpandedIcon?: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
   @Input() nzNotFoundContent?: string;
   @Input() nzNodes: Array<NzTreeNode | NzTreeNodeOptions> = [];

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -42,9 +42,9 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
 | `[nzSearchFunc]` | Custom matching method, used with nzSearchValue | `(node: NzTreeNodeOptions) => boolean` | `null` |
 | `[nzBeforeDrop]` | Drop before the second check, allowing the user to decide whether to allow placement | `(confirm: NzFormatBeforeDropEvent) => Observable<boolean>` | - |
 | `[nzVirtualHeight]` | The height of virtual scroll | `string` | `-` |
-| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` |
-| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` |
-| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` |
+| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
+| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `500` |
+| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
 | `(nzClick)` | Callback function for when the user clicks a treeNode | `EventEmitter<NzFormatEmitEvent>` | - |
 | `(nzDblClick)` | Callback function for when the user double clicks a treeNode | `EventEmitter<NzFormatEmitEvent>` | - |
 | `(nzContextMenu)` | Callback function for when the user right clicks a treeNode | `EventEmitter<NzFormatEmitEvent>` | - |

diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
@@ -43,9 +43,9 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
 | `[nzSearchFunc]` | 自定义匹配方法，配合 nzSearchValue 使用 | `(node: NzTreeNodeOptions) => boolean` | `null` |
 | `[nzBeforeDrop]` | drop前二次校验,允许用户自行决定是否允许放置 | `(confirm: NzFormatBeforeDropEvent) => Observable<boolean>` | - |
 | `[nzVirtualHeight]` | 虚拟滚动的总高度 | `string` | `-` |
-| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` |
-| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` |
-| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `100` |
+| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
+| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `500` |
+| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
 | `(nzClick)` | 点击树节点触发 | `EventEmitter<NzFormatEmitEvent>` | - |
 | `(nzDblClick)` | 双击树节点触发 | `EventEmitter<NzFormatEmitEvent>` | - |
 | `(nzContextMenu)` | 右键树节点触发 | `EventEmitter<NzFormatEmitEvent>` | - |