fix(sidebar): performance issues #74,#75

coreui · Aug 2, 2019 · 53f28f8 · 53f28f8
1 parent 5631d43
commit 53f28f8
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 23 deletions.
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-badge.pipe.spec.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-badge.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { AppSidebarNavBadgePipe } from './app-sidebar-nav-badge.pipe';
+
+describe('AppSidebarNavBadgePipe', () => {
+  it('create an instance', () => {
+    const pipe = new AppSidebarNavBadgePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-badge.pipe.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-badge.pipe.ts
@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'appSidebarNavBadge'
+})
+export class AppSidebarNavBadgePipe implements PipeTransform {
+
+  transform(item: any, args?: any): any {
+    const classes = {
+      'badge': true
+    };
+    const variant = `badge-${item.badge.variant}`;
+    classes[variant] = !!item.badge.variant;
+    return classes;
+  }
+
+}
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-icon.pipe.spec.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-icon.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { AppSidebarNavIconPipe } from './app-sidebar-nav-icon.pipe';
+
+describe('AppSidebarNavIconPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AppSidebarNavIconPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-icon.pipe.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-icon.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'appSidebarNavIcon'
+})
+export class AppSidebarNavIconPipe implements PipeTransform {
+
+  transform(item: any, args?: any): any {
+    const classes = {
+      'nav-icon': true
+    };
+    const icon = item.icon;
+    classes[icon] = !!item.icon;
+    return classes;
+  }
+}
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-label.component.html b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-label.component.html
@@ -3,5 +3,5 @@
    [appHtmlAttr]="item.attributes">
   <i *ngIf="helper.hasIcon(item)" [ngClass]="getLabelIconClass()"></i>
   <ng-container>{{item.name}}</ng-container>
-  <span *ngIf="helper.hasBadge(item)" [ngClass]="helper.getBadgeClass(item)">{{ item.badge.text }}</span>
+  <span *ngIf="helper.hasBadge(item)" [ngClass]="item | appSidebarNavBadge">{{ item.badge.text }}</span>
 </a>
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-label.component.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-label.component.ts
@@ -8,28 +8,30 @@ import {SidebarNavHelper} from '../app-sidebar-nav.service';
 export class AppSidebarNavLabelComponent implements OnInit {
   @Input() item: any;
 
+  private classes = {
+    'nav-label': true,
+    'active': true
+  };
+  private iconClasses = {};
+
   constructor(
     public helper: SidebarNavHelper
   ) { }
 
   ngOnInit() {
+    this.iconClasses = this.helper.getIconClass(this.item);
   }
 
   getItemClass() {
-    const labelClass = {
-      'nav-label': true,
-      'active': true
-    };
     const itemClass = this.item.class;
-    labelClass[itemClass] = !!itemClass;
-    return labelClass;
+    this.classes[itemClass] = !!itemClass;
+    return this.classes;
   }
   getLabelIconClass() {
-    const classes = this.helper.getIconClass(this.item);
     const variant = `text-${this.item.label.variant}`;
-    classes[variant] = !!variant;
+    this.iconClasses[variant] = !!this.item.label.variant;
     const labelClass = this.item.label.class;
-    classes[labelClass] = !!labelClass;
-    return classes;
+    this.iconClasses[labelClass] = !!labelClass;
+    return this.iconClasses;
   }
 }
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-link.component.html b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-link.component.html
@@ -3,9 +3,9 @@
     [ngClass]="getLinkClass()"
     href="{{item.url}}"
     [appHtmlAttr]="item.attributes">
-    <i *ngIf="helper.hasIcon(item)" [ngClass]="helper.getIconClass(item)"></i>
+    <i *ngIf="helper.hasIcon(item)" [ngClass]="item | appSidebarNavIcon"></i>
     <ng-container>{{item.name}}</ng-container>
-    <span *ngIf="helper.hasBadge(item)" [ngClass]="helper.getBadgeClass(item)">{{ item.badge.text }}</span>
+    <span *ngIf="helper.hasBadge(item)" [ngClass]="item | appSidebarNavBadge">{{ item.badge.text }}</span>
   </a>
   <a *ngSwitchDefault
      [ngClass]="getLinkClass()"
@@ -14,8 +14,8 @@
      routerLinkActive="active"
      [routerLink]="[item.url]"
      (click)="hideMobile()">
-    <i *ngIf="helper.hasIcon(item)" [ngClass]="helper.getIconClass(item)"></i>
+    <i *ngIf="helper.hasIcon(item)" [ngClass]="item | appSidebarNavIcon"></i>
     <ng-container>{{item.name}}</ng-container>
-    <span *ngIf="helper.hasBadge(item)" [ngClass]="helper.getBadgeClass(item)">{{ item.badge.text }}</span>
+    <span *ngIf="helper.hasBadge(item)" [ngClass]="item | appSidebarNavBadge">{{ item.badge.text }}</span>
   </a>
 </ng-container>
diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-link.component.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-link.component.ts
@@ -12,6 +12,8 @@ export class AppSidebarNavLinkComponent implements OnInit {
   public linkType: string;
   public href: string;
 
+  private classes = { 'nav-link': true };
+
   constructor(
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
@@ -25,16 +27,13 @@ export class AppSidebarNavLinkComponent implements OnInit {
 
   public getLinkClass() {
     const disabled = this.isDisabled();
-    const classes = {
-      'nav-link': true,
-      'disabled': disabled,
-      'btn-link': disabled
-    };
+    this.classes['disabled'] = disabled;
+    this.classes['btn-link'] = disabled;
     if (this.hasVariant()) {
       const variant = `nav-link-${this.item.variant}`;
-      classes[variant] = true;
+      this.classes[variant] = true;
     }
-    return classes;
+    return this.classes;
   }
 
   public getLinkType() {

diff --git a/projects/coreui/angular/src/lib/sidebar/app-sidebar.module.ts b/projects/coreui/angular/src/lib/sidebar/app-sidebar.module.ts
@@ -19,6 +19,8 @@ import { AppSidebarNavLinkComponent } from './app-sidebar-nav/app-sidebar-nav-li
 import { AppSidebarNavTitleComponent } from './app-sidebar-nav/app-sidebar-nav-title.component';
 import { SidebarNavHelper } from './app-sidebar-nav.service';
 import { AppSidebarNavLabelComponent } from './app-sidebar-nav/app-sidebar-nav-label.component';
+import { AppSidebarNavIconPipe } from './app-sidebar-nav/app-sidebar-nav-icon.pipe';
+import { AppSidebarNavBadgePipe } from './app-sidebar-nav/app-sidebar-nav-badge.pipe';
 
 @NgModule({
   imports: [
@@ -57,7 +59,9 @@ import { AppSidebarNavLabelComponent } from './app-sidebar-nav/app-sidebar-nav-l
     AppSidebarNavTitleComponent,
     NavDropdownDirective,
     NavDropdownToggleDirective,
-    AppSidebarNavLabelComponent
+    AppSidebarNavLabelComponent,
+    AppSidebarNavIconPipe,
+    AppSidebarNavBadgePipe
   ],
   providers: [
     SidebarNavHelper