diff --git a/types/react-native-material-dropdown/index.d.ts b/types/react-native-material-dropdown/index.d.ts new file mode 100644 index 0000000000..4ce8f5ea1c --- /dev/null +++ b/types/react-native-material-dropdown/index.d.ts @@ -0,0 +1,157 @@ +// Type definitions for react-native-material-dropdown 0.11 +// Project: https://github.com/n4kz/react-native-material-dropdown +// Definitions by: Jaydeep +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from 'react'; +import { LayoutChangeEvent, StyleProp, TextStyle, TouchableWithoutFeedbackProps, ViewStyle } from 'react-native'; + +/** + * Dropdown component props + */ +export interface DropDownProps extends TouchableWithoutFeedbackProps { + /** Dropdown data items */ + data: DropDownData[]; + /** Component disabled or not. (default: false) */ + disabled?: boolean; + /** Selected value */ + value?: string | number; + /** Label to be shown for dropdown */ + label?: string; + /** Enable RTL layout */ + absoluteRTLLayout?: boolean; + /** Provide Dropdown top-left position */ + dropdownOffset?: DropDownOffset; + /** Provide Dropdown margins */ + dropdownMargins?: DropDownMargins; + /** Provide dropdown position (dynamic if undefined) */ + dropdownPosition?: number; + /** Provide Ripple color */ + rippleColor?: string; + /** Whether ripple be centered or not (default: false) */ + rippleCentered?: boolean; + /** Whether ripple rendered in sequential order (default: false) */ + rippleSequential?: boolean; + /** Ripple insets */ + rippleInsets?: DropDownInsets; + /** Ripple opacity (default: 0.54) */ + rippleOpacity?: number; + /** Shade opacity (default: 0.12) */ + shadeOpacity?: number; + /** Ripple duration (defailt: 400) */ + rippleDuration?: number; + /** Animation duration (default: 225) */ + animationDuration?: number; + /** Set font size of dropdown items (default: 16) */ + fontSize?: number; + /** Set Text color (default: rgba(0, 0, 0, .87)) */ + textColor?: string; + /** Set Item color (default: rgba(0, 0, 0, .54)) */ + itemColor?: string; + /** Set selected item color */ + selectedItemColor?: string; + /** Set disabled item color */ + disabledItemColor?: string; + /** Set base color (default: rgba(0, 0, 0, .38)) */ + baseColor?: string; + /** Set Item text style. */ + itemTextStyle?: StyleProp; + /** Set Item count (default: 4) */ + itemCount?: number; + /** Set Item padding (default: 8) */ + itemPadding?: number; + /** Set container styles */ + containerStyle?: StyleProp; + /** Set overlay styles */ + overlayStyle?: StyleProp; + /** Set picker styles */ + pickerStyle?: StyleProp; + /** Specify which orientations are supported. (default: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']) */ + supportedOrientations?: string[]; + /** Use native driver (default: false) */ + useNativeDriver?: boolean; + /** Hitslop insets (default: { top: 6, right: 4, bottom: 6, left: 4 }) */ + hitSlop?: DropDownInsets; + + /** Value extractor function. Extract value from item. */ + valueExtractor?(item: DropDownData, index: number): string; + /** Label extractor function. Extract label from item. */ + labelExtractor?(item: DropDownData, index: number): string; + /** Props extractor function. Extract props from item. */ + propsExtractor?(item: DropDownData, index: number): Partial; + + /** Event: When layout changes */ + onLayout?(event: LayoutChangeEvent): void; + /** Event: When dropdown opens */ + onFocus?(): void; + /** Event: When focus lost from dropdown */ + onBlur?(): void; + /** Event: When change selected item */ + onChangeText?(value: string, index: number, data: DropDownData): void; + + /** Render base component */ + renderBase?(props: RenderBaseProps): JSX.Element; + /** Render text field accessory */ + renderAccessory?(): JSX.Element; +} + +/** + * Dropdown data item + */ +export interface DropDownData { + /** Value of item */ + value: string; + /** Label to be shown */ + label?: string; + /** Props for this item */ + props?: Partial; +} + +/** + * Dropdown offset position + */ +export interface DropDownOffset { + /** Top offset */ + top: number; + /** Left offset */ + left: number; +} + +/** + * Dropdown margins + */ +export interface DropDownMargins { + /** Minimum value */ + min: number; + /** Maximum value */ + max: number; +} + +/** + * Insets + */ +export interface DropDownInsets { + /** Top */ + top: number; + /** Right */ + right: number; + /** Bottom */ + bottom: number; + /** Left */ + left: number; +} + +/** + * Render base function props + */ +export interface RenderBaseProps extends DropDownProps { + /** Title of dropdown */ + title: string; +} + +/** + * React-native material dropdown component. + * Material dropdown with consistent behaviour on iOS and Android + */ +export class Dropdown extends React.PureComponent {} diff --git a/types/react-native-material-dropdown/react-native-material-dropdown-tests.tsx b/types/react-native-material-dropdown/react-native-material-dropdown-tests.tsx new file mode 100644 index 0000000000..4402e91a96 --- /dev/null +++ b/types/react-native-material-dropdown/react-native-material-dropdown-tests.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { Dropdown, DropDownData, RenderBaseProps } from 'react-native-material-dropdown'; +import { LayoutChangeEvent, LayoutRectangle, Text, View } from 'react-native'; + +interface DropdownTestProps { + title: string; +} + +class DropdownTest extends React.Component { + private layout: LayoutRectangle; + private isFocused: boolean; + private curText: string; + + render(): JSX.Element { + const dropdownData: DropDownData[] = [ + { + label: 'Apple', + value: 'apple' + }, + { + label: 'Orange', + value: 'orange' + }, + { + label: 'Peach', + value: 'peach', + props: { disabled: true }, + } + ]; + + return ( +
+ {this.props.title} + item.props ? item.props : {}} + onLayout={(event: LayoutChangeEvent) => this.layout = event.nativeEvent.layout} + onFocus={() => this.isFocused = true} + onBlur={() => this.isFocused = false} + onChangeText={(value: string) => this.curText = value} + /> + + {props.title}} + /> +
+ ); + } +} + +export default DropdownTest; diff --git a/types/react-native-material-dropdown/tsconfig.json b/types/react-native-material-dropdown/tsconfig.json new file mode 100644 index 0000000000..8896e3934c --- /dev/null +++ b/types/react-native-material-dropdown/tsconfig.json @@ -0,0 +1,24 @@ +{ + "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-material-dropdown-tests.tsx" + ] +} \ No newline at end of file diff --git a/types/react-native-material-dropdown/tslint.json b/types/react-native-material-dropdown/tslint.json new file mode 100644 index 0000000000..30a1bdde2e --- /dev/null +++ b/types/react-native-material-dropdown/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +} \ No newline at end of file