diff --git a/types/react-bootstrap-typeahead/index.d.ts b/types/react-bootstrap-typeahead/index.d.ts index fa970bc5b3..52f99825d5 100644 --- a/types/react-bootstrap-typeahead/index.d.ts +++ b/types/react-bootstrap-typeahead/index.d.ts @@ -1,13 +1,29 @@ -// Type definitions for react-bootstrap-typeahead 3.2 +// Type definitions for react-bootstrap-typeahead 3.4 // Project: https://github.com/ericgio/react-bootstrap-typeahead // Definitions by: Guymestef // Rajab Shakirov // Paito Anderson +// Andreas Richter // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 -// TODO: , , , components +// TODO: components import * as React from 'react'; +import * as CSS from 'csstype'; + +export interface TypeaheadFilterbyProps { + filterBy: string[]; + labelKey: (string | (() => void)); + multiple: boolean; + selected: any[]; + caseSensitive: boolean; + ignoreDiacritics: boolean; + text: string; +} + +export interface TypeaheadMenuProps { + text: string; +} export interface TypeaheadProps { /* For localized accessibility: Should return a string indicating the number of results for screen readers. Receives the current results. */ @@ -58,7 +74,7 @@ export interface TypeaheadProps { emptyLabel?: string; /* Either an array of fields in option to search, or a custom filtering callback. */ - filterBy?: (string[] | ((option: T | string, text: string) => boolean)); + filterBy?: (string[] | ((option: T | string, props: TypeaheadFilterbyProps) => boolean)); /* Highlights the menu item if there is only one result and allows selecting that item by hitting enter. Does not work with allowNew. */ @@ -138,7 +154,7 @@ export interface TypeaheadProps { renderMenu?: (results: Array, menuProps: any) => any; /* Provides a hook for customized rendering of menu item contents. */ - renderMenuItemChildren?: (option: T, props: TypeaheadProps, index: number) => any; + renderMenuItemChildren?: (option: T, props: TypeaheadMenuProps, index: number) => any; /* Provides a hook for customized rendering of tokens when multiple selections are enabled. */ renderToken?: (selectedItem: T | string, onRemove: () => void) => any; @@ -173,3 +189,35 @@ export interface AsyncTypeaheadProps extends TypeaheadProps { } export const AsyncTypeahead: React.ClassicComponentClass>; + +export interface HighligherProps { + key?: string; + search: string; + optionId?: any; +} + +export const Highlighter: React.ClassicComponentClass>; + +export interface MenuProps { + id: string; + className?: string; + emptyLabel?: string; + innerRef?: string; + maxHeight?: string; + style?: CSS.Properties; +} + +export const Menu: React.ClassicComponentClass>; + +export interface MenuItemProps { + option: T; + position: number; + label?: string; + active?: boolean; + className?: string; + disabled?: boolean; + onClick?: (e: Event) => any; + onMouseDown?: (e: Event) => any; +} + +export const MenuItem: React.ClassicComponentClass>; diff --git a/types/react-bootstrap-typeahead/package.json b/types/react-bootstrap-typeahead/package.json new file mode 100644 index 0000000000..e6696d08e7 --- /dev/null +++ b/types/react-bootstrap-typeahead/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/react-bootstrap-typeahead/react-bootstrap-typeahead-tests.tsx b/types/react-bootstrap-typeahead/react-bootstrap-typeahead-tests.tsx index 10237b1fa0..c77052a3c6 100644 --- a/types/react-bootstrap-typeahead/react-bootstrap-typeahead-tests.tsx +++ b/types/react-bootstrap-typeahead/react-bootstrap-typeahead-tests.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Typeahead } from 'react-bootstrap-typeahead'; +import { Typeahead, Highlighter, Menu, MenuItem } from 'react-bootstrap-typeahead'; const options = [ { name: 'Alabama', population: 4780127, capital: 'Montgomery', region: 'South' }, @@ -28,6 +28,47 @@ class BasicExample extends React.Component { onInputChange={(value, e) => {}} placeholder="Choose a state..." /> + (props.text.indexOf(option) !== -1) } + placeholder="Choose a state..." + /> + (text.indexOf(option) !== -1) } + placeholder="Choose a state..." + /> + + + {option.name} {index} + + } + /> + + + {options.map((o, idx) => ( + + {o.name} + + ))} + + ); }