[react-native-autocomplete-input] Add type definition for v4 (#34929)

The new major release (v4) has just been released. Release note: https://github.com/mrlaessig/react-native-autocomplete-input/releases/tag/v4.0.0

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. <https://github.com/ifiokjr>
+//                 Kanitkorn Sujautra <https://github.com/lukyth>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -28,7 +29,7 @@ export interface AutocompleteProps<T> 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<T> 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

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 }) => (
                 <TouchableOpacity onPress={() => this.setState({ query: item.query })}>
                     <Text>{item.value}</Text>
                 </TouchableOpacity>

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. <https://github.com/ifiokjr>
+// 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<T> extends TextInputProperties {
+    /**
+     * style
+     * These styles will be applied to the container which surrounds the autocomplete component.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * 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<ViewStyle>;
+
+    /**
+     * style
+     * These styles will be applied to the container which surrounds the result list.
+     */
+    listContainerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * style
+     * These style will be applied to the result list.
+     */
+    listStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * 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<T> extends Component<AutocompleteProps<T>> {}

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 (<Autocomplete
+            data={data}
+            defaultValue={query}
+            onChangeText={text => this.setState({ query: text })}
+            renderItem={(item: Item) => (
+                <TouchableOpacity onPress={() => this.setState({ query: item.query })}>
+                    <Text>{item.value}</Text>
+                </TouchableOpacity>
+            )}
+        />);
+    }
+}

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"
+    ]
+}

types/react-native-autocomplete-input/v3/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }