Merge pull request #312 from dmtrKovalenko/feature/utils-not-instanti…

…able

[typescript] Fix 'utils' is not a constructor function type

lib/__tests__/DatePicker/DatePickerWrapper.usage.tsx

@@ -13,8 +13,8 @@ import MuiUtilsProvider from '../../src/utils/MuiPickersUtilsProvider'
 export default class BasicUsage extends Component<{}, {selectedDate: Date}> {
   state = {
     selectedDate: new Date(),
-  }
 
+  }
   handleChange = (date: Moment | Date) => {
     this.setState({ selectedDate: date as Date });
   }

lib/__tests__/DatePicker/PatchedUtils.usage.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types';
+import * as classNames from 'classnames';
+import * as format from 'date-fns/format'
+
+import { Fragment, Component } from 'react';
+import { IconButton } from 'material-ui'
+import { Moment } from 'moment'
+import { DayComponent } from '../../src/DatePicker/Calendar'
+import DatePickerWrapper  from '../../src/DatePicker';
+import DateFnsUtils from '../../src/utils/date-fns-utils'
+import MomentUtils from '../../src/utils/moment-utils'
+import MuiUtilsProvider from '../../src/utils/MuiPickersUtilsProvider'
+
+class PatchedDateFnsUtils extends DateFnsUtils {
+  getDatePickerHeaderText(date: Date) {
+    return format(date, 'D MMM YYYY', { locale: this.locale });
+  }
+}
+
+export class WithPatchedDateFns extends Component<{}, {selectedDate: Date}> {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleChange = (date: Moment | Date) => {
+    this.setState({ selectedDate: date as Date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <MuiUtilsProvider utils={PatchedDateFnsUtils}>
+        <DatePickerWrapper
+          keyboard
+          clearable
+          value={selectedDate}
+          onChange={this.handleChange}
+          animateYearScrolling={false}
+        />
+      </MuiUtilsProvider>
+    );
+  }
+}
+
+class PatchedMomentUtils extends MomentUtils {
+  getDatePickerHeaderText(date: Moment) {
+    return date.format('D MMM YYYY');
+  }
+}
+
+export default class WithPatchedMoment extends Component<{}, {selectedDate: Date}> {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleChange = (date: Moment | Date) => {
+    this.setState({ selectedDate: date as Date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <MuiUtilsProvider utils={PatchedMomentUtils}>
+        <DatePickerWrapper
+          keyboard
+          clearable
+          value={selectedDate}
+          onChange={this.handleChange}
+          animateYearScrolling={false}
+        />
+      </MuiUtilsProvider>
+    );
+  }
+}

lib/__tests__/test-utils.d.ts

@@ -1,3 +1,4 @@
-import { Utils } from '../src/typings/utils'
+import MomentUtils from '../src/utils/moment-utils'
+import DateFnsUtils from '../src/utils/date-fns-utils'
 
-export const utilsToUse: Utils;
+export const utilsToUse: typeof MomentUtils | typeof DateFnsUtils;

lib/src/typings/utils.d.ts

@@ -1,6 +1,9 @@
 import { MaterialUiPickersDate } from './date'
 
-export interface Utils {
+export class Utils {
+  locale: any;
+  constructor (options?: { locale: any, moment: any });
+
   date(value: any): MaterialUiPickersDate;
   addDays(value: MaterialUiPickersDate, count: number): MaterialUiPickersDate;
   isValid(value: MaterialUiPickersDate): boolean;
@@ -29,7 +32,6 @@ export interface Utils {
   getYear(value: MaterialUiPickersDate): number;
   setYear(value: MaterialUiPickersDate): MaterialUiPickersDate;
 
-
   getStartOfMonth(value: MaterialUiPickersDate): MaterialUiPickersDate;
   getNextMonth(value: MaterialUiPickersDate): MaterialUiPickersDate;
   getPreviousMonth(value: MaterialUiPickersDate): MaterialUiPickersDate;

lib/src/utils/MuiPickersUtilsProvider.d.ts

@@ -1,9 +1,10 @@
 import { ComponentClass, ReactNode } from 'react';
 import { DateTimePickerView } from '../constants/date-picker-view';
 import { Utils } from '../typings/utils';
+import DateFnsUtils from './date-fns-utils';
 
 export interface MuiPickersUtilsProviderProps {
-  utils: Utils;
+  utils: typeof Utils;
   children: ReactNode;
   locale?: any;
   moment?: any;

lib/src/utils/date-fns-utils.d.ts

@@ -1,4 +1,54 @@
 import { Utils } from '../typings/utils'
 
-declare const DateFnsUtils: Utils;
+declare class DateFnsUtils extends Utils {
+  locale: any;
+  constructor (options?: { locale: any });
+
+  date(value: any): Date;
+  addDays(value: Date, count: number): Date;
+  isValid(value: Date): boolean;
+  isEqual(value: Date, comparing: Date): boolean;
+  isSameDay(value: Date, comparing: Date): boolean
+
+  isAfter(value: Date, comparing: Date): boolean;
+  isAfterDay(value: Date, comparing: Date): boolean;
+  isAfterYear(value: Date, comparing: Date): boolean;
+
+  isBeforeDay(value: Date, comparing: Date): boolean;
+  isBeforeYear(value: Date, comparing: Date): boolean;
+  isBefore(value: Date, comparing: Date): boolean;
+
+  startOfDay(value: Date): Date;
+  endOfDay(value: Date): Date;
+
+  format(value: Date, formatString: string): string;
+  formatNumber(number: number): string;
+
+  getHours(value: Date): number;
+  setHours(value: Date, count: number): Date;
+  getMinutes(value: Date): number;
+  setMinutes(value: Date, count: number): Date
+  getMonth(value: Date): number;
+  getYear(value: Date): number;
+  setYear(value: Date): Date;
+
+  getStartOfMonth(value: Date): Date;
+  getNextMonth(value: Date): Date;
+  getPreviousMonth(value: Date): Date;
+
+  getWeekdays(): string[];
+  getWeekArray(): Date[];
+  getYearRange(): Date[];
+
+  // displaying methods
+  getMeridiemText(ampm: 'am' | 'pm'): string;
+  getCalendarHeaderText(date: Date): string;
+  getDatePickerHeaderText(date: Date): string;
+  getDateTimePickerHeaderText(date: Date): string;
+  getDayText(date: Date): string;
+  getHourText(date: Date, ampm: boolean): string;
+  getMinuteText(date: Date): string;
+  getYearText(date: Date): string;
+}
+
 export default DateFnsUtils

lib/src/utils/moment-utils.d.ts

@@ -1,4 +1,55 @@
 import { Utils } from '../typings/utils'
+import { Moment } from 'moment'
+
+declare class MomentUtils extends Utils {
+  locale: any;
+  constructor (options?: { locale: string, moment: Moment});
+
+  date(value: any): Moment;
+  addDays(value: Moment, count: number): Moment;
+  isValid(value: Moment): boolean;
+  isEqual(value: Moment, comparing: Moment): boolean;
+  isSameDay(value: Moment, comparing: Moment): boolean
+
+  isAfter(value: Moment, comparing: Moment): boolean;
+  isAfterDay(value: Moment, comparing: Moment): boolean;
+  isAfterYear(value: Moment, comparing: Moment): boolean;
+
+  isBeforeDay(value: Moment, comparing: Moment): boolean;
+  isBeforeYear(value: Moment, comparing: Moment): boolean;
+  isBefore(value: Moment, comparing: Moment): boolean;
+
+  startOfDay(value: Moment): Moment;
+  endOfDay(value: Moment): Moment;
+
+  format(value: Moment, formatString: string): string;
+  formatNumber(number: number): string;
+
+  getHours(value: Moment): number;
+  setHours(value: Moment, count: number): Moment;
+  getMinutes(value: Moment): number;
+  setMinutes(value: Moment, count: number): Moment
+  getMonth(value: Moment): number;
+  getYear(value: Moment): number;
+  setYear(value: Moment): Moment;
+
+  getStartOfMonth(value: Moment): Moment;
+  getNextMonth(value: Moment): Moment;
+  getPreviousMonth(value: Moment): Moment;
+
+  getWeekdays(): string[];
+  getWeekArray(): Moment[];
+  getYearRange(): Moment[];
+
+  // displaying methods
+  getMeridiemText(ampm: 'am' | 'pm'): string;
+  getCalendarHeaderText(Moment: Moment): string;
+  getMomentPickerHeaderText(Moment: Moment): string;
+  getMomentTimePickerHeaderText(Moment: Moment): string;
+  getDayText(Moment: Moment): string;
+  getHourText(Moment: Moment, ampm: boolean): string;
+  getMinuteText(Moment: Moment): string;
+  getYearText(Moment: Moment): string;
+}
 
-declare const MomentUtils: Utils;
 export default MomentUtils