feat(module:grid): support embedded col option (#247)

close #101
NG-ZORRO · Sep 9, 2017 · 248c7e5 · 248c7e5
1 parent 2f031ce
commit 248c7e5
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 34 deletions.
diff --git a/src/components/grid/nz-col.component.ts b/src/components/grid/nz-col.component.ts
@@ -12,12 +12,20 @@ import {
 } from '@angular/core';
 import { NzRowComponent } from './nz-row.component';
 
+export abstract class EmbeddedProperty {
+  span: number;
+  pull: number;
+  push: number;
+  offset: number;
+  order: number
+}
+
 @Component({
-  selector     : 'nz-col',
-  template     : `
+  selector: 'nz-col',
+  template: `
     <ng-content></ng-content>
   `,
-  styles       : []
+  styles  : []
 })
 
 export class NzColComponent implements OnInit, OnChanges {
@@ -40,11 +48,11 @@ export class NzColComponent implements OnInit, OnChanges {
   @Input() nzOffset: number;
   @Input() nzPush: number;
   @Input() nzPull: number;
-  @Input() nzXs: number;
-  @Input() nzSm: number;
-  @Input() nzMd: number;
-  @Input() nzLg: number;
-  @Input() nzXl: number;
+  @Input() nzXs: number | EmbeddedProperty;
+  @Input() nzSm: number | EmbeddedProperty;
+  @Input() nzMd: number | EmbeddedProperty;
+  @Input() nzLg: number | EmbeddedProperty;
+  @Input() nzXl: number | EmbeddedProperty;
 
   /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
   setClassMap(): void {
@@ -57,19 +65,34 @@ export class NzColComponent implements OnInit, OnChanges {
       this.nzOffset && `${this._prefixCls}-offset-${this.nzOffset}`,
       this.nzPull && `${this._prefixCls}-pull-${this.nzPull}`,
       this.nzPush && `${this._prefixCls}-push-${this.nzPush}`,
-      this.nzXs && `${this._prefixCls}-xs-${this.nzXs}`,
-      this.nzSm && `${this._prefixCls}-sm-${this.nzSm}`,
-      this.nzMd && `${this._prefixCls}-md-${this.nzMd}`,
-      this.nzLg && `${this._prefixCls}-lg-${this.nzLg}`,
-      this.nzXl && `${this._prefixCls}-xl-${this.nzXl}`,
-    ].filter((item) => {
+      ...this.generateClass()
+    ];
+    this._classList = this._classList.filter((item) => {
       return !!item;
     });
     this._classList.forEach(_className => {
       this._renderer.addClass(this._el, _className);
     })
   }
 
+  generateClass() {
+    const listOfSizeInputName = [ 'nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl' ];
+    const listOfClassName = [];
+    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' ]}`);
+      }
+    });
+    return listOfClassName;
+  }
+
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
     this.setClassMap();
   }

diff --git a/src/components/grid/nz-grid.component.spec.ts b/src/components/grid/nz-grid.component.spec.ts
@@ -1,17 +1,17 @@
 /* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed, ComponentFixtureAutoDetect} from '@angular/core/testing';
-import {Component, DebugElement} from '@angular/core';
-import {By} from '@angular/platform-browser';
-import {NzGridModule} from './nz-grid.module';
-import {NzRowComponent} from './nz-row.component';
-import {NzColDirective} from './nz-col.directive';
+import { async, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { NzGridModule } from './nz-grid.module';
+import { NzRowComponent } from './nz-row.component';
+import { NzColDirective } from './nz-col.directive';
 
 describe('NzGrid', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NzGridModule],
-      declarations: [GridListWithoutCols, GridListWithoutRows, TestSpan, TestOffset, TestPushPull, TestColResponsive, TestGutter, TestTypeFlex, TestTypeFlexOrder]
+      imports     : [ NzGridModule ],
+      declarations: [ GridListWithoutCols, GridListWithoutRows, TestSpan, TestOffset, TestPushPull, TestColResponsive, TestGutter, TestTypeFlex, TestTypeFlexOrder, TestTypeEmbedded ]
     }).compileComponents();
   }));
   describe('for cols', () => {
@@ -145,15 +145,15 @@ describe('NzGrid', () => {
       const debugElement_col = fixture.debugElement.query(By.directive(NzColDirective));
 
       // window.resizeTo(800, 600);
-      testComponent._col1 = {xs: 2, xm: 4, md: 6, lg: 8, xl: 10};
+      testComponent._col1 = { xs: 2, xm: 4, md: 6, lg: 8, xl: 10 };
       fixture.detectChanges();
       expect(debugElement_col.nativeElement.classList.contains('ant-col-xs-2')).toBe(true);
       expect(debugElement_col.nativeElement.classList.contains('ant-col-sm-4')).toBe(true);
       expect(debugElement_col.nativeElement.classList.contains('ant-col-md-6')).toBe(true);
       expect(debugElement_col.nativeElement.classList.contains('ant-col-lg-8')).toBe(true);
       expect(debugElement_col.nativeElement.classList.contains('ant-col-xl-10')).toBe(true);
 
-      testComponent._col1 = {xs: 'custom_string', xm: 4, md: 6, lg: 8, xl: 10};
+      testComponent._col1 = { xs: 'custom_string', xm: 4, md: 6, lg: 8, xl: 10 };
       expect(() => {
         fixture.detectChanges()
       }).not.toThrow();
@@ -191,10 +191,18 @@ describe('NzGrid', () => {
       const testComponentResponsive = fixtureResponsive.debugElement.componentInstance;
       const debugElement_col_responsive = fixtureResponsive.debugElement.query(By.directive(NzColDirective));
       debugElement_col_responsive.nativeElement.classList.add('custom-class');
-      testComponentResponsive._col1 = {xs: 2, xm: 4, md: 6, lg: 8, xl: 10};
+      testComponentResponsive._col1 = { xs: 2, xm: 4, md: 6, lg: 8, xl: 10 };
       fixtureResponsive.detectChanges();
       expect(debugElement_col_responsive.nativeElement.classList.contains('custom-class')).toBe(true);
     });
+    it('should embedded style work', () => {
+      const fixtureSpan = TestBed.createComponent(TestTypeEmbedded);
+      const debugElement_embedded_span = fixtureSpan.debugElement.query(By.directive(NzColDirective));
+      fixtureSpan.detectChanges();
+      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';
+      expect(debugElement_embedded_span.nativeElement.className === className).toBe(true);
+
+    });
   });
 
   describe('for rows', () => {
@@ -311,13 +319,16 @@ describe('NzGrid', () => {
 function getStyle(el: DebugElement, prop: string): string {
   return getComputedStyle(el.nativeElement).getPropertyValue(prop);
 }
+
 /** Test component that contains an nzGrid. */
