refactor(datepicker): implement date selection model provider

Reworks the datepicker-related directives to move the source of the value into the new datepicker selection provider.

Author: crisbeto

src/material/core/datetime/date-selection-model.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FactoryProvider, Injectable, OnDestroy, Optional, SkipSelf} from '@angular/core';
-import {DateAdapter} from '@angular/material/core';
+import {FactoryProvider, Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';
+import {DateAdapter} from './date-adapter';
 import {Observable, Subject} from 'rxjs';
 
 /** A class representing a range of dates. */
@@ -19,40 +19,52 @@ export class DateRange<D> {
   // tslint:disable-next-line:no-unused-variable
   private _disableStructuralEquivalency: never;
 
-  /** The start date of the range. */
-  readonly start: D | null;
-
-  /** The end date of the range. */
-  readonly end: D | null;
-
-  constructor(range?: {start?: D | null, end?: D | null} | null) {
-    this.start = range && range.start || null;
-    this.end = range && range.end || null;
-  }
+  constructor(
+    /** The start date of the range. */
+    readonly start: D | null,
+    /** The end date of the range. */
+    readonly end: D | null) {}
 }
 
 type ExtractDateTypeFromSelection<T> = T extends DateRange<infer D> ? D : NonNullable<T>;
 
+/** Event emitted by the date selection model when its selection changes. */
+export interface DateSelectionModelChange<S> {
+  /** New value for the selection. */
+  selection: S;
+
+  /** Object that triggered the change. */
+  source: unknown;
+}
+
 /** A selection model containing a date selection. */
 export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<S>>
     implements OnDestroy {
-  /** Subject used to emit value change events. */
-  private _valueChangesSubject = new Subject<void>();
+  private _selectionChanged = new Subject<DateSelectionModelChange<S>>();
 
-  /** Observable of value change events. */
-  valueChanges: Observable<void> = this._valueChangesSubject.asObservable();
+  /** Emits when the selection has changed. */
+  selectionChanged: Observable<DateSelectionModelChange<S>> = this._selectionChanged.asObservable();
 
-  /** The current selection. */
-  get selection (): S { return this._selection; }
-  set selection(s: S) {
-    this._selection = s;
-    this._valueChangesSubject.next();
+  protected constructor(
+    /** Date adapter used when interacting with dates in the model. */
+    protected readonly adapter: DateAdapter<D>,
+    /** The current selection. */
+    readonly selection: S) {
+    this.selection = selection;
   }
 
-  protected constructor(protected readonly adapter: DateAdapter<D>, private _selection: S) {}
+  /**
+   * Updates the current selection in the model.
+   * @param value New selection that should be assigned.
+   * @param source Object that triggered the selection change.
+   */
+  updateSelection(value: S, source: unknown) {
+    (this as {selection: S}).selection = value;
+    this._selectionChanged.next({selection: value, source});
+  }
 
   ngOnDestroy() {
-    this._valueChangesSubject.complete();
+    this._selectionChanged.complete();
   }
 
   /** Adds a date to the current selection. */
@@ -61,10 +73,8 @@ export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<
   /** Checks whether the current selection is complete. */
   abstract isComplete(): boolean;
 
-  /**
-   * Checks whether the current selection is the same as the selection in the given selection model.
-   */
-  abstract isSame(other: MatDateSelectionModel<D>): boolean;
+  /** Checks whether the current selection is identical to the passed-in selection. */
+  abstract isSame(other: S): boolean;
 
   /** Checks whether the current selection is valid. */
   abstract isValid(): boolean;
@@ -76,16 +86,16 @@ export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<
 /**  A selection model that contains a single date. */
 @Injectable()
 export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null, D> {
-  constructor(adapter: DateAdapter<D>, date?: D | null) {
-    super(adapter, date || null);
+  constructor(adapter: DateAdapter<D>) {
+    super(adapter, null);
   }
 
   /**
    * Adds a date to the current selection. In the case of a single date selection, the added date
    * simply overwrites the previous selection
    */
   add(date: D | null) {
-    this.selection = date;
+    super.updateSelection(date, this);
   }
 
   /**
@@ -94,12 +104,9 @@ export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | nu
    */
   isComplete() { return this.selection != null; }
 
-  /**
-   * Checks whether the current selection is the same as the selection in the given selection model.
-   */
-  isSame(other: MatDateSelectionModel<any>): boolean {
-    return other instanceof MatSingleDateSelectionModel &&
-        this.adapter.sameDate(other.selection, this.selection);
+  /** Checks whether the current selection is identical to the passed-in selection. */
+  isSame(other: D): boolean {
+    return this.adapter.sameDate(other, this.selection);
   }
 
   /**
@@ -122,8 +129,8 @@ export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | nu
 /**  A selection model that contains a date range. */
 @Injectable()
 export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRange<D>, D> {
-  constructor(adapter: DateAdapter<D>, range?: {start?: D | null, end?: D | null} | null) {
-    super(adapter, new DateRange(range));
+  constructor(adapter: DateAdapter<D>) {
+    super(adapter, new DateRange<D>(null, null));
   }
 
   /**
@@ -143,7 +150,7 @@ export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRan
       end = null;
     }
 
-    this.selection = new DateRange<D>({start, end});
+    super.updateSelection(new DateRange<D>(start, end), this);
   }
 
   /**
@@ -154,15 +161,10 @@ export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRan
     return this.selection.start != null && this.selection.end != null;
   }
 
-  /**
-   * Checks whether the current selection is the same as the selection in the given selection model.
-   */
-  isSame(other: MatDateSelectionModel<any>): boolean {
-    if (other instanceof MatRangeDateSelectionModel) {
-      return this.adapter.sameDate(this.selection.start, other.selection.start) &&
-          this.adapter.sameDate(this.selection.end, other.selection.end);
-    }
-    return false;
+  /** Checks whether the current selection is identical to the passed-in selection. */
+  isSame(other: DateRange<D>): boolean {
+      return this.adapter.sameDate(this.selection.start, other.start) &&
+             this.adapter.sameDate(this.selection.end, other.end);
   }
 
   /**
@@ -199,11 +201,13 @@ export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRan
   }
 }
 
+/** @docs-private */
 export function MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(
     parent: MatSingleDateSelectionModel<unknown>, adapter: DateAdapter<unknown>) {
   return parent || new MatSingleDateSelectionModel(adapter);
 }
 
+/** Used to provide a single selection model to a component. */
 export const MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {
   provide: MatDateSelectionModel,
   deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],

src/material/datepicker/calendar.ts

@@ -25,7 +25,13 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MatDateFormats,
+  MatDateSelectionModel,
+  MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
+} from '@angular/material/core';
 import {Subject, Subscription} from 'rxjs';
 import {MatCalendarCellCssClasses} from './calendar-body';
 import {createMissingDateImplError} from './datepicker-errors';
@@ -179,6 +185,7 @@ export class MatCalendarHeader<D> {
   exportAs: 'matCalendar',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]
 })
 export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges {
   /** An input indicating the type of the header component, if set. */
@@ -188,6 +195,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   _calendarHeaderPortal: Portal<any>;
 
   private _intlChanges: Subscription;
+  private _selectedChanges: Subscription;
 
   /**
    * Used for scheduling that focus should be moved to the active cell on the next tick.
@@ -209,11 +217,11 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
 
   /** The currently selected date. */
   @Input()
-  get selected(): D | null { return this._selected; }
+  get selected(): D | null { return this._model.selection; }
   set selected(value: D | null) {
-    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+    const newValue = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+    this._model.updateSelection(newValue, this);
   }
-  private _selected: D | null;
 
   /** The minimum selectable date. */
   @Input()
@@ -237,7 +245,10 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   /** Function that can be used to add custom CSS classes to dates. */
   @Input() dateClass: (date: D) => MatCalendarCellCssClasses;
 
-  /** Emits when the currently selected date changes. */
+  /**
+   * Emits when the currently selected date changes.
+   * @breaking-change 11.0.0 Emitted value to change to `D | null`.
+   */
   @Output() readonly selectedChange: EventEmitter<D> = new EventEmitter<D>();
 
   /**
@@ -293,7 +304,8 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   constructor(_intl: MatDatepickerIntl,
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
-              private _changeDetectorRef: ChangeDetectorRef) {
+              private _changeDetectorRef: ChangeDetectorRef,
+              private _model: MatDateSelectionModel<D | null, D>) {
 
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');
@@ -307,6 +319,13 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
       _changeDetectorRef.markForCheck();
       this.stateChanges.next();
     });
+
+    this._selectedChanges = _model.selectionChanged.subscribe(event => {
+      // @breaking-change 11.0.0 Remove null check once `event.selection` is allowed to be null.
+      if (event.selection) {
+        this.selectedChange.emit(event.selection);
+      }
+    });
   }
 
   ngAfterContentInit() {
@@ -325,6 +344,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   }
 
   ngOnDestroy() {
+    this._selectedChanges.unsubscribe();
     this._intlChanges.unsubscribe();
     this.stateChanges.complete();
   }
@@ -361,9 +381,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
 
   /** Handles date selection in the month view. */
   _dateSelected(date: D | null): void {
-    if (date && !this._dateAdapter.sameDate(date, this.selected)) {
-      this.selectedChange.emit(date);
-    }
+    this._model.add(date);
   }
 
   /** Handles year selection in the multiyear view. */

src/material/datepicker/datepicker-content.html

@@ -7,10 +7,8 @@
     [maxDate]="datepicker._maxDate"
     [dateFilter]="datepicker._dateFilter"
     [headerComponent]="datepicker.calendarHeaderComponent"
-    [selected]="datepicker._selected"
     [dateClass]="datepicker.dateClass"
     [@fadeInCalendar]="'enter'"
-    (selectedChange)="datepicker.select($event)"
     (yearSelected)="datepicker._selectYear($event)"
     (monthSelected)="datepicker._selectMonth($event)"
     (_userSelection)="datepicker.close()">