diff --git a/types/react-autocomplete/index.d.ts b/types/react-autocomplete/index.d.ts new file mode 100644 index 0000000000..2234f70c6a --- /dev/null +++ b/types/react-autocomplete/index.d.ts @@ -0,0 +1,147 @@ +// Type definitions for react-autocomplete 1.8 +// Project: https://github.com/reactjs/react-autocomplete +// Definitions by: Lee Standen +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.6 + +import { Component, ChangeEvent, ReactNode, CSSProperties, HTMLProps } from 'react'; + +export = Autocomplete; +declare namespace Autocomplete { + interface Props { + /** + * The items to display in the dropdown menu + */ + items: any[]; + /** + * The value to display in the input field + */ + value: any; + /** + * Arguments: `event: Event, value: String` + * + * Invoked every time the user changes the input's value. + */ + onChange?: (e: ChangeEvent, value: string) => void; + /** + * Arguments: `value: String, item: Any` + * + * Invoked when the user selects an item from the dropdown menu. + */ + onSelect?: (value: string, item: any) => void; + /** + * Arguments: `item: Any, value: String` + * + * Invoked for each entry in `items` and its return value is used to + * determine whether or not it should be displayed in the dropdown menu. + * By default all items are always rendered. + */ + shouldItemRender?: (item: any, value: string) => boolean; + /** + * Arguments: `item: Any` + * + * Invoked when attempting to select an item. The return value is used to + * determine whether the item should be selectable or not. + * By default all items are selectable. + */ + isItemSelectable?: (item: any) => boolean; + /** + * Arguments: `itemA: Any, itemB: Any, value: String` + * + * The function which is used to sort `items` before display. + */ + sortItems?: (a: any, b: any, value: string) => number; + /** + * Arguments: `item: Any` + * + * Used to read the display value from each entry in `items`. + */ + getItemValue: (item: any) => string; + /** + * Arguments: `item: Any, isHighlighted: Boolean, styles: Object` + * + * Invoked for each entry in `items` that also passes `shouldItemRender` to + * generate the render tree for each item in the dropdown menu. `styles` is + * an optional set of styles that can be applied to improve the look/feel + * of the items in the dropdown menu. + */ + renderItem: (item: any) => ReactNode; + /** + * Arguments: `items: Array, value: String, styles: Object` + * + * Invoked to generate the render tree for the dropdown menu. Ensure the + * returned tree includes every entry in `items` or else the highlight order + * and keyboard navigation logic will break. `styles` will contain + * { top, left, minWidth } which are the coordinates of the top-left corner + * and the width of the dropdown menu. + */ + renderMenu?: ( + items: any[], + value: string, + styles: CSSProperties, + ) => ReactNode; + /** + * Styles that are applied to the dropdown menu in the default `renderMenu` + * implementation. If you override `renderMenu` and you want to use + * `menuStyle` you must manually apply them (`this.props.menuStyle`). + */ + menuStyle?: CSSProperties; + /** + * Arguments: `props: Object` + * + * Invoked to generate the input element. The `props` argument is the result + * of merging `props.inputProps` with a selection of props that are required + * both for functionality and accessibility. At the very least you need to + * apply `props.ref` and all `props.on` event handlers. Failing to do + * this will cause `Autocomplete` to behave unexpectedly. + */ + renderInput?: (props: HTMLProps) => ReactNode; + /** + * Props passed to `props.renderInput`. By default these props will be + * applied to the `` element rendered by `Autocomplete`, unless you + * have specified a custom value for `props.renderInput`. Any properties + * supported by `HTMLInputElement` can be specified, apart from the + * following which are set by `Autocomplete`: value, autoComplete, role, + * aria-autocomplete. `inputProps` is commonly used for (but not limited to) + * placeholder, event handlers (onFocus, onBlur, etc.), autoFocus, etc.. + */ + inputProps?: HTMLProps; + /** + * Props that are applied to the element which wraps the `` and + * dropdown menu elements rendered by `Autocomplete`. + */ + wrapperProps?: HTMLProps; + /** + * This is a shorthand for `wrapperProps={{ style: }}`. + * Note that `wrapperStyle` is applied before `wrapperProps`, so the latter + * will win if it contains a `style` entry. + */ + wrapperStyle?: CSSProperties; + /** + * Whether or not to automatically highlight the top match in the dropdown + * menu. + */ + autoHighlight?: boolean; + /** + * Whether or not to automatically select the highlighted item when the + * `` loses focus. + */ + selectOnBlur?: boolean; + /** + * Arguments: `isOpen: Boolean` + * + * Invoked every time the dropdown menu's visibility changes (i.e. every + * time it is displayed/hidden). + */ + onMenuVisibilityChange?: (isOpen: boolean) => void; + /** + * Used to override the internal logic which displays/hides the dropdown + * menu. This is useful if you want to force a certain state based on your + * UX/business logic. Use it together with `onMenuVisibilityChange` for + * fine-grained control over the dropdown menu dynamics. + */ + open?: boolean; + debug?: boolean; + } +} +declare class Autocomplete extends Component {} diff --git a/types/react-autocomplete/react-autocomplete-tests.tsx b/types/react-autocomplete/react-autocomplete-tests.tsx new file mode 100644 index 0000000000..36834b46d1 --- /dev/null +++ b/types/react-autocomplete/react-autocomplete-tests.tsx @@ -0,0 +1,18 @@ +import * as Autocomplete from 'react-autocomplete'; + +import * as React from 'react'; +import { render } from 'react-dom'; + +declare const container: Element; + +const items = ['hello', 'world']; + +render( + item} + renderItem={(item) =>
{item}
} + value={items[0]} + />, + container, +); diff --git a/types/react-autocomplete/tsconfig.json b/types/react-autocomplete/tsconfig.json new file mode 100644 index 0000000000..c30d8089b2 --- /dev/null +++ b/types/react-autocomplete/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "dom"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": ["index.d.ts", "react-autocomplete-tests.tsx"] +} diff --git a/types/react-autocomplete/tslint.json b/types/react-autocomplete/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-autocomplete/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }