Skip to content

Commit 9305aad

Browse files
zdrawkuzdrawku
authored
Merge branch 'master' into ddincheva/calendarBugFixs
2 parents fe8e316 + 26cc165 commit 9305aad

File tree

11 files changed

+272
-118
lines changed

11 files changed

+272
-118
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,14 @@
212212
@extend %igx-grid__tr--edit !optional;
213213
}
214214

215+
@include e(tr, $m: add-animate) {
216+
@extend %igx-grid__tr--add-animate !optional;
217+
}
218+
219+
@include e(tr, $m: inner) {
220+
@extend %igx-grid__tr--inner !optional;
221+
}
222+
215223
@include e(tr, $m: group) {
216224
@extend %grid-row--group !optional;
217225
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,6 +583,8 @@
583583
@mixin igx-grid($theme) {
584584
@include igx-root-css-vars($theme);
585585

586+
@include scale-in-ver-center();
587+
586588
$palette: map-get($theme, 'palette');
587589

588590
$variant: map-get($theme, variant);
@@ -1195,6 +1197,14 @@
11951197
}
11961198
}
11971199

1200+
%igx-grid__tr--inner {
1201+
display: flex;
1202+
}
1203+
1204+
%igx-grid__tr--add-animate {
1205+
@include animation(scale-in-ver-center .2s $ease-in-out-quad);
1206+
}
1207+
11981208
%grid-row--edit-mrl {
11991209
&:first-of-type::after {
12001210
top: 0;

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4144,11 +4144,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
41444144
this.navigateTo(newRowIndex, -1);
41454145
}
41464146
const row = this.getRowByIndex(index + 1);
4147-
const cell = row.cells.find(c => c.editable);
4148-
if (cell) {
4149-
cell.setEditMode(true);
4150-
cell.activate();
4151-
}
4147+
row.animateAdd = true;
4148+
row.onAnimationEnd.pipe(first()).subscribe(() => {
4149+
row.animateAdd = false;
4150+
const cell = row.cells.find(c => c.editable);
4151+
if (cell) {
4152+
cell.setEditMode(true);
4153+
cell.activate();
4154+
}
4155+
});
41524156
}
41534157

