Merge pull request #32729 from nossbigg/react-native-modal-filter-picker

Add typings for react-native-modal-filter-picker

types/react-native-modal-filter-picker/index.d.ts

@@ -0,0 +1,61 @@
+// Type definitions for react-native-modal-filter-picker 1.3
+// Project: https://github.com/hiddentao/react-native-modal-filter-picker#readme
+// Definitions by: Chang Yanwei <https://github.com/ywchang>
+//                 Cheng Gibson <https://github.com/nossbigg>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from "react";
+import {
+    StyleProp,
+    ViewStyle,
+    TextStyle,
+    ListView,
+    KeyboardAvoidingView,
+    ModalProps,
+    ListViewProps
+} from "react-native";
+
+export interface ModalFilterPickerOption {
+    label: string;
+    key: string;
+}
+
+export interface ModalFilterPickerProps<T extends ModalFilterPickerOption> {
+    options: T[];
+    onSelect: (key: string) => void;
+    onCancel: () => void;
+    placeholderText?: string;
+    placeholderTextColor?: string;
+    androidUnderlineColor?: string;
+    cancelButtonText?: string;
+    title?: string;
+    noResultsText?: string;
+    visible?: boolean;
+    showFilter?: boolean;
+    modal?: ModalProps;
+    selectedOption?: string;
+    listViewProps?: Partial<ListViewProps>;
+    renderOption?: (option: T, isSelected: boolean) => JSX.Element;
+    renderList?: () => JSX.Element;
+    renderCancelButton?: () => JSX.Element;
+    keyboardShouldPersistTaps?: "never" | "always" | "handle";
+    autoFocus?: boolean;
+
+    // styling props
+    overlayStyle?: StyleProp<KeyboardAvoidingView>;
+    listContainerStyle?: StyleProp<ViewStyle>;
+    filterTextInputContainerStyle?: StyleProp<ViewStyle>;
+    filterTextInputStyle?: StyleProp<TextStyle>;
+    cancelContainerStyle?: StyleProp<ViewStyle>;
+    cancelButtonStyle?: StyleProp<ViewStyle>;
+    cancelButtonTextStyle?: StyleProp<TextStyle>;
+    titleTextStyle?: StyleProp<TextStyle>;
+    optionTextStyle?: StyleProp<TextStyle>;
+}
+
+declare class ModalFilterPicker<
+    T extends ModalFilterPickerOption
+> extends React.Component<ModalFilterPickerProps<T>> {}
+
+export default ModalFilterPicker;

types/react-native-modal-filter-picker/react-native-modal-filter-picker-tests.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import ModalFilterPicker, {
+    ModalFilterPickerOption
+} from "react-native-modal-filter-picker";
+import { View, Button, Text } from "react-native";
+
+interface MyModalFilterPickerOption extends ModalFilterPickerOption {
+    customField: string;
+}
+
+const modalFilterPickerOptions: MyModalFilterPickerOption[] = [
+    {
+        label: "some-label-1",
+        key: "some-key-1",
+        customField: "some-customfield-1"
+    },
+    {
+        label: "some-label-2",
+        key: "some-key-2",
+        customField: "some-customfield-2"
+    }
+];
+
+const renderPicker = () => (
+    <ModalFilterPicker
+        options={modalFilterPickerOptions}
+        onSelect={key => {
+            console.log(key);
+        }}
+        onCancel={() => {}}
+        placeholderText="Filter..."
+        placeholderTextColor="#ccc"
+        androidUnderlineColor="rgba(0,0,0,0)"
+        cancelButtonText="Cancel"
+        title="some-title"
+        noResultsText="No matches"
+        visible
+        showFilter
+        modal={{ animated: true }}
+        selectedOption="some-option-key"
+        listViewProps={{ accessible: true }}
+        renderOption={(option, isSelected) => (
+            <View key={option.key}>
+                <Text>
+                    `${option.label} ${option.customField} ${isSelected}`
+                </Text>
+            </View>
+        )}
+        renderList={() => <View />}
+        renderCancelButton={() => <Button title="Cancel" onPress={() => {}} />}
+        keyboardShouldPersistTaps={"never"}
+        autoFocus={false}
+    />
+);
+
+const renderPickerWithRequiredPropsOnly = () => (
+    <ModalFilterPicker
+        options={modalFilterPickerOptions}
+        onSelect={key => {
+            console.log(key);
+        }}
+        onCancel={() => {}}
+    />
+);

types/react-native-modal-filter-picker/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": ["index.d.ts", "react-native-modal-filter-picker-tests.tsx"]
+}

types/react-native-modal-filter-picker/tslint.json

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