From 4dca5ecae9963eaed47ac07ff53069629e1ac496 Mon Sep 17 00:00:00 2001 From: Matthew Elphick Date: Tue, 8 Oct 2019 20:42:32 +0100 Subject: [PATCH] feat: Add types for react-native-phone-input (#38937) * feat: Add types for react-native-phone-input * fix: Add missing onPressCancel, onPressConfirm, blur * style: Commit formatting from pre-commit hook --- types/react-native-phone-input/index.d.ts | 168 ++++++++++++++++++ .../react-native-phone-input-tests.tsx | 50 ++++++ types/react-native-phone-input/tsconfig.json | 24 +++ types/react-native-phone-input/tslint.json | 1 + 4 files changed, 243 insertions(+) create mode 100644 types/react-native-phone-input/index.d.ts create mode 100644 types/react-native-phone-input/react-native-phone-input-tests.tsx create mode 100644 types/react-native-phone-input/tsconfig.json create mode 100644 types/react-native-phone-input/tslint.json diff --git a/types/react-native-phone-input/index.d.ts b/types/react-native-phone-input/index.d.ts new file mode 100644 index 0000000000..9d641f8043 --- /dev/null +++ b/types/react-native-phone-input/index.d.ts @@ -0,0 +1,168 @@ +// Type definitions for react-native-phone-input 0.2 +// Project: https://github.com/thegamenicorus/react-native-phone-input +// Definitions by: Matthew Elphick +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.9 + +import * as React from 'react'; +import { StyleProp, ViewStyle as ViewStyleRaw, TextStyle as TextStyleRaw, TextInput, ImageRequireSource } from 'react-native'; + +export type ViewStyle = StyleProp; +export type TextStyle = StyleProp; + +export interface CountriesListItem { + name: string; + iso2: string; + dialCode: string; + priority: number; + areaCodes: ReadonlyArray | null; +} + +export interface PickerData { + key: number; + image: ImageRequireSource; + label: CountriesListItem['name']; + dialCode: CountriesListItem['dialCode']; + iso2: CountriesListItem['iso2']; +} + +export interface ReactNativePhoneInputProps { + /** + * Initial selected country + */ + initialCountry?: string; + /** + * Allow user input 0 after country code + */ + allowZeroAfterCountryCode?: boolean; + /** + * If true, disable all interaction of this component + */ + disabled?: boolean; + /** + * Initial phone number + */ + value?: string; + /** + * Custom styles to be applied if supplied + */ + style?: ViewStyle; + /** + * Custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}} + */ + flagStyle?: ViewStyle; + /** + * Custom styles for phone number text input eg. {{fontSize: 14}} + */ + textStyle?: TextStyle; + /** + * Properties for phone number text input eg. {{placeholder: 'Telephone number'}} + */ + textProps?: React.ComponentProps; + /** + * The input component to use + */ + textComponent?: TextComponentType; + /** + * Distance between flag and phone number + */ + offset?: number; + /** + * Set button color of country picker + */ + pickerButtonColor?: string; + /** + * Set background color of country picker + */ + pickerBackgroundColor?: string; + /** + * Custom styles for text in country picker eg. {{fontSize: 14}} + */ + pickerItemStyle?: ViewStyle; + /** + * Cancel word + */ + cancelText?: string; + /** + * Confirm word + */ + confirmText?: string; + /** + * Custom styles for country picker button + */ + buttonTextStyle?: TextStyle; + /** + * Function to be invoked when phone number is changed + */ + onChangePhoneNumber?: (number: number) => void; + /** + * Function to be invoked when country picker is selected + */ + onSelectCountry?: (iso2: string) => void; + /** + * Function to be invoked when press on flag image + */ + onPressFlag?: () => void; + /** + * Custom countries list + */ + countriesList?: ReadonlyArray; + /** + * Function to be invoked when cancelling country picker selection + */ + onPressCancel?: () => void; + /** + * Function to be invoked when confirming country picker selection + */ + onPressConfirm?: () => void; +} + +export default class ReactNativePhoneInput< + TextComponentType extends React.ComponentType = typeof TextInput + > extends React.Component> { + picker?: React.Ref>; + /** + * Return true if current phone number is valid + */ + isValidNumber: () => boolean; + /** + * Return true type of current phone number + */ + getNumberType: () => string; + /** + * Return current phone number + */ + getValue: () => string; + /** + * Return flag image + */ + getFlag: (iso2: string) => ImageRequireSource; + /** + * Return country object in country picker + */ + getAllCountries: () => CountriesListItem; + /** + * Return country object with flag image + */ + getPickerData: () => PickerData; + /** + * Focus the phone input + */ + focus: () => void; + /** + * Blur the phone input + */ + blur: () => void; + /** + * Set phone input to specific country + */ + selectCountry: (iso2: string) => void; + /** + * Return country dial code of current phone number + */ + getCountryCode: () => string; + /** + * Return country iso code of current phone number + */ + getISOCode: () => string; + } diff --git a/types/react-native-phone-input/react-native-phone-input-tests.tsx b/types/react-native-phone-input/react-native-phone-input-tests.tsx new file mode 100644 index 0000000000..f1a0d92f42 --- /dev/null +++ b/types/react-native-phone-input/react-native-phone-input-tests.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { Text } from 'react-native'; +import ReactNativePhoneInput from 'react-native-phone-input'; + +const test: React.SFC = () => ( + + initialCountry={'us'} + allowZeroAfterCountryCode={false} + disabled={false} + value={'+440000000000'} + style={{ + backgroundColor: 'green', + }} + flagStyle={{ + backgroundColor: 'blue', + }} + textStyle={{ + color: 'red', + }} + textProps={{ + maxFontSizeMultiplier: 2, + }} + textComponent={Text} + offset={10} + pickerButtonColor={'#FFFFFF'} + pickerBackgroundColor={'#000000'} + pickerItemStyle={{}} + cancelText={'Cancel'} + confirmText={'Confirm'} + buttonTextStyle={{ + color: 'red', + }} + onChangePhoneNumber={newPhoneNumber => { + console.info('New phone number', newPhoneNumber); + }} + onSelectCountry={selected => { + console.info('Selected country', selected); + }} + onPressFlag={() => { + console.info('Flag pressed'); + }} + onPressCancel={() => { + console.info('Selection cancelled'); + }} + onPressConfirm={() => { + console.info('Selection confirmed'); + }} + countriesList={[]} + /> +); diff --git a/types/react-native-phone-input/tsconfig.json b/types/react-native-phone-input/tsconfig.json new file mode 100644 index 0000000000..b0f1b8e175 --- /dev/null +++ b/types/react-native-phone-input/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react-native" + }, + "files": [ + "index.d.ts", + "react-native-phone-input-tests.tsx" + ] +} \ No newline at end of file diff --git a/types/react-native-phone-input/tslint.json b/types/react-native-phone-input/tslint.json new file mode 100644 index 0000000000..2750cc0197 --- /dev/null +++ b/types/react-native-phone-input/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } \ No newline at end of file