From 18097124bdaba23b9fb601bc7589c87fcbdb1939 Mon Sep 17 00:00:00 2001 From: Laffery Date: Mon, 30 Sep 2024 23:06:11 +0800 Subject: [PATCH 1/5] refactor(module:tree): migrate demo to standalone mode --- components/tree/demo/basic-controlled.ts | 6 +- components/tree/demo/basic.ts | 6 +- components/tree/demo/customized-icon.ts | 7 +- components/tree/demo/directory.ts | 15 +-- components/tree/demo/draggable-confirm.ts | 8 +- components/tree/demo/draggable.ts | 8 +- components/tree/demo/dynamic.ts | 7 +- components/tree/demo/line.ts | 8 +- components/tree/demo/module | 6 -- components/tree/demo/search.ts | 19 ++-- components/tree/demo/virtual-scroll.ts | 61 ++++++----- components/tree/tree.spec.ts | 125 ++++++++-------------- 12 files changed, 127 insertions(+), 149 deletions(-) delete mode 100644 components/tree/demo/module diff --git a/components/tree/demo/basic-controlled.ts b/components/tree/demo/basic-controlled.ts index 2b7ae85bc5..6956e3458a 100644 --- a/components/tree/demo/basic-controlled.ts +++ b/components/tree/demo/basic-controlled.ts @@ -1,9 +1,11 @@ import { Component } from '@angular/core'; -import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; +import { NzFormatEmitEvent, NzTreeModule } from 'ng-zorro-antd/tree'; @Component({ selector: 'nz-demo-tree-basic-controlled', + standalone: true, + imports: [NzTreeModule], template: ` @@ -20,7 +25,7 @@ import { Component } from '@angular/core'; ` }) export class NzDemoTreeCustomizedIconComponent { - nodes = [ + readonly nodes = [ { title: 'parent 1', key: '100', diff --git a/components/tree/demo/directory.ts b/components/tree/demo/directory.ts index 438330475a..37a4e4585e 100644 --- a/components/tree/demo/directory.ts +++ b/components/tree/demo/directory.ts @@ -1,10 +1,14 @@ +import { LowerCasePipe } from '@angular/common'; import { Component } from '@angular/core'; -import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; -import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/tree'; +import { NzContextMenuService, NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzFormatEmitEvent, NzTreeModule, NzTreeNode } from 'ng-zorro-antd/tree'; @Component({ selector: 'nz-demo-tree-directory', + standalone: true, + imports: [NzDropDownModule, NzIconModule, NzTreeModule, LowerCasePipe], template: ` ` + standalone: true, + imports: [NzTreeModule], + template: `` }) export class NzDemoTreeDraggableConfirmComponent { - nodes = [ + readonly nodes = [ { title: '0-0', key: '100', diff --git a/components/tree/demo/draggable.ts b/components/tree/demo/draggable.ts index aa864365fe..a6cb4a7b31 100644 --- a/components/tree/demo/draggable.ts +++ b/components/tree/demo/draggable.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; -import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; +import { NzFormatEmitEvent, NzTreeModule } from 'ng-zorro-antd/tree'; @Component({ selector: 'nz-demo-tree-draggable', - template: ` ` + standalone: true, + imports: [NzTreeModule], + template: `` }) export class NzDemoTreeDraggableComponent { - nodes = [ + readonly nodes = [ { title: '0-0', key: '00', diff --git a/components/tree/demo/dynamic.ts b/components/tree/demo/dynamic.ts index eeaeddebed..737cfe71ee 100644 --- a/components/tree/demo/dynamic.ts +++ b/components/tree/demo/dynamic.ts @@ -1,22 +1,23 @@ import { Component } from '@angular/core'; -import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; +import { NzFormatEmitEvent, NzTreeModule, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; @Component({ selector: 'nz-demo-tree-dynamic', + standalone: true, + imports: [NzTreeModule], template: ` ` }) export class NzDemoTreeDynamicComponent { - nodes = [ + readonly nodes = [ { title: 'Expand to load', key: '0' }, { title: 'Expand to load', key: '1' }, { title: 'Tree Node', key: '2', isLeaf: true } ]; nzEvent(event: NzFormatEmitEvent): void { - console.log(event); // load child async if (event.eventName === 'expand') { const node = event.node; diff --git a/components/tree/demo/line.ts b/components/tree/demo/line.ts index cba499999a..a15e3b7e8b 100644 --- a/components/tree/demo/line.ts +++ b/components/tree/demo/line.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; -import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; +import { NzFormatEmitEvent, NzTreeModule } from 'ng-zorro-antd/tree'; @Component({ selector: 'nz-demo-tree-line', - template: ` ` + standalone: true, + imports: [NzTreeModule], + template: `` }) export class NzDemoTreeLineComponent { - nodes = [ + readonly nodes = [ { title: 'parent 1', key: '100', diff --git a/components/tree/demo/module b/components/tree/demo/module deleted file mode 100644 index 2b89090d97..0000000000 --- a/components/tree/demo/module +++ /dev/null @@ -1,6 +0,0 @@ -import { NzTreeModule } from 'ng-zorro-antd/tree'; -import { NzIconModule } from 'ng-zorro-antd/icon'; -import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; -import { NzInputModule } from 'ng-zorro-antd/input'; - -export const moduleList = [ NzTreeModule, NzIconModule, NzDropDownModule, NzInputModule ]; diff --git a/components/tree/demo/search.ts b/components/tree/demo/search.ts index b65f6b3fc9..f193455652 100644 --- a/components/tree/demo/search.ts +++ b/components/tree/demo/search.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; -import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzInputModule } from 'ng-zorro-antd/input'; +import { NzFormatEmitEvent, NzTreeModule } from 'ng-zorro-antd/tree'; @Component({ selector: 'nz-demo-tree-search', + standalone: true, + imports: [FormsModule, NzIconModule, NzInputModule, NzTreeModule], template: ` @@ -11,6 +16,7 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; +
- `, - styles: [ - ` - nz-input-group { - margin-bottom: 12px; - } - ` - ] + ` }) export class NzDemoTreeSearchComponent { searchValue = ''; - nodes = [ + readonly nodes = [ { title: '0-0', key: '0-0', diff --git a/components/tree/demo/virtual-scroll.ts b/components/tree/demo/virtual-scroll.ts index 129ad53fad..c944ad0608 100644 --- a/components/tree/demo/virtual-scroll.ts +++ b/components/tree/demo/virtual-scroll.ts @@ -1,37 +1,36 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; -import { NzTreeNodeOptions } from 'ng-zorro-antd/tree'; +import { NzTreeModule, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; -@Component({ - selector: 'nz-demo-tree-virtual-scroll', - template: ` ` -}) -export class NzDemoTreeVirtualScrollComponent implements OnInit { - nodes: NzTreeNodeOptions[] = []; - ngOnInit(): void { - const dig = (path = '0', level = 3): NzTreeNodeOptions[] => { - 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; +function dig(path = '0', level = 3): NzTreeNodeOptions[] { + const list: NzTreeNodeOptions[] = []; + for (let i = 0; i < 10; i += 1) { + const key = `${path}-${i}`; + const treeNode: NzTreeNodeOptions = { + title: key, + key, + expanded: true, + children: [], + isLeaf: false }; - this.nodes = dig(); + if (level > 0) { + treeNode.children = dig(key, level - 1); + } else { + treeNode.isLeaf = true; + } + + list.push(treeNode); } + return list; +} + +@Component({ + selector: 'nz-demo-tree-virtual-scroll', + standalone: true, + imports: [NzTreeModule], + template: `` +}) +export class NzDemoTreeVirtualScrollComponent { + nodes: NzTreeNodeOptions[] = dig(); } diff --git a/components/tree/tree.spec.ts b/components/tree/tree.spec.ts index bbec3b31fd..994aaa1d20 100644 --- a/components/tree/tree.spec.ts +++ b/components/tree/tree.spec.ts @@ -1,46 +1,37 @@ import { ApplicationRef, Component, TemplateRef, ViewChild } from '@angular/core'; -import { fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { provideNoopAnimations } from '@angular/platform-browser/animations'; import { Observable, of } from 'rxjs'; import { dispatchMouseEvent, dispatchTouchEvent } from 'ng-zorro-antd/core/testing'; -import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed'; import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { NzIconTestModule } from 'ng-zorro-antd/icon/testing'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { provideNzIconsTesting } from 'ng-zorro-antd/icon/testing'; -import { NzTreeNodeBuiltinComponent } from './tree-node.component'; import { NzTreeComponent } from './tree.component'; import { NzTreeModule } from './tree.module'; -import Spy = jasmine.Spy; - -const prepareTest = (componentInstance?: NzSafeAny): ComponentBed => - createComponentBed(componentInstance, { - imports: [ - NzTreeModule, - NoopAnimationsModule, - FormsModule, - ReactiveFormsModule, - NzIconTestModule, - NzTreeNodeBuiltinComponent - ] +describe('tree', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [provideNzIconsTesting(), provideNoopAnimations()] + }); }); -describe('tree', () => { - describe('NzTestTreeBasicControlledComponent', () => { - let testBed: ComponentBed; + describe('controlled', () => { + let fixture: ComponentFixture; + let component: NzTestTreeBasicControlledComponent; + let nativeElement: Element; beforeEach(() => { - testBed = prepareTest(NzTestTreeBasicControlledComponent); - const { fixture } = testBed; + fixture = TestBed.createComponent(NzTestTreeBasicControlledComponent); + component = fixture.componentInstance; + nativeElement = fixture.debugElement.nativeElement; fixture.detectChanges(); }); describe('basic tree under default value', () => { it('basic initial data', () => { - const { nativeElement } = testBed; const shownNodes = nativeElement.querySelectorAll('nz-tree-node[builtin]'); const enableCheckbox = nativeElement.querySelectorAll('.ant-tree-checkbox'); expect(shownNodes.length).toEqual(3); @@ -48,7 +39,6 @@ describe('tree', () => { }); it('should initialize properly', () => { - const { nativeElement } = testBed; const shownNodes = nativeElement.querySelectorAll('nz-tree-node[builtin]'); const enableCheckbox = nativeElement.querySelectorAll('.ant-tree-checkbox'); expect(shownNodes.length).toEqual(3); @@ -56,7 +46,6 @@ describe('tree', () => { }); it('should expand the specified node based on nzExpandedKeys', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.defaultExpandedKeys = ['0-1']; fixture.detectChanges(); const shownNodes = nativeElement.querySelectorAll('nz-tree-node[builtin]'); @@ -68,7 +57,6 @@ describe('tree', () => { })); it('should expand all nodes while setting nzExpandAll', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.expandAll = true; fixture.detectChanges(); const shownNodes = nativeElement.querySelectorAll('nz-tree-node[builtin]'); @@ -80,7 +68,6 @@ describe('tree', () => { })); it('should render checkbox state of nodes based on nzCheckedKeys', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.expandAll = true; // Just for testing the selected state component.defaultCheckedKeys = ['0-0-0', '0-0-1']; fixture.detectChanges(); @@ -95,7 +82,6 @@ describe('tree', () => { })); it('node check should not affect other nodes based on nzCheckStrictly', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.expandAll = true; component.checkStrictly = true; component.defaultCheckedKeys = ['0-0-0', '0-0-1']; @@ -111,7 +97,6 @@ describe('tree', () => { })); it('should select nodes based on nzSelectedKeys', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.defaultSelectedKeys = ['0-0', '0-1']; fixture.detectChanges(); // nzMultiple is true @@ -123,7 +108,6 @@ describe('tree', () => { })); it('should select only one nodes based on nzMultiple:false', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.multiple = false; component.defaultSelectedKeys = ['0-0', '0-1']; fixture.detectChanges(); @@ -136,7 +120,6 @@ describe('tree', () => { })); it('should match nodes based on nzSearchValue', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.searchValue = '0-0-1'; fixture.detectChanges(); // will expand 0-0 only @@ -191,7 +174,6 @@ describe('tree', () => { title, fakeAsync(() => { // Given - const { component, fixture, nativeElement } = testBed; component.searchValue = when.searchValue; component.virtualHeight = when.virtualHeight; component.hideUnMatched = when.hideUnMatched; @@ -214,7 +196,6 @@ describe('tree', () => { }); it('should match nodes based on nzSearchFunc', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.searchFunc = (data: NzTreeNodeOptions): boolean => data.title === component.searchValue; component.searchValue = '0-0'; fixture.detectChanges(); @@ -235,7 +216,6 @@ describe('tree', () => { })); it('should keep parent expanded state of matched nodes based on nzHideUnMatched', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; component.hideUnMatched = true; fixture.detectChanges(); component.searchValue = '0-0-1'; @@ -253,7 +233,6 @@ describe('tree', () => { describe('change detection behavior', () => { it('should not run change detection when the `nz-tree-node` is clicked', () => { - const { component, fixture, nativeElement } = testBed; component.selectMode = true; fixture.detectChanges(); @@ -274,7 +253,6 @@ describe('tree', () => { describe('basic style of tree', () => { it('should render tree with line based on nzShowLine', () => { - const { component, fixture, nativeElement } = testBed; component.showLine = true; fixture.detectChanges(); const lineTreeIcon = nativeElement.querySelectorAll('.anticon-plus-square'); @@ -282,7 +260,6 @@ describe('tree', () => { }); it('should show custom icon based on nzExpandedIcon', () => { - const { fixture, nativeElement } = testBed; const button = nativeElement.querySelector('button')!; button.click(); fixture.detectChanges(); @@ -293,7 +270,6 @@ describe('tree', () => { }); it('should not trigger checkbox if node is disabled ', () => { - const { component, fixture, nativeElement } = testBed; const spy = spyOn(component, 'nzEvent'); component.nodes = [ { @@ -310,7 +286,6 @@ describe('tree', () => { }); it('should should custom icon', () => { - const { component, fixture, nativeElement } = testBed; component.nodes = [ { title: '0-0', @@ -324,7 +299,6 @@ describe('tree', () => { }); it('should should show loading icon', () => { - const { component, fixture, nativeElement } = testBed; component.nodes = [ { title: '0-0', @@ -353,7 +327,6 @@ describe('tree', () => { describe('mouse event trigger', () => { it('should select node when clicking', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; const spy = spyOn(component, 'nzEvent'); expect(spy).not.toHaveBeenCalled(); @@ -369,7 +342,6 @@ describe('tree', () => { })); it('should expand node when clicking switcher', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; const spy = spyOn(component, 'nzEvent'); // get first node 0-0 const node = nativeElement.querySelector('.ant-tree-switcher')!; @@ -383,7 +355,6 @@ describe('tree', () => { })); it('should check node when clicking checkBox', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; const spy = spyOn(component, 'nzEvent'); // get first node 0-0 const node = nativeElement.querySelector('.ant-tree-checkbox')!; @@ -397,7 +368,6 @@ describe('tree', () => { })); it('should trigger contextmenu event', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; const spy = spyOn(component, 'nzEvent'); // get first node 0-0 const node = nativeElement.querySelector('.ant-tree-node-content-wrapper')!; @@ -407,7 +377,6 @@ describe('tree', () => { })); it('should trigger dblclick event', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; const spy = spyOn(component, 'nzEvent'); // get first node 0-0 const node = nativeElement.querySelector('.ant-tree-node-content-wrapper')!; @@ -420,17 +389,23 @@ describe('tree', () => { }); }); - describe('NzTestTreeDraggableComponent', () => { - let testBed: ComponentBed; - let dragStartSpy: Spy; - let dragEnterSpy: Spy; - let dragOverSpy: Spy; - let dragLeaveSpy: Spy; - let dropSpy: Spy; - let dragEndSpy: Spy; + describe('dnd', () => { + let fixture: ComponentFixture; + let component: NzTestTreeDraggableComponent; + let nativeElement: Element; + + let dragStartSpy: jasmine.Spy; + let dragEnterSpy: jasmine.Spy; + let dragOverSpy: jasmine.Spy; + let dragLeaveSpy: jasmine.Spy; + let dropSpy: jasmine.Spy; + let dragEndSpy: jasmine.Spy; + beforeEach(() => { - testBed = prepareTest(NzTestTreeDraggableComponent); - const { component, fixture } = testBed; + fixture = TestBed.createComponent(NzTestTreeDraggableComponent); + component = fixture.componentInstance; + nativeElement = fixture.debugElement.nativeElement; + dragStartSpy = spyOn(component, 'onDragStart').and.callThrough(); dragEnterSpy = spyOn(component, 'onDragEnter').and.callThrough(); dragOverSpy = spyOn(component, 'onDragOver').and.callThrough(); @@ -443,7 +418,6 @@ describe('tree', () => { describe('drag event trigger', () => { it('should trigger dragstart event', fakeAsync(() => { // dragstart needs to collapse expanded node - const { component, fixture, nativeElement } = testBed; component.defaultExpandedKeys = ['0-1']; fixture.detectChanges(); let expandedNodes = nativeElement.querySelectorAll('.ant-tree-switcher_open'); @@ -457,7 +431,6 @@ describe('tree', () => { // fixture.detectChanges() will stop event it('should trigger drag event', fakeAsync(() => { - const { fixture, nativeElement } = testBed; const dragNode = nativeElement.querySelector("[title='0-2']") as HTMLElement; const dropNode = nativeElement.querySelector("[title='0-0']") as HTMLElement; const passedNode = nativeElement.querySelector("[title='0-1']") as HTMLElement; @@ -509,7 +482,6 @@ describe('tree', () => { * return 0; */ - const { fixture, nativeElement } = testBed; let elementNode; const dragNode = nativeElement.querySelector("[title='0-2']") as HTMLElement; // sixth node const passedNode = nativeElement.querySelector("[title='0-1']") as HTMLElement; // fifth node @@ -551,7 +523,6 @@ describe('tree', () => { })); it('should drop as nzBeforeDrop', fakeAsync(() => { - const { component, fixture, nativeElement } = testBed; const dragNode = nativeElement.querySelector("[title='0-2']") as HTMLElement; const dropNode = nativeElement.querySelector("[title='0-0']") as HTMLElement; component.beforeDrop = (): Observable => of(true); @@ -572,31 +543,32 @@ describe('tree', () => { })); it('should nzBlockNode work', fakeAsync(() => { - const { fixture, nativeElement } = testBed; - fixture.detectChanges(); const treeElement = nativeElement.querySelector('.ant-tree') as HTMLElement; expect(treeElement.classList).toContain('ant-tree-block-node'); })); }); }); - describe('NzTestTreeBasicSearchComponent', () => { - let testBed: ComponentBed; + describe('search', () => { + let fixture: ComponentFixture; + let component: NzTestTreeBasicSearchComponent; + let nativeElement: Element; const getVisibleNodes = (title?: string): Element[] => { const isNodeVisible = (el: Element): boolean => el.getClientRects().length !== 0; const selector = title ? `[title='${title}']` : '[title]'; - const nodes = testBed.nativeElement.querySelectorAll(selector); + const nodes = nativeElement.querySelectorAll(selector); return Array.from(nodes).filter(isNodeVisible); }; beforeEach(() => { - testBed = prepareTest(NzTestTreeBasicSearchComponent); + fixture = TestBed.createComponent(NzTestTreeBasicSearchComponent); + component = fixture.componentInstance; + nativeElement = fixture.debugElement.nativeElement; }); describe('search case-insensitive', () => { it('should list matches independent on casing', fakeAsync(() => { - const { component, fixture } = testBed; fixture.detectChanges(); expect(getVisibleNodes().length).toEqual(3); @@ -622,7 +594,6 @@ describe('tree', () => { describe('highlight case-insensitive', () => { it('should highlight matched node', fakeAsync(() => { - const { component, fixture } = testBed; fixture.detectChanges(); expect(getVisibleNodes().length).toEqual(3); @@ -638,10 +609,9 @@ describe('tree', () => { }); }); -/** - * Basic controlled tree - */ @Component({ + standalone: true, + imports: [NzIconModule, NzTreeModule], template: ` Date: Mon, 30 Sep 2024 23:13:03 +0800 Subject: [PATCH 2/5] refactor(module:tree): migrate demo to standalone mode --- components/tree/tree.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/tree/tree.spec.ts b/components/tree/tree.spec.ts index 994aaa1d20..e17b660e51 100644 --- a/components/tree/tree.spec.ts +++ b/components/tree/tree.spec.ts @@ -174,8 +174,8 @@ describe('tree', () => { title, fakeAsync(() => { // Given - component.searchValue = when.searchValue; - component.virtualHeight = when.virtualHeight; + component.searchValue = when.searchValue ?? ''; + component.virtualHeight = when.virtualHeight ?? null; component.hideUnMatched = when.hideUnMatched; // When fixture.detectChanges(); @@ -647,7 +647,7 @@ describe('tree', () => { }) export class NzTestTreeBasicControlledComponent { @ViewChild('treeComponent', { static: true }) treeComponent!: NzTreeComponent; - searchValue?: string; + searchValue: string = ''; multiple = true; expandAll = false; asyncData = false; @@ -659,7 +659,7 @@ export class NzTestTreeBasicControlledComponent { defaultExpandedKeys: string[] = []; expandedIcon?: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>; searchFunc?: (node: NzTreeNodeOptions) => boolean; - virtualHeight?: string | boolean = false; + virtualHeight: string | null = null; hideUnMatched = false; nodes: NzTreeNodeOptions[] | NzTreeNode[] = [ { From 44a7da9964e4abd5c84a308d94a0eac067a57107 Mon Sep 17 00:00:00 2001 From: Laffery Date: Wed, 2 Oct 2024 07:33:06 +0800 Subject: [PATCH 3/5] refactor(module:tree-select): migrate demo to standalone mode --- components/tree-select/demo/async.ts | 6 +- components/tree-select/demo/basic.ts | 7 ++- components/tree-select/demo/checkable.ts | 7 ++- .../tree-select/demo/customized-icon.ts | 8 ++- components/tree-select/demo/module | 8 --- components/tree-select/demo/multiple.ts | 7 ++- components/tree-select/demo/no-data.ts | 15 ++--- components/tree-select/demo/placement.ts | 54 +++++++++-------- components/tree-select/demo/status.ts | 38 +++++------- components/tree-select/demo/virtual-scroll.ts | 59 +++++++++---------- 10 files changed, 110 insertions(+), 99 deletions(-) delete mode 100644 components/tree-select/demo/module diff --git a/components/tree-select/demo/async.ts b/components/tree-select/demo/async.ts index 17cc5114a8..a9a1180277 100755 --- a/components/tree-select/demo/async.ts +++ b/components/tree-select/demo/async.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; +import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; @Component({ selector: 'nz-demo-tree-select-async', + standalone: true, + imports: [FormsModule, NzTreeSelectModule], template: `
- +
` }) -export class NzDemoTreeSelectNoDataComponent { - value?: string; - nodes = []; -} +export class NzDemoTreeSelectNoDataComponent {} diff --git a/components/tree-select/demo/placement.ts b/components/tree-select/demo/placement.ts index 57ae6279d8..3326285974 100644 --- a/components/tree-select/demo/placement.ts +++ b/components/tree-select/demo/placement.ts @@ -1,39 +1,43 @@ import { Component } from '@angular/core'; -export type NzPlacementType = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | ''; +import { FormsModule } from '@angular/forms'; + +import { NzRadioModule } from 'ng-zorro-antd/radio'; +import { NzTreeSelectModule, NzPlacementType } from 'ng-zorro-antd/tree-select'; @Component({ selector: 'nz-demo-tree-select-placement', + standalone: true, + imports: [FormsModule, NzRadioModule, NzTreeSelectModule], template: ` - - - @for (item of list; track item) { - - } - - - and {{ omittedValues.length }} more... - + + @for (item of list; track item) { + + } + +
+
+ + and {{ omittedValues.length }} more... ` }) export class NzDemoTreeSelectPlacementComponent { list: NzPlacementType[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']; placement: NzPlacementType = 'topLeft'; value: string[] = []; - nodes = [ + readonly nodes = [ { title: 'parent 1', key: '100', diff --git a/components/tree-select/demo/status.ts b/components/tree-select/demo/status.ts index 3cddfdbf71..a1f4fde41a 100644 --- a/components/tree-select/demo/status.ts +++ b/components/tree-select/demo/status.ts @@ -1,31 +1,21 @@ import { Component } from '@angular/core'; +import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; + @Component({ selector: 'nz-demo-tree-select-status', + standalone: true, + imports: [NzTreeSelectModule], template: ` - - - - + + ` }) -export class NzDemoTreeSelectStatusComponent { - value?: string; - nodes = []; -} +export class NzDemoTreeSelectStatusComponent {} diff --git a/components/tree-select/demo/virtual-scroll.ts b/components/tree-select/demo/virtual-scroll.ts index 219e205fc1..7b04b457ca 100644 --- a/components/tree-select/demo/virtual-scroll.ts +++ b/components/tree-select/demo/virtual-scroll.ts @@ -1,9 +1,35 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { NzTreeNodeOptions } from 'ng-zorro-antd/tree'; +import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; + +function dig(path = '0', level = 3): NzTreeNodeOptions[] { + const list: NzTreeNodeOptions[] = []; + 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; +} @Component({ selector: 'nz-demo-tree-select-virtual-scroll', + standalone: true, + imports: [NzTreeSelectModule], template: ` ` }) -export class NzDemoTreeSelectVirtualScrollComponent implements OnInit { - nodes: NzTreeNodeOptions[] = []; - - ngOnInit(): void { - const dig = (path = '0', level = 3): NzTreeNodeOptions[] => { - 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(); - } +export class NzDemoTreeSelectVirtualScrollComponent { + nodes: NzTreeNodeOptions[] = dig(); } From 96d080c8643e1f26344f2683be35744fcb0c02c9 Mon Sep 17 00:00:00 2001 From: Laffery Date: Wed, 2 Oct 2024 07:41:21 +0800 Subject: [PATCH 4/5] refactor(module:tree-view): migrate demo to standalone mode --- components/tree-view/demo/basic.ts | 5 ++++- components/tree-view/demo/checkbox.ts | 5 ++++- components/tree-view/demo/directory.ts | 5 ++++- components/tree-view/demo/dynamic.ts | 5 +++++ components/tree-view/demo/editable.ts | 7 ++++++- components/tree-view/demo/line.ts | 12 +++++++----- components/tree-view/demo/module | 10 ---------- components/tree-view/demo/search.ts | 9 ++++++++- components/tree-view/demo/virtual-scroll.ts | 9 ++++----- 9 files changed, 42 insertions(+), 25 deletions(-) delete mode 100644 components/tree-view/demo/module diff --git a/components/tree-view/demo/basic.ts b/components/tree-view/demo/basic.ts index b1e2020427..4f3b0e8a0b 100644 --- a/components/tree-view/demo/basic.ts +++ b/components/tree-view/demo/basic.ts @@ -2,7 +2,8 @@ import { SelectionModel } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { Component } from '@angular/core'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface TreeNode { name: string; @@ -36,6 +37,8 @@ interface FlatNode { @Component({ selector: 'nz-demo-tree-view-basic', + standalone: true, + imports: [NzIconModule, NzTreeViewModule], template: ` diff --git a/components/tree-view/demo/checkbox.ts b/components/tree-view/demo/checkbox.ts index e524ee1a9d..c2cd4cd204 100644 --- a/components/tree-view/demo/checkbox.ts +++ b/components/tree-view/demo/checkbox.ts @@ -2,7 +2,8 @@ import { SelectionModel } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { Component } from '@angular/core'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface TreeNode { name: string; @@ -40,6 +41,8 @@ interface FlatNode { @Component({ selector: 'nz-demo-tree-view-checkbox', + standalone: true, + imports: [NzIconModule, NzTreeViewModule], template: ` diff --git a/components/tree-view/demo/directory.ts b/components/tree-view/demo/directory.ts index 1b50bde806..8070e93101 100644 --- a/components/tree-view/demo/directory.ts +++ b/components/tree-view/demo/directory.ts @@ -2,7 +2,8 @@ import { SelectionModel } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { AfterViewInit, Component } from '@angular/core'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface FoodNode { name: string; @@ -40,6 +41,8 @@ interface ExampleFlatNode { @Component({ selector: 'nz-demo-tree-view-directory', + standalone: true, + imports: [NzIconModule, NzTreeViewModule], template: ` diff --git a/components/tree-view/demo/dynamic.ts b/components/tree-view/demo/dynamic.ts index 90de36ac4b..5acd7138ae 100644 --- a/components/tree-view/demo/dynamic.ts +++ b/components/tree-view/demo/dynamic.ts @@ -4,6 +4,9 @@ import { Component } from '@angular/core'; import { BehaviorSubject, Observable, merge, of } from 'rxjs'; import { delay, map, tap } from 'rxjs/operators'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; + interface FlatNode { expandable: boolean; id: number; @@ -122,6 +125,8 @@ class DynamicDatasource implements DataSource { @Component({ selector: 'nz-demo-tree-view-dynamic', + standalone: true, + imports: [NzIconModule, NzTreeViewModule], template: ` diff --git a/components/tree-view/demo/editable.ts b/components/tree-view/demo/editable.ts index 610859d70f..7f5ecf52ec 100644 --- a/components/tree-view/demo/editable.ts +++ b/components/tree-view/demo/editable.ts @@ -2,7 +2,10 @@ import { SelectionModel } from '@angular/cdk/collections'; import { FlatTreeControl } from '@angular/cdk/tree'; import { Component } from '@angular/core'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzInputModule } from 'ng-zorro-antd/input'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface TreeNode { name: string; @@ -46,6 +49,8 @@ interface FlatNode { @Component({ selector: 'nz-demo-tree-view-editable', + standalone: true, + imports: [NzButtonModule, NzInputModule, NzIconModule, NzTreeViewModule], template: ` diff --git a/components/tree-view/demo/line.ts b/components/tree-view/demo/line.ts index 04d1496d8b..959c142738 100644 --- a/components/tree-view/demo/line.ts +++ b/components/tree-view/demo/line.ts @@ -1,7 +1,10 @@ import { FlatTreeControl } from '@angular/cdk/tree'; import { AfterViewInit, Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzSwitchModule } from 'ng-zorro-antd/switch'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface TreeNode { name: string; @@ -43,6 +46,8 @@ interface FlatNode { @Component({ selector: 'nz-demo-tree-view-line', + standalone: true, + imports: [FormsModule, NzIconModule, NzSwitchModule, NzTreeViewModule], template: ` Show Leaf Icon: @@ -96,6 +101,7 @@ export class NzDemoTreeViewLineComponent implements AfterViewInit { dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener); showLeafIcon = false; + constructor() { this.dataSource.setData(TREE_DATA); } @@ -105,8 +111,4 @@ export class NzDemoTreeViewLineComponent implements AfterViewInit { ngAfterViewInit(): void { this.treeControl.expandAll(); } - - getNode(name: string): FlatNode | null { - return this.treeControl.dataNodes.find(n => n.name === name) || null; - } } diff --git a/components/tree-view/demo/module b/components/tree-view/demo/module deleted file mode 100644 index c91d23fe27..0000000000 --- a/components/tree-view/demo/module +++ /dev/null @@ -1,10 +0,0 @@ -import { NzButtonModule } from 'ng-zorro-antd/button'; -import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; -import { NzHighlightModule } from 'ng-zorro-antd/core/highlight'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; -import { NzIconModule } from 'ng-zorro-antd/icon'; -import { NzInputModule } from 'ng-zorro-antd/input'; -import { NzSwitchModule } from 'ng-zorro-antd/switch'; -import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; - -export const moduleList = [ NzTreeViewModule, NzIconModule, NzCheckboxModule, NzInputModule, NzSwitchModule, NzButtonModule, NzNoAnimationDirective, NzHighlightModule ]; \ No newline at end of file diff --git a/components/tree-view/demo/search.ts b/components/tree-view/demo/search.ts index b88bb2841e..8ca27bb7a9 100644 --- a/components/tree-view/demo/search.ts +++ b/components/tree-view/demo/search.ts @@ -1,9 +1,14 @@ import { FlatTreeControl } from '@angular/cdk/tree'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { BehaviorSubject, combineLatest } from 'rxjs'; import { auditTime, map } from 'rxjs/operators'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzHighlightPipe } from 'ng-zorro-antd/core/highlight'; +import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzInputModule } from 'ng-zorro-antd/input'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface TreeNode { name: string; @@ -69,6 +74,8 @@ function filterTreeData(data: TreeNode[], value: string): FilteredTreeResult { @Component({ selector: 'nz-demo-tree-view-search', + standalone: true, + imports: [FormsModule, NzInputModule, NzIconModule, NzTreeViewModule, NzNoAnimationDirective, NzHighlightPipe], template: ` diff --git a/components/tree-view/demo/virtual-scroll.ts b/components/tree-view/demo/virtual-scroll.ts index 2b858ee41a..db52212a9b 100644 --- a/components/tree-view/demo/virtual-scroll.ts +++ b/components/tree-view/demo/virtual-scroll.ts @@ -1,7 +1,8 @@ import { FlatTreeControl } from '@angular/cdk/tree'; import { Component } from '@angular/core'; -import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view'; interface FoodNode { name: string; @@ -36,6 +37,8 @@ interface ExampleFlatNode { @Component({ selector: 'nz-demo-tree-view-virtual-scroll', + standalone: true, + imports: [NzIconModule, NzTreeViewModule], template: ` @@ -86,8 +89,4 @@ export class NzDemoTreeViewVirtualScrollComponent { } hasChild = (_: number, node: ExampleFlatNode): boolean => node.expandable; - - getNode(name: string): ExampleFlatNode | null { - return this.treeControl.dataNodes.find(n => n.name === name) || null; - } } From 444114bd512ec0063d169dda05fe565ade089ab1 Mon Sep 17 00:00:00 2001 From: Laffery Date: Wed, 2 Oct 2024 07:48:32 +0800 Subject: [PATCH 5/5] refactor(module:tree-select): migrate demo to standalone mode --- components/tree-select/demo/status.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/tree-select/demo/status.ts b/components/tree-select/demo/status.ts index a1f4fde41a..6d7c171db2 100644 --- a/components/tree-select/demo/status.ts +++ b/components/tree-select/demo/status.ts @@ -8,6 +8,8 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; imports: [NzTreeSelectModule], template: ` +
+