From 5a4f1ea15fae5f8a05bac3d2c75cd9c5ac0acaa5 Mon Sep 17 00:00:00 2001 From: Sukhdeep Singh Date: Wed, 9 Aug 2017 14:59:50 -0400 Subject: [PATCH] Update Materialize-css definitions to version 0.100.1 (#18316) * Definitions updated to version 0.100.1 * Reverted TypeScript version to 2.3.0 to correct CI build * fix TypeScript version once more * Format using tabs --- types/materialize-css/index.d.ts | 1113 +++++++++-------- .../materialize-css/materialize-css-tests.ts | 280 +++-- 2 files changed, 759 insertions(+), 634 deletions(-) diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 18a5ac1feb..1cb283e2d7 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -1,6 +1,8 @@ -// Type definitions for materialize-css v0.98.0 +// Type definitions for materialize-css v0.100.1 // Project: http://materializecss.com/ -// Definitions by: Erik Lieben , Leon Yu , Sukhdeep Singh +// Definitions by: Erik Lieben +// Leon Yu +// Sukhdeep Singh // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 @@ -9,588 +11,687 @@ declare namespace Materialize { - /** - * The collapsible options - */ - interface CollapsibleOptions { - /** - * A setting that changes the collapsible behavior to expandable instead of the default accordion style - */ - accordion?: boolean; + /** + * The collapsible options + */ + interface CollapsibleOptions { + /** + * A setting that changes the collapsible behavior to expandable instead of the default accordion style + */ + accordion?: boolean; - /** - * Callback for Collapsible section close. - * Default: function() { alert('Closed'); } - */ - onClose?: Function; + /** + * Callback for Collapsible section close. + * @default `function() { alert('Closed'); }` + */ + onClose?: Function; - /** - * Callback for Collapsible section open. - * Default: function() { alert('Opened'); } - */ - onOpen?: Function; - } + /** + * Callback for Collapsible section open. + * @default `function() { alert('Opened'); }` + */ + onOpen?: Function; + } - interface TooltipOptions { - /** - * The delay before the tooltip shows (in milliseconds) - */ - delay: number; - /** - * Tooltip text. Can use custom HTML if you set the html option - */ - tooltip?: string; - /** - * Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'. - * - * (Default: 'bottom') - */ - position?: string; - /** - * Allow custom html inside the tooltip. - * - * (Default: false) - */ - html?: boolean; - } + interface TooltipOptions { + /** + * The delay before the tooltip shows (in milliseconds) + */ + delay: number; + /** + * Tooltip text. Can use custom HTML if you set the html option + */ + tooltip?: string; + /** + * Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'. + * + * @default `'bottom'` + */ + position?: string; + /** + * Allow custom html inside the tooltip. + * + * @default `false` + */ + html?: boolean; + } - /** - * The dropdown options - */ - interface DropDownOptions { + /** + * The dropdown options + */ + interface DropDownOptions { - /** - * The duration of the transition enter in milliseconds. - * Default: 300 - */ - inDuration?: number; + /** + * The duration of the transition enter in milliseconds. + * @default `300` + */ + inDuration?: number; - /** - * The duration of the transition out in milliseconds. - * Default: 225 - */ - outDuration?: number; + /** + * The duration of the transition out in milliseconds. + * @default `225` + */ + outDuration?: number; - /** - * If true, constrainWidth to the size of the dropdown activator. - * Default: true - */ - constrainWidth?: boolean; - /** - * If true, the dropdown will open on hover. - * Default: false - */ - hover?: boolean; + /** + * If true, constrainWidth to the size of the dropdown activator. + * @default `true` + */ + constrainWidth?: boolean; + /** + * If true, the dropdown will open on hover. + * @default `false` + */ + hover?: boolean; - /** - * This defines the spacing from the aligned edge. - * Default: 0 - */ - gutter?: number; + /** + * This defines the spacing from the aligned edge. + * @default `0` + */ + gutter?: number; - /** - * If true, the dropdown will show below the activator. - * Default: false - */ - belowOrigin?: boolean; + /** + * If true, the dropdown will show below the activator. + * @default `false` + */ + belowOrigin?: boolean; - /** - * Defines the edge the menu is aligned to. - * Default: 'left' - */ - alignment?: string; - /** - * If true, stops the event propagating from the dropdown origin click handler. - * - * Default: false - */ - stopPropagation?: boolean - } + /** + * Defines the edge the menu is aligned to. + * @default `'left'` + */ + alignment?: string; + /** + * If true, stops the event propagating from the dropdown origin click handler. + * + * @default `false` + */ + stopPropagation?: boolean + } - /** - * The slider options - */ - interface SliderOptions { + /** + * The slider options + */ + interface SliderOptions { - /** - * Set to false to hide slide indicators. - * Default: true - */ - indicators?: boolean; + /** + * Set to false to hide slide indicators. + * @default `true` + */ + indicators?: boolean; - /** - * Set height of slider. - * Default: 400 - */ - height?: number; + /** + * Set height of slider. + * @default `400` + */ + height?: number; - /** - * Set the duration of the transition animation in ms. - * Default: 500 - */ - transition?: number; + /** + * Set the duration of the transition animation in ms. + * @default `500` + */ + transition?: number; - /** - * Set the duration between transitions in ms. - * Default: 6000 - */ - interval?: number; - } + /** + * Set the duration between transitions in ms. + * @default `6000` + */ + interval?: number; + } - /** - * The carousel options - */ - interface CarouselOptions { - /** - * Transition duration in milliseconds - * Default: 200 - */ - duration?: number; + /** + * The carousel options + */ + interface CarouselOptions { + /** + * Transition duration in milliseconds + * @default `200` + */ + duration?: number; - /** - * Perspective zoom. If 0, all items are the same size. - * Default: -100 - */ - dist?: number; + /** + * Perspective zoom. If 0, all items are the same size. + * @default `-100` + */ + dist?: number; - /** - * Set the duration of the transition animation in ms. - * Default: 500 - */ - shift?: number; + /** + * Set the duration of the transition animation in ms. + * @default `500` + */ + shift?: number; - /** - * Set the duration between transitions in ms. - * Default: 6000 - */ - padding?: number; + /** + * Set the duration between transitions in ms. + * @default `6000` + */ + padding?: number; - /** - * Set the width of the carousel. - * Default: false - */ - fullWidth?: boolean; - /** - * Set to true to show indicators. - * - * Default: false - */ - indicators?: boolean; - /** - * Don't wrap around and cycle through items. - * - * Default: false - */ - noWrap?: boolean; - } + /** + * Set the width of the carousel. + * @default `false` + */ + fullWidth?: boolean; + /** + * Set to true to show indicators. + * + * @default `false` + */ + indicators?: boolean; + /** + * Don't wrap around and cycle through items. + * + * @default `false` + */ + noWrap?: boolean; + } - /** - * The modal options - */ - interface ModalOptions { + /** + * The modal options + */ + interface ModalOptions { - /** - * Modal can be dismissed by clicking outside of the modal. - * Default: true - */ - dismissible?: boolean; + /** + * Modal can be dismissed by clicking outside of the modal. + * @default `true` + */ + dismissible?: boolean; - /** - * Opacity of modal background. - * Default. .5 - */ - opacity?: number; + /** + * Opacity of modal background. + * @default `.5` + */ + opacity?: number; - /** - * Transition in duration. - * Default: 300 - */ - inDuration?: number; + /** + * Transition in duration. + * @default `300` + */ + inDuration?: number; - /** - * Transition out duration. - * Default: 200 - */ - outDuration?: number; - /** - * Starting top style attribute - * Default: `4%` - */ - startingTop?: string; - /** - * Ending top style attribute - * Default : `10%` - */ - endingTop?: string; + /** + * Transition out duration. + * @default `200` + */ + outDuration?: number; + /** + * Starting top style attribute + * @default `4%` + */ + startingTop?: string; + /** + * Ending top style attribute + * @default `10%` + */ + endingTop?: string; - /** - * Callback for Modal open. - * Default: function() { alert('Ready'); } - */ - ready?: Function; + /** + * Callback for Modal open. + * @default `function() { alert('Ready'); }` + */ + ready?: Function; - /** - * Callback for Modal close. - * Default: function() { alert('Closed'); } - */ - complete?: Function; - } + /** + * Callback for Modal close. + * @default `function() { alert('Closed'); }` + */ + complete?: Function; + } - /** - * The push pin options - */ - interface PushpinOptions { + /** + * The push pin options + */ + interface PushpinOptions { - /** - * The distance in pixels from the top of the page where the element becomes fixed. - * Default: 0 - */ - top?: number; + /** + * The distance in pixels from the top of the page where the element becomes fixed. + * @default `0` + */ + top?: number; - /** - * The distance in pixels from the top of the page where the elements stops being fixed. - * Default: Infinity - */ - bottom?: number; + /** + * The distance in pixels from the top of the page where the elements stops being fixed. + * @default `Infinity` + */ + bottom?: number; - /** - * The offset from the top the element will be fixed at. - * Default: 0 - */ - offset?: number; - } + /** + * The offset from the top the element will be fixed at. + * @default `0` + */ + offset?: number; + } - /** - * The scroll spy options - */ - interface ScrollSpyOptions { - /** - * Offset from top. - * Default: 200 - */ - scrollOffset?: number; - } + /** + * The scroll spy options + */ + interface ScrollSpyOptions { + /** + * Offset from top. + * @default `200` + */ + scrollOffset?: number; + /** + * Class name to be added to the active link. + * @default `active` + */ + activeClass?: string; + /** + * Function that returns a selector to add activeClass to. The parameter is the section id + */ + getActiveElement?: Function; + } - /** - * The slideNav options - */ - interface SideNavOptions { - /** - * Default: 240 - */ - menuWidth?: number; + /** + * The slideNav options + */ + interface SideNavOptions { + /** + * @default `240` + */ + menuWidth?: number; - /** - * The horizontal origin - * Default: ' left' - */ - edge?: string; + /** + * The horizontal origin + * @default `'left'` + */ + edge?: string; - /** - * Closes side-nav on clicks, useful for Angular/Meteor - * Default: false - */ - closeOnClick?: boolean; + /** + * Closes side-nav on clicks, useful for Angular/Meteor + * @default `false` + */ + closeOnClick?: boolean; - /** - * Choose whether you can drag to open on touch screens - * Default: true - */ - draggable?: boolean; - } + /** + * Choose whether you can drag to open on touch screens + * @default `true` + */ + draggable?: boolean; + } - interface ScrollFireOptions { + interface ScrollFireOptions { - /** - * The selector for the element that is being tracked. - */ - selector?: string; + /** + * The selector for the element that is being tracked. + */ + selector?: string; - /** - * Offset to use when activating the scroll fire event - * If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window. - */ - offset?: number; + /** + * Offset to use when activating the scroll fire event + * If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window. + */ + offset?: number; - /** - * The string function call that you want to make when the user scrolls to the threshold. - * It will only be called once. - * Example: 'console.log("hello, world!")'; - * or callback: () => { console.log('hello world'); } - */ - callback?: string | (() => void); - } + /** + * The string function call that you want to make when the user scrolls to the threshold. + * It will only be called once. + * Example: 'console.log("hello, world!")'; + * or callback: () => { console.log('hello world'); } + */ + callback?: string | (() => void); + } - interface TabOptions { - /** - * Execute a callback function when the tab is changed. - * - * The callback provides a parameter which refers to the current tab being shown. - */ - onShow?: Function; + interface TabOptions { + /** + * Execute a callback function when the tab is changed. + * + * The callback provides a parameter which refers to the current tab being shown. + */ + onShow?: Function; - /** - * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option. - * - * Default: false - */ - swipeable?: boolean; + /** + * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option. + * + * @default `false` + */ + swipeable?: boolean; - /** - * The maximum width of the screen, in pixels, where the swipeable functionality initializes. - * - * Default: Infinity - */ - responsiveThreshold?: number; - } + /** + * The maximum width of the screen, in pixels, where the swipeable functionality initializes. + * + * @default `Infinity` + */ + responsiveThreshold?: number; + } - interface ChipDataObject { - tag: string, - image?: string, - id?: number - } + interface ChipDataObject { + tag: string, + image?: string, + id?: number + } - interface ChipOptions { - /** - * Set the chip data - */ - data?: Materialize.ChipDataObject[]; - /** - * Set first placeholder when there are no tags - */ - placeholder?: string; - /** - * Set second placeholder when adding additional tags. - */ - secondaryPlaceholder?: string; - /** - * Set autocomplete data. - */ - autocompleteData?: any; - /** - * Set autocomplete limit. - */ - autocompleteLimit?: number; - } + interface ChipOptions { + /** + * Set the chip data + */ + data?: Materialize.ChipDataObject[]; + /** + * Set first placeholder when there are no tags + */ + placeholder?: string; + /** + * Set second placeholder when adding additional tags. + */ + secondaryPlaceholder?: string; + /** + * Set autocomplete data. + */ + autocompleteData?: any; + /** + * Set autocomplete limit. + */ + autocompleteLimit?: number; + /** + * Set autocompleteOptions + */ + autocompleteOptions?: Materialize.AutoCompleteOptions; + } + interface AutoCompleteOptions { + /** + * The JSON object data to be used for the autocomplete suggetions list + */ + data: object; + /** + * The max amount of results that can be shown at once. + * @default `Infinity` + */ + limit?: number; + /** + * Callback function when value is autcompleted. + */ + onAutocomplete?: (val: any) => void; + /** + * The minimum length of the input for the autocomplete to start. + * @default `1` + */ + minLength?: number; - /** - * The Materialize object - */ - interface Materialize { + } - /** - * Displays a toast message on screen - * - * @name message The message to display on screen - * @name displayLength The duration in milliseconds to display the message on screen - * @name className The className to use to format the message to display - * @name completeCallback Callback function to call when the messages completes/hides. - */ - toast(message: string | JQuery, displayLength: number, className?: string, completeCallback?: Function): void; + interface Toast { + /** + * Dismiss all toasts + */ + removeAll: Function; + } - /** - * Fires an event when the page is scrolled to a certain area - * - * @name options optional parameter with scroll fire options - */ - scrollFire(options?: ScrollFireOptions[]): void; + /** + * The Materialize object + */ + interface Materialize { - /** - * A staggered reveal effect for any UL Tag with list items - * - * @name selector the selector for the list to show in staggered fasion - */ - showStaggeredList(selector: string): void; + /** + * Displays a toast message on screen + * + * @param string | JQuery message The message to display on screen + * @param number displayLength The duration in milliseconds to display the message on screen + * @param string className The className to use to format the message to display + * @param Function completeCallback Callback function to call when the messages completes/hides. + */ + toast(message: string | JQuery, displayLength: number, className?: string, completeCallback?: Function): void; - /** - * Fade in images. It also animates grayscale and brightness to give it a unique effect. - * - * @name selector the selector for the image to fade in - */ - fadeInImage(selector: string): void; + /** + * Fires an event when the page is scrolled to a certain area + * + * @param ScrollFireOptions options optional parameter with scroll fire options + */ + scrollFire(options?: ScrollFireOptions[]): void; - /** - * Update all text field to reinitialize all the Materialize labels on the page if dynamically adding inputs - */ - updateTextFields(): void; - } + /** + * A staggered reveal effect for any UL Tag with list items + * + * @param string selector the selector for the list to show in staggered fasion + */ + showStaggeredList(selector: string): void; + + /** + * Fade in images. It also animates grayscale and brightness to give it a unique effect. + * + * @param string selector the selector for the image to fade in + */ + fadeInImage(selector: string): void; + + /** + * Update all text field to reinitialize all the Materialize labels on the page if dynamically adding inputs + */ + updateTextFields(): void; + + /** + * Toast functions + */ + Toast: Materialize.Toast; + } +} + +/** + * Declare Pickadate namespace again in order to add more Materialize specific properties to TimeOptions interface + * + * @see http://www.typescriptlang.org/docs/handbook/declaration-merging.html + */ +declare namespace Pickadate { + export interface TimeOptions { + /** + * Set default time such as : 'now', '1:30AM', '16:30'. + * @default `'now'` + */ + default?: string; + /** + * set default time to * milliseconds from now (using with default = 'now') + * @default `0` + */ + fromnow?: number; + /** + * Use AM/PM or 24-hour format + * @default `false` + */ + twelvehour?: boolean; + /** + * text for done-button + * @default `'OK'` + */ + donetext?: string; + /** + * text for clear-button + * @default `'Clear'` + */ + cleartext?: string; + /** + * Text for cancel-button + * @default `'Cancel'` + */ + canceltext?: string; + /** + * automatic close timepicker + * @default `false` + */ + autoclose?: boolean; + /** + * make AM PM clickable + * @default `true` + */ + ampmclickable?: boolean; + /** + * Function for after opening timepicker + */ + aftershow?: Function; + } } declare var Materialize: Materialize.Materialize; interface JQuery { - /** - * open Fixed Action Button - */ - openFAB(): void; - /** - * close Fixed Action Button - */ - closeFAB(): void; + /** + * open Fixed Action Button + */ + openFAB(): void; + /** + * close Fixed Action Button + */ + closeFAB(): void; - /** - * Select allows user input through specified options. - * Initialization - */ - material_select(): void; + /** + * Select allows user input through specified options. + * + * @param string method "destroy" destroy the material select + */ + material_select(method?: string): void; - /** - * Select allows user input through specified options. - * Updating/Destroying Select - * - * @name method "destroy" destroy the material select - */ - material_select(method: string): void; + /** + * Use a character counter in fields where a character restriction is in place. + */ + characterCounter(): JQuery; - /** - * Use a character counter in fields where a character restriction is in place. - */ - characterCounter(): JQuery; + /** + * Collapsibles are accordion elements that expand when clicked on. + * They allow you to hide content that is not immediately relevant to the user. + * + * @param CollapsibleOptions options the collapsible options + */ + collapsible(options?: Materialize.CollapsibleOptions): JQuery; - /** - * Collapsibles are accordion elements that expand when clicked on. - * They allow you to hide content that is not immediately relevant to the user. - * - * @name options the collapsible options - */ - collapsible(options?: Materialize.CollapsibleOptions): JQuery; + /** + * Tooltips are small, interactive, textual hints for mainly graphical elements. + * When using icons for actions you can use a tooltip to give people clarification on its function. + * + * @param TooltipOptions | string options the tooltip options or the string "remove" to remove the tooltip function + */ + tooltip(options?: Materialize.TooltipOptions | string): JQuery; - /** - * Tooltips are small, interactive, textual hints for mainly graphical elements. - * When using icons for actions you can use a tooltip to give people clarification on its function. - * - * @name options the tooltip options or the string "remove" to remove the tooltip function - */ - tooltip(options?: Materialize.TooltipOptions | string): JQuery; + /** + * Add a dropdown list to any button. + * Make sure that the data-activates attribute matches the id in the