update to support disabled

Author: andrewseguin

src/demo-app/table/table-demo.html

@@ -235,7 +235,8 @@ <h3>MatTable With MatTableDataSource Example</h3>
     selected
   </div>
 
-  <mat-table [dataSource]="matTableDataSource" [trackBy]="userTrackBy" matSort
+  <mat-table [dataSource]="matTableDataSource" [trackBy]="userTrackBy"
+             matSort matSortActive="progress" matSortDirection="asc"
              #sortForDataSource="matSort">
 
     <!-- Checkbox Column -->

src/demo-app/table/table-demo.ts

@@ -43,7 +43,7 @@ export class TableDemo {
   displayedColumns: UserProperties[] = [];
   trackByStrategy: TrackByStrategy = 'reference';
   changeReferences = false;
-  progressSortingDisabled = false;
+  progressSortingDisabled = true;
   highlights = new Set<string>();
   wasExpanded = new Set<UserData>();
 

src/lib/sort/sort-header.html

@@ -3,18 +3,18 @@
      [class.mat-sort-header-position-before]="arrowPosition == 'before'">
   <button class="mat-sort-header-button" type="button"
           [attr.disabled]="_isDisabled() || null"
+          [attr.aria-label]="_intl.sortButtonLabel(id)"
           (focus)="_setIndicatorHintVisible(true)"
-          (blur)="_setIndicatorHintVisible(false)"
-          [attr.aria-label]="_intl.sortButtonLabel(id)">
+          (blur)="_setIndicatorHintVisible(false)">
     <ng-content></ng-content>
   </button>
 
   <!-- Disable animations while a current animation is running -->
   <div class="mat-sort-header-arrow"
        [@arrowOpacity]="_getArrowViewState()"
        [@arrowPosition]="_getArrowViewState()"
-       (@arrowPosition.start)="_disableStateAnimation = true"
-       (@arrowPosition.done)="_disableStateAnimation = false">
+       (@arrowPosition.start)="_disableViewStateAnimation = true"
+       (@arrowPosition.done)="_disableViewStateAnimation = false">
     <div class="mat-sort-header-stem"></div>
     <div class="mat-sort-header-indicator" [@indicator]="_getArrowDirectionState()" >
       <div class="mat-sort-header-pointer-left" [@leftPointer]="_getArrowDirectionState()"></div>

src/lib/sort/sort-header.ts

@@ -202,20 +202,20 @@ export class MatSortHeader extends _MatSortHeaderMixinBase implements MatSortabl
       throw getSortHeaderNotContainedWithinSortError();
     }
 
-    const changes = [_sort.sortChange, _sort._stateChanges, _intl.changes];
-    this._rerenderSubscription = merge(changes).subscribe(() => {
-      if (this._isSorted()) {
-        this._updateArrowDirection();
-      }
-
-      // If this header was recently active and now no longer sorted, animate away the arrow.
-      if (!this._isSorted() && this.viewState && this._viewState.toState === 'active') {
-        this._disableViewStateAnimation = false;
-        this._setAnimationTransitionState({fromState: 'active', toState: this._arrowDirection});
-      }
-
-      changeDetectorRef.markForCheck();
-    });
+    this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges, _intl.changes)
+        .subscribe(() => {
+          if (this._isSorted()) {
+            this._updateArrowDirection();
+          }
+
+          // If this header was recently active and now no longer sorted, animate away the arrow.
+          if (!this._isSorted() && this._viewState && this._viewState.toState === 'active') {
+            this._disableViewStateAnimation = false;
+            this._setAnimationTransitionState({fromState: 'active', toState: this._arrowDirection});
+          }
+
+          changeDetectorRef.markForCheck();
+        });
   }
 
   ngOnInit() {
@@ -225,7 +225,8 @@ export class MatSortHeader extends _MatSortHeaderMixinBase implements MatSortabl
 
     // Initialize the direction of the arrow and set the view state to be immediately that state.
     this._updateArrowDirection();
-    this._setAnimationTransitionState({toState: this._arrowDirection});
+    this._setAnimationTransitionState(
+        {toState: this._isSorted() ? 'active' : this._arrowDirection});
 
     this._sort.register(this);
   }
