Merge pull request #31474 from understandr/react-bootstrap-typeahead-PR

[React bootstrap typeahead] add filterBy, Highlighter, Menu, MenuItem

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 <https://github.com/Guymestef>
 //                 Rajab Shakirov <https://github.com/radziksh>
 //                 Paito Anderson <https://github.com/PaitoAnderson>
+//                 Andreas Richter <https://github.com/arichter83>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
-// TODO: <Highlighter>, <Menu>, <MenuItem>, <Token> components
+// TODO: <Token> 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<T> {
+    text: string;
+}
 
 export interface TypeaheadProps<T> {
     /* 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<T> {
     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<T> {
     renderMenu?: (results: Array<T | string>, menuProps: any) => any;
 
     /* Provides a hook for customized rendering of menu item contents. */
-    renderMenuItemChildren?: (option: T, props: TypeaheadProps<T>, index: number) => any;
+    renderMenuItemChildren?: (option: T, props: TypeaheadMenuProps<T>, 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<T> extends TypeaheadProps<T> {
 }
 
 export const AsyncTypeahead: React.ClassicComponentClass<AsyncTypeaheadProps<any>>;
+
+export interface HighligherProps<T> {
+    key?: string;
+    search: string;
+    optionId?: any;
+}
+
+export const Highlighter: React.ClassicComponentClass<HighligherProps<any>>;
+
+export interface MenuProps<T> {
+    id: string;
+    className?: string;
+    emptyLabel?: string;
+    innerRef?: string;
+    maxHeight?: string;
+    style?: CSS.Properties;
+}
+
+export const Menu: React.ClassicComponentClass<MenuProps<any>>;
+
+export interface MenuItemProps<T> {
+    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<MenuItemProps<any>>;

types/react-bootstrap-typeahead/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "csstype": "^2.2.0"
+  }
+}

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..."
                 />
+                <Typeahead
+                    labelKey="name"
+                    multiple={multiple}
+                    options={options}
+                    maxHeight='300px'
+                    filterBy={(option, props) => (props.text.indexOf(option) !== -1) }
+                    placeholder="Choose a state..."
+                />
+                <Typeahead
+                    labelKey="name"
+                    multiple={multiple}
+                    options={options}
+                    maxHeight='300px'
+                    filterBy={(option, {text}) => (text.indexOf(option) !== -1) }
+                    placeholder="Choose a state..."
+                />
+                <Typeahead
+                    labelKey="name"
+                    options={options}
+                    placeholder="Choose a state..."
+                    renderMenuItemChildren={ (option, props, index) =>
+                        <Highlighter key="name" search={props.text}>
+                            {option.name} {index}
+                        </Highlighter>
+                    }
+                />
+                <Typeahead
+                    labelKey="name"
+                    options={options}
+                    placeholder="Choose a state...">
+                    <Menu id="menu-id">
+                    {options.map((o, idx) => (
+                      <MenuItem
+                        key={idx}
+                        option={o}
+                        position={idx}>
+                        {o.name}
+                      </MenuItem>
+                    ))}
+                  </Menu>
+                </Typeahead>
             </div>
         );
     }