[NG] fix to allow loading binding to be falsy values

The recent refactoring of loading buttons allows strict true/false values, but previously it also supported falsy values. This reenables that functionality for backwards compatibility. closes #2355 Signed-off-by: Jeremy Wilken <[email protected]>
vmware-archive · Jun 14, 2018 · f88b418 · f88b418
1 parent 39537e4
commit f88b418
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/src/clr-angular/utils/loading/loading.spec.ts b/src/clr-angular/utils/loading/loading.spec.ts
@@ -50,6 +50,18 @@ describe('Loading directive', function() {
     expect(this.listener.loadingStateChange).toHaveBeenCalledTimes(1);
   });
 
+  it('handles null or other falsy values as false', function() {
+    this.testComponent.loading = null;
+    this.fixture.detectChanges();
+    expect(this.clarityDirective.loadingState).toEqual(ClrLoadingState.DEFAULT);
+    this.testComponent.loading = undefined;
+    this.fixture.detectChanges();
+    expect(this.clarityDirective.loadingState).toEqual(ClrLoadingState.DEFAULT);
+    this.testComponent.loading = 0;
+    this.fixture.detectChanges();
+    expect(this.clarityDirective.loadingState).toEqual(ClrLoadingState.DEFAULT);
+  });
+
   it('stops loading when destroyed', function() {
     this.testComponent.loading = true;
     this.fixture.detectChanges();

diff --git a/src/clr-angular/utils/loading/loading.ts b/src/clr-angular/utils/loading/loading.ts
@@ -27,18 +27,12 @@ export class ClrLoading implements OnDestroy {
 
   @Input('clrLoading')
   public set loadingState(value: boolean | ClrLoadingState) {
-    if (value === null) {
+    if (value === true) {
+      value = ClrLoadingState.LOADING;
+    } else if (!value) {
       value = ClrLoadingState.DEFAULT;
     }
 
-    if (typeof value === 'boolean') {
-      if (value) {
-        value = ClrLoadingState.LOADING;
-      } else {
-        value = ClrLoadingState.DEFAULT;
-      }
-    }
-
     if (value === this._loadingState) {
       return;
     }

diff --git a/src/dev/src/app/buttons/button-loading.html b/src/dev/src/app/buttons/button-loading.html
@@ -12,3 +12,4 @@ <h4>Loading Buttons</h4>
 <h4>Small Loading Buttons</h4>
 <button [clrLoading]="validateSmState" class="btn btn-sm btn-info-outline" (click)="validateSmDemo()">Validate</button>
 <button [clrLoading]="submitSmState" type="submit" class="btn btn-sm btn-success-outline" (click)="submitSmDemo()">Submit</button>
+<button [clrLoading]="validateFalsyState" class="btn btn-sm btn-info-outline" (click)="validateFalsyDemo()">Validate</button>
diff --git a/src/dev/src/app/buttons/button-loading.ts b/src/dev/src/app/buttons/button-loading.ts
@@ -16,6 +16,7 @@ export class ButtonLoadingDemo {
   public submitState: ClrLoadingState = ClrLoadingState.DEFAULT;
   public validateSmState: boolean = false;
   public submitSmState: ClrLoadingState = ClrLoadingState.DEFAULT;
+  public validateFalsyState: any;
 
   validateDemo() {
     this.validateState = ClrLoadingState.LOADING;
@@ -44,4 +45,11 @@ export class ButtonLoadingDemo {
       this.submitSmState = ClrLoadingState.DEFAULT;
     }, 1500);
   }
+
+  validateFalsyDemo() {
+    this.validateFalsyState = true;
+    setTimeout(() => {
+      this.validateFalsyState = null;
+    }, 1500);
+  }
 }