From e50b72ff00d42396906f77c5784a7b12f8f85170 Mon Sep 17 00:00:00 2001 From: VTHINKXIE Date: Fri, 8 Dec 2017 16:34:12 +0800 Subject: [PATCH] feat(module:grid): support zero input in grid (#704) close #702 --- src/components/grid/nz-col.component.ts | 30 +++++++++++-------- src/components/grid/nz-grid.component.spec.ts | 21 +++++++------ src/components/util/check.ts | 3 ++ 3 files changed, 30 insertions(+), 24 deletions(-) create mode 100644 src/components/util/check.ts diff --git a/src/components/grid/nz-col.component.ts b/src/components/grid/nz-col.component.ts index 066f8d76d0..aea9b58fea 100644 --- a/src/components/grid/nz-col.component.ts +++ b/src/components/grid/nz-col.component.ts @@ -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 { @@ -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) => { @@ -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; } diff --git a/src/components/grid/nz-grid.component.spec.ts b/src/components/grid/nz-grid.component.spec.ts index ba2a1ccc7d..cbc724e776 100644 --- a/src/components/grid/nz-grid.component.spec.ts +++ b/src/components/grid/nz-grid.component.spec.ts @@ -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(() => { @@ -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(); @@ -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(); @@ -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); }); @@ -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 }"> ` diff --git a/src/components/util/check.ts b/src/components/util/check.ts new file mode 100644 index 0000000000..08d74f76ae --- /dev/null +++ b/src/components/util/check.ts @@ -0,0 +1,3 @@ +export function isNotNil(value: undefined | null | string | number | boolean): boolean { + return (typeof(value) !== 'undefined') && value !== null; +}