Skip to content

Commit 9ec27ca

Browse files
committed
chore(*): Rename grid scrollWidth getter to scrollSize.
1 parent fa1f589 commit 9ec27ca

13 files changed

+37
-34
lines changed

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
173173
private _cdrRequests = false;
174174
protected _cdrRequestRepaint = false;
175175

176-
public get scrollWidth() {
176+
/**
177+
* @hidden @internal
178+
*/
179+
public get scrollSize() {
177180
return this.verticalScrollContainer.getScrollbarWidth();
178181
}
179182

@@ -4713,7 +4716,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
47134716
* @hidden @internal
47144717
*/
47154718
public get outerWidth() {
4716-
return this.hasVerticalScroll() ? this.calcWidth + this.scrollWidth : this.calcWidth;
4719+
return this.hasVerticalScroll() ? this.calcWidth + this.scrollSize : this.calcWidth;
47174720
}
47184721

47194722
/**
@@ -4807,7 +4810,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
48074810
}
48084811

48094812
if (this.hasVerticalScroll() && this.width !== null) {
4810-
width -= this.scrollWidth;
4813+
width -= this.scrollSize;
48114814
}
48124815
if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
48134816
this.calcWidth = width;
@@ -4978,7 +4981,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
49784981
if (width === null) {
49794982
let currentWidth = this.calcWidth;
49804983
if (this.hasVerticalScroll()) {
4981-
currentWidth += this.scrollWidth;
4984+
currentWidth += this.scrollSize;
49824985
}
49834986
width = currentWidth + 'px';
49844987
this.resetCaches();
@@ -5020,7 +5023,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
50205023
this.calcWidth :
50215024
parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth;
50225025
if (this.hasVerticalScroll() && !this.isPercentWidth) {
5023-
width -= this.scrollWidth;
5026+
width -= this.scrollSize;
50245027
}
50255028
if (this.pinning.columns === ColumnPinningPosition.End) {
50265029
width -= this.featureColumnsWidth();

projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ describe('IgxGrid - Cell component #grid', () => {
201201
// Calculate where the end of the cell is. Relative left position should equal the grid calculated width
202202
expect(lastCell.nativeElement.getBoundingClientRect().left +
203203
lastCell.nativeElement.offsetWidth +
204-
grid.scrollWidth).toEqual(parseInt(grid.width, 10));
204+
grid.scrollSize).toEqual(parseInt(grid.width, 10));
205205
}));
206206

207207
it('should not reduce the width of last pinned cell when there is vertical scroll.', () => {

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -191,9 +191,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
191191
tick();
192192

193193
const locationColGroup = getColGroup(grid, 'Location');
194-
expect(parseInt(locationColGroup.width, 10) + grid.scrollWidth).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
194+
expect(parseInt(locationColGroup.width, 10) + grid.scrollSize).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
195195
const cityColumn = grid.getColumnByName('City');
196-
expect(parseInt(cityColumn.width, 10) + grid.scrollWidth).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
196+
expect(parseInt(cityColumn.width, 10) + grid.scrollSize).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
197197
}));
198198

199199
it('Width should be correct. Column group with column. Width in px.', fakeAsync(() => {
@@ -208,9 +208,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
208208
fixture.detectChanges();
209209

210210
const locationColGroup = getColGroup(grid, 'Location');
211-
expect(parseInt(locationColGroup.width, 10) + grid.scrollWidth).toBe(gridWidthPx);
211+
expect(parseInt(locationColGroup.width, 10) + grid.scrollSize).toBe(gridWidthPx);
212212
const cityColumn = grid.getColumnByName('City');
213-
expect(parseInt(cityColumn.width, 10) + grid.scrollWidth).toBe(gridWidthPx);
213+
expect(parseInt(cityColumn.width, 10) + grid.scrollSize).toBe(gridWidthPx);
214214
}));
215215

216216
it('Width should be correct. Column group with column. Width in percent.', fakeAsync(() => {
@@ -226,7 +226,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
226226

227227
const locationColGroup = getColGroup(grid, 'Location');
228228
const gridWidthInPx = ((parseInt(gridWidth, 10) / 100) *
229-
parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollWidth) + 'px';
229+
parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize) + 'px';
230230
expect(locationColGroup.width).toBe(gridWidthInPx);
231231
const cityColumn = grid.getColumnByName('City');
232232
expect(cityColumn.width).toBe(gridWidthInPx);

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -746,7 +746,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
746746
const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
747747
const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
748748
const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_SELECTOR));
749-
const expectedWidth = (parseInt(grid.width, 10) - grid.scrollWidth) / 4;
749+
const expectedWidth = (parseInt(grid.width, 10) - grid.scrollSize) / 4;
750750
expect(headers[0].nativeElement.getBoundingClientRect().width).toBeCloseTo(expectedWidth, 0);
751751
expect(headers[1].nativeElement.getBoundingClientRect().width).toBeCloseTo(expectedWidth, 0);
752752
expect(headers[2].nativeElement.getBoundingClientRect().width).toBeCloseTo(expectedWidth, 0);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
</div>
9696
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
9797
id="right" class="igx-grid__scroll-on-drag-right"></span>
98-
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollWidth"></div>
98+
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
9999
</div>
100100

101101
<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
@@ -201,7 +201,7 @@
201201
</div>
202202
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
203203
id="right" class="igx-grid__scroll-on-drag-right"></span>
204-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollWidth">
204+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize">
205205
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
206206
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
207207
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
@@ -219,10 +219,10 @@
219219
class="igx-grid__summaries" #summaryRow>
220220
</igx-grid-summary-row>
221221
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
222-
[style.width.px]="scrollWidth"></div>
222+
[style.width.px]="scrollSize"></div>
223223
</div>
224224

225-
<div class="igx-grid__scroll" [style.height.px]="scrollWidth" #scr [hidden]="isHorizontalScrollHidden">
225+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden">
226226
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
227227
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
228228
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1655,7 +1655,7 @@ describe('IgxGrid Component Tests #grid', () => {
16551655
grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height -
16561656
grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height -
16571657
grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height;
1658-
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10) + grid.scrollWidth).toBe(500);
1658+
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10) + grid.scrollSize).toBe(500);
16591659
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight);
16601660
});
16611661

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2096,7 +2096,7 @@ describe('IgxGrid - GroupBy #grid', () => {
20962096
const indentation = fix.debugElement.query(By.css('.igx-grid__header-indentation'));
20972097

20982098
expect(grid.pinnedWidth).toEqual(parseInt(window.getComputedStyle(indentation.nativeElement).width, 10));
2099-
expect(grid.unpinnedWidth).toEqual(400 - parseInt(window.getComputedStyle(indentation.nativeElement).width, 10) - grid.scrollWidth);
2099+
expect(grid.unpinnedWidth).toEqual(400 - parseInt(window.getComputedStyle(indentation.nativeElement).width, 10) - grid.scrollSize);
21002100

21012101
grid.clearGrouping();
21022102
tick();
@@ -2110,7 +2110,7 @@ describe('IgxGrid - GroupBy #grid', () => {
21102110

21112111
expect(grid.calcHeight).toEqual(expectedHeight);
21122112
expect(grid.pinnedWidth).toEqual(0);
2113-
const expectedWidth = parseInt(grid.width, 10) - grid.scrollWidth;
2113+
const expectedWidth = parseInt(grid.width, 10) - grid.scrollSize;
21142114
expect(grid.unpinnedWidth).toEqual(expectedWidth);
21152115
}));
21162116

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -735,7 +735,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
735735
}
736736
];
737737
fixture.componentInstance.colGroups = uniqueGroups;
738-
fixture.componentInstance.grid.width = (800 + grid.scrollWidth) + 'px';
738+
fixture.componentInstance.grid.width = (800 + grid.scrollSize) + 'px';
739739
fixture.detectChanges();
740740

741741
// pin group3
@@ -1051,7 +1051,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
10511051
});
10521052

10531053
it('should correctly resize column while there is another column that does not have width set', async() => {
1054-
grid.width = 1500 + grid.scrollWidth + 'px';
1054+
grid.width = 1500 + grid.scrollSize + 'px';
10551055
fixture.componentInstance.colGroups = [{
10561056
group: 'group1',
10571057
columns: [
@@ -1093,7 +1093,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
10931093
});
10941094

10951095
it('should correctly resize column that does not have width set, but is intersected by a column with width set', async() => {
1096-
grid.width = 1500 + grid.scrollWidth + 'px';
1096+
grid.width = 1500 + grid.scrollSize + 'px';
10971097
fixture.detectChanges();
10981098
fixture.componentInstance.colGroups = [{
10991099
group: 'group1',

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
345345
// headers are aligned to cells
346346
GridFunctions.verifyLayoutHeadersAreAligned(headerCells, firstRowCells);
347347

348-
const autoSizedColumnWidth = 400 - grid.scrollWidth;
348+
const autoSizedColumnWidth = 400 - grid.scrollSize;
349349
const groupRowBlocks = fixture.debugElement.query(By.css('.igx-grid__tbody')).queryAll(By.css('.igx-grid__mrl-block'));
350350
expect(groupRowBlocks[0].nativeElement.style.gridTemplateColumns)
351351
.toEqual('200px 200px ' + autoSizedColumnWidth + 'px 100px 100px 200px');
@@ -624,7 +624,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
624624
]
625625
}];
626626
fixture.detectChanges();
627-
fixture.componentInstance.grid.width = (1000 + grid.scrollWidth) + 'px';
627+
fixture.componentInstance.grid.width = (1000 + grid.scrollSize) + 'px';
628628
fixture.detectChanges();
629629

630630
// check columns

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
</div>
8080
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
8181
id="right" class="igx-grid__scroll-on-drag-right"></span>
82-
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollWidth"></div>
82+
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
8383
</div>
8484

8585
<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
@@ -160,7 +160,7 @@
160160
</div>
161161
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
162162
id="right" class="igx-grid__scroll-on-drag-right"></span>
163-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollWidth">
163+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize">
164164
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
165165
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
166166
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
@@ -178,10 +178,10 @@
178178
class="igx-grid__summaries" #summaryRow>
179179
</igx-grid-summary-row>
180180
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
181-
[style.width.px]="scrollWidth"></div>
181+
[style.width.px]="scrollSize"></div>
182182
</div>
183183

184-
<div class="igx-grid__scroll" [style.height.px]="scrollWidth" #scr [hidden]="isHorizontalScrollHidden">
184+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden">
185185
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
186186
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
187187
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

0 commit comments

Comments
 (0)