Skip to content

refactor(datepicker): remove deprecated APIs for v11 #20449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 5, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions src/material/datepicker/calendar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -253,11 +253,8 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
/** End of the comparison range. */
@Input() comparisonEnd: D | null;

/**
* 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>();
/** Emits when the currently selected date changes. */
@Output() readonly selectedChange: EventEmitter<D | null> = new EventEmitter<D | null>();

/**
* Emits the year chosen in multiyear view.
Expand Down Expand Up @@ -395,9 +392,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes

if (this.selected instanceof DateRange ||
(date && !this._dateAdapter.sameDate(date, this.selected))) {
// @breaking-change 11.0.0 remove non-null assertion
// once the `selectedChange` is allowed to be null.
this.selectedChange.emit(date!);
this.selectedChange.emit(date);
}

this._userSelection.emit(event);
Expand Down
67 changes: 25 additions & 42 deletions src/material/datepicker/datepicker-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,26 +151,18 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>

constructor(
elementRef: ElementRef,
/**
* @deprecated `_changeDetectorRef`, `_model` and `_rangeSelectionStrategy`
* parameters to become required.
* @breaking-change 11.0.0
*/
private _changeDetectorRef?: ChangeDetectorRef,
private _model?: MatDateSelectionModel<S, D>,
private _dateAdapter?: DateAdapter<D>,
private _changeDetectorRef: ChangeDetectorRef,
private _model: MatDateSelectionModel<S, D>,
private _dateAdapter: DateAdapter<D>,
@Optional() @Inject(MAT_DATE_RANGE_SELECTION_STRATEGY)
private _rangeSelectionStrategy?: MatDateRangeSelectionStrategy<D>) {
private _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>) {
super(elementRef);
}

ngAfterViewInit() {
// @breaking-change 11.0.0 Remove null check for `_changeDetectorRef.
if (this._changeDetectorRef) {
this._subscriptions.add(this.datepicker._stateChanges.subscribe(() => {
this._changeDetectorRef!.markForCheck();
}));
}
this._subscriptions.add(this.datepicker._stateChanges.subscribe(() => {
this._changeDetectorRef.markForCheck();
}));

this._calendar.focusActiveCell();
}
Expand All @@ -181,26 +173,22 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
}

