Skip to content

Commit

Permalink
feat(module:grid): support zero input in grid (NG-ZORRO#704)
Browse files Browse the repository at this point in the history 
close NG-ZORRO#702
  • Loading branch information
@vthinkxie @schsiung
vthinkxie authored and schsiung committed Dec 18, 2017
1 parent a842cdd commit c21dcbb
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 24 deletions.
30 changes: 17 additions & 13 deletions src/components/grid/nz-col.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
Renderer2,
SimpleChange,
} from '@angular/core';
import { isNotNil } from '../util/check';
import { NzRowComponent } from './nz-row.component';

export abstract class EmbeddedProperty {
Expand Down Expand Up @@ -59,11 +60,11 @@ export class NzColComponent implements OnInit, OnChanges {
this._renderer.removeClass(this._el, _className);
});
this._classList = [
this.nzSpan && `${this._prefixCls}-${this.nzSpan}`,
this.nzOrder && `${this._prefixCls}-order-${this.nzOrder}`,
this.nzOffset && `${this._prefixCls}-offset-${this.nzOffset}`,
this.nzPull && `${this._prefixCls}-pull-${this.nzPull}`,
this.nzPush && `${this._prefixCls}-push-${this.nzPush}`,
isNotNil(this.nzSpan) && `${this._prefixCls}-${this.nzSpan}`,
isNotNil(this.nzOrder) && `${this._prefixCls}-order-${this.nzOrder}`,
isNotNil(this.nzOffset) && `${this._prefixCls}-offset-${this.nzOffset}`,
isNotNil(this.nzPull) && `${this._prefixCls}-pull-${this.nzPull}`,
isNotNil(this.nzPush) && `${this._prefixCls}-push-${this.nzPush}`,
...this.generateClass()
];
this._classList = this._classList.filter((item) => {
Expand All @@ -79,15 +80,18 @@ export class NzColComponent implements OnInit, OnChanges {
const listOfClassName: string[] = [];
listOfSizeInputName.forEach(name => {
const sizeName = name.replace('nz', '').toLowerCase();
if ((typeof(this[ name ]) === 'number') || (typeof (this[ name ]) === 'string')) {
listOfClassName.push(this[ name ] && `${this._prefixCls}-${sizeName}-${this[ name ]}`);
} else {
listOfClassName.push(this[ name ] && this[ name ].span && `${this._prefixCls}-${sizeName}-${this[ name ].span}`);
listOfClassName.push(this[ name ] && this[ name ].pull && `${this._prefixCls}-${sizeName}-pull-${this[ name ].pull}`);
listOfClassName.push(this[ name ] && this[ name ].push && `${this._prefixCls}-${sizeName}-push-${this[ name ].push}`);
listOfClassName.push(this[ name ] && this[ name ].offset && `${this._prefixCls}-${sizeName}-offset-${this[ name ].offset}`);
listOfClassName.push(this[ name ] && this[ name ].order && `${this._prefixCls}-${sizeName}-order-${this[ name ].order}`);
if (isNotNil(this[ name ])) {
if ((typeof(this[ name ]) === 'number') || (typeof (this[ name ]) === 'string')) {
listOfClassName.push(`${this._prefixCls}-${sizeName}-${this[ name ]}`);
} else {
listOfClassName.push(this[ name ] && isNotNil(this[ name ].span) && `${this._prefixCls}-${sizeName}-${this[ name ].span}`);
listOfClassName.push(this[ name ] && isNotNil(this[ name ].pull) && `${this._prefixCls}-${sizeName}-pull-${this[ name ].pull}`);
listOfClassName.push(this[ name ] && isNotNil(this[ name ].push) && `${this._prefixCls}-${sizeName}-push-${this[ name ].push}`);
listOfClassName.push(this[ name ] && isNotNil(this[ name ].offset) && `${this._prefixCls}-${sizeName}-offset-${this[ name ].offset}`);
listOfClassName.push(this[ name ] && isNotNil(this[ name ].order) && `${this._prefixCls}-${sizeName}-order-${this[ name ].order}`);
}
}

});
return listOfClassName;
}
Expand Down
21 changes: 10 additions & 11 deletions src/components/grid/nz-grid.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,8 @@ describe('NzGrid', () => {
testComponent._span = 0;
fixture.detectChanges();
const col_width2 = parseFloat(getStyle(debugElement_col, 'width'));
const row_width2 = parseFloat(getStyle(debugElement_row, 'width'));
expect(col_width2).toEqual(row_width2); // toEqual
expect(debugElement_col.nativeElement.classList.contains('ant-col-0')).toBe(false);
expect(col_width2).toEqual(NaN); // toEqual
expect(debugElement_col.nativeElement.classList.contains('ant-col-0')).toBe(true);

testComponent._span = 1 / 3;
expect(() => {
Expand Down Expand Up @@ -78,18 +77,18 @@ describe('NzGrid', () => {
fixture.detectChanges();
expect(debugElement_col.nativeElement.classList.contains('ant-col-offset-16')).toBe(true);

testComponent._offset = 0;
testComponent._offset1 = 0;
testComponent._span1 = 8;
expect(() => {
fixture.detectChanges();
}).not.toThrow();
expect(debugElement_col.nativeElement.classList.contains('ant-col-offset-0')).toBe(false);
expect(debugElement_col.nativeElement.classList.contains('ant-col-offset-0')).toBe(true);

testComponent._offset1 = 24;
testComponent._span1 = 8;
fixture.detectChanges();

testComponent._offset = 100;
testComponent._offset1 = 100;
testComponent._span1 = 8;
expect(() => {
fixture.detectChanges();
Expand All @@ -101,17 +100,17 @@ describe('NzGrid', () => {
fixture.detectChanges();
}).not.toThrow();

testComponent._offset = 4 / 7;
testComponent._offset1 = 4 / 7;
expect(() => {
fixture.detectChanges();
}).not.toThrow();

testComponent._offset = -100;
testComponent._offset1 = -100;
expect(() => {
fixture.detectChanges();
}).not.toThrow();

testComponent._offset = 'custorm_string';
testComponent._offset1 = 'custorm_string';
expect(() => {
fixture.detectChanges();
}).not.toThrow();
Expand Down Expand Up @@ -200,7 +199,7 @@ describe('NzGrid', () => {
const debugElement_embedded_span = fixtureSpan.debugElement.query(By.directive(NzColDirective));
fixtureSpan.detectChanges();
/* tslint:disable-next-line:max-line-length */
const className = 'ant-col-xs-1 ant-col-xs-pull-1 ant-col-xs-push-1 ant-col-xs-offset-1 ant-col-xs-order-1 ant-col-sm-1 ant-col-sm-pull-1 ant-col-sm-push-1 ant-col-sm-offset-1 ant-col-sm-order-1 ant-col-md-1 ant-col-md-pull-1 ant-col-md-push-1 ant-col-md-offset-1 ant-col-md-order-1 ant-col-lg-1 ant-col-lg-pull-1 ant-col-lg-push-1 ant-col-lg-offset-1 ant-col-lg-order-1 ant-col-xl-1 ant-col-xl-pull-1 ant-col-xl-push-1 ant-col-xl-offset-1 ant-col-xl-order-1';
const className = 'ant-col-xs-1 ant-col-xs-pull-1 ant-col-xs-push-1 ant-col-xs-offset-1 ant-col-xs-order-1 ant-col-sm-1 ant-col-sm-pull-1 ant-col-sm-push-1 ant-col-sm-offset-1 ant-col-sm-order-1 ant-col-md-1 ant-col-md-pull-1 ant-col-md-push-1 ant-col-md-offset-1 ant-col-md-order-1 ant-col-lg-0 ant-col-lg-pull-1 ant-col-lg-push-1 ant-col-lg-offset-1 ant-col-lg-order-1 ant-col-xl-1 ant-col-xl-pull-1 ant-col-xl-push-1 ant-col-xl-offset-1 ant-col-xl-order-1';
expect(debugElement_embedded_span.nativeElement.className === className).toBe(true);

});
Expand Down Expand Up @@ -466,7 +465,7 @@ class TestTypeFlexOrderComponent {
[nzXs]="{ span: 1, offset: 1,push:1, order:1,pull:1 }"
[nzSm]="{ span: 1, offset: 1,push:1, order:1,pull:1 }"
[nzMd]="{ span: 1, offset: 1,push:1, order:1,pull:1 }"
[nzLg]="{ span: 1, offset: 1,push:1, order:1,pull:1 }"
[nzLg]="{ span: 0, offset: 1,push:1, order:1,pull:1 }"
[nzXl]="{ span: 1, offset: 1,push:1, order:1,pull:1 }"></div>
</div>
`
Expand Down
3 changes: 3 additions & 0 deletions src/components/util/check.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function isNotNil(value: undefined | null | string | number | boolean): boolean {
return (typeof(value) !== 'undefined') && value !== null;
}

0 comments on commit c21dcbb

Please sign in to comment.