From 68baa16088ceec61be481c04b602e1eefa9c51fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= Date: Thu, 30 Nov 2017 01:25:52 +0800 Subject: [PATCH] add Autocomplete --- types/materialize-css/index.d.ts | 98 +++++++++++++++++-- .../test/materialize-css-global.test.ts | 9 ++ .../test/materialize-css-jquery.test.ts | 18 +++- .../test/materialize-css-module.test.ts | 68 +++++++++++++ 4 files changed, 183 insertions(+), 10 deletions(-) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 4ff883aea8..ebc997c51f 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -10,7 +10,7 @@ export = M; declare global { namespace M { - class Autocomplete extends Component{ + class Autocomplete extends Component { /** * Get Instance */ @@ -26,7 +26,7 @@ declare global { * Update autocomplete options data. * @param data Autocomplete options data object. */ - updateData(data: AutocompleteOptions): void; + updateData(data: AutocompleteData): void; /** * If the autocomplete is open. @@ -45,7 +45,7 @@ declare global { } interface AutocompleteData { - [key: string]: string | null + [key: string]: string | null; } interface AutocompleteOptions { @@ -282,16 +282,91 @@ declare global { endingTop: string; } - function updateTextFields(): void; - - class CharacterCounter extends Component{ + class Tooltip extends Component { /** * Get Instance */ - static getInstance(elem: Element): CharacterCounter + static getInstance(elem: Element): Tooltip; + + /** + * Show tooltip. + */ + open(): void; + + /** + * Hide tooltip. + */ + close(): void; + + /** + * If tooltip is open. + */ + isOpen: boolean; + + /** + * If tooltip is hovered. + */ + isHovered: boolean; } - interface CharacterCounterOptions { } + interface TooltipOptions { + /** + * Delay time before tooltip disappears. + * @default 0 + */ + exitDelay: number; + + /** + * Delay time before tooltip appears. + * @default 200 + */ + enterDelay: number; + + /** + * Can take regular text or HTML strings. + * @default null + */ + html: string | null; + + /** + * Set distance tooltip appears away from its activator excluding transitionMovement. + * @default 5 + */ + margin: number; + + /** + * Enter transition duration. + * @default 300 + */ + inDuration: number; + + /** + * Exit transition duration. + * @default 250 + */ + outDuration: number; + + /** + * Set the direction of the tooltip. + * @default 'bottom' + */ + position: 'top' | 'right' | 'bottom' | 'left'; + + /** + * Amount in px that the tooltip moves during its transition. + * @default 10 + */ + transitionMovement: number; + } + + function updateTextFields(): void; + + class CharacterCounter extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): CharacterCounter; + } abstract class Component { /** @@ -330,9 +405,14 @@ declare global { tabs(method: keyof Pick, tabId: string): JQuery; tabs(options?: Partial): JQuery; + tooltip(method: keyof Pick): JQuery; + tooltip(options?: Partial): JQuery; + modal(method: keyof Pick): JQuery; modal(options?: Partial): JQuery; - characterCounter(options?: Partial): JQuery + // tslint:disable-next-line unified-signatures + characterCounter(method: keyof Pick): JQuery; + characterCounter(): JQuery; } } diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts index d123c21651..fa228b444f 100644 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ b/types/materialize-css/test/materialize-css-global.test.ts @@ -7,3 +7,12 @@ const tabs = new M.Tabs(elem); // $ExpectType Modal const modal = new M.Modal(elem); + +// $ExpectType Autocomplete +const autocomplete = new M.Autocomplete(elem); + +// $ExpectType CharacterCounter +const characterCounter = new M.CharacterCounter(elem); + +// $ExpectType Tooltip +const tooltips = new M.Tooltip(elem); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index 6fd40b5aa7..42af7fcefd 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/types/materialize-css/test/materialize-css-jquery.test.ts @@ -1,5 +1,5 @@ $(".whatever").sidenav(); -$(".whatever").sidenav({inDuration: 200}); +$(".whatever").sidenav({ inDuration: 200 }); $(".whatever").sidenav("open"); $(".whatever").sidenav("destroy"); @@ -12,3 +12,19 @@ $(".whatever").modal(); $(".whatever").modal({ inDuration: 200 }); $(".whatever").modal("open"); $(".whatever").modal("destroy"); + +$(".whatever").characterCounter(); +$(".whatever").characterCounter("destroy"); + +$(".whatever").autocomplete({ + data: { + Apple: null, + Google: "https://placehold.it/250x250" + } +}); +$(".whatever").autocomplete("updateData", { Microsoft: null }); + +$(".whatever").tooltip(); +$(".whatever").tooltip({ html: "" }); +$(".whatever").tooltip("open"); +$(".whatever").tooltip("destroy"); diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts index edf2ee36ef..2665586b5d 100644 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ b/types/materialize-css/test/materialize-css-module.test.ts @@ -29,6 +29,8 @@ sidenav.isOpen; // Tabs // $ExpectType Tabs +new materialize.Tabs(elem); +// $ExpectType Tabs const tabs = new materialize.Tabs(elem, { duration: 200, onShow(content) { @@ -44,6 +46,8 @@ tabs.destroy(); tabs.select("id"); // $ExpectType TabsOptions tabs.options; +// $ExpectType Element +tabs.el; // $ExpectType number tabs.index; @@ -72,3 +76,67 @@ modal.options; modal.el; // $ExpectType boolean modal.isOpen; + +// CharacterCounter +// $ExpectType CharacterCounter +const characterCounter = new materialize.CharacterCounter(elem); +// $ExpectType void +characterCounter.destroy(); +// $ExpectType Element +characterCounter.el; + +// Autocomplete +// $ExpectType Autocomplete +new materialize.Autocomplete(elem); +// $ExpectType Autocomplete +const autocomplete = new materialize.Autocomplete(elem, { + data: { + Apple: null, + Google: "https://placehold.it/250x250" + }, + minLength: 3, + onAutocomplete(text) { + // $ExpectType Autocomplete + this; + // $ExpectType string + text; + }, + sortFunction(a, b, input) { + // $ExpectType string + a; + // $ExpectType string + b; + // $ExpectType string + input; + return 0; + } +}); +// $ExpectType void +autocomplete.updateData({ Microsoft: null }); +// $ExpectType void +autocomplete.destroy(); +// $ExpectType AutocompleteOptions +autocomplete.options; +// $ExpectType Element +autocomplete.el; +// $ExpectType boolean +autocomplete.isOpen; + +// Tooltip +// $ExpectType Tooltip +new materialize.Tooltip(elem); +// $ExpectType Tooltip +const tooltip = new materialize.Tooltip(elem, { + inDuration: 300, + position: "right" +}); +// $ExpectType void +tooltip.open(); +// $ExpectType void +tooltip.destroy(); +// $ExpectType TooltipOptions +tooltip.options; +// $ExpectType Element +tooltip.el; +// $ExpectType boolean +tooltip.isOpen;