Skip to content

Commit

Permalink
feat(data-table): add index to row select and row click outputs (#1007)
Browse files Browse the repository at this point in the history 
* feat(data-table): add index to row select and row click outputs

* chore(): fix rxjs to 5.5.2
  • Loading branch information
@emoralesb05
emoralesb05 authored Dec 4, 2017
1 parent 78948c1 commit 7d4d87b
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 18 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
"d3": "^4.4.0",
"hammerjs": "^2.0.8",
"highlight.js": "9.11.0",
"rxjs": "^5.5.2",
"rxjs": "5.5.2",
"showdown": "1.6.4",
"tslib": "^1.7.1",
"web-animations-js": "2.3.1",
Expand Down
2 changes: 1 addition & 1 deletion src/platform/core/data-table/data-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
[tabIndex]="selectable ? 0 : -1"
[selected]="(clickable || selectable) && isRowSelected(row)"
*ngFor="let row of virtualData; let rowIndex = index"
(click)="handleRowClick(row, $event)"
(click)="handleRowClick(row, fromRow + rowIndex, $event)"
(keyup)="selectable && _rowKeyup($event, row, rowIndex)"
(keydown.space)="blockEvent($event)"
(keydown.shift.space)="blockEvent($event)"
Expand Down
10 changes: 6 additions & 4 deletions src/platform/core/data-table/data-table.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,7 @@ describe('Component: DataTable', () => {
fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[1].nativeElement.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(clickEventSpy.calls.argsFor(0)[0].index).toBe(1);
expect(clickEventSpy.calls.count()).toBe(1);
expect(selectEventSpy.calls.count()).toBe(0);

Expand All @@ -369,6 +370,7 @@ describe('Component: DataTable', () => {
fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].nativeElement.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(selectEventSpy.calls.argsFor(0)[0].index).toBe(0);
expect(clickEventSpy.calls.count()).toBe(1);
expect(selectEventSpy.calls.count()).toBe(1);
});
Expand Down Expand Up @@ -492,8 +494,8 @@ class TdDataTableRowClickTestComponent {
[columns]="columns"
[selectable]="selectable"
[clickable]="clickable"
(rowClick)="clickEvent()"
(rowSelect)="selectEvent()">
(rowClick)="clickEvent($event)"
(rowSelect)="selectEvent($event)">
</td-data-table>`,
})
class TdDataTableSelectableRowClickTestComponent {
Expand All @@ -508,10 +510,10 @@ class TdDataTableSelectableRowClickTestComponent {
];
selectable: boolean = false;
clickable: boolean = false;
clickEvent(): void {
clickEvent(event: any): void {
/* noop */
}
selectEvent(): void {
selectEvent(event: any): void {
/* noop */
}
}
Expand Down
27 changes: 16 additions & 11 deletions src/platform/core/data-table/data-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export interface ITdDataTableColumn {
export interface ITdDataTableSelectEvent {
row: any;
selected: boolean;
index: number;
}

export interface ITdDataTableSelectAllEvent {
Expand All @@ -63,6 +64,7 @@ export interface ITdDataTableSelectAllEvent {

export interface ITdDataTableRowClickEvent {
row: any;
index: number;
}

export interface IInternalColumnWidth {
Expand Down Expand Up @@ -646,7 +648,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
(this._firstSelectedIndex <= currentSelected && this._lastSelectedIndex < this._firstSelectedIndex)) {
for (let i: number = firstIndex; i <= lastIndex; i++) {
if (this._firstSelectedIndex !== i) {
this._doSelection(this._data[i]);
this._doSelection(this._data[i], i);
}
}
} else if ((this._firstSelectedIndex > currentSelected) || (this._firstSelectedIndex < currentSelected)) {
Expand All @@ -663,13 +665,13 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
// we ignore the toggle
if ((this._firstCheckboxValue && !rowSelected) ||
(!this._firstCheckboxValue && rowSelected)) {
this._doSelection(this._data[i]);
this._doSelection(this._data[i], i);
} else if (this._shiftPreviouslyPressed) {
// else if the checkbox selected was in the middle of the last selection and the first selection
// then we undo the selections
if ((currentSelected >= this._firstSelectedIndex && currentSelected <= this._lastSelectedIndex) ||
(currentSelected <= this._firstSelectedIndex && currentSelected >= this._lastSelectedIndex)) {
this._doSelection(this._data[i]);
this._doSelection(this._data[i], i);
}
}
}
Expand All @@ -678,7 +680,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
// if shift wasnt pressed, then we take the element checked as the first row
// incase the next click uses shift
} else if (mouseEvent && !mouseEvent.shiftKey) {
this._firstCheckboxValue = this._doSelection(row);
this._firstCheckboxValue = this._doSelection(row, currentSelected);
this._shiftPreviouslyPressed = false;
this._firstSelectedIndex = currentSelected;
}
Expand Down Expand Up @@ -711,14 +713,17 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
* emits the onRowClickEvent when a row is clicked
* if clickable is true and selectable is false then select the row
*/
handleRowClick(row: any, event: Event): void {
handleRowClick(row: any, index: number, event: Event): void {
if (this.clickable) {
// ignoring linting rules here because attribute it actually null or not there
// can't check for undefined
const srcElement: any = event.srcElement || event.currentTarget;
/* tslint:disable-next-line */
if (srcElement.getAttribute('stopRowClick') === null) {
this.onRowClick.emit({row: row});
this.onRowClick.emit({
row: row,
index: index,
});
}
}
}
Expand Down Expand Up @@ -746,7 +751,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
case SPACE:
/** if user presses enter or space, the row should be selected */
if (this.selectable) {
this._doSelection(this._data[this.fromRow + index]);
this._doSelection(this._data[this.fromRow + index], this.fromRow + index);
}
break;
case UP_ARROW:
Expand All @@ -759,7 +764,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
}
this.blockEvent(event);
if (this.selectable && this.multiple && event.shiftKey && this.fromRow + index >= 0) {
this._doSelection(this._data[this.fromRow + index]);
this._doSelection(this._data[this.fromRow + index], this.fromRow + index);
}
break;
case DOWN_ARROW:
Expand All @@ -772,7 +777,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
}
this.blockEvent(event);
if (this.selectable && this.multiple && event.shiftKey && this.fromRow + index < this._data.length) {
this._doSelection(this._data[this.fromRow + index]);
this._doSelection(this._data[this.fromRow + index], this.fromRow + index);
}
break;
default:
Expand Down Expand Up @@ -820,7 +825,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
/**
* Does the actual Row Selection
*/
private _doSelection(row: any): boolean {
private _doSelection(row: any, rowIndex: number): boolean {
let wasSelected: boolean = this.isRowSelected(row);
if (!wasSelected) {
if (!this._multiple) {
Expand All @@ -838,7 +843,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After
}
}
this._calculateCheckboxState();
this.onRowSelect.emit({row: row, selected: !wasSelected});
this.onRowSelect.emit({row: row, index: rowIndex, selected: !wasSelected});
this.onChange(this._value);
return !wasSelected;
}
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6170,7 +6170,7 @@ rw@1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"

rxjs@^5.5.2:
rxjs@5.5.2, rxjs@^5.5.2:
version "5.5.2"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.2.tgz#28d403f0071121967f18ad665563255d54236ac3"
dependencies:
Expand Down

0 comments on commit 7d4d87b

Please sign in to comment.