feat(http): Module configuration can accept regexp list

Author: t-ho

README.md

@@ -1,5 +1,5 @@
 {
-  "name": "ngx-ui-loader-app",
+  "name": "ngx-ui-loader",
   "version": "7.1.2",
   "scripts": {
     "ng": "ng",

package-lock.json

@@ -2,11 +2,13 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges, SimpleChange, OnDes
 import { DomSanitizer, SafeResourceUrl, SafeStyle } from '@angular/platform-browser';
 import { NgxUiLoaderService } from './ngx-ui-loader.service';
 import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 import { NgxUiLoaderConfig } from './ngx-ui-loader-config';
 import { DirectionType, PositionType, SpinnerType } from './ngx-ui-loader.types';
 import { POSITION, PB_DIRECTION, SPINNER } from './ngx-ui-loader.enums';
 import { SPINNER_CONFIG } from './ngx-ui-loader.contants';
+import { ShowEvent } from './ngx-ui-loader.interfaces';
 import { coerceNumber } from './coercion';
 
 @Component({
@@ -114,31 +116,27 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
     this.pbDirection = <DirectionType>this.validate('pbDirection', this.pbDirection, PB_DIRECTION, this.defaultConfig.pbDirection);
 
     this.showForegroundWatcher = this.ngxService.showForeground$
+      .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
-        if (data.loaderId === this.loaderId) {
-          this.showForeground = data.isShow;
-        }
+        this.showForeground = data.isShow;
       });
 
     this.showBackgroundWatcher = this.ngxService.showBackground$
+      .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
-        if (data.loaderId === this.loaderId) {
-          this.showBackground = data.isShow;
-        }
+        this.showBackground = data.isShow;
       });
 
     this.foregroundClosingWatcher = this.ngxService.foregroundClosing$
+      .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
-        if (data.loaderId === this.loaderId) {
-          this.foregroundClosing = data.isShow;
-        }
+        this.foregroundClosing = data.isShow;
       });
 
     this.backgroundClosingWatcher = this.ngxService.backgroundClosing$
+      .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
-        if (data.loaderId === this.loaderId) {
-          this.backgroundClosing = data.isShow;
-        }
+        this.backgroundClosing = data.isShow;
       });
     this.initialized = true;
   }

package.json

@@ -2,7 +2,8 @@
  * The interface of ngx-ui-loader configuration
  */
 export interface NgxUiLoaderHttpConfig {
-  exclude?: string[]; // not show loader for these api url
+  exclude?: string[]; // not show loader for the api urls that start with these strings
+  excludeRegexp?: string[]; // not show loader for the api urls matching these regexps
   loaderId?: string;
   showForeground?: boolean;
 }

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts

@@ -13,6 +13,8 @@ export class NgxUiLoaderHttpInterceptor implements HttpInterceptor {
 
   private count: number;
   private defaultConfig: NgxUiLoaderHttpConfig;
+  private exclude: string[];
+  private excludeRegexp: RegExp[];
 
   /**
    * Constructor
@@ -30,18 +32,18 @@ export class NgxUiLoaderHttpInterceptor implements HttpInterceptor {
 
     if (config) {
       if (config.exclude) {
-        config.exclude = config.exclude.map(url => url.toLowerCase());
+        this.exclude = config.exclude.map(url => url.toLowerCase());
+      }
+      if (config.excludeRegexp) {
+        this.excludeRegexp = config.excludeRegexp.map(regexp => new RegExp(regexp, 'i'));
       }
       this.defaultConfig = { ...this.defaultConfig, ...config };
     }
   }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (this.defaultConfig.exclude) {
-      // do not show the loader for api url in the `exclude` list
-      if (this.defaultConfig.exclude.findIndex(url => req.url.toLowerCase().startsWith(url)) !== -1) {
-        return next.handle(req);
-      }
+    if (this.isIgnored(req.url)) {
+      return next.handle(req);
     }
 
     this.count++;
@@ -66,4 +68,22 @@ export class NgxUiLoaderHttpInterceptor implements HttpInterceptor {
       }
     }));
   }
+
+  private isIgnored(url: string): boolean {
+    if (this.exclude) {
+      // do not show the loader for api urls in the `exclude` list
+      if (this.exclude.findIndex(str => url.toLowerCase().startsWith(str)) !== -1) {
+        return true;
+      }
+    }
+
+    if (this.excludeRegexp) {
+      // do not show the loader for api urls which matches regexps in the `excludeRegexp` list
+      if (this.excludeRegexp.findIndex(regexp => regexp.test(url)) !== -1) {
+        return true;
+      }
+    }
+
+    return false;
+  }
 }