41544158
/**

‎projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ describe('IgxGrid - Row Adding #grid', () => {
2929
let grid: IgxGridComponent;
3030
let gridContent: DebugElement;
3131
let actionStrip: IgxActionStripComponent;
32+
const endTransition = () => {
33+
// transition end needs to be simulated
34+
const animationElem = fixture.nativeElement.querySelector('.igx-grid__tr--inner');
35+
const endEvent = new AnimationEvent('animationend');
36+
animationElem.dispatchEvent(endEvent);
37+
};
3238
configureTestSuite();
3339
beforeAll( async(() => {
3440
TestBed.configureTestingModule({
@@ -69,6 +75,9 @@ describe('IgxGrid - Row Adding #grid', () => {
6975
const rows = grid.rowList.toArray();
7076
rows[0].beginAddRow();
7177
fixture.detectChanges();
78+
79+
endTransition();
80+
7281
let addRow = grid.getRowByIndex(1);
7382
expect(addRow.addRow).toBeTrue();
7483

@@ -97,6 +106,7 @@ describe('IgxGrid - Row Adding #grid', () => {
97106
addRowIcon.parent.triggerEventHandler('click', new Event('click'));
98107
fixture.detectChanges();
99108

109+
endTransition();
100110

101111
const addRow = grid.getRowByIndex(lastRowIndex + 1);
102112
expect(addRow.addRow).toBeTrue();
@@ -159,6 +169,8 @@ describe('IgxGrid - Row Adding #grid', () => {
159169
row.beginAddRow();
160170
fixture.detectChanges();
161171

172+
endTransition();
173+
162174
// add row should be pinned
163175
const addRow = grid.getRowByIndex(1) as IgxGridRowComponent;
164176
expect(addRow.addRow).toBe(true);
@@ -182,6 +194,8 @@ describe('IgxGrid - Row Adding #grid', () => {
182194
ghostRow.beginAddRow();
183195
fixture.detectChanges();
184196

197+
endTransition();
198+
185199
// add row should be unpinned
186200
const addRow = grid.getRowByIndex(2);
187201
expect(addRow.addRow).toBe(true);
@@ -199,6 +213,7 @@ describe('IgxGrid - Row Adding #grid', () => {
199213
const dataCount = grid.data.length;
200214
rows[0].beginAddRow();
201215
fixture.detectChanges();
216+
endTransition();
202217

203218
grid.endEdit(true);
204219
fixture.detectChanges();
@@ -233,6 +248,8 @@ describe('IgxGrid - Row Adding #grid', () => {
233248
rows[0].beginAddRow();
234249
fixture.detectChanges();
235250

251+
endTransition();
252+
236253
grid.endEdit(true);
237254
fixture.detectChanges();
238255

@@ -346,6 +363,8 @@ describe('IgxGrid - Row Adding #grid', () => {
346363
grid.rowList.first.beginAddRow();
347364
fixture.detectChanges();
348365

366+
endTransition();
367+
349368
const cell = grid.getCellByColumn(1, 'CompanyName');
350369
const cellInput = cell.nativeElement.querySelector('[igxinput]');
351370
UIInteractions.setInputElementValue(cellInput, 'aaa');
@@ -364,6 +383,8 @@ describe('IgxGrid - Row Adding #grid', () => {
364383
row.beginAddRow();
365384
fixture.detectChanges();
366385

386+
endTransition();
387+
367388
const newRow = grid.getRowByIndex(1);
368389
expect(newRow.addRow).toBeTrue();
369390
expect(grid.cellEditEnter.emit).toHaveBeenCalled();
@@ -389,6 +410,7 @@ describe('IgxGrid - Row Adding #grid', () => {
389410

390411
grid.rowList.first.beginAddRow();
391412
fixture.detectChanges();
413+
endTransition();
392414

393415
expect(grid.getRowByIndex(1).addRow).toBeFalse();
394416
});
@@ -431,6 +453,8 @@ describe('IgxGrid - Row Adding #grid', () => {
431453
row.beginAddRow();
432454
fixture.detectChanges();
433455

456+
endTransition();
457+
434458
let newRow = grid.getRowByIndex(1);
435459
expect(newRow.addRow).toBeTrue();
436460

@@ -449,6 +473,8 @@ describe('IgxGrid - Row Adding #grid', () => {
449473
row.beginAddRow();
450474
fixture.detectChanges();
451475

476+
endTransition();
477+
452478
let newRow = grid.getRowByIndex(1);
453479
expect(newRow.addRow).toBeTrue();
454480

@@ -469,6 +495,8 @@ describe('IgxGrid - Row Adding #grid', () => {
469495
row.beginAddRow();
470496
fixture.detectChanges();
471497

498+
endTransition();
499+
472500
let newRow = grid.getRowByIndex(1);
473501
expect(newRow.addRow).toBeTrue();
474502

@@ -486,6 +514,8 @@ describe('IgxGrid - Row Adding #grid', () => {
486514
row.beginAddRow();
487515
fixture.detectChanges();
488516

517+
endTransition();
518+
489519
let newRow = grid.getRowByIndex(1);
490520
expect(newRow.addRow).toBeTrue();
491521

@@ -515,6 +545,7 @@ describe('IgxGrid - Row Adding #grid', () => {
515545
const row = grid.rowList.first;
516546
row.beginAddRow();
517547
fixture.detectChanges();
548+
endTransition();
518549

519550
GridFunctions.navigateToLastPage(grid.nativeElement);
520551
fixture.detectChanges();
@@ -533,6 +564,8 @@ describe('IgxGrid - Row Adding #grid', () => {
533564
row.beginAddRow();
534565
fixture.detectChanges();
535566

567+
endTransition();
568+
536569
const select = GridFunctions.getGridPageSelectElement(fixture);
537570
select.click();
538571
fixture.detectChanges();
@@ -560,6 +593,8 @@ describe('IgxGrid - Row Adding #grid', () => {
560593
row.beginAddRow();
561594
fixture.detectChanges();
562595

596+
endTransition();
597+
563598
grid.filter('CompanyName', 'al', IgxStringFilteringOperand.instance().condition('contains'), true);
564599
fixture.detectChanges();
565600

@@ -576,6 +611,8 @@ describe('IgxGrid - Row Adding #grid', () => {
576611
row.beginAddRow();
577612
fixture.detectChanges();
578613

614+
endTransition();
615+
579616
const newRow = grid.getRowByIndex(1);
580617
expect(newRow.addRow).toBeTrue();
581618

@@ -596,6 +633,7 @@ describe('IgxGrid - Row Adding #grid', () => {
596633
row.beginAddRow();
597634
fixture.detectChanges();
598635

636+
endTransition();
599637
const newRow = grid.getRowByIndex(1);
600638
expect(newRow.addRow).toBeTrue();
601639

@@ -648,6 +686,8 @@ describe('IgxGrid - Row Adding #grid', () => {
648686
row.beginAddRow();
649687
fixture.detectChanges();
650688

689+
endTransition();
690+
651691
const newRow = grid.getRowByIndex(1);
652692
expect(newRow.addRow).toBeTrue();
653693

@@ -732,6 +772,7 @@ describe('IgxGrid - Row Adding #grid', () => {
732772
let row = grid.getRowByIndex(1);
733773
row.beginAddRow();
734774
fixture.detectChanges();
775+
endTransition();
735776

736777
const cell = grid.getCellByColumn(2, 'CompanyName');
737778
const cellInput = cell.nativeElement.querySelector('[igxinput]');
@@ -769,6 +810,8 @@ describe('IgxGrid - Row Adding #grid', () => {
769810
grid.rowList.first.beginAddRow();
770811
fixture.detectChanges();
771812

813+
endTransition();
814+
772815
grid.endEdit(true);
773816
fixture.detectChanges();
774817

@@ -791,6 +834,9 @@ describe('IgxGrid - Row Adding #grid', () => {
791834
const row = grid.rowList.first;
792835
row.beginAddRow();
793836
fixture.detectChanges();
837+
838+
endTransition();
839+
794840
expect(grid.getRowByIndex(1).addRow).toBeTrue();
795841
expect(grid.rowEditingOverlay.collapsed).toEqual(false);
796842

@@ -808,6 +854,7 @@ describe('IgxGrid - Row Adding #grid', () => {
808854
const row = grid.rowList.first;
809855
row.beginAddRow();
810856
fixture.detectChanges();
857+
endTransition();
811858

812859
expect(grid.getRowByIndex(1).addRow).toBeTrue();
813860
expect(grid.rowEditingOverlay.collapsed).toEqual(false);
@@ -821,6 +868,7 @@ describe('IgxGrid - Row Adding #grid', () => {
821868

822869
row.beginAddRow();
823870
fixture.detectChanges();
871+
endTransition();
824872
grid.unpinColumn('CompanyName');
825873
fixture.detectChanges();
826874

@@ -839,6 +887,8 @@ describe('IgxGrid - Row Adding #grid', () => {
839887
row.beginAddRow();
840888
fixture.detectChanges();
841889

890+
endTransition();
891+
842892
expect(grid.getRowByIndex(1).addRow).toBeTrue();
843893
expect(grid.rowEditingOverlay.collapsed).toEqual(false);
844894

@@ -864,6 +914,9 @@ describe('IgxGrid - Row Adding #grid', () => {
864914
const row = grid.rowList.first;
865915
row.beginAddRow();
866916
fixture.detectChanges();
917+
918+
endTransition();
919+
867920
expect(grid.getRowByIndex(1).addRow).toBeTrue();
868921
expect(grid.rowEditingOverlay.collapsed).toEqual(false);
869922

@@ -889,6 +942,7 @@ describe('IgxGrid - Row Adding #grid', () => {
889942
const row = grid.rowList.first;
890943
row.beginAddRow();
891944
fixture.detectChanges();
945+
endTransition();
892946

893947
grid.endEdit(true);
894948
fixture.detectChanges();
@@ -903,6 +957,8 @@ describe('IgxGrid - Row Adding #grid', () => {
903957
row.beginAddRow();
904958
fixture.detectChanges();
905959

960+
endTransition();
961+
906962
grid.endEdit(true);
907963
fixture.detectChanges();
908964
let states = grid.transactions.getAggregatedChanges(true);

‎projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
2+
<ng-container *ngTemplateOutlet='addRow ? addTemp : defaultTemp'></ng-container>
3+
4+
<ng-template #addTemp>
5+
<div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='animateAdd' (animationend)='animationEndHandler()'>
6+
<ng-container *ngTemplateOutlet='defaultTemp'></ng-container>
7+
</div>
8+
</ng-template>
9+
<ng-template #defaultTemp>
110
<ng-container *ngIf="grid.groupingExpressions.length > 0">
211
<div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}" (pointerdown)="$event.preventDefault()" (click)="$event.stopPropagation()"></div>
312
</ng-container>
@@ -52,6 +61,7 @@
5261
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
5362
</ng-container>
5463
</ng-container>
64+
</ng-template>
5565

5666
<ng-template #mrlPinnedTemplate let-pinnedColumns>
5767
<div *ngFor="let col of pinnedColumns | igxTopLevel" class="igx-grid__mrl-block"
@@ -102,7 +112,7 @@
102112
[row]="this"
103113
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
104114
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
105-
[style.min-height.px]="grid.rowHeight || 32"
115+
[style.min-height.px]="cellHeight"
106116
[rowData]="rowData"
107117
[style.min-width]="col.width"
108118
[style.max-width]="col.width"
@@ -136,7 +146,7 @@
136146
[formatter]="col.formatter"
137147
[row]="this"
138148
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
139-
[style.min-height.px]="grid.rowHeight || 32"
149+
[style.min-height.px]="cellHeight"
140150
[rowData]="rowData"
141151
[style.min-width]="col.width"
142152
[style.max-width]="col.width"
@@ -177,7 +187,7 @@
177187
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
178188
[formatter]="col.formatter"
179189
[row]="this"
180-
[style.min-height.px]="grid.rowHeight || 32"
190+
[style.min-height.px]="cellHeight"
181191
[rowData]="rowData"
182192
[visibleColumnIndex]="col.visibleIndex"
183193
[value]="rowData | dataMapper:col.field:grid.pipeTrigger"
@@ -213,7 +223,7 @@
213223
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
214224
[formatter]="col.formatter"
215225
[row]="this"
216-
[style.min-height.px]="grid.rowHeight || 32"
226+
[style.min-height.px]="cellHeight"
217227
[rowData]="rowData"
218228
[visibleColumnIndex]="col.visibleIndex"
219229
[value]="rowData | dataMapper:col.field:grid.pipeTrigger"

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-add-row.spec.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => {
1111
let fixture;
1212
let hierarchicalGrid: IgxHierarchicalGridComponent;
1313
let actionStrip: IgxActionStripComponent;
14+
const endTransition = () => {
15+
// transition end needs to be simulated
16+
const animationElem = fixture.nativeElement.querySelector('.igx-grid__tr--inner');
17+
const endEvent = new AnimationEvent('animationend');
18+
animationElem.dispatchEvent(endEvent);
19+
};
1420
beforeAll(async(() => {
1521
TestBed.configureTestingModule({
1622
declarations: [
@@ -49,6 +55,7 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => {
4955

5056
row.beginAddRow();
5157
fixture.detectChanges();
58+
endTransition();
5259
expect(row.expanded).toBeFalse();
5360
expect(hierarchicalGrid.getRowByIndex(1).addRow).toBeTrue();
5461
hierarchicalGrid.endEdit(true);

0 commit comments

Comments
 (0)