From 43e63b5b0e7000869fc511687c80236a8d8270a2 Mon Sep 17 00:00:00 2001 From: Rajab Shakirov Date: Sat, 10 Feb 2018 17:05:32 +0300 Subject: [PATCH] [react-bootstrap-typeahead] update to version 2.2 --- types/react-bootstrap-typeahead/index.d.ts | 109 ++++++++++++++++++++- 1 file changed, 108 insertions(+), 1 deletion(-) diff --git a/types/react-bootstrap-typeahead/index.d.ts b/types/react-bootstrap-typeahead/index.d.ts index c31ddd63b5..98eded2136 100644 --- a/types/react-bootstrap-typeahead/index.d.ts +++ b/types/react-bootstrap-typeahead/index.d.ts @@ -1,63 +1,170 @@ -// Type definitions for react-bootstrap-typeahead 2.0 +// Type definitions for react-bootstrap-typeahead 2.3 // Project: https://github.com/ericgio/react-bootstrap-typeahead // Definitions by: Guymestef +// Rajab Shakirov // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 +// TODO: , , , components import * as React from 'react'; export interface TypeaheadProps { + /* For localized accessibility: Should return a string indicating the number of results for screen readers. Receives the current results. */ a11yNumResults?: () => void; + + /* For localized accessibility: Should return a string indicating the number of selections for screen readers. Receives the current selections. */ a11yNumSelected?: () => void; + + /* Specify menu alignment. The default value is justify, which makes the menu as wide as the input and truncates long values. + Specifying left or right will align the menu to that side and the width will be determined by the length of menu item values. */ align?: 'justify' | 'left' | 'right'; + + /* Allows the creation of new selections on the fly. Any new items will be added to the list of selections, + but not the list of original options unless handled as such by Typeahead's parent. + The newly added item will always be returned as an object even if the other options are simply strings, + so be sure your onChange callback can handle this. */ allowNew?: boolean; + + /* Autofocus the input when the component initially mounts. */ autoFocus?: boolean; + + /* Whether to render the menu inline or attach to document.body. */ bodyContainer?: boolean; + + /* Specify the size of the input. */ bsSize?: 'large' | 'lg' | 'small' | 'sm'; + + /* Whether or not filtering should be case-sensitive. */ caseSensitive?: boolean; + + /* Displays a button to clear the input when there are selections. */ clearButton?: boolean; + + /* The initial value displayed in the text input. */ + defaultInputValue?: string; + + /* Specify any pre-selected options. Use only if you want the component to be uncontrolled. */ defaultSelected?: T[]; + + /* Whether to disable the input. Will also disable selections when multiple={true}. */ disabled?: boolean; + + /* Specify whether the menu should appear above the input. */ dropup?: boolean; + + /* Message displayed in the menu when there are no valid results. + Passing a falsy value will hide the menu if no matches are found. */ emptyLabel?: string; + + /* Either an array of fields in option to search, or a custom filtering callback. */ filterBy?: (string[] | ((option: T | string, text: string) => boolean)); + + /* Highlights the menu item if there is only one result and allows selecting that item by hitting enter. + Does not work with allowNew. */ highlightOnlyResult?: boolean; + + /* Whether the filter should ignore accents and other diacritical marks. */ ignoreDiacritics?: boolean; + + /* Props to be applied directly to the input. onBlur, onChange, onFocus, and onKeyDown are ignored. */ inputProps?: object; + + /* Indicate whether an asynchronous data fetch is happening. */ + isLoading?: boolean; + + /* Specify which option key to use for display or a render function. By default, the selector will use the label key. */ labelKey?: string | ((option: T | string) => string); + + /* Maximum height of the dropdown menu, in px. */ maxHeight?: number; + + /* Maximum number of results to display by default. Mostly done for performance reasons + so as not to render too many DOM nodes in the case of large data sets. */ maxResults?: number; + + /* Number of input characters that must be entered before showing results. */ minLength?: number; + + /* Whether or not multiple selections are allowed. */ multiple?: boolean; + + /* Provides the ability to specify a prefix before the user-entered text to indicate that the selection will be new. No-op unless allowNew={true}. */ newSelectionPrefix?: string; + + /* Invoked when the input is blurred. Receives an event. */ onBlur?: (e: Event) => any; + + /* Invoked whenever items are added or removed. Receives an array of the selected options. */ onChange?: (selected: T[]) => any; + + /* Invoked when the input is focused. Receives an event. */ onFocus?: (e: Event) => any; + + /* Invoked when the input value changes. Receives the string value of the input. */ onInputChange?: (input: string) => any; + + /* Invoked when a key is pressed. Receives an event. */ onKeyDown?: (e: Event) => any; + + /* Invoked when the menu is hidden. */ onMenuHide?: (e: Event) => any; + + /* Invoked when the menu is shown. */ onMenuShow?: (e: Event) => any; + + /* Invoked when the pagination menu item is clicked. */ onPaginate?: (e: Event) => any; + + /* Full set of options, including any pre-selected options. */ options: T[]; + + /* Give user the ability to display additional results if the number of results exceeds maxResults. */ paginate?: boolean; + + /* Prompt displayed when large data sets are paginated. */ paginationText?: string; + + /* Placeholder text for the input. */ placeholder?: string; + + /* Callback for custom menu rendering. */ renderMenu?: (results: Array, menuProps: any) => any; + + /* Provides a hook for customized rendering of menu item contents. */ renderMenuItemChildren?: (option: T, props: TypeaheadProps, index: number) => any; + + /* Provides a hook for customized rendering of tokens when multiple selections are enabled. */ renderToken?: (selectedItem: T | string, onRemove: () => void) => any; + + /* The selected option(s) displayed in the input. Use this prop if you want to control the component via its parent. */ selected?: T[]; + + /* Allows selecting the hinted result by pressing enter. */ selectHintOnEnter?: boolean; + + /* Propagate event to parent form. */ submitFormOnEnter?: boolean; } export const Typeahead: React.ClassicComponentClass>; export interface AsyncTypeaheadProps extends TypeaheadProps { + /* Delay, in milliseconds, before performing search. */ delay?: number; + + /* Whether or not a request is currently pending. Necessary for the component to know when new results are available. */ isLoading: boolean; + + /* Callback to perform when the search is executed. */ onSearch: (query: string) => void; + + /* Message displayed in the menu when there is no user input. */ promptText?: string; + + /* Message to display in the menu while the request is pending. */ searchText?: string; + + /* Whether or not the component should cache query results. */ useCache?: boolean; }