Skip to content

Commit fe4f30b

Browse files
RivaIvanovaRivaIvanova
committed
refactor(column): move defaultMinWidth fallback and use user-set minWidth
1 parent 9afeccb commit fe4f30b

File tree

5 files changed

+29
-67
lines changed

5 files changed

+29
-67
lines changed

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts‎

Lines changed: 18 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -967,8 +967,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
967967
*/
968968
public get minWidthPx() {
969969
const gridAvailableSize = this.grid.calcWidth;
970-
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
971-
return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
970+
const minWidth = this.minWidth || this.defaultMinWidth;
971+
const isPercentageWidth = minWidth && typeof minWidth === 'string' && minWidth.indexOf('%') !== -1;
972+
return isPercentageWidth ? parseFloat(minWidth) / 100 * gridAvailableSize : parseFloat(minWidth);
972973
}
973974

974975
/**
@@ -985,8 +986,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
985986
*/
986987
public get minWidthPercent() {
987988
const gridAvailableSize = this.grid.calcWidth;
988-
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
989-
return isPercentageWidth ? parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
989+
const minWidth = this.minWidth || this.defaultMinWidth;
990+
const isPercentageWidth = minWidth && typeof minWidth === 'string' && minWidth.indexOf('%') !== -1;
991+
return isPercentageWidth ? parseFloat(minWidth) : parseFloat(minWidth) / gridAvailableSize * 100;
990992
}
991993

992994

@@ -1011,11 +1013,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
10111013
return;
10121014
}
10131015
this._defaultMinWidth = value;
1014-
this.minWidthSetByUser = true;
10151016
this.grid.notifyChanges(true);
10161017
}
10171018
public get minWidth(): string {
1018-
return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
1019+
return this._defaultMinWidth;
10191020
}
10201021