_handleUserSelection(event: MatCalendarUserEvent<D | null>) {
// @breaking-change 11.0.0 Remove null checks for _model,
// _rangeSelectionStrategy and _dateAdapter.
if (this._model && this._dateAdapter) {
const selection = this._model.selection;
const value = event.value;
const isRange = selection instanceof DateRange;

// If we're selecting a range and we have a selection strategy, always pass the value through
// there. Otherwise don't assign null values to the model, unless we're selecting a range.
// A null value when picking a range means that the user cancelled the selection (e.g. by
// pressing escape), whereas when selecting a single value it means that the value didn't
// change. This isn't very intuitive, but it's here for backwards-compatibility.
if (isRange && this._rangeSelectionStrategy) {
const newSelection = this._rangeSelectionStrategy.selectionFinished(value,
selection as unknown as DateRange<D>, event.event);
this._model.updateSelection(newSelection as unknown as S, this);
} else if (value && (isRange ||
!this._dateAdapter.sameDate(value, selection as unknown as D))) {
this._model.add(value);
}
const selection = this._model.selection;
const value = event.value;
const isRange = selection instanceof DateRange;

// If we're selecting a range and we have a selection strategy, always pass the value through
// there. Otherwise don't assign null values to the model, unless we're selecting a range.
// A null value when picking a range means that the user cancelled the selection (e.g. by
// pressing escape), whereas when selecting a single value it means that the value didn't
// change. This isn't very intuitive, but it's here for backwards-compatibility.
if (isRange && this._rangeSelectionStrategy) {
const newSelection = this._rangeSelectionStrategy.selectionFinished(value,
selection as unknown as DateRange<D>, event.event);
this._model.updateSelection(newSelection as unknown as S, this);
} else if (value && (isRange ||
!this._dateAdapter.sameDate(value, selection as unknown as D))) {
this._model.add(value);
}

if (!this._model || this._model.isComplete()) {
Expand All @@ -210,16 +198,11 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>

_startExitAnimation() {
this._animationState = 'void';

// @breaking-change 11.0.0 Remove null check for `_changeDetectorRef`.
if (this._changeDetectorRef) {
this._changeDetectorRef.markForCheck();
}
this._changeDetectorRef.markForCheck();
}

_getSelected() {
// @breaking-change 11.0.0 Remove null check for `_model`.
return this._model ? this._model.selection as unknown as D | DateRange<D> | null : null;
return this._model.selection as unknown as D | DateRange<D> | null;
}
}

Expand Down
8 changes: 0 additions & 8 deletions src/material/datepicker/datepicker-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,6 @@ export class MatDatepickerInput<D> extends MatDatepickerInputBase<D | null, D>
return this.value;
}

/**
* @deprecated
* @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
*/
getPopupConnectionElementRef(): ElementRef {
return this.getConnectedOverlayOrigin();
}

/** Opens the associated datepicker. */
protected _openPopup(): void {
if (this._datepicker) {
Expand Down
4 changes: 4 additions & 0 deletions src/material/schematics/ng-update/data/constructor-checks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
{
pr: 'https://github.com/angular/components/issues/20463',
changes: ['MatChip', 'MatChipRemove']
},
{
pr: 'https://github.com/angular/components/pull/20449',
changes: ['MatDatepickerContent']
}
],
[TargetVersion.V10]: [
Expand Down
12 changes: 12 additions & 0 deletions src/material/schematics/ng-update/data/property-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@
import {PropertyNameUpgradeData, TargetVersion, VersionChanges} from '@angular/cdk/schematics';

export const propertyNames: VersionChanges<PropertyNameUpgradeData> = {
[TargetVersion.V11]: [
{
pr: 'https://github.com/angular/components/pull/20449',
changes: [
{
replace: 'getPopupConnectionElementRef',
replaceWith: 'getConnectedOverlayOrigin',
whitelist: {classes: ['MatDatepickerInput']}
}
]
}
],
[TargetVersion.V9]: [
{
pr: 'https://github.com/angular/components/pull/17333',
Expand Down
6 changes: 2 additions & 4 deletions tools/public_api_guard/material/datepicker.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export declare class MatCalendar<D> implements AfterContentInit, AfterViewChecke
multiYearView: MatMultiYearView<D>;
get selected(): DateRange<D> | D | null;
set selected(value: DateRange<D> | D | null);
readonly selectedChange: EventEmitter<D>;
readonly selectedChange: EventEmitter<D | null>;
get startAt(): D | null;
set startAt(value: D | null);
startView: MatCalendarView;
Expand Down Expand Up @@ -195,8 +195,7 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
comparisonEnd: D | null;
comparisonStart: D | null;
datepicker: MatDatepickerBase<any, S, D>;
constructor(elementRef: ElementRef,
_changeDetectorRef?: ChangeDetectorRef | undefined, _model?: MatDateSelectionModel<S, D> | undefined, _dateAdapter?: DateAdapter<D> | undefined, _rangeSelectionStrategy?: MatDateRangeSelectionStrategy<D> | undefined);
constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _model: MatDateSelectionModel<S, D>, _dateAdapter: DateAdapter<D>, _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>);
_getSelected(): D | DateRange<D> | null;
_handleUserSelection(event: MatCalendarUserEvent<D | null>): void;
_startExitAnimation(): void;
Expand Down Expand Up @@ -226,7 +225,6 @@ export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D | nu
protected _getValueFromModel(modelValue: D | null): D | null;
protected _openPopup(): void;
getConnectedOverlayOrigin(): ElementRef;
getPopupConnectionElementRef(): ElementRef;
getStartValue(): D | null;
getThemePalette(): ThemePalette;
static ngAcceptInputType_value: any;
Expand Down