Skip to content

Commit

Permalink
feat: proper types for rows (#46)
Browse files Browse the repository at this point in the history 
* feat: use proper type for row related properties

* fix: detect update in rows automatically if row identity changed

* perf: only detect changes in rows on real changes

* docs: use row related types in examples
  • Loading branch information
@spike-rabbit
spike-rabbit authored Apr 19, 2024
1 parent b164538 commit 1641b94
Show file tree
Hide file tree
Showing 67 changed files with 417 additions and 341 deletions.
28 changes: 15 additions & 13 deletions projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
import { TableColumn } from '../../types/table-column.type';
import { SortDirection } from '../../types/sort-direction.type';
import { Keys } from '../../utils/keys';
import { RowOrGroup } from "../../types/group.type";
import { BehaviorSubject } from "rxjs";

export type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';

Expand Down Expand Up @@ -70,19 +72,19 @@ export type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';
</ng-template>
`
})
export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
@Input() displayCheck: (row: any, column?: TableColumn, value?: any) => boolean;
export class DataTableBodyCellComponent<TRow extends {level?: number} = any> implements DoCheck, OnDestroy {
@Input() displayCheck: (row: RowOrGroup<TRow>, column?: TableColumn, value?: any) => boolean;

_disable$;
@Input() set disable$(val: any) {
_disable$: BehaviorSubject<boolean>;
@Input() set disable$(val: BehaviorSubject<boolean>) {
this._disable$ = val;
this.cellContext.disable$ = val;
};
get disable$() {
return this._disable$;
}

@Input() set group(group: any) {
@Input() set group(group: TRow[]) {
this._group = group;
this.cellContext.group = group;
this.checkValueUpdates();
Expand Down Expand Up @@ -146,14 +148,14 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
return this._column;
}

@Input() set row(row: any) {
@Input() set row(row: RowOrGroup<TRow>) {
this._row = row;
this.cellContext.row = row;
this.checkValueUpdates();
this.cd.markForCheck();
}

get row(): any {
get row(): RowOrGroup<TRow> {
return this._row;
}

Expand Down Expand Up @@ -275,15 +277,15 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
private _isSelected: boolean;
private _sorts: any[];
private _column: TableColumn;
private _row: any;
private _group: any;
private _row: RowOrGroup<TRow>;
private _group: TRow[];
private _rowHeight: number;
private _rowIndex: number;
private _expanded: boolean;
private _element: any;
private _element: HTMLElement;
private _treeStatus: TreeStatus;

constructor(element: ElementRef, private cd: ChangeDetectorRef) {
constructor(element: ElementRef<HTMLElement>, private cd: ChangeDetectorRef) {
this.cellContext = {
onCheckboxChangeFn: this.onCheckboxChangeFn,
activateFn: this.activateFn,
Expand Down Expand Up @@ -444,8 +446,8 @@ export class DataTableBodyCellComponent implements DoCheck, OnDestroy {
this.treeAction.emit(this.row);
}

calcLeftMargin(column: any, row: any) {
calcLeftMargin(column: any, row: RowOrGroup<TRow>) {
const levelIndent = column.treeLevelIndent != null ? column.treeLevelIndent : 50;
return column.isTreeColumn ? row.level * levelIndent : 0;
return column.isTreeColumn ? (row as TRow).level * levelIndent : 0;
}
}
20 changes: 12 additions & 8 deletions projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Output
} from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { RowOrGroup } from "../../types/group.type";

@Component({
selector: 'datatable-row-wrapper',
Expand Down Expand Up @@ -44,16 +45,16 @@ import { BehaviorSubject } from 'rxjs';
class: 'datatable-row-wrapper'
}
})
export class DataTableRowWrapperComponent implements DoCheck, OnInit {
export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit {
@Input() innerWidth: number;
@Input() rowDetail: any;
@Input() groupHeader: any;
@Input() offsetX: number;
@Input() detailRowHeight: any;
@Input() row: any;
@Input() row: RowOrGroup<TRow>;
@Input() groupedRows: any;
@Input() disableCheck: (row: any) => boolean;
@Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: any }>(false);
@Input() disableCheck: (row: RowOrGroup<TRow>) => boolean;
@Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: RowOrGroup<TRow> }>(false);

@Input() set rowIndex(val: number) {
this._rowIndex = val;
Expand Down Expand Up @@ -81,11 +82,11 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit {
rowContext: any;
disable$: BehaviorSubject<boolean>;

private rowDiffer: KeyValueDiffer<unknown, unknown>;
private rowDiffer: KeyValueDiffer<keyof RowOrGroup<TRow>, any>;
private _expanded = false;
private _rowIndex: number;

constructor(private cd: ChangeDetectorRef, private differs: KeyValueDiffers) {
constructor(private cd: ChangeDetectorRef, differs: KeyValueDiffers) {
this.groupContext = {
group: this.row,
expanded: this.expanded,
Expand All @@ -112,9 +113,12 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit {
ngDoCheck(): void {
if (this.disableCheck) {
const isRowDisabled = this.disableCheck(this.row);
this.disable$.next(isRowDisabled);
this.cd.markForCheck();
if (isRowDisabled !== this.disable$.value) {
this.disable$.next(isRowDisabled);
this.cd.markForCheck();
}
}

if (this.rowDiffer.diff(this.row)) {
this.rowContext.row = this.row;
this.groupContext.group = this.row;
Expand Down
17 changes: 9 additions & 8 deletions projects/ngx-datatable/src/lib/components/body/body-row.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
import { translateXY } from '../../utils/translate';
import { BehaviorSubject } from 'rxjs';
import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
import { RowOrGroup } from "../../types/group.type";

@Component({
selector: 'datatable-body-row',
Expand Down Expand Up @@ -54,7 +55,7 @@ import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
</div>
`
})
export class DataTableBodyRowComponent implements DoCheck {
export class DataTableBodyRowComponent<TRow = any> implements DoCheck {
@Input() set columns(val: any[]) {
this._columns = val;
this.recalculateColumns(val);
Expand Down Expand Up @@ -82,12 +83,12 @@ export class DataTableBodyRowComponent implements DoCheck {

@Input() expanded: boolean;
@Input() rowClass: any;
@Input() row: any;
@Input() group: any;
@Input() row: RowOrGroup<TRow>;
@Input() group: TRow[];
@Input() isSelected: boolean;
@Input() rowIndex: number;
@Input() displayCheck: any;
@Input() treeStatus: TreeStatus = 'collapsed';
@Input() treeStatus?: TreeStatus = 'collapsed';
@Input() ghostLoadingIndicator = false;

@Input() disable$: BehaviorSubject<boolean>;
Expand Down Expand Up @@ -145,7 +146,7 @@ export class DataTableBodyRowComponent implements DoCheck {
@Output() activate: EventEmitter<any> = new EventEmitter();
@Output() treeAction: EventEmitter<any> = new EventEmitter();

_element: any;
_element: HTMLElement;
_columnGroupWidths: any;
_columnsByPin: any;
_offsetX: number;
Expand All @@ -157,13 +158,13 @@ export class DataTableBodyRowComponent implements DoCheck {
right: {}
};

private _rowDiffer: KeyValueDiffer<unknown, unknown>;
private _rowDiffer: KeyValueDiffer<keyof RowOrGroup<TRow>, any>;

constructor(
private differs: KeyValueDiffers,
differs: KeyValueDiffers,
@SkipSelf() private scrollbarHelper: ScrollbarHelper,
private cd: ChangeDetectorRef,
element: ElementRef
element: ElementRef<HTMLElement>
) {
this._element = element.nativeElement;
this._rowDiffer = differs.find({}).create();
Expand Down
Loading

0 comments on commit 1641b94

Please sign in to comment.