feat(module: grid): support custom icon and local assets (#257)

NG-ZORRO · Jan 21, 2019 · eafe8ec · eafe8ec
1 parent 2f5fc79
commit eafe8ec
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 17 deletions.
diff --git a/components/grid/demo/basic.ts b/components/grid/demo/basic.ts
@@ -6,6 +6,8 @@ import { Component } from '@angular/core';
     <div class="sub-title">Always square grid item </div>
     <Grid [activeStyle]="false" [data]="data" (OnClick)="click($event)"></Grid>
     <br>
+    <Grid [activeStyle]="false" [data]="dataList" (OnClick)="click($event)"></Grid>
+    <br>
     <div class="sub-title">Grid item adjust accroiding to img size </div>
     <Grid class="not-square-grid" [data]="data" [square]="false" (OnClick)="click($event)"></Grid>
     <br>
@@ -38,15 +40,20 @@ import { Component } from '@angular/core';
 })
 export class DemoGridBasicComponent {
   data = Array.from(new Array(9)).map((_val, i) => ({
-    icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+    icon: '/assets/icons/icon-72x72.png',
     text: `name${i}`
   }));
 
   data1 = Array.from(new Array(9)).map(() => ({
     icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png'
   }));
 
+  dataList = Array.from(new Array(9)).map((_val, i) => ({
+    icon: `<img src="/assets/icons/icon-72x72.png" style="width:36px"/>`,
+    text: `name${i}`
+  }));
+
   click(event) {
     console.log(event);
   }
-}
+}
diff --git a/components/grid/grid.component.html b/components/grid/grid.component.html
@@ -15,14 +15,16 @@
            (click)="click(subItem,i * columnNum + j)"
       >
         <div class="{{defaultProps.prefixCls}}-item-inner-content column-num-{{columnNum}}">
-          <img *ngIf="subItem.icon && isURL(subItem.icon)"
+          <img *ngIf="subItem.icon && getIconType(subItem.icon) === 'url'"
                src="{{subItem.icon}}"
                class="{{defaultProps.prefixCls}}-icon"
           >
-          <Icon *ngIf="subItem.icon && !isURL(subItem.icon)"
+          <Icon *ngIf="subItem.icon && getIconType(subItem.icon)==='icon'"
                 [type]="subItem.icon"
                 [size]="subItem.size"
           ></Icon>
+          <div *ngIf="subItem.icon && getIconType(subItem.icon)==='innerHTML'" [innerHTML]="subItem.icon | safeHTML"></div>
+          <ng-template *ngIf="subItem.icon && getIconType(subItem.icon)==='TemplateRef'" [ngTemplateOutlet]="subItem.icon"></ng-template>
           <div class="{{defaultProps.prefixCls}}-text">{{subItem.text}}</div>
         </div>
       </div>

diff --git a/components/grid/grid.component.spec.ts b/components/grid/grid.component.spec.ts
@@ -3,7 +3,7 @@ import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CarouselModule, FlexModule, IconModule, GridModule } from '../..';
-
+import { NgZorroAntdMobilePipesModule } from '../pipes/ng-zorro-antd-mobile.pipes.module';
 describe('GridComponent', () => {
   let component: TestGridComponent;
   let fixture: ComponentFixture<TestGridComponent>;
@@ -12,7 +12,7 @@ describe('GridComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [TestGridComponent],
-      imports: [BrowserAnimationsModule, CarouselModule, FlexModule, IconModule, GridModule]
+      imports: [BrowserAnimationsModule, CarouselModule, FlexModule, IconModule, GridModule, NgZorroAntdMobilePipesModule]
     }).compileComponents();
   }));
 
@@ -87,6 +87,7 @@ describe('GridComponent', () => {
           [isCarousel]="isCarousel"
           (OnClick)="OnClick($event)"
     ></Grid>
+    <Grid [activeStyle]="false" [data]="dataList" (OnClick)="click($event)"></Grid>
   `
 })
 export class TestGridComponent {
@@ -99,6 +100,11 @@ export class TestGridComponent {
   columnNum = 3;
   isCarousel = false;
 
+  dataList = Array.from(new Array(9)).map((_val, i) => ({
+    icon: `<img src="/assets/icons/icon-72x72.png" style="width:36px"/>`,
+    text: `name${i}`
+  }));
+
   OnClick(event) {
     console.log(event);
   }

diff --git a/components/grid/grid.component.ts b/components/grid/grid.component.ts
@@ -41,7 +41,7 @@ export class GridComponent implements OnInit {
   get isCarousel(): boolean {
     return this.defaultProps.isCarousel;
   }
-  set isCarousel (value: boolean) {
+  set isCarousel(value: boolean) {
     this.defaultProps.isCarousel = value;
     this.init();
   }
@@ -72,15 +72,15 @@ export class GridComponent implements OnInit {
 
   constructor() {}
 
-  isTemplateRef(value: {}): boolean {
-    return value instanceof TemplateRef;
-  }
-
-  isURL(value: string): boolean {
-    if (value) {
-      return value.indexOf('http') >= 0;
+  getIconType(value: any): string {
+    if ((value.indexOf('http') >= 0 || value.indexOf('assets') >= 0) && value.indexOf('<') < 0) {
+      return 'url';
+    } else if (value.indexOf('<') >= 0) {
+      return 'innerHTML';
+    } else if (value instanceof TemplateRef) {
+      return 'TemplateRef';
     } else {
-      return false;
+      return 'string';
     }
   }
 

diff --git a/components/grid/grid.module.ts b/components/grid/grid.module.ts
@@ -5,9 +5,9 @@ import { FlexModule } from '../flex/flex.module';
 import { CarouselModule } from '../carousel/carousel.module';
 import { IconModule } from '../icon/icon.module';
 import { CoreModule } from '../core/core.module';
-
+import { NgZorroAntdMobilePipesModule } from '../pipes/ng-zorro-antd-mobile.pipes.module';
 @NgModule({
-  imports: [FlexModule, IconModule, CommonModule, CarouselModule, CoreModule],
+  imports: [FlexModule, IconModule, CommonModule, CarouselModule, CoreModule, NgZorroAntdMobilePipesModule],
   exports: [GridComponent],
   declarations: [GridComponent]
 })