From 347fc629f00e4538d8008672127b38225dc33167 Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Mon, 30 May 2022 11:59:56 +0800 Subject: [PATCH 1/9] feat(module:tree-select): add status add 'nzStatus' , display diffrent status of tree-select * docs update 'nzStatus' docs * test add 'nzStatus' tests --- components/tree-select/demo/status.md | 15 +++++ components/tree-select/demo/status.ts | 64 ++++++++++++++++++ components/tree-select/doc/index.en-US.md | 1 + components/tree-select/doc/index.zh-CN.md | 1 + .../tree-select/tree-select.component.ts | 34 +++++++++- components/tree-select/tree-select.spec.ts | 65 ++++++++++++++++++- 6 files changed, 176 insertions(+), 4 deletions(-) create mode 100644 components/tree-select/demo/status.md create mode 100644 components/tree-select/demo/status.ts diff --git a/components/tree-select/demo/status.md b/components/tree-select/demo/status.md new file mode 100644 index 0000000000..aacb6372fa --- /dev/null +++ b/components/tree-select/demo/status.md @@ -0,0 +1,15 @@ +--- +order: 8 +title: + zh-CN: 自定义状态 + en-US: Status +--- + +## zh-CN + +使用 `nzStatus` 为 `TreeSelect` 添加状态，可选 `error` 或者 `warning`。 + +## en-US + +Add status to TreeSelect with `nzStatus`, which could be `error` or `warning`. + diff --git a/components/tree-select/demo/status.ts b/components/tree-select/demo/status.ts new file mode 100644 index 0000000000..4bc01e88a2 --- /dev/null +++ b/components/tree-select/demo/status.ts @@ -0,0 +1,64 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-tree-select-status', + template: ` + + + ` +}) +export class NzDemoTreeSelectStatusComponent implements OnInit { + expandKeys = ['100', '1001']; + 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); + } + + ngOnInit(): void { + // mock async + setTimeout(() => { + this.value = '1001'; + }, 1000); + } +} diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md index d5ab594f32..3ed2ee1f15 100755 --- a/components/tree-select/doc/index.en-US.md +++ b/components/tree-select/doc/index.en-US.md @@ -35,6 +35,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; | `[nzMultiple]` | Support multiple or not, will be `true` when enable `nzCheckable`. | `boolean` | `false` | | `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ | | `[nzSize]` | To set the size of the select input | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | | `[nzCheckable]` | Whether to show checkbox on the treeNodes | `boolean` | `false` | | `[nzCheckStrictly]` | Check treeNode precisely; parent treeNode and children treeNodes are not associated | `boolean` | `false` | | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | | diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md index 05c394e175..b7000b3e34 100755 --- a/components/tree-select/doc/index.zh-CN.md +++ b/components/tree-select/doc/index.zh-CN.md @@ -35,6 +35,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; | `[nzMultiple]` | 支持多选（当设置 nzCheckable 时自动变为true） | `boolean` | `false` | | `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | ✅ | | `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | | | `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` | | `[nzCheckStrictly]` | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | `boolean` | `false` | | `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` | | diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index 83814013f2..13bcd9a2a7 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -44,8 +44,16 @@ import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree'; -import { BooleanInput, NgStyleInterface, NzSizeLDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types'; -import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; +import { + BooleanInput, + NgClassInterface, + NgStyleInterface, + NzSizeLDSType, + NzStatus, + OnChangeType, + OnTouchedType +} from 'ng-zorro-antd/core/types'; +import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; import { NzSelectSearchComponent } from 'ng-zorro-antd/select'; import { NzTreeComponent } from 'ng-zorro-antd/tree'; @@ -253,6 +261,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc @Input() nzDropdownStyle: NgStyleInterface | null = null; @Input() nzDropdownClassName?: string; @Input() @WithConfig() nzBackdrop = false; + @Input() nzStatus: NzStatus = ''; @Input() set nzExpandedKeys(value: string[]) { this.expandedKeys = value; @@ -285,6 +294,10 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc return this.nzTreeTemplate || this.nzTreeTemplateChild; } + prefixCls: string = 'ant-select'; + statusCls: NgClassInterface = {}; + nzHasFeedback: boolean = false; + dropdownClassName = TREE_SELECT_DEFAULT_CLASS; triggerWidth?: number; isComposing = false; @@ -370,8 +383,20 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc this.closeDropDown(); } + private setStatusStyles(): void { + // render status if nzStatus is set + this.statusCls = getStatusClassNames(this.prefixCls, this.nzStatus, this.nzHasFeedback); + Object.keys(this.statusCls).forEach(status => { + if (this.statusCls[status]) { + this.renderer.addClass(this.elementRef.nativeElement, status); + } else { + this.renderer.removeClass(this.elementRef.nativeElement, status); + } + }); + } + ngOnChanges(changes: SimpleChanges): void { - const { nzNodes, nzDropdownClassName } = changes; + const { nzNodes, nzDropdownClassName, nzStatus } = changes; if (nzNodes) { this.updateSelectedNodes(true); } @@ -379,6 +404,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc const className = this.nzDropdownClassName && this.nzDropdownClassName.trim(); this.dropdownClassName = className ? `${TREE_SELECT_DEFAULT_CLASS} ${className}` : TREE_SELECT_DEFAULT_CLASS; } + if (nzStatus) { + this.setStatusStyles(); + } } writeValue(value: string[] | string): void { diff --git a/components/tree-select/tree-select.spec.ts b/components/tree-select/tree-select.spec.ts index d81879092a..96c7cd91ea 100644 --- a/components/tree-select/tree-select.spec.ts +++ b/components/tree-select/tree-select.spec.ts @@ -16,6 +16,7 @@ import { typeInElement } from 'ng-zorro-antd/core/testing'; import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree'; +import { NzStatus } from 'ng-zorro-antd/core/types'; import { NzTreeSelectComponent } from './tree-select.component'; import { NzTreeSelectModule } from './tree-select.module'; @@ -33,7 +34,8 @@ describe('tree-select component', () => { NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent, - NzTestTreeSelectCustomizedIconComponent + NzTestTreeSelectCustomizedIconComponent, + NzTestTreeSelectStatusComponent ], providers: [ { @@ -606,6 +608,29 @@ describe('tree-select component', () => { expect(overlayContainerElement.querySelector('i.anticon.anticon-frown-o')).toBeTruthy(); })); }); + + describe('Status', () => { + let fixture: ComponentFixture; + let treeSelect: DebugElement; + + beforeEach(() => { + fixture = TestBed.createComponent(NzTestTreeSelectStatusComponent); + treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent)); + }); + + it('should className correct', () => { + fixture.detectChanges(); + expect(treeSelect.nativeElement.className).toContain('ant-select-status-error'); + + fixture.componentInstance.status = 'warning'; + fixture.detectChanges(); + expect(treeSelect.nativeElement.className).toContain('ant-select-status-warning'); + + fixture.componentInstance.status = ''; + fixture.detectChanges(); + expect(treeSelect.nativeElement.className).not.toContain('ant-select-status-warning'); + }); + }); }); @Component({ @@ -863,3 +888,41 @@ export class NzTestTreeSelectCustomizedIconComponent { }) ]; } + +@Component({ + template: ` + + ` +}) +export class NzTestTreeSelectStatusComponent { + status: NzStatus = 'error'; + value?: string = '1001'; + 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 }] + } + ] + } + ]; +} From 9c35d377be53abc8df3ffd59c76184937f0c2e5b Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Mon, 30 May 2022 18:23:48 +0800 Subject: [PATCH 2/9] docs(module:tree-select): update status docs * update 'status' demo --- components/tree-select/demo/status.ts | 79 ++++++++------------------- 1 file changed, 23 insertions(+), 56 deletions(-) diff --git a/components/tree-select/demo/status.ts b/components/tree-select/demo/status.ts index 4bc01e88a2..3cddfdbf71 100644 --- a/components/tree-select/demo/status.ts +++ b/components/tree-select/demo/status.ts @@ -1,64 +1,31 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-tree-select-status', template: ` - - + + + + ` }) -export class NzDemoTreeSelectStatusComponent implements OnInit { - expandKeys = ['100', '1001']; +export class NzDemoTreeSelectStatusComponent { 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); - } - - ngOnInit(): void { - // mock async - setTimeout(() => { - this.value = '1001'; - }, 1000); - } + nodes = []; } From 8528f47ff3a3129aa962e017221ac94ed7e382c0 Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Tue, 31 May 2022 09:40:01 +0800 Subject: [PATCH 3/9] fix(module:tree-select): add 'NzSpaceModule' * fix module of demo need to depend on NzSpaceModule --- components/tree-select/demo/module | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/tree-select/demo/module b/components/tree-select/demo/module index c896578d01..9e31c4d770 100644 --- a/components/tree-select/demo/module +++ b/components/tree-select/demo/module @@ -1,5 +1,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { FormsModule } from '@angular/forms'; +import { NzSpaceModule } from 'ng-zorro-antd/space'; -export const moduleList = [ FormsModule, NzTreeSelectModule, NzIconModule ]; + +export const moduleList = [ FormsModule, NzTreeSelectModule, NzIconModule , NzSpaceModule]; From 51538db3185c6a8b077ebe5f792f045d5e913345 Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Tue, 31 May 2022 12:40:22 +0800 Subject: [PATCH 4/9] feat(module:tree-select): add placement add 'nzPlacement' , display drop on diffrent placement of tree-select * docs update 'nzPlacement' docs --- components/tree-select/demo/module | 3 +- components/tree-select/demo/placement.md | 13 +++++ components/tree-select/demo/placement.ts | 57 +++++++++++++++++++ components/tree-select/doc/index.en-US.md | 1 + components/tree-select/doc/index.zh-CN.md | 1 + .../tree-select/tree-select.component.ts | 36 +++++++++++- 6 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 components/tree-select/demo/placement.md create mode 100644 components/tree-select/demo/placement.ts diff --git a/components/tree-select/demo/module b/components/tree-select/demo/module index 9e31c4d770..e8d87a9b9f 100644 --- 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 new file mode 100644 index 0000000000..d465456bf9 --- /dev/null +++ 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 new file mode 100644 index 0000000000..8a8973f2c6 --- /dev/null +++ b/components/tree-select/demo/placement.ts @@ -0,0 +1,57 @@ +import { Component } from '@angular/core'; +@Component({ + selector: 'nz-demo-tree-select-placement', + template: ` + + + + + + and {{ omittedValues.length }} more... + + ` +}) +export class NzDemoTreeSelectPlacementComponent { + list: string[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']; + placement = '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 index 3ed2ee1f15..c2d3c533ac 100755 --- 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 index b7000b3e34..4550859bc9 100755 --- 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 index 13bcd9a2a7..f106b57d1a 100644 --- 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, @@ -35,6 +40,7 @@ import { filter, takeUntil, tap } from 'rxjs/operators'; import { slideMotion } from 'ng-zorro-antd/core/animation'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; 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, @@ -63,9 +69,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', exportAs: 'nzTreeSelect', @@ -76,6 +88,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)" @@ -262,6 +275,20 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc @Input() nzDropdownClassName?: string; @Input() @WithConfig() nzBackdrop = false; @Input() nzStatus: NzStatus = ''; + placement: NzPlacementType = ''; + @Input() + set nzPlacement(placement: NzPlacementType) { + this.placement = placement; + if (this.nzPlacement) { + const currentPositon = POSITION_MAP[this.nzPlacement]; + this.positions = [currentPositon, ...this.positions]; + } + } + + get nzPlacement(): NzPlacementType { + return this.placement; + } + @Input() set nzExpandedKeys(value: string[]) { this.expandedKeys = value; @@ -310,6 +337,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc expandedKeys: string[] = []; value: string[] = []; dir: Direction = 'ltr'; + positions: ConnectionPositionPair[] = [...listOfPositions]; private destroy$ = new Subject(); @@ -616,7 +644,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 { From 79a7b27567ed7a1f5dc13d1adcca6315971630ce Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Tue, 31 May 2022 13:02:14 +0800 Subject: [PATCH 5/9] style(module:tree-select): update code style * style update code style --- components/tree-select/tree-select.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index f106b57d1a..8f929ed46d 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -78,6 +78,7 @@ const listOfPositions = [ POSITION_MAP.topRight, POSITION_MAP.topLeft ]; + @Component({ selector: 'nz-tree-select', exportAs: 'nzTreeSelect', From 1f26d2268b03d8dd463c2a8ff0aaa0a74b19d769 Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Tue, 31 May 2022 23:55:41 +0800 Subject: [PATCH 6/9] fix(module:tree-select): update nzPlacement --- .../tree-select/tree-select.component.ts | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index 8f929ed46d..ab1e5b8f45 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -276,20 +276,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc @Input() nzDropdownClassName?: string; @Input() @WithConfig() nzBackdrop = false; @Input() nzStatus: NzStatus = ''; - placement: NzPlacementType = ''; - @Input() - set nzPlacement(placement: NzPlacementType) { - this.placement = placement; - if (this.nzPlacement) { - const currentPositon = POSITION_MAP[this.nzPlacement]; - this.positions = [currentPositon, ...this.positions]; - } - } - - get nzPlacement(): NzPlacementType { - return this.placement; - } - + @Input() nzPlacement: NzPlacementType = ''; @Input() set nzExpandedKeys(value: string[]) { this.expandedKeys = value; @@ -425,7 +412,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); } @@ -436,6 +423,11 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc if (nzStatus) { this.setStatusStyles(); } + + if (nzPlacement && this.nzPlacement) { + const currentPositon = POSITION_MAP[this.nzPlacement]; + this.positions = [currentPositon, ...this.positions]; + } } writeValue(value: string[] | string): void { From 4f6fed84419422b6396b320602bbde55921d99b1 Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Wed, 1 Jun 2022 15:04:02 +0800 Subject: [PATCH 7/9] fix(module:tree-select): update nzPlacement --- components/tree-select/tree-select.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index ab1e5b8f45..c35bb5c71a 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -325,7 +325,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc expandedKeys: string[] = []; value: string[] = []; dir: Direction = 'ltr'; - positions: ConnectionPositionPair[] = [...listOfPositions]; + positions: ConnectionPositionPair[] = []; private destroy$ = new Subject(); @@ -426,7 +426,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc if (nzPlacement && this.nzPlacement) { const currentPositon = POSITION_MAP[this.nzPlacement]; - this.positions = [currentPositon, ...this.positions]; + this.positions = [currentPositon]; } } From 3304c2bbba789c5cb24eb483240df0d7b26cdcde Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Wed, 1 Jun 2022 15:55:11 +0800 Subject: [PATCH 8/9] fix(module:tree-select): update nzPlacement --- components/tree-select/tree-select.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index c35bb5c71a..3c8a1fbe72 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -425,8 +425,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc } if (nzPlacement && this.nzPlacement) { - const currentPositon = POSITION_MAP[this.nzPlacement]; - this.positions = [currentPositon]; + this.positions = [POSITION_MAP[this.nzPlacement]]; } } From 5f9f588febfa71eae57266b4c85ac41d08650b84 Mon Sep 17 00:00:00 2001 From: wethin <806769481@qq.com> Date: Wed, 1 Jun 2022 16:14:59 +0800 Subject: [PATCH 9/9] fix(module:tree-select): update nzPlacement demo --- components/tree-select/demo/placement.ts | 6 ++++-- components/tree-select/tree-select.component.ts | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/components/tree-select/demo/placement.ts b/components/tree-select/demo/placement.ts index 8a8973f2c6..6e941ac537 100644 --- a/components/tree-select/demo/placement.ts +++ b/components/tree-select/demo/placement.ts @@ -1,4 +1,6 @@ import { Component } from '@angular/core'; +export type NzPlacementType = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | ''; + @Component({ selector: 'nz-demo-tree-select-placement', template: ` @@ -26,8 +28,8 @@ import { Component } from '@angular/core'; ` }) export class NzDemoTreeSelectPlacementComponent { - list: string[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']; - placement = 'topLeft'; + list: NzPlacementType[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']; + placement: NzPlacementType = 'topLeft'; value: string[] = []; nodes = [ { diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index 3c8a1fbe72..73f2a095c7 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -425,7 +425,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc } if (nzPlacement && this.nzPlacement) { - this.positions = [POSITION_MAP[this.nzPlacement]]; + if (POSITION_MAP[this.nzPlacement]) { + this.positions = [POSITION_MAP[this.nzPlacement]]; + } } }