From 132e4254b42c1eb0fbdcdbe903035fdd4d181b5f Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Thu, 17 Sep 2020 09:46:48 +0800 Subject: [PATCH] refactor(module:table): remove deprecated APIs for v10 (#5792) BREAKING CHANGES: - `th[nzSort]` has been removed, use `th[nzSortOrder]` instead. - `th(nzSortChange) has been removed, use `th(nzSortOrderChange)` instead. - `th(nzSortChangeWithKey)` has been removed. Please manually remove it. - `thead(nzSortChange)` has been removed, use `thead(nzSortOrderChange)` instead. - `thead[nzSingleSort]` and `th[nzSortKey]` has been removed. Please manually change to `th[nzSortFn]`. --- .../table/src/cell/th-addon.component.ts | 29 +----- .../table/src/cell/th-selection.component.ts | 1 - components/table/src/table/thead.component.ts | 25 +----- components/table/src/testing/th.spec.ts | 10 +-- components/table/src/testing/thead.spec.ts | 26 ++---- schematics/ng-update/data/class-names.ts | 3 +- schematics/ng-update/data/input-names.ts | 12 +++ schematics/ng-update/data/output-names.ts | 15 +++- schematics/ng-update/index.ts | 2 + .../test-cases/v10/grid-deprecated.spec.ts | 6 +- .../test-cases/v10/table-deprecated.spec.ts | 88 +++++++++++++++++++ .../checks/grid-template-rule.ts | 11 ++- .../checks/table-template-rule.ts | 42 +++++++++ 13 files changed, 187 insertions(+), 83 deletions(-) create mode 100644 schematics/ng-update/test-cases/v10/table-deprecated.spec.ts create mode 100644 schematics/ng-update/upgrade-rules/checks/table-template-rule.ts diff --git a/components/table/src/cell/th-addon.component.ts b/components/table/src/cell/th-addon.component.ts index 1b76368a467..63edd9369bf 100644 --- a/components/table/src/cell/th-addon.component.ts +++ b/components/table/src/cell/th-addon.component.ts @@ -17,7 +17,6 @@ import { SimpleChanges, ViewEncapsulation } from '@angular/core'; -import { warnDeprecation } from 'ng-zorro-antd/core/logger'; import { BooleanInput } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; import { Subject } from 'rxjs'; @@ -25,8 +24,7 @@ import { takeUntil } from 'rxjs/operators'; import { NzTableFilterFn, NzTableFilterList, NzTableFilterValue, NzTableSortFn, NzTableSortOrder } from '../table.types'; @Component({ - selector: - 'th[nzSortKey], th[nzColumnKey], th[nzSort], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]', + selector: 'th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, @@ -88,12 +86,6 @@ export class NzThAddOnComponent implements OnChanges, OnInit, OnDestroy { @Output() readonly nzCheckedChange = new EventEmitter(); @Output() readonly nzSortOrderChange = new EventEmitter(); @Output() readonly nzFilterChange = new EventEmitter(); - /** @deprecated use nzColumnKey instead **/ - @Input() nzSortKey?: string; - /** @deprecated use nzSortOrder instead **/ - @Input() nzSort: NzTableSortOrder = null; - /** @deprecated use nzSortOrderChange instead **/ - @Output() readonly nzSortChange = new EventEmitter(); getNextSortDirection(sortDirections: NzTableSortOrder[], current: NzTableSortOrder): NzTableSortOrder { const index = sortDirections.indexOf(current); @@ -138,7 +130,6 @@ export class NzThAddOnComponent implements OnChanges, OnInit, OnDestroy { this.sortOrderChange$.pipe(takeUntil(this.destroy$)).subscribe(order => { if (this.sortOrder !== order) { this.sortOrder = order; - this.nzSortChange.emit(order); this.nzSortOrderChange.emit(order); } this.updateCalcOperator(); @@ -148,8 +139,6 @@ export class NzThAddOnComponent implements OnChanges, OnInit, OnDestroy { ngOnChanges(changes: SimpleChanges): void { const { - nzSortKey, - nzSort, nzSortDirections, nzFilters, nzSortOrder, @@ -165,17 +154,6 @@ export class NzThAddOnComponent implements OnChanges, OnInit, OnDestroy { this.sortDirections = this.nzSortDirections; } } - if (nzSort) { - this.sortOrder = this.nzSort; - this.setSortOrder(this.nzSort); - warnDeprecation( - `'nzSort' and 'nzSortChange' is deprecated and will be removed in 10.0.0. Please use 'nzSortOrder' and 'nzSortOrderChange' instead.` - ); - } - if (nzSortKey) { - this.nzColumnKey = this.nzSortKey; - warnDeprecation(`'nzSortKey' is deprecated and will be removed in 10.0.0. Please use 'nzColumnKey' instead.`); - } if (nzSortOrder) { this.sortOrder = this.nzSortOrder; this.setSortOrder(this.nzSortOrder); @@ -187,10 +165,7 @@ export class NzThAddOnComponent implements OnChanges, OnInit, OnDestroy { this.isNzShowFilterChanged = true; } const isFirstChange = (value: SimpleChange) => value && value.firstChange && value.currentValue !== undefined; - if ( - (isFirstChange(nzSortKey) || isFirstChange(nzSort) || isFirstChange(nzSortOrder) || isFirstChange(nzSortFn)) && - !this.isNzShowSortChanged - ) { + if ((isFirstChange(nzSortOrder) || isFirstChange(nzSortFn)) && !this.isNzShowSortChanged) { this.nzShowSort = true; } if (isFirstChange(nzFilters) && !this.isNzShowFilterChanged) { diff --git a/components/table/src/cell/th-selection.component.ts b/components/table/src/cell/th-selection.component.ts index a67d49269f0..39fb561883f 100644 --- a/components/table/src/cell/th-selection.component.ts +++ b/components/table/src/cell/th-selection.component.ts @@ -49,7 +49,6 @@ export class NzThSelectionComponent implements OnChanges { @Input() @InputBoolean() nzShowCheckbox = false; @Input() @InputBoolean() nzShowRowSelection = false; @Output() readonly nzCheckedChange = new EventEmitter(); - @Output() readonly nzSortChangeWithKey = new EventEmitter<{ key: string; value: string | null }>(); private isNzShowExpandChanged = false; private isNzShowCheckboxChanged = false; diff --git a/components/table/src/table/thead.component.ts b/components/table/src/table/thead.component.ts index c5d434e01b2..7be8c985364 100644 --- a/components/table/src/table/thead.component.ts +++ b/components/table/src/table/thead.component.ts @@ -11,23 +11,18 @@ import { ContentChildren, ElementRef, EventEmitter, - Input, - OnChanges, OnDestroy, OnInit, Optional, Output, QueryList, Renderer2, - SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { warnDeprecation } from 'ng-zorro-antd/core/logger'; -import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { InputBoolean } from 'ng-zorro-antd/core/util'; import { EMPTY, merge, Observable, of, Subject } from 'rxjs'; import { delay, map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators'; import { NzThAddOnComponent } from '../cell/th-addon.component'; @@ -48,18 +43,12 @@ import { NzTrDirective } from './tr.directive'; ` }) -export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterViewInit, OnInit, OnChanges { - static ngAcceptInputType_nzSingleSort: BooleanInput; - +export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterViewInit, OnInit { private destroy$ = new Subject(); isInsideTable = false; @ViewChild('contentTemplate', { static: true }) templateRef!: TemplateRef; @ContentChildren(NzTrDirective, { descendants: true }) listOfNzTrDirective!: QueryList; @ContentChildren(NzThAddOnComponent, { descendants: true }) listOfNzThAddOnComponent!: QueryList; - /** @deprecated use nzSortFn and nzSortPriority instead **/ - @Input() @InputBoolean() nzSingleSort = false; - /** @deprecated use nzSortOrderChange instead **/ - @Output() readonly nzSortChange = new EventEmitter<{ key: NzSafeAny; value: string | null }>(); @Output() readonly nzSortOrderChange = new EventEmitter<{ key: NzSafeAny; value: string | null }>(); constructor( @@ -77,13 +66,6 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterViewI } } - ngOnChanges(changes: SimpleChanges): void { - const { nzSingleSort } = changes; - if (nzSingleSort) { - warnDeprecation(`'nzSingleSort' is deprecated and will be removed in 10.0.0. Please use 'nzSortFn' and 'nzSortPriority' instead.`); - } - } - ngAfterContentInit(): void { if (this.nzTableStyleService) { const firstTableRow$ = this.listOfNzTrDirective.changes.pipe( @@ -125,9 +107,8 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterViewI ); manualSort$.subscribe((data: NzThAddOnComponent) => { const emitValue = { key: data.nzColumnKey, value: data.sortOrder }; - this.nzSortChange.emit(emitValue); this.nzSortOrderChange.emit(emitValue); - if (this.nzSingleSort || (data.nzSortFn && data.nzSortPriority === false)) { + if (data.nzSortFn && data.nzSortPriority === false) { this.listOfNzThAddOnComponent.filter(th => th !== data).forEach(th => th.clearSortOrder()); } }); diff --git a/components/table/src/testing/th.spec.ts b/components/table/src/testing/th.spec.ts index 14319fe78fc..4d487065bbd 100644 --- a/components/table/src/testing/th.spec.ts +++ b/components/table/src/testing/th.spec.ts @@ -135,11 +135,9 @@ interface DataItem { @Component({ template: ` - + - - Name - + Name Age ` + template: ` + + ` }) export class NzTestDisableThComponent {} diff --git a/components/table/src/testing/thead.spec.ts b/components/table/src/testing/thead.spec.ts index b544c2b0a58..45f01d3cf95 100644 --- a/components/table/src/testing/thead.spec.ts +++ b/components/table/src/testing/thead.spec.ts @@ -37,25 +37,9 @@ describe('nz-thead', () => { expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('anticon-caret-down'); expect(testComponent.sortChange).toHaveBeenCalledTimes(2); }); - it('should singleSort change', () => { - testComponent.singleSort = true; - fixture.detectChanges(); - expect(testComponent.sortChange).toHaveBeenCalledTimes(0); - const upButtons = table.nativeElement.querySelectorAll('.ant-table-column-sorters'); - upButtons[0].click(); - fixture.detectChanges(); - expect(testComponent.sortChange).toHaveBeenCalledTimes(1); - expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('anticon-caret-down'); - upButtons[1].click(); - fixture.detectChanges(); - expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('anticon-caret-down'); - expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('anticon-caret-down'); - expect(testComponent.sortChange).toHaveBeenCalledTimes(2); - }); // Test for #3603 it('should support dynamic headers', () => { - testComponent.singleSort = true; fixture.detectChanges(); expect(testComponent.sortChange).toHaveBeenCalledTimes(0); let upButtons = table.nativeElement.querySelectorAll('.ant-table-column-sorters'); @@ -79,16 +63,16 @@ describe('nz-thead', () => { @Component({ template: ` - - - - + + + > + > ` }) export class NzTheadTestNzTableComponent { - singleSort = false; sortChange = jasmine.createSpy('sort change'); columns = ['third', 'fourth']; + filterFn = () => -1; } diff --git a/schematics/ng-update/data/class-names.ts b/schematics/ng-update/data/class-names.ts index c469fd934ee..390ddd4ac3b 100644 --- a/schematics/ng-update/data/class-names.ts +++ b/schematics/ng-update/data/class-names.ts @@ -17,7 +17,8 @@ export const classNames: VersionChanges = { { pr: 'https://github.com/NG-ZORRO/ng-zorro-antd/pull/5779', changes: [ - {replace: 'NzNotificationDataFilled', replaceWith: 'NzNotificationRef'} + {replace: 'NzNotificationDataFilled', replaceWith: 'NzNotificationRef'}, + {replace: 'NzMessageDataFilled', replaceWith: 'NzMessageRef'} ] }, { diff --git a/schematics/ng-update/data/input-names.ts b/schematics/ng-update/data/input-names.ts index a54a04bf9d3..a200a63c0d2 100644 --- a/schematics/ng-update/data/input-names.ts +++ b/schematics/ng-update/data/input-names.ts @@ -27,6 +27,18 @@ export const inputNames: VersionChanges = { } } ] + }, + { + pr: 'https://github.com/NG-ZORRO/ng-zorro-antd/pull/5792', + changes: [ + { + replace : 'nzSort', + replaceWith: 'nzSortOrder', + whitelist : { + elements: [ 'th' ] + } + } + ] } ], [ TargetVersion.V9 ]: [ diff --git a/schematics/ng-update/data/output-names.ts b/schematics/ng-update/data/output-names.ts index 356af81c4d9..fb6f22a0466 100644 --- a/schematics/ng-update/data/output-names.ts +++ b/schematics/ng-update/data/output-names.ts @@ -1,7 +1,6 @@ import { OutputNameUpgradeData, TargetVersion, VersionChanges } from '@angular/cdk/schematics'; export const outputNames: VersionChanges = { - [ TargetVersion.V7 ]: [], [ TargetVersion.V9 ]: [ { pr : 'https://github.com/NG-ZORRO/ng-zorro-antd/pull/4601', @@ -15,5 +14,19 @@ export const outputNames: VersionChanges = { } ] } + ], + [ TargetVersion.V10 ]: [ + { + pr : 'https://github.com/NG-ZORRO/ng-zorro-antd/pull/5792', + changes: [ + { + replace : 'nzSortChange', + replaceWith: 'nzSortOrderChange', + whitelist : { + elements: ['thead', 'th'] + } + } + ] + } ] }; diff --git a/schematics/ng-update/index.ts b/schematics/ng-update/index.ts index e371a7cffb2..c64c04a2b0e 100644 --- a/schematics/ng-update/index.ts +++ b/schematics/ng-update/index.ts @@ -11,6 +11,7 @@ import { GridTemplateRule } from './upgrade-rules/checks/grid-template-rule'; import { IconTemplateRule } from './upgrade-rules/checks/icon-template-rule'; import { InjectionTokenRule } from "./upgrade-rules/checks/injection-token-rule"; import { SecondaryEntryPointsRule } from './upgrade-rules/checks/secondary-entry-points-rule'; +import { TableTemplateRule } from './upgrade-rules/checks/table-template-rule'; import { TooltipLikeTemplateRule } from './upgrade-rules/checks/tooltip-like-template-rule'; const migrations: NullableDevkitMigration[] = [ @@ -23,6 +24,7 @@ const migrations: NullableDevkitMigration[] = [ InjectionTokenRule, FormTemplateRule, GridTemplateRule, + TableTemplateRule, SecondaryEntryPointsRule, ClassNamesMigration ]; diff --git a/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts b/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts index 64f851a70c5..743d94dd3d7 100644 --- a/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts +++ b/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts @@ -52,7 +52,7 @@ describe('v10 form components migration', () => { await runner.runSchematicAsync('migration-v10', {}, tree).toPromise(); } - describe('form components', () => { + describe('grid/form components', () => { it('should properly report deprecated input', async() => { writeFile('/index.ts', `; @@ -69,8 +69,8 @@ describe('v10 form components migration', () => { await runMigration(); const output = warnOutput.toString(); expect(output).toContain( '/index.ts@5:23 - Found deprecated input \'[nzFlex]\'.'); - expect(output).toContain( '/index.ts@6:17 - Found deprecated input \'[nzFlex]\'.'); - expect(output).toContain( '/index.ts@7:23 - Found deprecated input \'[nzFlex]\'.'); + expect(output).toContain( '/index.ts@6:17 - Found deprecated input \'[nzType]\'.'); + expect(output).toContain( '/index.ts@7:23 - Found deprecated input \'[nzType]\'.'); }); }); diff --git a/schematics/ng-update/test-cases/v10/table-deprecated.spec.ts b/schematics/ng-update/test-cases/v10/table-deprecated.spec.ts new file mode 100644 index 00000000000..9d24a91f07c --- /dev/null +++ b/schematics/ng-update/test-cases/v10/table-deprecated.spec.ts @@ -0,0 +1,88 @@ +import { getSystemPath, normalize, virtualFs } from '@angular-devkit/core'; +import { TempScopedNodeJsSyncHost } from '@angular-devkit/core/node/testing'; +import { HostTree } from '@angular-devkit/schematics'; +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; +import * as shx from 'shelljs'; +import { SchematicsTestNGConfig, SchematicsTestTsConfig } from '../config'; + +describe('v10 table components migration', () => { + let runner: SchematicTestRunner; + let host: TempScopedNodeJsSyncHost; + let tree: UnitTestTree; + let tmpDirPath: string; + let previousWorkingDir: string; + let warnOutput: string[]; + + beforeEach(() => { + runner = new SchematicTestRunner('test', require.resolve('../../../migration.json')); + host = new TempScopedNodeJsSyncHost(); + tree = new UnitTestTree(new HostTree(host)); + + writeFile('/tsconfig.json', JSON.stringify(SchematicsTestTsConfig)); + writeFile('/angular.json', JSON.stringify(SchematicsTestNGConfig)); + + warnOutput = []; + runner.logger.subscribe(logEntry => { + if (logEntry.level === 'warn') { + warnOutput.push(logEntry.message); + } + }); + + previousWorkingDir = shx.pwd(); + tmpDirPath = getSystemPath(host.root); + + shx.cd(tmpDirPath); + + writeFakeAngular(); + }); + + afterEach(() => { + shx.cd(previousWorkingDir); + shx.rm('-r', tmpDirPath); + }); + + function writeFakeAngular(): void { writeFile('/node_modules/@angular/core/index.d.ts', ``); } + + function writeFile(filePath: string, contents: string): void { + host.sync.write(normalize(filePath), virtualFs.stringToFileBuffer(contents)); + } + + // tslint:disable-next-line:no-any + async function runMigration(): Promise { + await runner.runSchematicAsync('migration-v10', {}, tree).toPromise(); + } + + describe('table component', () => { + + it('should properly report deprecated input', async() => { + writeFile('/index.ts', `; + import {Component} from '@angular/core' + @Component({ + template: \` + + + + +
+ \` + }) + export class MyComp { + change() {} + }`); + await runMigration(); + const output = warnOutput.toString(); + const content = tree.readContent('/index.ts'); + + expect(output).toContain( '/index.ts@6:18 - Found deprecated input \'thead[nzSingleSort]\'.'); + expect(output).toContain( '/index.ts@7:17 - Found deprecated input \'th[nzSortKey]\'.'); + + expect(content).toContain(` + + + +
`) + }); + + }); + +}); diff --git a/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts b/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts index fa3ff24e725..acc1b88f1ad 100644 --- a/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts +++ b/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts @@ -17,13 +17,20 @@ export class GridTemplateRule extends Migration { offsets.push(...findInputsOnElementWithAttr(template.content, 'nzType', ['nz-row'])) offsets.push(...findInputsOnElementWithTag(template.content, 'nzType', ['nz-form-item', 'nz-row'])) - offsets.push(...findInputsOnElementWithTag(template.content, 'nzFlex', ['nz-form-item'])) offsets.forEach(offset => { this.failures.push({ filePath: template.filePath, position: template.getCharacterAndLineOfPosition(offset), - message: `Found deprecated input '[nzFlex]'. Please manually remove this input.` + message: `Found deprecated input '[nzType]'. Please manually remove this input.` + }); + }) + + findInputsOnElementWithTag(template.content, 'nzFlex', ['nz-form-item']).forEach(offset => { + this.failures.push({ + filePath: template.filePath, + position: template.getCharacterAndLineOfPosition(offset), + message: `Found deprecated input '[nzFlex]'. Please manually remove this input.` }); }) diff --git a/schematics/ng-update/upgrade-rules/checks/table-template-rule.ts b/schematics/ng-update/upgrade-rules/checks/table-template-rule.ts new file mode 100644 index 00000000000..0d066efd0ab --- /dev/null +++ b/schematics/ng-update/upgrade-rules/checks/table-template-rule.ts @@ -0,0 +1,42 @@ +import { + findInputsOnElementWithTag, findOutputsOnElementWithTag, + Migration, + ResolvedResource, + TargetVersion, + UpgradeData +} from '@angular/cdk/schematics'; + +export class TableTemplateRule extends Migration { + + enabled = this.targetVersion === TargetVersion.V10; + + visitTemplate(template: ResolvedResource): void { + + findOutputsOnElementWithTag(template.content, 'nzSortChangeWithKey', ['th']) + .forEach(offset => { + this.failures.push({ + filePath: template.filePath, + position: template.getCharacterAndLineOfPosition(offset), + message: `Found deprecated output 'th(nzSortChangeWithKey)'. Please manually remove this output.` + }); + }); + + findInputsOnElementWithTag(template.content, 'nzSingleSort', ['thead']) + .forEach(offset => { + this.failures.push({ + filePath: template.filePath, + position: template.getCharacterAndLineOfPosition(offset), + message: `Found deprecated input 'thead[nzSingleSort]'. Please manually change to 'th[nzSortFn]'.` + }); + }); + + findInputsOnElementWithTag(template.content, 'nzSortKey', ['th']) + .forEach(offset => { + this.failures.push({ + filePath: template.filePath, + position: template.getCharacterAndLineOfPosition(offset), + message: `Found deprecated input 'th[nzSortKey]'. Please manually change to 'th[nzSortFn]'.` + }); + }); + } +}