10211022
/** @hidden @internal **/
@@ -1864,10 +1865,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
18641865
* @hidden
18651866
*/
18661867
protected _maxWidth;
1867-
/**
1868-
* @hidden
1869-
*/
1870-
protected _minWidthSetByUser = false;
18711868
/**
18721869
* @hidden
18731870
*/
@@ -2153,8 +2150,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
21532150
if (size && !!size.width) {
21542151
result.push(size.width + 'px');
21552152
} else {
2156-
const possibleWidth = this.getPossibeWidth();
2157-
const currentWidth = parseFloat(possibleWidth);
2153+
const currentWidth = parseFloat(this.grid.getPossibleColumnWidth());
21582154
result.push((this.getConstrainedSizePx(currentWidth)) + 'px');
21592155
}
21602156
}
@@ -2649,12 +2645,18 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
26492645
this._calcWidth = this.grid.calcWidth ? this.getConstrainedSizePx(currentCalcWidth) : 0;
26502646
} else if (!colWidth || isAutoWidth && !this.autoSize) {
26512647
// no width
2652-
const possibleWidth = this.getPossibeWidth();
2653-
const currentCalcWidth = this.defaultWidth || possibleWidth;
2648+
const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
26542649
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
26552650
} else {
2656-
const currentCalcWidth = parseFloat(this.width);
2657-
this._calcWidth =this.getConstrainedSizePx(currentCalcWidth);
2651+
let possibleColumnWidth = '';
2652+
if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
2653+
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
2654+
} else {
2655+
possibleColumnWidth = this.width;
2656+
}
2657+
2658+
const currentCalcWidth = parseFloat(possibleColumnWidth);
2659+
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
26582660
}
26592661
this.calcPixelWidth = parseFloat(this._calcWidth);
26602662
}
@@ -2705,26 +2707,4 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
27052707
this._applySelectableClass = value;
27062708
}
27072709
}
2708-
2709-
/**
2710-
* @hidden
2711-
*/
2712-
public set minWidthSetByUser(value: boolean) {
2713-
this._minWidthSetByUser = value;
2714-
}
2715-
2716-
/**
2717-
* @hidden
2718-
*/
2719-
public get minWidthSetByUser(): boolean {
2720-
return this._minWidthSetByUser;
2721-
}
2722-
2723-
private getPossibeWidth(): string {
2724-
const possibleWidth = this.grid.getPossibleColumnWidth();
2725-
if (!this.minWidthSetByUser && parseFloat(possibleWidth) < this.grid.minColumnWidth) {
2726-
return this.grid.minColumnWidth + 'px';
2727-
}
2728-
return possibleWidth;
2729-
}
27302710
}

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1156,7 +1156,7 @@ export interface GridType extends IGridDataBindable {
11561156
refreshSearch(): void;
11571157
getDefaultExpandState(record: any): boolean;
11581158
trackColumnChanges(index: number, column: any): any;
1159-
getPossibleColumnWidth(): string;
1159+
getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string;
11601160
resetHorizontalVirtualization(): void;
11611161
hasVerticalScroll(): boolean;
11621162
getVisibleContentHeight(): number;

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3204,7 +3204,6 @@ export abstract class IgxGridBaseDirective implements GridType,
32043204
private _shouldRecalcRowHeight = false;
32053205

32063206
private _hostWidth;
3207-
private _possibleColumnWidth: string;
32083207
private _advancedFilteringOverlayId: string;
32093208
private _advancedFilteringPositionSettings: PositionSettings = {
32103209
verticalDirection: VerticalAlignment.Middle,
@@ -5452,7 +5451,7 @@ export abstract class IgxGridBaseDirective implements GridType,
54525451
/**
54535452
* @hidden @internal
54545453
*/
5455-
public getPossibleColumnWidth(baseWidth: number = null) {
5454+
public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) {
54565455
let computedWidth;
54575456
if (baseWidth !== null) {
54585457
computedWidth = baseWidth;
@@ -5501,9 +5500,11 @@ export abstract class IgxGridBaseDirective implements GridType,
55015500
}
55025501
computedWidth -= this.featureColumnsWidth();
55035502

5503+
const minColWidth = minColumnWidth || this.minColumnWidth;
5504+
55045505
const columnWidth = !Number.isFinite(sumExistingWidths) ?
5505-
Math.max(computedWidth / columnsToSize, this.defaultHeaderGroupMinWidth) :
5506-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.defaultHeaderGroupMinWidth);
5506+
Math.max(computedWidth / columnsToSize, minColWidth) :
5507+
Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth);
55075508

55085509
return columnWidth + 'px';
55095510
}
@@ -6587,10 +6588,9 @@ export abstract class IgxGridBaseDirective implements GridType,
65876588
*/
65886589
protected _derivePossibleWidth() {
65896590
if (!this.columnWidthSetByUser) {
6590-
this._possibleColumnWidth = this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
6591+
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
65916592
}
65926593
this._columns.forEach((column: IgxColumnComponent) => {
6593-
this.setPossibleMinColumnWidth(column);
65946594
if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
65956595
const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
65966596
column.defaultWidth = columnWidthCombined + 'px';
@@ -7977,16 +7977,4 @@ export abstract class IgxGridBaseDirective implements GridType,
79777977
}
79787978
this._rowCount += 1; // include header row
79797979
}
7980-
7981-
private setPossibleMinColumnWidth(column: IgxColumnComponent): void {
7982-
if (this.columnWidthSetByUser || this.width == null) {
7983-
return;
7984-
}
7985-
7986-
if (column.minWidthSetByUser || column.hidden) {
7987-
this._columnWidth = this._possibleColumnWidth;
7988-
} else if (!column.minWidthSetByUser && parseFloat(this._possibleColumnWidth) < this.minColumnWidth) {
7989-
this._columnWidth = this.minColumnWidth + 'px';
7990-
}
7991-
}
79927980
}

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -273,13 +273,7 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
273273
mirror.inputs.forEach((input) => {
274274
const propName = input.propName;
275275
if (!(col[propName] instanceof IgxSummaryOperand)) {
276-
if (propName === 'minWidth') {
277-
const minWidthSetByUser = col.minWidthSetByUser;
278-
ref.instance[propName] = col[propName];
279-
ref.instance.minWidthSetByUser = minWidthSetByUser;
280-
} else {
281-
ref.instance[propName] = col[propName];
282-
}
276+
ref.instance[propName] = col[propName];
283277
} else {
284278
ref.instance[propName] = col[propName].constructor;
285279
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
531531
expect(pivotGrid.gridSize).toBe(Size.Small);
532532
const dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
533533
let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
534-
expect(rowHeaders[0].componentInstance.column.minWidth).toBe(minWidthSupercompact);
534+
expect(rowHeaders[0].componentInstance.column.defaultMinWidth).toBe(minWidthSupercompact);
535535
expect(pivotGrid.rowList.first.cells.first.nativeElement.offsetHeight).toBe(cellHeightSuperCompact);
536536

537537
pivotGrid.superCompactMode = false;
@@ -543,7 +543,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
543543

544544
expect(pivotGrid.gridSize).toBe(Size.Large);
545545
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
546-
expect(rowHeaders[0].componentInstance.column.minWidth).toBe(minWidthComf);
546+
expect(rowHeaders[0].componentInstance.column.defaultMinWidth).toBe(minWidthComf);
547547
expect(pivotGrid.rowList.first.cells.first.nativeElement.offsetHeight).toBe(cellHeightComf);
548548
}));
549549

@@ -2411,7 +2411,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
24112411
fixture.detectChanges();
24122412

24132413
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
2414-
const minWdith = parseFloat(rowHeaders[0].componentInstance.column.minWidth);
2414+
const minWdith = parseFloat(rowHeaders[0].componentInstance.column.defaultMinWidth);
24152415
expect(parseFloat(rowHeaders[0].componentInstance.column.width)).toEqual(minWdith);
24162416
expect(parseFloat(rowHeaders[3].componentInstance.column.width)).toEqual(minWdith);
24172417

0 commit comments

Comments
 (0)