diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index a457c3ad1a..ebc997c51f 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -1,712 +1,418 @@ -// Type definitions for materialize-css 0.100 +// Type definitions for materialize-css 1.0 // Project: http://materializecss.com/ -// Definitions by: Erik Lieben -// Leon Yu -// Sukhdeep Singh -// Jean-Francois Cere -// Sebastien Cote +// Definitions by: 胡玮文 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.3 +// TypeScript Version: 2.4 /// -/// -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; +export = M; - /** - * Callback for Collapsible section close. - * @default `function() { alert('Closed'); }` - */ - onClose?: Function; +declare global { + namespace M { + class Autocomplete extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Autocomplete; - /** - * Callback for Collapsible section open. - * @default `function() { alert('Opened'); }` - */ - onOpen?: Function; - } + /** + * Select a specific autocomplete options. + * @param el Element of the autocomplete option. + */ + selectOption(el: Element): void; - 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; - } + /** + * Update autocomplete options data. + * @param data Autocomplete options data object. + */ + updateData(data: AutocompleteData): void; - /** - * The dropdown options - */ - interface DropDownOptions { - /** - * The duration of the transition enter in milliseconds. - * @default `300` - */ - inDuration?: number; + /** + * If the autocomplete is open. + */ + isOpen: boolean; - /** - * The duration of the transition out in milliseconds. - * @default `225` - */ - outDuration?: number; + /** + * Number of matching autocomplete options. + */ + count: 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; + /** + * Index of the current selected option. + */ + activeIndex: number; + } - /** - * This defines the spacing from the aligned edge. - * @default `0` - */ - gutter?: number; + interface AutocompleteData { + [key: string]: string | null; + } - /** - * If true, the dropdown will show below the activator. - * @default `false` - */ - belowOrigin?: boolean; + interface AutocompleteOptions { + /** + * Data object defining autocomplete options with optional icon strings. + */ + data: AutocompleteData; - /** - * 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; - } + /** + * Limit of results the autocomplete shows. + * @default infinity + */ + limit: number; - /** - * The slider options - */ - interface SliderOptions { - /** - * Set to false to hide slide indicators. - * @default `true` - */ - indicators?: boolean; + /** + * Callback for when autocompleted. + */ + onAutocomplete: (this: Autocomplete, text: string) => void; - /** - * Set height of slider. - * @default `400` - */ - height?: number; + /** + * Minimum number of characters before autocomplete starts. + * @default 1 + */ + minLength: number; - /** - * Set the duration of the transition animation in ms. - * @default `500` - */ - transition?: number; + /** + * Sort function that defines the order of the list of autocomplete options. + */ + sortFunction: (a: string, b: string, inputText: string) => number; + } - /** - * Set the duration between transitions in ms. - * @default `6000` - */ - interval?: number; - } + class Sidenav extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Sidenav; - /** - * The carousel options - */ - interface CarouselOptions { - /** - * Transition duration in milliseconds - * @default `200` - */ - duration?: number; + /** + * Opens Sidenav + */ + open(): void; - /** - * Perspective zoom. If 0, all items are the same size. - * @default `-100` - */ - dist?: number; + /** + * Closes Sidenav + */ + close(): void; - /** - * Set the duration of the transition animation in ms. - * @default `500` - */ - shift?: number; + /** + * Describes open/close state of Sidenav + */ + isOpen: boolean; - /** - * Set the duration between transitions in ms. - * @default `6000` - */ - padding?: number; + /** + * Describes if sidenav is fixed + */ + isFixed: 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; - } + /** + * Describes if Sidenav is being dragged + */ + isDragged: boolean; + } - /** - * The modal options - */ - interface ModalOptions { - /** - * Modal can be dismissed by clicking outside of the modal. - * @default `true` - */ - dismissible?: boolean; + /** + * Options for the Sidenav + */ + interface SidenavOptions { + /** + * Side of screen on which Sidenav appears + * @default 'left' + */ + edge: 'left' | 'right'; - /** - * Opacity of modal background. - * @default `.5` - */ - opacity?: number; + /** + * Allow swipe gestures to open/close Sidenav + * @default true + */ + draggable: boolean; - /** - * Transition in duration. - * @default `300` - */ - inDuration?: number; + /** + * Length in ms of enter transition + * @default 250 + */ + 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; + /** + * Length in ms of exit transition + * @default 200 + */ + outDuration: number; - /** - * Callback for Modal open. - * @default `function() { alert('Ready'); }` - */ - ready?: Function; + /** + * Function called when sidenav starts entering + */ + onOpenStart: (this: Sidenav, elem: Element) => void; - /** - * Callback for Modal close. - * @default `function() { alert('Closed'); }` - */ - complete?: Function; - } + /** + * Function called when sidenav finishes entering + */ + onOpenEnd: (this: Sidenav, elem: Element) => void; - /** - * 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; + /** + * Function called when sidenav starts exiting + */ + onCloseStart: (this: Sidenav, elem: Element) => void; - /** - * The distance in pixels from the top of the page where the elements stops being fixed. - * @default `Infinity` - */ - bottom?: number; + /** + * Function called when sidenav finishes exiting + */ + onCloseEnd: (this: Sidenav, elem: Element) => void; + } - /** - * The offset from the top the element will be fixed at. - * @default `0` - */ - offset?: number; - } + class Tabs extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Tabs; - /** - * 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; - } + /** + * Show tab content that corresponds to the tab with the id + * @param tabId The id of the tab that you want to switch to + */ + select(tabId: string): void; - /** - * The slideNav options - */ - interface SideNavOptions { - /** - * The sideNav width. - * @default `240` - */ - menuWidth?: number; + /** + * The index of tab that is currently shown + */ + index: number; + } - /** - * The horizontal origin. - * @default `'left'` - */ - edge?: string; + /** + * Options for the Tabs + */ + interface TabsOptions { + /** + * Transition duration in milliseconds. + * @default 300 + */ + duration: number; - /** - * Closes sideNav on clicks, useful for Angular/Meteor. - * @default `false` - */ - closeOnClick?: boolean; + /** + * Callback for when a new tab content is shown + */ + onShow: (this: Tabs, newContent: Element) => void; - /** - * Choose whether you can drag to open on touch screens. - * @default `true` - */ - draggable?: boolean; + /** + * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option + * @default false + */ + swipeable: boolean; - /** - * Execute a callback function when sideNav is opened. - * - * The callback provides a parameter which refers to the sideNav being opened. - */ - onOpen?: Function; + /** + * The maximum width of the screen, in pixels, where the swipeable functionality initializes. + * @default infinity + */ + responsiveThreshold: number; + } - /** - * Execute a callback function when sideNav is closed. - * - * The callback provides a parameter which refers to the sideNav being closed. - */ - onClose?: Function; - } + class Modal extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Modal; - interface ScrollFireOptions { - /** - * The selector for the element that is being tracked. - */ - selector?: string; + /** + * Open modal + */ + open(): void; - /** - * 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; + /** + * Close modal + */ + close(): 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); - } + /** + * If the modal is open. + */ + isOpen: boolean; - 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; + /** + * ID of the modal element + */ + id: string; + } - /** - * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option. - * - * @default `false` - */ - swipeable?: boolean; + /** + * Options for the Modal + */ + interface ModalOptions { + /** + * Opacity of the modal overlay. + * @default 0.5 + */ + opacity: number; - /** - * The maximum width of the screen, in pixels, where the swipeable functionality initializes. - * - * @default `Infinity` - */ - responsiveThreshold?: number; - } + /** + * Transition in duration in milliseconds. + * @default 250 + */ + inDuration: number; - interface ChipDataObject { - tag: string; - image?: string; - id?: number; - } + /** + * Transition out duration in milliseconds. + * @default 250 + */ + outDuration: number; - interface ChipOptions { - /** - * Set the chip data - */ - data?: 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?: AutoCompleteOptions; - } + /** + * Callback function called when modal is finished entering. + */ + ready: (this: Modal, elem: Element, openingTrigger: Element) => void; - 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; - } + /** + * Callback function called when modal is finished exiting. + */ + complete: (this: Modal, elem: Element) => void; - interface Toast { - /** - * Dismiss all toasts - */ - removeAll: Function; - } + /** + * Allow modal to be dismissed by keyboard or overlay click. + * @default true + */ + dismissible: boolean; - /** - * The Materialize object - */ - interface Materialize { - /** - * 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; + /** + * Starting top offset + * @default '4%' + */ + startingTop: string; - /** - * 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; + /** + * Ending top offset + * @default '10%' + */ + endingTop: string; + } - /** - * 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; + class Tooltip extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Tooltip; - /** - * 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; + /** + * Show tooltip. + */ + open(): void; - /** - * Update all text field to reinitialize all the Materialize labels on the page if dynamically adding inputs - */ - updateTextFields(): void; + /** + * Hide tooltip. + */ + close(): void; - /** - * Toast functions - */ - Toast: 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 { - 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; - - /** - * Select allows user input through specified options. - * - * @param string 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; - - /** - * 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 | string options the collapsible options or the string "destroy" to destroy the collapsible - */ - collapsible(options?: Materialize.CollapsibleOptions | string): JQuery; - - /** - * Programmatically trigger an event on a selected index - * - * @param string method the string "open" or "close" to open or to close the collapsible element on specified index - * @param number index the element index to trigger "open" or "close" function - */ - collapsible(method: string, index: number): 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; - - /** - * Add a dropdown list to any button. - * Make sure that the data-activates attribute matches the id in the