fix(rating): properly support disabled control state

Fixes #1432 Closes #1435
ng-bootstrap · Apr 4, 2017 · a29da45 · a29da45
1 parent 3ec38c4
commit a29da45
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/rating/rating.spec.ts b/src/rating/rating.spec.ts
@@ -370,7 +370,7 @@ describe('ngb-rating', () => {
     });
   });
 
-  describe('Keyboard support', () => {
+  describe('keyboard support', () => {
 
     it('should handle arrow keys', () => {
       const fixture = createTestComponent('<ngb-rating [rate]="3" [max]="5"></ngb-rating>');
@@ -532,6 +532,27 @@ describe('ngb-rating', () => {
          expect(fixture.componentInstance.form.get('rating').value).toBe(4);
          expect(element.nativeElement).toHaveCssClass('ng-valid');
        }));
+
+    it('should disable widget when a control is disabled', fakeAsync(() => {
+         const html = `
+        <form [formGroup]="form">
+          <ngb-rating formControlName="rating" max="5"></ngb-rating>
+        </form>`;
+
+         const fixture = createTestComponent(html);
+         const element = fixture.debugElement.query(By.directive(NgbRating));
+
+         expect(getState(element.nativeElement)).toEqual([false, false, false, false, false]);
+         expect(fixture.componentInstance.form.get('rating').disabled).toBeFalsy();
+
+         fixture.componentInstance.form.get('rating').disable();
+         fixture.detectChanges();
+         expect(fixture.componentInstance.form.get('rating').disabled).toBeTruthy();
+
+         getStar(element.nativeElement, 3).click();
+         fixture.detectChanges();
+         expect(getState(element.nativeElement)).toEqual([false, false, false, false, false]);
+       }));
   });
 
   describe('Custom config', () => {

diff --git a/src/rating/rating.ts b/src/rating/rating.ts
@@ -62,7 +62,7 @@ const NGB_RATING_VALUE_ACCESSOR = {
     <template #t let-fill="fill">{{ fill === 100 ? '&#9733;' : '&#9734;' }}</template>
     <template ngFor [ngForOf]="contexts" let-index="index">
       <span class="sr-only">({{ index < nextRate ? '*' : ' ' }})</span>
-      <span (mouseenter)="enter(index + 1)" (click)="update(index + 1)" [style.cursor]="readonly ? 'default' : 'pointer'">
+      <span (mouseenter)="enter(index + 1)" (click)="update(index + 1)" [style.cursor]="readonly || disabled ? 'default' : 'pointer'">
         <template [ngTemplateOutlet]="starTemplate || t" [ngOutletContext]="contexts[index]"></template>
       </span>
     </template>
@@ -72,8 +72,10 @@ const NGB_RATING_VALUE_ACCESSOR = {
 export class NgbRating implements ControlValueAccessor,
     OnInit, OnChanges {
   contexts: StarTemplateContext[] = [];
+  disabled = false;
   nextRate: number;
 
+
   /**
    * Maximal rating that can be given using this widget.
    */
@@ -124,7 +126,7 @@ export class NgbRating implements ControlValueAccessor,
   ariaValueText() { return `${this.nextRate} out of ${this.max}`; }
 
   enter(value: number): void {
-    if (!this.readonly) {
+    if (!this.readonly && !this.disabled) {
       this._updateState(value);
     }
     this.hover.emit(value);
@@ -173,9 +175,11 @@ export class NgbRating implements ControlValueAccessor,
     this._updateState(this.rate);
   }
 
+  setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; }
+
   update(value: number, internalChange = true): void {
     const newRate = getValueInRange(value, this.max, 0);
-    if (!this.readonly && this.rate !== newRate) {
+    if (!this.readonly && !this.disabled && this.rate !== newRate) {
       this.rate = newRate;
       this.rateChange.emit(this.rate);
     }