diff --git a/types/react-native-autocomplete-input/index.d.ts b/types/react-native-autocomplete-input/index.d.ts index 9e39a47241..df5ab5e507 100644 --- a/types/react-native-autocomplete-input/index.d.ts +++ b/types/react-native-autocomplete-input/index.d.ts @@ -1,6 +1,7 @@ -// Type definitions for react-native-autocomplete-input 3.5 +// Type definitions for react-native-autocomplete-input 4.0 // Project: https://github.com/l-urence/react-native-autocomplete-input#readme // Definitions by: Ifiok Jr. +// Kanitkorn Sujautra // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -28,7 +29,7 @@ export interface AutocompleteProps extends TextInputProperties { /** * array - * An array with suggestion items to be rendered in renderItem(item). Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. + * An array with suggestion items to be rendered in renderItem({ item, index }). Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. */ data: T[]; @@ -66,7 +67,7 @@ export interface AutocompleteProps extends TextInputProperties { * function * renderItem will be called to render the data objects which will be displayed in the result view below the text input. */ - renderItem(item: T): ReactNode; + renderItem(itemWithIndex: { item: T; index: number }): ReactNode; /** * function diff --git a/types/react-native-autocomplete-input/react-native-autocomplete-input-tests.tsx b/types/react-native-autocomplete-input/react-native-autocomplete-input-tests.tsx index b9ddaa3ae2..36dd6b516f 100644 --- a/types/react-native-autocomplete-input/react-native-autocomplete-input-tests.tsx +++ b/types/react-native-autocomplete-input/react-native-autocomplete-input-tests.tsx @@ -25,7 +25,7 @@ class AutocompleteExample extends React.Component<{}, {query: string}> { data={data} defaultValue={query} onChangeText={text => this.setState({ query: text })} - renderItem={(item: Item) => ( + renderItem={({ item }) => ( this.setState({ query: item.query })}> {item.value} diff --git a/types/react-native-autocomplete-input/v3/index.d.ts b/types/react-native-autocomplete-input/v3/index.d.ts new file mode 100644 index 0000000000..9e39a47241 --- /dev/null +++ b/types/react-native-autocomplete-input/v3/index.d.ts @@ -0,0 +1,84 @@ +// Type definitions for react-native-autocomplete-input 3.5 +// Project: https://github.com/l-urence/react-native-autocomplete-input#readme +// Definitions by: Ifiok Jr. +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import { Component, ReactNode } from 'react'; +import { + GestureResponderHandlers, + ListViewProperties, + StyleProp, + TextInputProperties, + ViewStyle, +} from 'react-native'; + +export interface AutocompleteProps extends TextInputProperties { + /** + * style + * These styles will be applied to the container which surrounds the autocomplete component. + */ + containerStyle?: StyleProp; + + /** + * bool + * Set to true to hide the suggestion list. + */ + hideResults?: boolean; + + /** + * array + * An array with suggestion items to be rendered in renderItem(item). Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. + */ + data: T[]; + + /** + * style + * These styles will be applied to the container which surrounds the textInput component. + */ + inputContainerStyle?: StyleProp; + + /** + * style + * These styles will be applied to the container which surrounds the result list. + */ + listContainerStyle?: StyleProp; + + /** + * style + * These style will be applied to the result list. + */ + listStyle?: StyleProp; + + /** + * function + * onShowResult will be called when the autocomplete suggestions appear or disappear. + */ + onShowResult?(showResults: boolean): void; + + /** + * function + * onStartShouldSetResponderCapture will be passed to the result list view container (onStartShouldSetResponderCapture). + */ + onStartShouldSetResponderCapture?: GestureResponderHandlers['onStartShouldSetResponderCapture']; + + /** + * function + * renderItem will be called to render the data objects which will be displayed in the result view below the text input. + */ + renderItem(item: T): ReactNode; + + /** + * function + * renderSeparator will be called to render the list separators which will be displayed between the list elements in the result view below the text input. + */ + renderSeparator?: ListViewProperties['renderSeparator']; + + /** + * function + * render custom TextInput. All props passed to this function. + */ + renderTextInput?(props: TextInputProperties): ReactNode; +} + +export default class Autocomplete extends Component> {} diff --git a/types/react-native-autocomplete-input/v3/react-native-autocomplete-input-tests.tsx b/types/react-native-autocomplete-input/v3/react-native-autocomplete-input-tests.tsx new file mode 100644 index 0000000000..b9ddaa3ae2 --- /dev/null +++ b/types/react-native-autocomplete-input/v3/react-native-autocomplete-input-tests.tsx @@ -0,0 +1,35 @@ +import Autocomplete from 'react-native-autocomplete-input'; +import * as React from 'react'; +import { + StyleSheet, + Text, + TouchableOpacity, + View +} from 'react-native'; + +interface Item { query: string; value: string; } + +class AutocompleteExample extends React.Component<{}, {query: string}> { + state = { + query: '' + }; + + filterData(query: string): Item[] { + return [{query: '', value: 'here i am'}]; + } + + render() { + const { query } = this.state; + const data = this.filterData(query); + return ( this.setState({ query: text })} + renderItem={(item: Item) => ( + this.setState({ query: item.query })}> + {item.value} + + )} + />); + } +} diff --git a/types/react-native-autocomplete-input/v3/tsconfig.json b/types/react-native-autocomplete-input/v3/tsconfig.json new file mode 100644 index 0000000000..7af3156f6c --- /dev/null +++ b/types/react-native-autocomplete-input/v3/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "paths": { + "react-native-autocomplete-input": ["react-native-autocomplete-input/v3"] + }, + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../../", + "typeRoots": [ + "../../" + ], + "jsx": "react", + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-native-autocomplete-input-tests.tsx" + ] +} diff --git a/types/react-native-autocomplete-input/v3/tslint.json b/types/react-native-autocomplete-input/v3/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-autocomplete-input/v3/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }