From d1b269eb259b950da921d3005c1780106fa31090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= Date: Tue, 5 Dec 2017 17:29:22 +0800 Subject: [PATCH 1/5] add button --- types/materialize-css/index.d.ts | 45 +++++++++++++++++++ .../test/materialize-css-global.test.ts | 3 ++ .../test/materialize-css-jquery.test.ts | 5 +++ .../test/materialize-css-module.test.ts | 18 ++++++++ 4 files changed, 71 insertions(+) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index ebc997c51f..0c6ab12cbc 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -77,6 +77,48 @@ declare global { sortFunction: (a: string, b: string, inputText: string) => number; } + class FloatingActionButton extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): FloatingActionButton; + + /** + * Open FAB + */ + open(): void; + + /** + * Close FAB + */ + close(): void; + + /** + * Describes open/close state of FAB. + */ + isOpen: boolean; + } + + interface FloatingActionButtonOptions { + /** + * Direction FAB menu opens + * @default "top" + */ + direction: "top" | "right" | "buttom" | "left"; + + /** + * true: FAB menu appears on hover, false: FAB menu appears on click + * @default true + */ + hoverEnabled: boolean; + + /** + * Enable transit the FAB into a toolbar on click + * @default false + */ + toolbarEnabled: boolean; + } + class Sidenav extends Component { /** * Get Instance @@ -398,6 +440,9 @@ declare global { autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery; autocomplete(options?: Partial): JQuery; + floatingActionButton(method: keyof Pick): JQuery; + floatingActionButton(options?: Partial): JQuery; + sidenav(method: keyof Pick): JQuery; sidenav(options?: Partial): JQuery; diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts index fa228b444f..307c83133b 100644 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ b/types/materialize-css/test/materialize-css-global.test.ts @@ -16,3 +16,6 @@ const characterCounter = new M.CharacterCounter(elem); // $ExpectType Tooltip const tooltips = new M.Tooltip(elem); + +// $ExpectType FloatingActionButton +const fab = new M.FloatingActionButton(elem); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index 42af7fcefd..8ec8770462 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/types/materialize-css/test/materialize-css-jquery.test.ts @@ -28,3 +28,8 @@ $(".whatever").tooltip(); $(".whatever").tooltip({ html: "" }); $(".whatever").tooltip("open"); $(".whatever").tooltip("destroy"); + +$(".whatever").floatingActionButton(); +$(".whatever").floatingActionButton({ direction: "left" }); +$(".whatever").floatingActionButton("open"); +$(".whatever").floatingActionButton("destroy"); diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts index 2665586b5d..dfbb2eea8a 100644 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ b/types/materialize-css/test/materialize-css-module.test.ts @@ -140,3 +140,21 @@ tooltip.options; tooltip.el; // $ExpectType boolean tooltip.isOpen; + +// FloatingActionButton +// $ExpectType FloatingActionButton +new materialize.FloatingActionButton(elem); +// $ExpectType FloatingActionButton +const fab = new materialize.FloatingActionButton(elem, { + direction: 'left' +}); +// $ExpectType void +fab.open(); +// $ExpectType void +fab.destroy(); +// $ExpectType FloatingActionButtonOptions +fab.options; +// $ExpectType Element +fab.el; +// $ExpectType boolean +fab.isOpen; From 8baec39877586ce45b40c00b6e90ef016a86e421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= Date: Tue, 5 Dec 2017 19:04:36 +0800 Subject: [PATCH 2/5] add toast --- types/materialize-css/index.d.ts | 81 ++++++++++++++++++- .../test/materialize-css-global.test.ts | 3 + .../test/materialize-css-jquery.test.ts | 2 + .../test/materialize-css-module.test.ts | 12 +++ 4 files changed, 97 insertions(+), 1 deletion(-) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 0c6ab12cbc..413822f020 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -324,6 +324,79 @@ declare global { endingTop: string; } + class Toast extends ComponentBase { + /** + * Get Instance + */ + static getInstance(elem: Element): Toast; + + /** + * Describes the current pan state of the Toast. + */ + panning: boolean; + + /** + * The remaining amount of time in ms that the toast will stay before dismissal. + */ + timeRemaining: number; + + /** + * remove a specific toast + */ + dismiss(): void; + + /** + * dismiss all toasts + */ + static dismissAll(): void; + } + + interface ToastOptions { + /** + * The HTML content of the Toast. + */ + html: string; + + /** + * Length in ms the Toast stays before dismissal. + * @default 4000 + */ + displayLength: number; + + /** + * Transition in duration in milliseconds. + * @default 300 + */ + inDuration: number; + + /** + * Transition out duration in milliseconds. + * @default 375 + */ + outDuration: number; + + /** + * Classes to be added to the toast element. + */ + classes: string; + + /** + * Callback function called when toast is dismissed. + */ + completeCallback: () => void; + + /** + * The percentage of the toast's width it takes for a drag to dismiss a Toast. + * @default 0.8 + */ + activationPercent: number; + } + + /** + * Create a toast + */ + function toast(options: Partial): Toast; + class Tooltip extends Component { /** * Get Instance @@ -410,7 +483,7 @@ declare global { static getInstance(elem: Element): CharacterCounter; } - abstract class Component { + abstract class Component extends ComponentBase { /** * Construct component instance and set everything up */ @@ -420,6 +493,10 @@ declare global { * Destroy plugin instance and teardown */ destroy(): void; + } + + abstract class ComponentBase { + constructor(options?: Partial); /** * The DOM element the plugin was initialized with @@ -450,6 +527,8 @@ declare global { tabs(method: keyof Pick, tabId: string): JQuery; tabs(options?: Partial): JQuery; + // Toast can not be invoked using jQuery. + tooltip(method: keyof Pick): JQuery; tooltip(options?: Partial): JQuery; diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts index 307c83133b..f7a65f6c5b 100644 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ b/types/materialize-css/test/materialize-css-global.test.ts @@ -19,3 +19,6 @@ const tooltips = new M.Tooltip(elem); // $ExpectType FloatingActionButton const fab = new M.FloatingActionButton(elem); + +// $ExpectType Toast +const toast = M.toast({ html: 'I am a toast!' }); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index 8ec8770462..fe5a72fffa 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/types/materialize-css/test/materialize-css-jquery.test.ts @@ -33,3 +33,5 @@ $(".whatever").floatingActionButton(); $(".whatever").floatingActionButton({ direction: "left" }); $(".whatever").floatingActionButton("open"); $(".whatever").floatingActionButton("destroy"); + +// Toast can not be invoked using jQuery. diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts index dfbb2eea8a..c6f487ca2d 100644 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ b/types/materialize-css/test/materialize-css-module.test.ts @@ -158,3 +158,15 @@ fab.options; fab.el; // $ExpectType boolean fab.isOpen; + +// Toasts +// $ExpectType Toast +const toast = materialize.toast({ html: 'I am a toast!' }); +// $ExpectType ToastOptions +toast.options; +// $ExpectType Element +fab.el; +// $ExpectType void +toast.dismiss(); +// $ExpectType void +materialize.Toast.dismissAll(); From d7acc610aa090aa5b9003d801ede9cd69f0be275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= Date: Thu, 7 Dec 2017 00:52:32 +0800 Subject: [PATCH 3/5] add DatePicker --- types/materialize-css/index.d.ts | 169 +++++++++++++++++- .../test/materialize-css-global.test.ts | 2 + .../test/materialize-css-jquery.test.ts | 7 + .../test/materialize-css-module.test.ts | 26 +++ 4 files changed, 200 insertions(+), 4 deletions(-) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 413822f020..f1540ff597 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -77,7 +77,157 @@ declare global { sortFunction: (a: string, b: string, inputText: string) => number; } - class FloatingActionButton extends Component { + class DatePicker extends Component implements Openable { + /** + * Get Instance + */ + static getInstance(elem: Element): DatePicker; + + /** + * If the picker is open. + */ + isOpen: boolean; + + /** + * The selected Date. + */ + date: Date; + + /** + * Open datepicker + */ + open(): void; + + /** + * Close datepicker + */ + close(): void; + + /** + * Gets a string representation of the selected date + */ + toString(): string; + + /** + * Set a date on the datepicker + * @param date Date to set on the datepicker. + */ + setDate(date?: Date): void; + + /** + * Change date view to a specific date on the datepicker + * @param date Date to show on the datepicker. + */ + gotoDate(date: Date): void; + } + + interface DatePickerOptions { + /** + * The date output format for the input field value. + * @default 'mmm dd, yyyy' + */ + format: string; + + /** + * Used to create date object from current input string. + */ + parse: (value: string, format: string) => Date; + + /** + * The initial date to view when first opened. + */ + defaultDate: Date; + + /** + * Make the `defaultDate` the initial selected value + * @default false + */ + setDefaultDate: boolean; + + /** + * Prevent selection of any date on the weekend. + * @default false + */ + disableWeekends: boolean; + + /** + * Custom function to disable certain days. + */ + disableDayFn: (day: Date) => boolean; + + /** + * First day of week (0: Sunday, 1: Monday etc). + * @default 0 + */ + firstDay: number; + + /** + * The earliest date that can be selected. + */ + minDate: Date; + + /** + * The latest date that can be selected. + */ + maxDate: Date; + + /** + * Number of years either side, or array of upper/lower range. + * @default 10 + */ + yearRange: number | number[]; + + /** + * Changes Datepicker to RTL. + * @default false + */ + isRTL: boolean; + + /** + * Show month after year in Datepicker title. + * @default false + */ + showMonthAfterYear: boolean; + + /** + * Render days of the calendar grid that fall in the next or previous month. + * @default false + */ + showDaysInNextAndPreviousMonths: false; + + /** + * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. + */ + container: string; + + /** + * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days. + * @default [] + */ + events: string[]; + + /** + * Callback function when date is selected, first parameter is the newly selected date. + */ + onSelect: (this: DatePicker, selectedDate: Date) => void; + + /** + * Callback function when Datepicker is opened + */ + onOpen: (this: DatePicker) => void; + + /** + * Callback function when Datepicker is closed + */ + onClose: (this: DatePicker) => void; + + /** + * Callback function when Datepicker HTML is refreshed + */ + onDraw: (this: DatePicker) => void; + } + + class FloatingActionButton extends Component implements Openable { /** * Get Instance */ @@ -119,7 +269,7 @@ declare global { toolbarEnabled: boolean; } - class Sidenav extends Component { + class Sidenav extends Component implements Openable { /** * Get Instance */ @@ -246,7 +396,7 @@ declare global { responsiveThreshold: number; } - class Modal extends Component { + class Modal extends Component implements Openable { /** * Get Instance */ @@ -397,7 +547,7 @@ declare global { */ function toast(options: Partial): Toast; - class Tooltip extends Component { + class Tooltip extends Component implements Openable { /** * Get Instance */ @@ -508,6 +658,12 @@ declare global { */ options: TOptions; } + + interface Openable { + isOpen: boolean; + open(): void; + close(): void; + } } interface JQuery { @@ -517,6 +673,11 @@ declare global { autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery; autocomplete(options?: Partial): JQuery; + datePicker(method: keyof Pick): JQuery; + datePicker(method: keyof Pick, date?: Date): JQuery; + datePicker(method: keyof Pick, date: Date): JQuery; + datePicker(options?: Partial): JQuery; + floatingActionButton(method: keyof Pick): JQuery; floatingActionButton(options?: Partial): JQuery; diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts index f7a65f6c5b..7301d98f58 100644 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ b/types/materialize-css/test/materialize-css-global.test.ts @@ -22,3 +22,5 @@ const fab = new M.FloatingActionButton(elem); // $ExpectType Toast const toast = M.toast({ html: 'I am a toast!' }); + +const datePicker = new M.DatePicker(elem); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index fe5a72fffa..0a70184881 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/types/materialize-css/test/materialize-css-jquery.test.ts @@ -35,3 +35,10 @@ $(".whatever").floatingActionButton("open"); $(".whatever").floatingActionButton("destroy"); // Toast can not be invoked using jQuery. + +$(".whatever").datePicker(); +$(".whatever").datePicker({ defaultDate: new Date() }); +$(".whatever").datePicker("open"); +$(".whatever").datePicker("destroy"); +$(".whatever").datePicker("setDate", new Date()); +$(".whatever").datePicker("gotoDate", new Date()); diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts index c6f487ca2d..bfe2952e3f 100644 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ b/types/materialize-css/test/materialize-css-module.test.ts @@ -170,3 +170,29 @@ fab.el; toast.dismiss(); // $ExpectType void materialize.Toast.dismissAll(); + +// DatePicker +// $ExpectType DatePicker +new materialize.DatePicker(elem); +// $ExpectType DatePicker +const datePicker = new materialize.DatePicker(elem, { + defaultDate: new Date(), + onSelect(date) { + // $ExpectType DatePicker + this; + // $ExpectType Date + date; + } +}); +// $ExpectType void +datePicker.open(); +// $ExpectType void +datePicker.setDate(new Date()); +// $ExpectType void +datePicker.destroy(); +// $ExpectType DatePickerOptions +datePicker.options; +// $ExpectType Element +datePicker.el; +// $ExpectType boolean +datePicker.isOpen; From 55ac64e75fa6708facdbf3a3c3d11fffa2f3c2b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= Date: Sat, 16 Dec 2017 23:00:23 +0800 Subject: [PATCH 4/5] fix --- types/materialize-css/index.d.ts | 10 +++++----- .../test/materialize-css-jquery.test.ts | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index f1540ff597..a4056b75d2 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -193,7 +193,7 @@ declare global { * Render days of the calendar grid that fall in the next or previous month. * @default false */ - showDaysInNextAndPreviousMonths: false; + showDaysInNextAndPreviousMonths: boolean; /** * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. @@ -673,10 +673,10 @@ declare global { autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery; autocomplete(options?: Partial): JQuery; - datePicker(method: keyof Pick): JQuery; - datePicker(method: keyof Pick, date?: Date): JQuery; - datePicker(method: keyof Pick, date: Date): JQuery; - datePicker(options?: Partial): JQuery; + datepicker(method: keyof Pick): JQuery; + datepicker(method: keyof Pick, date?: Date): JQuery; + datepicker(method: keyof Pick, date: Date): JQuery; + datepicker(options?: Partial): JQuery; floatingActionButton(method: keyof Pick): JQuery; floatingActionButton(options?: Partial): JQuery; diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index 0a70184881..c463044df2 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/types/materialize-css/test/materialize-css-jquery.test.ts @@ -36,9 +36,9 @@ $(".whatever").floatingActionButton("destroy"); // Toast can not be invoked using jQuery. -$(".whatever").datePicker(); -$(".whatever").datePicker({ defaultDate: new Date() }); -$(".whatever").datePicker("open"); -$(".whatever").datePicker("destroy"); -$(".whatever").datePicker("setDate", new Date()); -$(".whatever").datePicker("gotoDate", new Date()); +$(".whatever").datepicker(); +$(".whatever").datepicker({ defaultDate: new Date() }); +$(".whatever").datepicker("open"); +$(".whatever").datepicker("destroy"); +$(".whatever").datepicker("setDate", new Date()); +$(".whatever").datepicker("gotoDate", new Date()); From 3f31864292901eed0d7c546cad5dda9a99e40494 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= Date: Sun, 17 Dec 2017 00:43:28 +0800 Subject: [PATCH 5/5] Add TimePicker --- types/materialize-css/index.d.ts | 98 +++++++++++++++++++ .../test/materialize-css-global.test.ts | 4 + .../test/materialize-css-jquery.test.ts | 6 ++ .../test/materialize-css-module.test.ts | 20 ++++ 4 files changed, 128 insertions(+) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index a4056b75d2..9c9dbf4b70 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -396,6 +396,100 @@ declare global { responsiveThreshold: number; } + class TimePicker extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): TimePicker; + + /** + * If the picker is open. + */ + isOpen: boolean; + + /** + * The selected time. + */ + time: string; + + /** + * Open timepicker + */ + open(): void; + + /** + * Close timepicker + */ + close(): void; + + /** + * Show hours or minutes view on timepicker + * @param view The name of the view you want to switch to, 'hours' or 'minutes'. + */ + showView(view: "hours" | "minutes"): void; + } + + interface TimePickerOptions { + /** + * Duration of the transition from/to the hours/minutes view. + * @default 350 + */ + duration: number; + + /** + * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. + */ + container: string; + + /** + * Default time to set on the timepicker 'now' or '13:14' + * @default 'now'; + */ + defaultTime: string; + + /** + * Millisecond offset from the defaultTime. + * @default 0 + */ + fromnow: number; + + /** + * Done button text. + * @default 'Ok' + */ + doneText: string; + + /** + * Clear button text. + * @default 'Clear' + */ + clearText: string; + + /** + * Cancel button text. + * @default 'Cancel' + */ + cancelText: string; + + /** + * Automatically close picker when minute is selected. + * @default false; + */ + autoClose: boolean; + + /** + * Use 12 hour AM/PM clock instead of 24 hour clock. + * @default true + */ + twelveHour: boolean; + + /** + * Vibrate device when dragging clock hand. + * @default true + */ + vibrate: boolean; + } + class Modal extends Component implements Openable { /** * Get Instance @@ -688,6 +782,10 @@ declare global { tabs(method: keyof Pick, tabId: string): JQuery; tabs(options?: Partial): JQuery; + timepicker(method: keyof Pick): JQuery; + timepicker(method: keyof Pick, view: "hours" | "minutes"): JQuery; + timepicker(options?: Partial): JQuery; + // Toast can not be invoked using jQuery. tooltip(method: keyof Pick): JQuery; diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts index 7301d98f58..538941dff5 100644 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ b/types/materialize-css/test/materialize-css-global.test.ts @@ -23,4 +23,8 @@ const fab = new M.FloatingActionButton(elem); // $ExpectType Toast const toast = M.toast({ html: 'I am a toast!' }); +// $ExpectType DatePicker const datePicker = new M.DatePicker(elem); + +// $ExpectType TimePicker +const timePicker = new M.TimePicker(elem); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index c463044df2..4142ab7294 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/types/materialize-css/test/materialize-css-jquery.test.ts @@ -42,3 +42,9 @@ $(".whatever").datepicker("open"); $(".whatever").datepicker("destroy"); $(".whatever").datepicker("setDate", new Date()); $(".whatever").datepicker("gotoDate", new Date()); + +$(".whatever").timepicker(); +$(".whatever").timepicker({ defaultTime: "13:14" }); +$(".whatever").timepicker("open"); +$(".whatever").timepicker("destroy"); +$(".whatever").timepicker("showView", "hours"); diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts index bfe2952e3f..2395b01e61 100644 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ b/types/materialize-css/test/materialize-css-module.test.ts @@ -196,3 +196,23 @@ datePicker.options; datePicker.el; // $ExpectType boolean datePicker.isOpen; + +// TimePicker +// $ExpectType TimePicker +new materialize.TimePicker(elem); +// $ExpectType TimePicker +const timePicker = new materialize.TimePicker(elem, { + defaultTime: "13:14" +}); +// $ExpectType void +timePicker.open(); +// $ExpectType void +timePicker.showView("hours"); +// $ExpectType void +timePicker.destroy(); +// $ExpectType TimePickerOptions +timePicker.options; +// $ExpectType Element +timePicker.el; +// $ExpectType boolean +timePicker.isOpen;