Skip to content

refactor(datepicker): clean up date selection model #18943

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
Mar 31, 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
1 change: 0 additions & 1 deletion src/material/core/datetime/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export * from './date-adapter';
export * from './date-formats';
export * from './native-date-adapter';
export * from './native-date-formats';
export * from './date-selection-model';


@NgModule({
Expand Down
8 changes: 5 additions & 3 deletions src/material/datepicker/calendar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,6 @@ import {
DateAdapter,
MAT_DATE_FORMATS,
MatDateFormats,
MatDateSelectionModel,
MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
DateRange,
} from '@angular/material/core';
import {Subject, Subscription} from 'rxjs';
import {MatCalendarCellCssClasses} from './calendar-body';
Expand All @@ -45,6 +42,11 @@ import {
yearsPerPage
} from './multi-year-view';
import {MatYearView} from './year-view';
import {
MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
DateRange,
MatDateSelectionModel,
} from './date-selection-model';

/**
* Possible views for the calendar.
Expand Down
2 changes: 1 addition & 1 deletion src/material/datepicker/date-range-input-parts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ import {
DateAdapter,
MatDateFormats,
ErrorStateMatcher,
DateRange,
} from '@angular/material/core';
import {BooleanInput} from '@angular/cdk/coercion';
import {MatDatepickerInputBase, DateFilterFn} from './datepicker-input-base';
import {DateRange} from './date-selection-model';

/** Parent component that should be wrapped around `MatStartDate` and `MatEndDate`. */
export interface MatDateRangeInputParent<D> {
Expand Down
8 changes: 2 additions & 6 deletions src/material/datepicker/date-range-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,7 @@ import {
ElementRef,
} from '@angular/core';
import {MatFormFieldControl, MatFormField} from '@angular/material/form-field';
import {
DateRange,
ThemePalette,
DateAdapter,
MatDateSelectionModel,
} from '@angular/material/core';
import {ThemePalette, DateAdapter} from '@angular/material/core';
import {NgControl, ControlContainer} from '@angular/forms';
import {Subject, merge} from 'rxjs';
import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion';
Expand All @@ -39,6 +34,7 @@ import {MatDatepickerControl} from './datepicker-base';
import {createMissingDateImplError} from './datepicker-errors';
import {DateFilterFn} from './datepicker-input-base';
import {MatDateRangePicker} from './date-range-picker';
import {DateRange, MatDateSelectionModel} from './date-selection-model';

let nextUniqueId = 0;

Expand Down
2 changes: 1 addition & 1 deletion src/material/datepicker/date-range-picker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
*/

import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
import {MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from '@angular/material/core';
import {MatDatepickerBase, MatDatepickerContent} from './datepicker-base';
import {MatDateRangeInput} from './date-range-input';
import {MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-selection-model';

// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit
// template reference variables (e.g. #d vs #d="matDateRangePicker"). We can change this to a
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import {FactoryProvider, Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';
import {DateAdapter} from './date-adapter';
import {DateAdapter} from '@angular/material/core';
import {Observable, Subject} from 'rxjs';

/** A class representing a range of dates. */
Expand Down Expand Up @@ -76,15 +76,6 @@ export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<

/** Checks whether the current selection is complete. */
abstract isComplete(): 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;

/** Checks whether the current selection overlaps with the given range. */
abstract overlaps(range: DateRange<D>): boolean;
}

/** A selection model that contains a single date. */
Expand All @@ -106,27 +97,8 @@ export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | nu
* Checks whether the current selection is complete. In the case of a single date selection, this
* is true if the current selection is not null.
*/
isComplete() { return this.selection != null; }

/** Checks whether the current selection is identical to the passed-in selection. */
isSame(other: D): boolean {
return this.adapter.sameDate(other, this.selection);
}

/**
* Checks whether the current selection is valid. In the case of a single date selection, this
* means that the current selection is not null and is a valid date.
*/
isValid(): boolean {
return this.selection != null && this.adapter.isDateInstance(this.selection) &&
this.adapter.isValid(this.selection);
}

/** Checks whether the current selection overlaps with the given range. */
overlaps(range: DateRange<D>): boolean {
return !!(this.selection && range.start && range.end &&
this.adapter.compareDate(range.start, this.selection) <= 0 &&
this.adapter.compareDate(this.selection, range.end) <= 0);
isComplete() {
return this.selection != null;
}
}

Expand Down Expand Up @@ -164,45 +136,6 @@ export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRan
isComplete(): boolean {
return this.selection.start != null && this.selection.end != null;
}

/** 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);
}

/**
* Checks whether the current selection is valid. In the case of a date range selection, this
* means that the current selection has a `start` and `end` that are both non-null and valid
* dates.
*/
isValid(): boolean {
return this.selection.start != null && this.selection.end != null &&
this.adapter.isValid(this.selection.start!) && this.adapter.isValid(this.selection.end!);
}

/**
* Returns true if the given range and the selection overlap in any way. False if otherwise, that
* includes incomplete selections or ranges.
*/
overlaps(range: DateRange<D>): boolean {
if (!(this.selection.start && this.selection.end && range.start && range.end)) {
return false;
}

return (
this._isBetween(range.start, this.selection.start, this.selection.end) ||
this._isBetween(range.end, this.selection.start, this.selection.end) ||
(
this.adapter.compareDate(range.start, this.selection.start) <= 0 &&
this.adapter.compareDate(this.selection.end, range.end) <= 0
)
);
}

private _isBetween(value: D, from: D, to: D): boolean {
return this.adapter.compareDate(from, value) <= 0 && this.adapter.compareDate(value, to) <= 0;
}
}

/** @docs-private */
Expand Down
3 changes: 1 addition & 2 deletions src/material/datepicker/datepicker-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ import {
DateAdapter,
mixinColor,
ThemePalette,
MatDateSelectionModel,
ExtractDateTypeFromSelection,
} from '@angular/material/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
import {merge, Subject, Observable} from 'rxjs';
Expand All @@ -55,6 +53,7 @@ import {matDatepickerAnimations} from './datepicker-animations';
import {createMissingDateImplError} from './datepicker-errors';
import {MatCalendarCellCssClasses} from './calendar-body';
import {DateFilterFn} from './datepicker-input-base';
import {ExtractDateTypeFromSelection, MatDateSelectionModel} from './date-selection-model';

/** Used to generate a unique ID for each datepicker instance. */
let datepickerUid = 0;
Expand Down
3 changes: 1 addition & 2 deletions src/material/datepicker/datepicker-input-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,10 @@ import {
DateAdapter,
MAT_DATE_FORMATS,
MatDateFormats,
MatDateSelectionModel,
ExtractDateTypeFromSelection,
} from '@angular/material/core';
import {Subscription} from 'rxjs';
import {createMissingDateImplError} from './datepicker-errors';
import {ExtractDateTypeFromSelection, MatDateSelectionModel} from './date-selection-model';

/**
* An event used for datepicker input and change events. We don't always have access to a native
Expand Down
8 changes: 6 additions & 2 deletions src/material/datepicker/datepicker.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
MAT_DATE_LOCALE,
MatNativeDateModule,
NativeDateModule,
MatDateSelectionModel,
} from '@angular/material/core';
import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
import {DEC, JAN, JUL, JUN, SEP} from '@angular/material/testing';
Expand All @@ -29,7 +28,12 @@ import {MatInputModule} from '../input/index';
import {MatDatepicker} from './datepicker';
import {MatDatepickerInput} from './datepicker-input';
import {MatDatepickerToggle} from './datepicker-toggle';
import {MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepickerIntl, MatDatepickerModule} from './index';
import {
MAT_DATEPICKER_SCROLL_STRATEGY,
MatDatepickerIntl,
MatDatepickerModule,
MatDateSelectionModel,
} from './index';

describe('MatDatepicker', () => {
const SUPPORTS_INTL = typeof Intl != 'undefined';
Expand Down
2 changes: 1 addition & 1 deletion src/material/datepicker/datepicker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
*/

import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER} from '@angular/material/core';
import {MatDatepickerBase} from './datepicker-base';
import {MatDatepickerInput} from './datepicker-input';
import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER} from './date-selection-model';

// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit
// template reference variables (e.g. #d vs #d="matDatepicker"). We can change this to a directive
Expand Down
3 changes: 2 additions & 1 deletion src/material/datepicker/month-view.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@ import {
} from '@angular/cdk/testing/private';
import {Component} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MatNativeDateModule, DateRange} from '@angular/material/core';
import {MatNativeDateModule} from '@angular/material/core';
import {DEC, FEB, JAN, MAR, NOV} from '@angular/material/testing';
import {By} from '@angular/platform-browser';
import {MatCalendarBody} from './calendar-body';
import {MatMonthView} from './month-view';
import {DateRange} from './date-selection-model';

describe('MatMonthView', () => {
let dir: {value: Direction};
Expand Down
3 changes: 2 additions & 1 deletion src/material/datepicker/month-view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,13 @@ import {
ViewChild,
OnDestroy,
} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, DateRange} from '@angular/material/core';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
import {Directionality} from '@angular/cdk/bidi';
import {MatCalendarBody, MatCalendarCell, MatCalendarCellCssClasses} from './calendar-body';
import {createMissingDateImplError} from './datepicker-errors';
import {Subscription} from 'rxjs';
import {startWith} from 'rxjs/operators';
import {DateRange} from './date-selection-model';


const DAYS_PER_WEEK = 7;
Expand Down
3 changes: 2 additions & 1 deletion src/material/datepicker/multi-year-view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,13 @@ import {
ViewEncapsulation,
OnDestroy,
} from '@angular/core';
import {DateAdapter, DateRange} from '@angular/material/core';
import {DateAdapter} from '@angular/material/core';
import {Directionality} from '@angular/cdk/bidi';
import {MatCalendarBody, MatCalendarCell} from './calendar-body';
import {createMissingDateImplError} from './datepicker-errors';
import {Subscription} from 'rxjs';
import {startWith} from 'rxjs/operators';
import {DateRange} from './date-selection-model';

export const yearsPerPage = 24;

Expand Down
1 change: 1 addition & 0 deletions src/material/datepicker/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,6 @@ export * from './month-view';
export * from './year-view';
export * from './date-range-input';
export * from './date-range-picker';
export * from './date-selection-model';
export {MatStartDate, MatEndDate} from './date-range-input-parts';
export {MatMultiYearView, yearsPerPage, yearsPerRow} from './multi-year-view';
3 changes: 2 additions & 1 deletion src/material/datepicker/year-view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,13 @@ import {
ViewEncapsulation,
OnDestroy,
} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, DateRange} from '@angular/material/core';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
import {Directionality} from '@angular/cdk/bidi';
import {MatCalendarBody, MatCalendarCell} from './calendar-body';
import {createMissingDateImplError} from './datepicker-errors';
import {Subscription} from 'rxjs';
import {startWith} from 'rxjs/operators';
import {DateRange} from './date-selection-model';

/**
* An internal component used to display a single year in the datepicker.
Expand Down
Loading