Skip to content

Commit df8e5ca

Browse files
kdinevkdinev
authored
Merge pull request #8496 from IgniteUI/sstoychev/mac-keys-102
fix(grid): adding more keys for add row kbd int #8414
2 parents 7a129b8 + e1bf8c3 commit df8e5ca

File tree

4 files changed

+35
-28
lines changed

4 files changed

+35
-28
lines changed

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -333,9 +333,9 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs {
333333
event?: Event;
334334
}
335335

336-
export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs {}
336+
export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs { }
337337

338-
export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs {}
338+
export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs { }
339339

340340
export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
341341

@@ -356,7 +356,8 @@ export const NAVIGATION_KEYS = new Set([
356356
]);
357357
export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
358358
export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
359-
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+', 'add']);
359+
export const ROW_ADD_KEYS = new Set(['+', 'add', '≠', '±', '=']);
360+
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), ...Array.from(ROW_ADD_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
360361
export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l',
361362
/** This symbol corresponds to the Alt + L combination under MAC. */
362363
'¬']);
@@ -472,7 +473,7 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index:
472473
let i = 0;
473474
const chunk = () => {
474475
const end = Math.min(i + chunkSize, count);
475-
for ( ; i < end; ++i) {
476+
for (; i < end; ++i) {
476477
callback(i);
477478
}
478479
if (i < count) {

‎projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
22
import { first } from 'rxjs/operators';
33
import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
44
import { GridType } from './common/grid.interface';
5-
import { NAVIGATION_KEYS, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, HORIZONTAL_NAV_KEYS, HEADER_KEYS, isEdge } from '../core/utils';
5+
import { NAVIGATION_KEYS, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, HORIZONTAL_NAV_KEYS, HEADER_KEYS, ROW_ADD_KEYS, isEdge } from '../core/utils';
66
import { IgxGridBaseDirective } from './grid-base.directive';
77
import { IMultiRowLayoutNode } from './selection/selection.service';
88
import { GridKeydownTargetType, GridSelectionMode, FilterMode } from './common/enums';
@@ -92,7 +92,7 @@ export class IgxGridNavigationService {
9292
this.grid.verticalScrollContainer.onChunkLoad
9393
.pipe(first()).subscribe(() => {
9494
if (editCell && this.grid.rowList.map(r => r.index).indexOf(editCell.rowIndex) < 0) {
95-
this.grid.tbody.nativeElement.focus({preventScroll: true});
95+
this.grid.tbody.nativeElement.focus({ preventScroll: true });
9696
}
9797
});
9898
break;
@@ -214,7 +214,7 @@ export class IgxGridNavigationService {
214214
newActiveNode.mchCache.visibleIndex = column.visibleIndex;
215215
}
216216

217-
this.setActiveNode({row: this.activeNode.row, column: newActiveNode.column, mchCache: newActiveNode.mchCache});
217+
this.setActiveNode({ row: this.activeNode.row, column: newActiveNode.column, mchCache: newActiveNode.mchCache });
218218
this.performHorizontalScrollToCell(this.activeNode.column);
219219
}
220220

@@ -232,10 +232,12 @@ export class IgxGridNavigationService {
232232
focusFirstCell(header = true) {
233233
if ((header || this.grid.dataView.length) && this.activeNode &&
234234
(this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length ||
235-
(!header && !this.grid.hasSummarizedColumns))) { return; }
235+
(!header && !this.grid.hasSummarizedColumns))) { return; }
236236

237-
this.setActiveNode({ row: header ? -1 : this.grid.dataView.length, column: 0,
238-
level: this.grid.hasColumnLayouts ? 1 : 0, mchCache: { level: 0, visibleIndex: 0} });
237+
this.setActiveNode({
238+
row: header ? -1 : this.grid.dataView.length, column: 0,
239+
level: this.grid.hasColumnLayouts ? 1 : 0, mchCache: { level: 0, visibleIndex: 0 }
240+
});
239241
this.performHorizontalScrollToCell(0);
240242
}
241243

@@ -327,7 +329,7 @@ export class IgxGridNavigationService {
327329
if (this.grid.rowInEditMode && !this.grid.rowEditTabs.length) {
328330
if (shift && next.rowIndex === this.activeNode.row && next.visibleColumnIndex === this.activeNode.column) {
329331
next.visibleColumnIndex = this.grid.lastEditableColumnIndex;
330-
} else if ( !shift && next.rowIndex === this.activeNode.row && next.visibleColumnIndex === this.activeNode.column) {
332+
} else if (!shift && next.rowIndex === this.activeNode.row && next.visibleColumnIndex === this.activeNode.column) {
331333
next.visibleColumnIndex = this.grid.firstEditableColumnIndex;
332334
} else {
333335
next.rowIndex = this.activeNode.row;
@@ -360,7 +362,7 @@ export class IgxGridNavigationService {
360362
// this is workaround: endTopOffset - containerHeight > 5 and should be replaced with: containerHeight < endTopOffset
361363
// when the page is zoomed the grid does not scroll the row completely in the view
362364
return !targetRow || targetRow.offsetTop < Math.abs(this.containerTopOffset)
363-
|| containerHeight && endTopOffset - containerHeight > 5;
365+
|| containerHeight && endTopOffset - containerHeight > 5;
364366
}
365367

366368
protected navigateInBody(rowIndex, visibleColIndex, cb: Function = null): void {
@@ -415,8 +417,8 @@ export class IgxGridNavigationService {
415417
const currRow = this.grid.dataView[activeNode.row];
416418
const type: GridKeydownTargetType = activeNode.row < 0 ? 'headerCell' :
417419
this.isDataRow(activeNode.row) ? 'dataCell' :
418-
currRow && this.grid.isGroupByRecord(currRow) ? 'groupRow' :
419-
currRow && this.grid.isDetailRecord(currRow) ? 'masterDetailRow' : 'summaryCell';
420+
currRow && this.grid.isGroupByRecord(currRow) ? 'groupRow' :
421+
currRow && this.grid.isDetailRecord(currRow) ? 'masterDetailRow' : 'summaryCell';
420422

421423
const args: IActiveNodeChangeEventArgs = {
422424
row: this.activeNode.row,
@@ -491,7 +493,7 @@ export class IgxGridNavigationService {
491493
}
492494

493495
protected findLastDataRowIndex(): number {
494-
if ((this.grid as any).totalItemCount) { return (this.grid as any).totalItemCount - 1; }
496+
if ((this.grid as any).totalItemCount) { return (this.grid as any).totalItemCount - 1; }
495497
let i = this.grid.dataView.length;
496498
while (i--) {
497499
if (this.isDataRow(i)) {
@@ -516,15 +518,15 @@ export class IgxGridNavigationService {
516518
return this.activeNode.column !== colIndex && !this.isDataRow(rowIndex, true) ? false : true;
517519
}
518520
protected performHeaderKeyCombination(column, key, shift, ctrl, alt, event) {
519-
let direction = this.grid.sortingExpressions.find(expr => expr.fieldName === column.field)?.dir;
521+
let direction = this.grid.sortingExpressions.find(expr => expr.fieldName === column.field)?.dir;
520522
if (ctrl && key.includes('up') && column.sortable && !column.columnGroup) {
521523
direction = direction === SortingDirection.Asc ? SortingDirection.None : SortingDirection.Asc;
522-
this.grid.sort({ fieldName: column.field, dir: direction, ignoreCase: false });
524+
this.grid.sort({ fieldName: column.field, dir: direction, ignoreCase: false });
523525
return;
524526
}
525527
if (ctrl && key.includes('down') && column.sortable && !column.columnGroup) {
526528
direction = direction === SortingDirection.Desc ? SortingDirection.None : SortingDirection.Desc;
527-
this.grid.sort({ fieldName: column.field, dir: direction, ignoreCase: false });
529+
this.grid.sort({ fieldName: column.field, dir: direction, ignoreCase: false });
528530
return;
529531
}
530532
if (shift && alt && this.isToggleKey(key) && !column.columnGroup && column.groupable) {
@@ -564,16 +566,16 @@ export class IgxGridNavigationService {
564566
};
565567
const activeCol = this.currentActiveColumn;
566568
const lastGroupIndex = Math.max(... this.grid.visibleColumns.
567-
filter(c => c.level <= this.activeNode.level).map(col => col.visibleIndex));
569+
filter(c => c.level <= this.activeNode.level).map(col => col.visibleIndex));
568570
let nextCol = activeCol;
569571
if ((key.includes('left') || key === 'home') && this.activeNode.column > 0) {
570572
const index = ctrl || key === 'home' ? 0 : this.activeNode.column - 1;
571-
nextCol = this.getNextColumnMCH(index);
573+
nextCol = this.getNextColumnMCH(index);
572574
newHeaderNode.visibleIndex = nextCol.visibleIndex;
573575
}
574576
if ((key.includes('right') || key === 'end') && activeCol.visibleIndex < lastGroupIndex) {
575577
const nextVIndex = activeCol.children ? Math.max(...activeCol.allChildren.map(c => c.visibleIndex)) + 1 :
576-
activeCol.visibleIndex + 1;
578+
activeCol.visibleIndex + 1;
577579
nextCol = ctrl || key === 'end' ? this.getNextColumnMCH(this.lastColumnIndex) : this.getNextColumnMCH(nextVIndex);
578580
newHeaderNode.visibleIndex = nextCol.visibleIndex;
579581
}
@@ -583,16 +585,17 @@ export class IgxGridNavigationService {
583585
}
584586
if (!ctrl && key.includes('down') && activeCol.children) {
585587
nextCol = activeCol.children.find(c => c.visibleIndex === newHeaderNode.visibleIndex) ||
586-
activeCol.children.toArray().sort((a, b) => b.visibleIndex - a.visibleIndex)
587-
.filter(col => col.visibleIndex < newHeaderNode.visibleIndex)[0];
588+
activeCol.children.toArray().sort((a, b) => b.visibleIndex - a.visibleIndex)
589+
.filter(col => col.visibleIndex < newHeaderNode.visibleIndex)[0];
588590
newHeaderNode.level = nextCol.level;
589591
}
590592

591593
this.setActiveNode({
592594
row: this.activeNode.row,
593595
column: nextCol.visibleIndex,
594596
level: nextCol.level,
595-
mchCache: newHeaderNode});
597+
mchCache: newHeaderNode
598+
});
596599
this.performHorizontalScrollToCell(nextCol.visibleIndex);
597600
}
598601

@@ -606,12 +609,12 @@ export class IgxGridNavigationService {
606609
}
607610

608611
private handleColumnSelection(column, event) {
609-
if (!column.selectable || this.grid.columnSelection === GridSelectionMode.none ) { return; }
612+
if (!column.selectable || this.grid.columnSelection === GridSelectionMode.none) { return; }
610613
const clearSelection = this.grid.columnSelection === GridSelectionMode.single;
611614
const columnsToSelect = !column.children ? [column.field] :
612615
column.allChildren.filter(c => !c.hidden && c.selectable && !c.columnGroup).map(c => c.field);
613616
column.selected ? this.grid.selectionService.deselectColumns(columnsToSelect, event) :
614-
this.grid.selectionService.selectColumns(columnsToSelect, clearSelection, false, event);
617+
this.grid.selectionService.selectColumns(columnsToSelect, clearSelection, false, event);
615618
}
616619

617620
private getNextColumnMCH(visibleIndex) {
@@ -637,6 +640,6 @@ export class IgxGridNavigationService {
637640
}
638641

639642
private isAddKey(key: string): boolean {
640-
return key === '+' || key === 'add'; // add is for IE and Edge
643+
return ROW_ADD_KEYS.has(key);
641644
}
642645
}

‎src/app/grid-add-row/grid-add-row.sample.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,6 @@
2929
<igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
3030
</igx-action-strip>
3131
</igx-grid>
32+
33+
<button igxButton="raised" (click)="data = data.length ? [] : dataFull">Switch Data/No Data</button>
3234
</div>

‎src/app/grid-add-row/grid-add-row.sample.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export class GridAddRowSampleComponent implements OnInit {
1212
public result: string;
1313

1414
data: any[];
15+
dataFull: any[];
1516
columns: any[];
1617
onMouseOver(event, grid, actionStrip) {
1718
if (event.target.nodeName.toLowerCase() === 'igx-grid-cell') {
@@ -35,7 +36,7 @@ export class GridAddRowSampleComponent implements OnInit {
3536
{ field: 'ContactTitle', width: '300px', pinned: false }
3637
];
3738

38-
this.data = [
39+
this.dataFull = [
3940
// tslint:disable:max-line-length
4041
{ 'ID': 'ALFKI', 'CompanyName': 'Alfreds Futterkiste', 'ContactName': 'Maria Anders', 'ContactTitle': 'Sales Representative'},
4142
{ 'ID': 'ANATR', 'CompanyName': 'Ana Trujillo Emparedados y helados', 'ContactName': 'Ana Trujillo', 'ContactTitle': 'Owner'},

0 commit comments

Comments
 (0)