react-native-autocomplete-input types added (#25617)

This commit is contained in:
Ifiok Jr 2018-05-08 18:56:54 +01:00 committed by Sheetal Nandi
parent 162624a97f
commit 44e58864bd
4 changed files with 144 additions and 0 deletions

View File

@ -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.6
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>> {}

View File

@ -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>
)}
/>);
}
}

View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6"
],
"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"
]
}

View File

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