@@ -240,6 +241,9 @@ export class MatSortHeader extends _MatSortHeaderMixinBase implements MatSortabl
    * user showing what the active sort will become. If set to false, the arrow will fade away.
    */
   _setIndicatorHintVisible(visible: boolean) {
+    // No-op if the sort header is disabled - should not make the hint visible.
+    if (this._isDisabled() && visible) { return; }
+
     this._showIndicatorHint = visible;
 
     if (!this._isSorted()) {

src/lib/sort/sort.spec.ts

@@ -180,6 +180,15 @@ describe('MatSort', () => {
       expectedStates.set('defaultB', {viewState: 'asc-to-active', arrowDirection: 'active-asc'});
       component.expectViewAndDirectionStates(expectedStates);
     });
+
+    it('should be correct when sort has been disabled', () => {
+      // Mousing over the first sort should set the view state to hint
+      component.disabledColumnSort = true;
+      fixture.detectChanges();
+
+      component.dispatchMouseEvent('defaultA', 'mouseenter');
+      component.expectViewAndDirectionStates(expectedStates);
+    });
   });
 
   it('should be able to cycle from asc -> desc from either start point', () => {
@@ -204,38 +213,38 @@ describe('MatSort', () => {
   });
 
   it('should allow for the cycling the sort direction to be disabled per column', () => {
-    const button = fixture.nativeElement.querySelector('#defaultSortHeaderA button');
+    const button = fixture.nativeElement.querySelector('#defaultA button');
 
-    component.sort('defaultSortHeaderA');
+    component.sort('defaultA');
     expect(component.matSort.direction).toBe('asc');
     expect(button.getAttribute('disabled')).toBeFalsy();
 
     component.disabledColumnSort = true;
     fixture.detectChanges();
 
-    component.sort('defaultSortHeaderA');
+    component.sort('defaultA');
     expect(component.matSort.direction).toBe('asc');
     expect(button.getAttribute('disabled')).toBe('true');
   });
 
   it('should allow for the cycling the sort direction to be disabled for all columns', () => {
-    const button = fixture.nativeElement.querySelector('#defaultSortHeaderA button');
+    const button = fixture.nativeElement.querySelector('#defaultA button');
 
-    component.sort('defaultSortHeaderA');
-    expect(component.matSort.active).toBe('defaultSortHeaderA');
+    component.sort('defaultA');
+    expect(component.matSort.active).toBe('defaultA');
     expect(component.matSort.direction).toBe('asc');
     expect(button.getAttribute('disabled')).toBeFalsy();
 
     component.disableAllSort = true;
     fixture.detectChanges();
 
-    component.sort('defaultSortHeaderA');
-    expect(component.matSort.active).toBe('defaultSortHeaderA');
+    component.sort('defaultA');
+    expect(component.matSort.active).toBe('defaultA');
     expect(component.matSort.direction).toBe('asc');
     expect(button.getAttribute('disabled')).toBe('true');
 
-    component.sort('defaultSortHeaderB');
-    expect(component.matSort.active).toBe('defaultSortHeaderA');
+    component.sort('defaultB');
+    expect(component.matSort.active).toBe('defaultA');
     expect(component.matSort.direction).toBe('asc');
     expect(button.getAttribute('disabled')).toBe('true');
   });
@@ -359,7 +368,7 @@ describe('MatSort', () => {
  */
 function testSingleColumnSortDirectionSequence(fixture: ComponentFixture<SimpleMatSortApp>,
                                                expectedSequence: SortDirection[],
-                                               id: string = 'defaultA') {
+                                               id: SimpleMatSortAppColumnIds = 'defaultA') {
   // Detect any changes that were made in preparation for this sort sequence
   fixture.detectChanges();
 
@@ -387,6 +396,9 @@ function testSingleColumnSortDirectionSequence(fixture: ComponentFixture<SimpleM
   expect(component.matSort.direction).toBe(expectedSequence[0]);
 }
 
+/** Column IDs of the SimpleMatSortApp for typing of function params in the component (e.g. sort) */
+type SimpleMatSortAppColumnIds = 'defaultA' | 'defaultB' | 'overrideStart' | 'overrideDisableClear';
+
 @Component({
   template: `
     <div matSort
@@ -397,7 +409,9 @@ function testSingleColumnSortDirectionSequence(fixture: ComponentFixture<SimpleM
          [matSortDisableClear]="disableClear"
          (matSortChange)="latestSortEvent = $event">
       <div id="defaultA"
-           #defaultA mat-sort-header="defaultA"[disabled]="disabledColumnSort">
+           #defaultA
+           mat-sort-header="defaultA"
+           [disabled]="disabledColumnSort">
         A
       </div>
       <div id="defaultB"
@@ -408,12 +422,14 @@ function testSingleColumnSortDirectionSequence(fixture: ComponentFixture<SimpleM
       <div id="overrideStart"
            #overrideStart
            mat-sort-header="overrideStart" start="desc">
-        D </div>
+        D
+      </div>
       <div id="overrideDisableClear"
            #overrideDisableClear
            mat-sort-header="overrideDisableClear"
            disableClear>
-        E </div>
+        E
+      </div>
     </div>
   `
 })
@@ -435,11 +451,11 @@ class SimpleMatSortApp {
 
   constructor (public elementRef: ElementRef) { }
 
-  sort(id: string) {
+  sort(id: SimpleMatSortAppColumnIds) {
     this.dispatchMouseEvent(id, 'click');
   }
 
-  dispatchMouseEvent(id: string, event: string) {
+  dispatchMouseEvent(id: SimpleMatSortAppColumnIds, event: string) {
     const sortElement = this.elementRef.nativeElement.querySelector(`#${id}`);
     dispatchMouseEvent(sortElement, event);
   }