feat(module:tab): icon support valid image resoure url (#168)

Author: cipchk

components/tab/index.md

@@ -11,8 +11,9 @@ module: TabModule
 ----|------|-----|------
 heading | 选项卡名称 | `string` | -
 disabled | 是否禁用 | `boolean` | -
-icon | icon图标，支持HTML | `string` | -
-activeIcon | 激活时icon图标，支持HTML | `string` | -
+iconClassName | Icon类名，一般用于雪碧图 | `string` | -
+icon | icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 | `string` | -
+activeIcon | 激活时icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 | `string` | -
 badge | 徽章内容，支持数字或圆点 | `number,'dot'` | -
 active | 是否激活 | `boolean` | -
 select | 当tab激活时触发 | `EventEmitter<TabDirective>` | -

components/tab/tab.directive.ts

@@ -10,13 +10,18 @@ import { BarComponent } from './bar.component';
   },
 })
 export class TabDirective implements OnDestroy, OnChanges {
+  iconUrl = false;
   /** 选项卡名称 */
   @Input() heading: string;
   /** 是否禁用 */
   @Input() @InputBoolean() disabled: boolean;
-  /** icon图标，支持HTML */
+  /**
+   * Icon类名，一般用于雪碧图
+   */
+  @Input() iconClassName: string;
+  /** icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 */
   @Input() icon: string;
-  /** 激活时icon图标，支持HTML */
+  /** 激活时icon图标，支持HTML、支持有效图像资源结尾的扩展名URL地址 */
   @Input() activeIcon: string;
   /** 徽章内容，支持数字或圆点 */
   @Input() badge: number | 'dot';
@@ -59,6 +64,7 @@ export class TabDirective implements OnDestroy, OnChanges {
   }
 
   ngOnChanges(): void {
+    this.iconUrl = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg)$/i.test(this.icon);
     if (!this.activeIcon) {
       this.activeIcon = this.icon;
     }

components/tab/tab.spec.ts

@@ -2,18 +2,20 @@ import { Component } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { TabModule } from './tab.module';
 
-const TABS: any[] = [
+const TABS = [
   {
     heading: 'tab1',
     content: 'tab1 content',
     active: true,
-    icon: '<img src="./assets/images/icon_tabbar.png">',
+    iconClassName: '',
+    icon: './assets/images/icon_tabbar.png',
     badge: 8,
   },
   {
     heading: 'tab2',
     content: 'tab2 content',
     active: false,
+    iconClassName: '',
     icon: '<img src="./assets/images/icon_tabbar.png">',
     badge: 'dot',
   },
@@ -26,6 +28,7 @@ const navbar_html = `
               [heading]="item.heading"
               [disabled]="item.disabled"
               [active]="item.active"
+              [iconClassName]="item.iconClassName"
               [icon]="item.icon"
               [badge]="item.badge"
               (select)="_select($event)"
@@ -39,6 +42,7 @@ const tabbar_html = `
               [heading]="item.heading"
               [disabled]="item.disabled"
               [active]="item.active"
+              [iconClassName]="item.iconClassName"
               [icon]="item.icon"
               [badge]="item.badge"
               (select)="_select($event)"
@@ -51,8 +55,8 @@ function getItems(nativeEl: HTMLElement): NodeListOf<Element> {
   return nativeEl.querySelectorAll('.weui-navbar__item');
 }
 
-function getItemsByTabbar(nativeEl: HTMLElement): NodeListOf<Element> {
-  return nativeEl.querySelectorAll('.weui-tabbar__item');
+function getItemsByTabbar(nativeEl: HTMLElement, index: number): HTMLElement {
+  return nativeEl.querySelectorAll('.weui-tabbar__item')[index] as HTMLElement;
 }
 
 function getContents(nativeEl: HTMLElement): NodeListOf<Element> {
@@ -79,7 +83,7 @@ function expectActiveTabs(nativeEl: HTMLElement, action: boolean[]): void {
 describe('Component: Tabs', () => {
   let fixture: ComponentFixture<TestTabComponent>;
   let context: TestTabComponent;
-  let el: any;
+  let el: HTMLElement;
 
   describe('[Navbar]', () => {
     beforeEach(fakeAsync(() => {
@@ -160,15 +164,27 @@ describe('Component: Tabs', () => {
     }));
 
     it('should set tab has icon', () => {
-      expect((getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-tabbar__icon')).not.toBeNull();
+      expect(getItemsByTabbar(el, 0).querySelector('.weui-tabbar__icon')).not.toBeNull();
     });
 
     it('should set tab badge number value', () => {
-      expect((getItemsByTabbar(el)[0] as HTMLElement).querySelector('.weui-badge')!.innerHTML).toBe('8');
+      expect(getItemsByTabbar(el, 0).querySelector('.weui-badge')!.innerHTML).toBe('8');
     });
 
     it('should set tab badge dot value', () => {
-      expect((getItemsByTabbar(el)[1] as HTMLElement).querySelector('.weui-badge')!.classList).toContain('weui-badge_dot');
+      expect(getItemsByTabbar(el, 1).querySelector('.weui-badge')!.classList).toContain('weui-badge_dot');
+    });
+
+    it('should be support valid image url', () => {
+      context.tabs = [{ icon: '1.jpg' }];
+      fixture.detectChanges();
+      expect(getItemsByTabbar(el, 0).querySelector('.weui-tabbar__icon')).not.toBeNull();
+    });
+
+    it('#iconClassName', () => {
+      context.tabs = [{ iconClassName: 'aaa' }];
+      fixture.detectChanges();
+      expect(getItemsByTabbar(el, 0).querySelector('.weui-tabbar__icon')!.classList).toContain('aaa');
     });
   });
 });

components/tab/tabbar.component.html

@@ -1,24 +1,13 @@
 <div class="weui-tab__panel"><ng-content></ng-content></div>
 <div class="weui-tabbar">
-  <div
-    class="weui-tabbar__item"
-    [ngClass]="{ 'weui-bar__item_on': item.active }"
-    *ngFor="let item of tabs"
-    (click)="setActive(item)"
-  >
-    <div style="display: inline-block;position: relative;">
-      <div class="weui-tabbar__icon" [innerHTML]="item.active ? item.activeIcon : item.icon"></div>
-      <span
-        class="weui-badge"
-        style="position: absolute;top: -2px;right: -13px;"
-        *ngIf="item.badge && item.badge !== 'dot'"
-        >{{ item.badge }}</span
-      >
-      <span
-        class="weui-badge weui-badge_dot"
-        style="position: absolute;top: 0;right: -6px;"
-        *ngIf="item.badge && item.badge === 'dot'"
-      ></span>
+  <div class="weui-tabbar__item" *ngFor="let item of tabs" [ngClass]="{ 'weui-bar__item_on': item.active }" (click)="setActive(item)">
+    <div style="position: relative; display: inline-block;">
+      <div *ngIf="item.iconUrl" class="weui-tabbar__icon" [ngClass]="item.iconClassName">
+        <img [src]="item.active ? item.activeIcon : item.icon" />
+      </div>
+      <div *ngIf="!item.iconUrl" class="weui-tabbar__icon" [innerHTML]="item.active ? item.activeIcon : item.icon" [ngClass]="item.iconClassName"></div>
+      <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;" *ngIf="item.badge && item.badge !== 'dot'">{{ item.badge }}</span>
+      <span class="weui-badge weui-badge_dot" style="position: absolute; top: 0; right: -6px;" *ngIf="item.badge && item.badge === 'dot'"></span>
     </div>
     <p class="weui-tabbar__label">{{ item.heading }}</p>
   </div>

src/app/example/tabbar/tabbar.component.ts

@@ -10,17 +10,17 @@ import { timer } from 'rxjs';
 })
 export class DemoTabbarComponent {
   time: number;
-  icon = `<img src=./assets/images/icon_tabbar.png>`;
-  activeIcon = `<img src=./assets/images/momentloader.png>`;
-
-  onSelect(): void {
-    this.time = new Date().getTime();
-  }
+  icon = `./assets/images/icon_tabbar.png`;
+  activeIcon = `./assets/images/momentloader.png`;
 
   items: any[] = Array(20)
     .fill(0)
     .map((_v: any, i: number) => i);
 
+  onSelect(): void {
+    this.time = new Date().getTime();
+  }
+
   onLoadMore(comp: InfiniteLoaderComponent): void {
     timer(1500).subscribe(() => {
       this.items.push(