From 62aafd5d9222b180fd0a448ebceaed94e9d1c651 Mon Sep 17 00:00:00 2001 From: Chintan Kavathia Date: Thu, 7 Nov 2024 14:19:33 +0530 Subject: [PATCH] refactor: datatable-selection and datatable-scroller as directive BREAKING CHANGE: replaced `DataTableSelectionComponent` with `DataTableSelectionDirective` and `ScrollerComponent` with `ScrollerDirective`. This components were used internally and now replaced as directives. --- .../components/body/body.component.spec.ts | 8 ++--- .../src/lib/components/body/body.component.ts | 28 +++++++-------- .../body/scroller.component.spec.ts | 27 -------------- .../body/scroller.directive.spec.ts | 36 +++++++++++++++++++ ...ler.component.ts => scroller.directive.ts} | 14 ++++---- .../body/selection.component.spec.ts | 27 -------------- .../body/selection.directive.spec.ts | 36 +++++++++++++++++++ ...on.component.ts => selection.directive.ts} | 11 +++--- .../src/lib/ngx-datatable.module.ts | 8 ++--- projects/ngx-datatable/src/public-api.ts | 4 +-- 10 files changed, 106 insertions(+), 93 deletions(-) delete mode 100644 projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts create mode 100644 projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts rename projects/ngx-datatable/src/lib/components/body/{scroller.component.ts => scroller.directive.ts} (87%) delete mode 100644 projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts create mode 100644 projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts rename projects/ngx-datatable/src/lib/components/body/{selection.component.ts => selection.directive.ts} (95%) diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts index 581d976c1..41e0460e0 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts +++ b/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts @@ -3,10 +3,10 @@ import { DataTableBodyComponent } from './body.component'; import { DataTableBodyRowComponent } from './body-row.component'; import { DataTableRowWrapperComponent } from './body-row-wrapper.component'; import { DataTableBodyCellComponent } from './body-cell.component'; -import { DataTableSelectionComponent } from './selection.component'; +import { DataTableSelectionDirective } from './selection.directive'; import { DataTableSummaryRowComponent } from './summary/summary-row.component'; import { ProgressBarComponent } from './progress-bar.component'; -import { ScrollerComponent } from './scroller.component'; +import { ScrollerDirective } from './scroller.directive'; import { ScrollbarHelper } from '../../services/scrollbar-helper.service'; describe('DataTableBodyComponent', () => { @@ -21,10 +21,10 @@ describe('DataTableBodyComponent', () => { DataTableBodyRowComponent, DataTableRowWrapperComponent, DataTableBodyCellComponent, - DataTableSelectionComponent, + DataTableSelectionDirective, DataTableSummaryRowComponent, ProgressBarComponent, - ScrollerComponent + ScrollerDirective ], providers: [ScrollbarHelper] }); diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts index a64a19c7c..a4bc064e2 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts @@ -15,7 +15,7 @@ import { TrackByFunction, ViewChild } from '@angular/core'; -import { ScrollerComponent } from './scroller.component'; +import { ScrollerDirective } from './scroller.directive'; import { columnGroupWidths, columnsByPin } from '../../utils/column'; import { RowHeightCache } from '../../utils/row-height-cache'; import { NgStyle } from '@angular/common'; @@ -57,24 +57,23 @@ import { > } - @if (rows?.length) { @if (summaryRow && summaryPosition === 'top') { @@ -247,7 +246,6 @@ import {
} - `, changeDetection: ChangeDetectionStrategy.OnPush, host: { @@ -389,7 +387,7 @@ export class DataTableBodyComponent }>(false); @Output() treeAction: EventEmitter<{ row: TRow }> = new EventEmitter(); - @ViewChild(ScrollerComponent) scroller: ScrollerComponent; + @ViewChild(ScrollerDirective) scroller: ScrollerDirective; /** * Returns if selection is enabled. diff --git a/projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts deleted file mode 100644 index 5805954e4..000000000 --- a/projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { ScrollerComponent } from './scroller.component'; - -describe('ScrollerComponent', () => { - let fixture: ComponentFixture; - let component: ScrollerComponent; - - // provide our implementations or mocks to the dependency injector - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ScrollerComponent] - }); - }); - - beforeEach(waitForAsync(() => { - TestBed.compileComponents().then(() => { - fixture = TestBed.createComponent(ScrollerComponent); - component = fixture.componentInstance; - }); - })); - - describe('fixture', () => { - it('should have a component instance', () => { - expect(component).toBeTruthy(); - }); - }); -}); diff --git a/projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts b/projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts new file mode 100644 index 000000000..b3573ec3e --- /dev/null +++ b/projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts @@ -0,0 +1,36 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { ScrollerDirective } from './scroller.directive'; +import { Component, ViewChild } from '@angular/core'; + +@Component({ + selector: 'test-fixture-component', + template: ` ` +}) +class TestFixtureComponent { + @ViewChild(ScrollerDirective, { static: true }) scroller!: ScrollerDirective; +} + +describe('ScrollerDirective', () => { + let fixture: ComponentFixture; + let component: TestFixtureComponent; + + // provide our implementations or mocks to the dependency injector + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestFixtureComponent, ScrollerDirective] + }); + }); + + beforeEach(waitForAsync(() => { + TestBed.compileComponents().then(() => { + fixture = TestBed.createComponent(TestFixtureComponent); + component = fixture.componentInstance; + }); + })); + + describe('fixture', () => { + it('should have a directive instance', () => { + expect(component.scroller).toBeTruthy(); + }); + }); +}); diff --git a/projects/ngx-datatable/src/lib/components/body/scroller.component.ts b/projects/ngx-datatable/src/lib/components/body/scroller.directive.ts similarity index 87% rename from projects/ngx-datatable/src/lib/components/body/scroller.component.ts rename to projects/ngx-datatable/src/lib/components/body/scroller.directive.ts index 7398893f8..2b0cb752f 100644 --- a/projects/ngx-datatable/src/lib/components/body/scroller.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/scroller.directive.ts @@ -1,6 +1,5 @@ import { - ChangeDetectionStrategy, - Component, + Directive, ElementRef, EventEmitter, HostBinding, @@ -12,15 +11,14 @@ import { Renderer2 } from '@angular/core'; -@Component({ +@Directive({ selector: 'datatable-scroller', - template: ` `, + exportAs: 'scroller', host: { class: 'datatable-scroll' - }, - changeDetection: ChangeDetectionStrategy.OnPush + } }) -export class ScrollerComponent implements OnInit, OnDestroy { +export class ScrollerDirective implements OnInit, OnDestroy { private renderer = inject(Renderer2); @Input() scrollbarV = false; @@ -49,7 +47,7 @@ export class ScrollerComponent implements OnInit, OnDestroy { // manual bind so we don't always listen if (this.scrollbarV || this.scrollbarH) { const renderer = this.renderer; - this.parentElement = renderer.parentNode(renderer.parentNode(this.element)); + this.parentElement = renderer.parentNode(this.element); this._scrollEventListener = this.onScrolled.bind(this); this.parentElement.addEventListener('scroll', this._scrollEventListener); } diff --git a/projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts deleted file mode 100644 index 168481a05..000000000 --- a/projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { DataTableSelectionComponent } from './selection.component'; - -describe('DataTableSelectionComponent', () => { - let fixture: ComponentFixture; - let component: DataTableSelectionComponent; - - // provide our implementations or mocks to the dependency injector - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [DataTableSelectionComponent] - }); - }); - - beforeEach(waitForAsync(() => { - TestBed.compileComponents().then(() => { - fixture = TestBed.createComponent(DataTableSelectionComponent); - component = fixture.componentInstance; - }); - })); - - describe('fixture', () => { - it('should have a component instance', () => { - expect(component).toBeTruthy(); - }); - }); -}); diff --git a/projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts b/projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts new file mode 100644 index 000000000..0ca2c387c --- /dev/null +++ b/projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts @@ -0,0 +1,36 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { DataTableSelectionDirective } from './selection.directive'; +import { Component, ViewChild } from '@angular/core'; + +@Component({ + selector: 'test-fixture-component', + template: `
` +}) +class TestFixtureComponent { + @ViewChild(DataTableSelectionDirective, { static: true }) selector!: DataTableSelectionDirective; +} + +describe('DataTableSelectionDirective', () => { + let fixture: ComponentFixture; + let component: TestFixtureComponent; + + // provide our implementations or mocks to the dependency injector + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestFixtureComponent, DataTableSelectionDirective] + }); + }); + + beforeEach(waitForAsync(() => { + TestBed.compileComponents().then(() => { + fixture = TestBed.createComponent(TestFixtureComponent); + component = fixture.componentInstance; + }); + })); + + describe('fixture', () => { + it('should have a component instance', () => { + expect(component.selector).toBeTruthy(); + }); + }); +}); diff --git a/projects/ngx-datatable/src/lib/components/body/selection.component.ts b/projects/ngx-datatable/src/lib/components/body/selection.directive.ts similarity index 95% rename from projects/ngx-datatable/src/lib/components/body/selection.component.ts rename to projects/ngx-datatable/src/lib/components/body/selection.directive.ts index d89b333e3..ecfadf3dc 100644 --- a/projects/ngx-datatable/src/lib/components/body/selection.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/selection.directive.ts @@ -1,14 +1,13 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { Directive, EventEmitter, Input, Output } from '@angular/core'; import { selectRows, selectRowsBetween } from '../../utils/selection'; import { Keys } from '../../utils/keys'; import { ActivateEvent, SelectionType } from '../../types/public.types'; -@Component({ - selector: 'datatable-selection', - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush +@Directive({ + selector: '[datatable-selection]', + exportAs: 'selector' }) -export class DataTableSelectionComponent { +export class DataTableSelectionDirective { @Input() rows: TRow[]; @Input() selected: TRow[]; @Input() selectEnabled: boolean; diff --git a/projects/ngx-datatable/src/lib/ngx-datatable.module.ts b/projects/ngx-datatable/src/lib/ngx-datatable.module.ts index fc48e7476..ad5ef4553 100644 --- a/projects/ngx-datatable/src/lib/ngx-datatable.module.ts +++ b/projects/ngx-datatable/src/lib/ngx-datatable.module.ts @@ -9,7 +9,7 @@ import { DraggableDirective } from './directives/draggable.directive'; import { ResizeableDirective } from './directives/resizeable.directive'; import { OrderableDirective } from './directives/orderable.directive'; import { LongPressDirective } from './directives/long-press.directive'; -import { ScrollerComponent } from './components/body/scroller.component'; +import { ScrollerDirective } from './components/body/scroller.directive'; import { DatatableComponent } from './components/datatable.component'; import { DataTableColumnDirective } from './components/columns/column.directive'; import { DataTableHeaderComponent } from './components/header/header.component'; @@ -24,7 +24,7 @@ import { DatatableRowDetailDirective } from './components/row-detail/row-detail. import { DatatableGroupHeaderDirective } from './components/body/body-group-header.directive'; import { DatatableRowDetailTemplateDirective } from './components/row-detail/row-detail-template.directive'; import { DataTableBodyCellComponent } from './components/body/body-cell.component'; -import { DataTableSelectionComponent } from './components/body/selection.component'; +import { DataTableSelectionDirective } from './components/body/selection.directive'; import { DataTableColumnHeaderDirective } from './components/columns/column-header.directive'; import { DataTableColumnCellDirective } from './components/columns/column-cell.directive'; import { DataTableColumnGhostCellDirective } from './components/columns/column-ghost-cell.directive'; @@ -50,7 +50,7 @@ import { ResizeableDirective, OrderableDirective, LongPressDirective, - ScrollerComponent, + ScrollerDirective, DatatableComponent, DataTableColumnDirective, DataTableHeaderComponent, @@ -65,7 +65,7 @@ import { DatatableGroupHeaderDirective, DatatableRowDetailTemplateDirective, DataTableBodyCellComponent, - DataTableSelectionComponent, + DataTableSelectionDirective, DataTableColumnHeaderDirective, DataTableColumnCellDirective, DataTableColumnGhostCellDirective, diff --git a/projects/ngx-datatable/src/public-api.ts b/projects/ngx-datatable/src/public-api.ts index d46426615..13e85cb10 100644 --- a/projects/ngx-datatable/src/public-api.ts +++ b/projects/ngx-datatable/src/public-api.ts @@ -11,9 +11,9 @@ export * from './lib/components/body/body.component'; export * from './lib/components/body/body-cell.component'; export * from './lib/components/body/body-row.component'; export * from './lib/components/body/progress-bar.component'; -export * from './lib/components/body/scroller.component'; +export * from './lib/components/body/scroller.directive'; export * from './lib/components/body/body-row-wrapper.component'; -export * from './lib/components/body/selection.component'; +export * from './lib/components/body/selection.directive'; export * from './lib/components/body/body-group-header.directive'; export * from './lib/components/body/body-group-header-template.directive'; export * from './lib/components/body/summary/summary-row.component';