feat(module:tree-select): support to set placement (#7551)

* feat(module:tree-select): add status add 'nzStatus' , display diffrent status of tree-select * docs update 'nzStatus' docs * test add 'nzStatus' tests * docs(module:tree-select): update status docs * update 'status' demo * fix(module:tree-select): add 'NzSpaceModule' * fix module of demo need to depend on NzSpaceModule * feat(module:tree-select): add placement add 'nzPlacement' , display drop on diffrent placement of tree-select * docs update 'nzPlacement' docs * style(module:tree-select): update code style * style update code style * fix(module:tree-select): update nzPlacement * fix(module:tree-select): update nzPlacement * fix(module:tree-select): update nzPlacement * fix(module:tree-select): update nzPlacement demo Co-authored-by: wethin <806769481@qq.com>
NG-ZORRO · Dec 11, 2022 · 325971e · 325971e
1 parent 5bdf244
commit 325971e
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 4 deletions.
diff --git a/components/tree-select/demo/module b/components/tree-select/demo/module
@@ -1,7 +1,8 @@
 import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { FormsModule } from '@angular/forms';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 
-export const moduleList = [ FormsModule, NzTreeSelectModule, NzIconModule , NzSpaceModule];
+export const moduleList = [ FormsModule, NzTreeSelectModule, NzIconModule , NzRadioModule , NzSpaceModule];
diff --git a/components/tree-select/demo/placement.md b/components/tree-select/demo/placement.md
@@ -0,0 +1,13 @@
+---
+order: 7
+title:
+  zh-CN: 位置
+  en-US: Placement
+---
+
+## zh-CN
+
+可以通过 `nzPlacement` 手动指定弹出的位置。
+## en-US
+
+You can manually specify the position of the popup via `nzPlacement`.
diff --git a/components/tree-select/demo/placement.ts b/components/tree-select/demo/placement.ts
@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+export type NzPlacementType = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | '';
+
+@Component({
+  selector: 'nz-demo-tree-select-placement',
+  template: `
+    <nz-space nzDirection="vertical" style="width:100%;">
+      <nz-radio-group *nzSpaceItem [(ngModel)]="placement">
+        <label *ngFor="let item of list" nz-radio-button [nzValue]="item">{{ item }}</label>
+      </nz-radio-group>
+      <nz-tree-select
+        *nzSpaceItem
+        style="width: 120px"
+        nzPlaceHolder="Please select"
+        [nzPlacement]="placement"
+        [(ngModel)]="value"
+        [nzMaxTagCount]="3"
+        [nzMaxTagPlaceholder]="omittedPlaceHolder"
+        [nzNodes]="nodes"
+        [nzDropdownStyle]="{ width: '300px' }"
+        [nzDefaultExpandAll]="true"
+        [nzAllowClear]="false"
+        [nzMultiple]="true"
+        (ngModelChange)="onChange($event)"
+      ></nz-tree-select>
+      <ng-template #omittedPlaceHolder let-omittedValues>and {{ omittedValues.length }} more...</ng-template>
+    </nz-space>
+  `
+})
+export class NzDemoTreeSelectPlacementComponent {
+  list: NzPlacementType[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
+  placement: NzPlacementType = 'topLeft';
+  value: string[] = [];
+  nodes = [
+    {
+      title: 'parent 1',
+      key: '100',
+      children: [
+        {
+          title: 'parent 1-0',
+          key: '1001',
+          children: [
+            { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
+            { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
+          ]
+        },
+        {
+          title: 'parent 1-1',
+          key: '1002',
+          children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
+        }
+      ]
+    }
+  ];
+
+  onChange($event: string[]): void {
+    console.log($event);
+  }
+}
diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
@@ -25,6 +25,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzId]` | input id attribute inside the component| `string` | - |
 | `[nzAllowClear]` | Whether allow clear | `boolean` | `false` |
 | `[nzPlaceHolder]` | Placeholder of the select input | `string` | - |
+| `[nzPlacement]` | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |
 | `[nzDisabled]` | Disabled or not | `boolean` | `false` |
 | `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` |
 | `[nzShowSearch]` | Whether to display a search input in the dropdown menu(valid only in the single mode) | `boolean` | `false` | ✅ |

diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
@@ -25,6 +25,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
 | `[nzAllowClear]` | 显示清除按钮 | `boolean` | `false` |
 | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - |
+| `[nzPlacement]` | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |
 | `[nzDisabled]` | 禁用选择器 | `boolean` | `false` |
 | `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` | ✅ |
 | `[nzShowSearch]` | 显示搜索框 | `boolean` | `false` |

diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
@@ -6,7 +6,12 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { BACKSPACE, ESCAPE, TAB } from '@angular/cdk/keycodes';
-import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
+import {
+  CdkConnectedOverlay,
+  CdkOverlayOrigin,
+  ConnectedOverlayPositionChange,
+  ConnectionPositionPair
+} from '@angular/cdk/overlay';
 import {
   ChangeDetectorRef,
   Component,
@@ -36,6 +41,7 @@ import { slideMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
+import { POSITION_MAP } from 'ng-zorro-antd/core/overlay';
 import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
 import {
   NzFormatEmitEvent,
@@ -65,8 +71,15 @@ export function higherOrderServiceFactory(injector: Injector): NzTreeBaseService
   return injector.get(NzTreeSelectService);
 }
 
+export type NzPlacementType = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | '';
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'treeSelect';
 const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown';
+const listOfPositions = [
+  POSITION_MAP.bottomLeft,
+  POSITION_MAP.bottomRight,
+  POSITION_MAP.topRight,
+  POSITION_MAP.topLeft
+];
 
 @Component({
   selector: 'nz-tree-select',
@@ -78,6 +91,7 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
       nzConnectedOverlay
       [cdkConnectedOverlayHasBackdrop]="nzBackdrop"
       [cdkConnectedOverlayOrigin]="cdkOverlayOrigin"
+      [cdkConnectedOverlayPositions]="nzPlacement ? positions : []"
       [cdkConnectedOverlayOpen]="nzOpen"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-select-tree-dropdown'"
       [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)"
@@ -273,6 +287,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   @Input() nzDropdownClassName?: string;
   @Input() @WithConfig() nzBackdrop = false;
   @Input() nzStatus: NzStatus = '';
+  @Input() nzPlacement: NzPlacementType = '';
   @Input()
   set nzExpandedKeys(value: string[]) {
     this.expandedKeys = value;
@@ -322,6 +337,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   expandedKeys: string[] = [];
   value: string[] = [];
   dir: Direction = 'ltr';
+  positions: ConnectionPositionPair[] = [];
 
   private destroy$ = new Subject<void>();
 
@@ -427,7 +443,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzNodes, nzDropdownClassName, nzStatus } = changes;
+    const { nzNodes, nzDropdownClassName, nzStatus, nzPlacement } = changes;
     if (nzNodes) {
       this.updateSelectedNodes(true);
     }
@@ -438,6 +454,12 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
     if (nzStatus) {
       this.setStatusStyles(this.nzStatus, this.hasFeedback);
     }
+
+    if (nzPlacement && this.nzPlacement) {
+      if (POSITION_MAP[this.nzPlacement]) {
+        this.positions = [POSITION_MAP[this.nzPlacement]];
+      }
+    }
   }
 
   writeValue(value: string[] | string): void {
@@ -647,7 +669,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   }
 
   updateCdkConnectedOverlayStatus(): void {
-    this.triggerWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width;
+    if (!this.nzPlacement || !listOfPositions.includes(POSITION_MAP[this.nzPlacement])) {
+      this.triggerWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width;
+    }
   }
 
   trackValue(_index: number, option: NzTreeNode): string {