-@Component({template: '<div nz-row></div>'})
+@Component({ template: '<div nz-row></div>' })
 class GridListWithoutCols {
 }
-@Component({template: '<div nz-col></div>'})
+
+@Component({ template: '<div nz-col></div>' })
 class GridListWithoutRows {
 }
+
 @Component({
   selector: 'test-span',
   template: `
@@ -334,6 +345,7 @@ class GridListWithoutRows {
 class TestSpan {
   _span = 5;
 }
+
 @Component({
   selector: 'test-offset',
   template: `
@@ -353,6 +365,7 @@ class TestOffset {
   _span2 = 12;
   _offset2 = 8;
 }
+
 @Component({
   selector: 'test-push-pull',
   template: `
@@ -368,6 +381,7 @@ class TestPushPull {
   _push = 6;
   _pull = 18;
 }
+
 @Component({
   selector: 'test-col-responsive',
   template: `
@@ -378,7 +392,7 @@ class TestPushPull {
     </div>`,
 })
 class TestColResponsive {
-  _col1 = {xs: 2, xm: 4, md: 6, lg: 8, xl: 10};
+  _col1 = { xs: 2, xm: 4, md: 6, lg: 8, xl: 10 };
 }
 
 @Component({
@@ -400,6 +414,7 @@ class TestGutter {
   _span = 6;
   _gutter = 16;
 }
+
 @Component({
   selector: 'test-type-flex',
   template: `
@@ -421,6 +436,7 @@ class TestTypeFlex {
   _justify = 'start';
   _align = 'top'
 }
+
 @Component({
   selector: 'test-type-flex',
   template: `
@@ -439,3 +455,20 @@ class TestTypeFlexOrder {
   _order1 = 1;
   _order2 = 2
 }
+
+@Component({
+  selector: 'test-type-embedded',
+  template: `
+    <div nz-row [nzType]="'flex'">
+      <div
+        nz-col
+        [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 }"
+        [nzXl]="{ span: 1, offset: 1,push:1, order:1,pull:1 }"></div>
+    </div>
+  `
+})
+class TestTypeEmbedded {
+}
diff --git a/src/showcase/nz-demo-grid/nz-demo-grid-responsive-more.component.ts b/src/showcase/nz-demo-grid/nz-demo-grid-responsive-more.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-grid-responsive-more',
+  template: `
+    <div nz-row>
+      <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
+        Col
+      </div>
+      <div nz-col [nzXs]="{ span: 11, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
+        Col
+      </div>
+      <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
+        Col
+      </div>
+    </div>`,
+  styles  : []
+})
+export class NzDemoGridResponsiveMoreComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}
+
diff --git a/src/showcase/nz-demo-grid/nz-demo-grid.component.ts b/src/showcase/nz-demo-grid/nz-demo-grid.component.ts
@@ -18,6 +18,7 @@ export class NzDemoGridComponent implements OnInit {
   NzDemoGridFlexAlignCode = require('!!raw-loader!./nz-demo-grid-flex-align.component');
   NzDemoGridFlexOrderCode = require('!!raw-loader!./nz-demo-grid-flex-order.component');
   NzDemoGridResponsiveCode = require('!!raw-loader!./nz-demo-grid-responsive.component');
+  NzDemoGridResponsiveMoreCode = require('!!raw-loader!./nz-demo-grid-responsive-more.component');
 
   constructor() {
   }

diff --git a/src/showcase/nz-demo-grid/nz-demo-grid.html b/src/showcase/nz-demo-grid/nz-demo-grid.html
@@ -138,6 +138,17 @@ <h2 id="Flex-布局"><span>Flex 布局</span>
           </p>
         </div>
       </nz-code-box>
+      <nz-code-box [nzTitle]="'其他属性的响应式'" id="components-grid-demo-responsive-more" [nzCode]="NzDemoGridResponsiveMoreCode">
+        <nz-demo-grid-responsive-more demo></nz-demo-grid-responsive-more>
+        <div intro>
+          <p>
+            <code>span</code>  <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> 属性可以通过内嵌到 <code>nzXs</code> <code>nzSm</code> <code>nzMd</code> <code>nzLg</code> <code>nzXl</code> 属性中来使用。
+          </p>
+          <p>
+            其中 <code>[nzXs]="6"</code> 相当于 <code>nzXs={{'{'}}{{'{'}} span: 6 {{'}'}}{{'}'}}</code>
+          </p>
+        </div>
+      </nz-code-box>
       <nz-code-box [nzTitle]="'栅格配置器'" id="components-grid-demo-gutter-config" [nzCode]="NzDemoGridGutterConfigCode">
         <nz-demo-grid-gutter-config demo></nz-demo-grid-gutter-config>
         <div intro>
@@ -237,31 +248,31 @@ <h3 id="Col"><span>[nz-col]</span>
         <tr>
           <td>nzXs</td>
           <td><code>&lt;768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-          <td>Number</td>
+          <td>Number|Object</td>
           <td>-</td>
         </tr>
         <tr>
           <td>nzSm</td>
           <td><code>≥768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-          <td>Number</td>
+          <td>Number|Object</td>
           <td>-</td>
         </tr>
         <tr>
           <td>nzMd</td>
           <td><code>≥992px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-          <td>Number</td>
+          <td>Number|Object</td>
           <td>-</td>
         </tr>
         <tr>
           <td>nzLg</td>
           <td><code>≥1200px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-          <td>Number</td>
+          <td>Number|Object</td>
           <td>-</td>
         </tr>
         <tr>
           <td>nzXl</td>
           <td><code>≥1600px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
-          <td>Number</td>
+          <td>Number|Object</td>
           <td>-</td>
         </tr>
       </tbody>

diff --git a/src/showcase/nz-demo-grid/nz-demo-grid.module.ts b/src/showcase/nz-demo-grid/nz-demo-grid.module.ts
@@ -11,6 +11,7 @@ import { NzDemoGridFlexComponent } from './nz-demo-grid-flex.component';
 import { NzDemoGridFlexAlignComponent } from './nz-demo-grid-flex-align.component';
 import { NzDemoGridFlexOrderComponent } from './nz-demo-grid-flex-order.component';
 import { NzDemoGridResponsiveComponent } from './nz-demo-grid-responsive.component';
+import { NzDemoGridResponsiveMoreComponent } from './nz-demo-grid-responsive-more.component';
 import { NzDemoGridComponent } from './nz-demo-grid.component';
 import { NzCodeBoxModule } from '../share/nz-codebox/nz-codebox.module';
 
@@ -20,7 +21,7 @@ import { NzDemoGridRoutingModule } from './nz-demo-grid.routing.module';
 
 @NgModule({
   imports     : [ NzDemoGridRoutingModule, CommonModule, NzCodeBoxModule, NgZorroAntdModule, FormsModule ],
-  declarations: [ NzDemoGridGutterConfigComponent, NzDemoGridFlexOrderComponent, NzDemoGridBasicComponent, NzDemoGridGutterComponent, NzDemoGridOffsetComponent, NzDemoGridSortComponent, NzDemoGridFlexComponent, NzDemoGridFlexAlignComponent, NzDemoGridResponsiveComponent, NzDemoGridComponent ]
+  declarations: [ NzDemoGridResponsiveMoreComponent, NzDemoGridGutterConfigComponent, NzDemoGridFlexOrderComponent, NzDemoGridBasicComponent, NzDemoGridGutterComponent, NzDemoGridOffsetComponent, NzDemoGridSortComponent, NzDemoGridFlexComponent, NzDemoGridFlexAlignComponent, NzDemoGridResponsiveComponent, NzDemoGridComponent ]
 })
 
 export class NzDemoGridModule {