Merge pull request #534 from hossein-zare/dev-5.x

v5.4.0

Author: hossein-zare

README.md

@@ -6,6 +6,8 @@
     <img src="https://user-images.githubusercontent.com/56504893/116789839-2c651280-aac6-11eb-99e0-b43b608ed8c7.png" width="270" alt="Screenshot">
 </p>
 
+The example in the screenshots: https://snack.expo.dev/8mHmLfcZf
+
 # Documentation
 **The documentation has been moved to https://hossein-zare.github.io/react-native-dropdown-picker-website/**
 

index.d.ts

@@ -1,5 +1,5 @@
 declare module 'react-native-dropdown-picker' {
-  import type { ComponentType, SetStateAction, Dispatch } from 'react';
+  import type { Dispatch, PropsWithoutRef } from 'react';
   import type {
     FlatListProps,
     LayoutChangeEvent,
@@ -14,13 +14,16 @@ declare module 'react-native-dropdown-picker' {
     ViewStyle,
   } from 'react-native';
 
+  type SetStateCallback<S> = ((prevState: S) => S);
+  type SetStateValue<S> = ((prevState: S) => S);
+
   export type ValueType = string | number | boolean;
 
-  export type ItemType = {
+  export type ItemType<T> = {
     label?: string;
-    value?: ValueType;
+    value?: T;
     icon?: () => void;
-    parent?: ValueType;
+    parent?: T;
     selectable?: boolean;
     disabled?: boolean;
     testID?: string;
@@ -65,18 +68,23 @@ declare module 'react-native-dropdown-picker' {
     | 'FA'
     | 'TR'
     | 'RU'
-    | 'ES';
+    | 'ES'
+    | 'ID'
+    | 'IT';
 
   export interface TranslationInterface {
     PLACEHOLDER: string;
     SEARCH_PLACEHOLDER: string;
-    SELECTED_ITEMS_COUNT_TEXT: string;
+    SELECTED_ITEMS_COUNT_TEXT: string | {
+      [key in (number | "n")]: string;
+    };
     NOTHING_TO_SHOW: string;
   }
 
-  export interface RenderBadgeItemPropsInterface {
+  export interface RenderBadgeItemPropsInterface<T> {
     label: string;
-    value: ValueType;
+    value: T;
+    props: TouchableOpacityProps;
     IconComponent: () => JSX.Element;
     textStyle: StyleProp<TextStyle>;
     badgeStyle: StyleProp<ViewStyle>;
@@ -85,17 +93,17 @@ declare module 'react-native-dropdown-picker' {
     getBadgeColor: (value: string) => string;
     getBadgeDotColor: (value: string) => string;
     showBadgeDot: boolean;
-    onPress: (value: ValueType) => void;
+    onPress: (value: T) => void;
     rtl: boolean;
     THEME: ThemeType;
   }
 
-  export interface RenderListItemPropsInterface {
+  export interface RenderListItemPropsInterface<T> {
     rtl: boolean;
-    item: ItemType;
+    item: ItemType<T>;
     label: string;
-    value: ValueType;
-    parent: ValueType;
+    value: T;
+    parent: T;
     selectable: boolean;
     disabled: boolean;
     props: ViewProps;
@@ -118,8 +126,8 @@ declare module 'react-native-dropdown-picker' {
     containerStyle: StyleProp<ViewStyle>;
     labelStyle: StyleProp<TextStyle>;
     categorySelectable: boolean;
-    onPress: () => void;
-    setPosition: (value: ValueType, y: number) => void;
+    onPress: (value: T) => void;
+    setPosition: (value: T, y: number) => void;
     theme: ThemeNameType;
     THEME: ThemeType;
   }
@@ -143,8 +151,8 @@ declare module 'react-native-dropdown-picker' {
   export type ThemeNameType = 'DEFAULT' | 'LIGHT' | 'DARK';
   export type ThemeType = object;
 
-  interface DropDownPickerBaseProps {
-    items: ItemType[];
+  interface DropDownPickerBaseProps<T> {
+    items: ItemType<T>[];
     open: boolean;
     placeholder?: string;
     closeAfterSelecting?: boolean;
@@ -198,8 +206,8 @@ declare module 'react-native-dropdown-picker' {
     mode?: ModeType;
     itemKey?: string;
     maxHeight?: number;
-    renderBadgeItem?: (props: RenderBadgeItemPropsInterface) => JSX.Element;
-    renderListItem?: (props: RenderListItemPropsInterface) => JSX.Element;
+    renderBadgeItem?: (props: RenderBadgeItemPropsInterface<T>) => JSX.Element;
+    renderListItem?: (props: RenderListItemPropsInterface<T>) => JSX.Element;
     itemSeparator?: boolean;
     bottomOffset?: number;
     badgeColors?: string[] | string;
@@ -229,8 +237,9 @@ declare module 'react-native-dropdown-picker' {
     activityIndicatorColor?: string;
     props?: TouchableOpacityProps;
     itemProps?: TouchableOpacityProps;
+    badgeProps?: TouchableOpacityProps;
     modalProps?: ModalProps;
-    flatListProps?: Partial<FlatListProps<ItemType>>;
+    flatListProps?: Partial<FlatListProps<ItemType<T>>>;
     scrollViewProps?: ScrollViewProps;
     searchTextInputProps?: TextInputProps;
     modalTitle?: string;
@@ -239,15 +248,16 @@ declare module 'react-native-dropdown-picker' {
     min?: number;
     max?: number;
     addCustomItem?: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
-    setItems?: Dispatch<SetStateAction<any[]>>;
+    setOpen: Dispatch<SetStateValue<boolean>>;
+    setItems?: Dispatch<SetStateCallback<any[]>>;
     disableBorderRadius?: boolean;
     containerProps?: ViewProps;
     onLayout?: (e: LayoutChangeEvent) => void;
     onPress?: (open: boolean) => void;
     onOpen?: () => void;
     onClose?: () => void;
     onChangeSearchText?: (text: string) => void;
+    onDirectionChanged?: (direction: DropDownDirectionType) => void;
     zIndex?: number;
     zIndexInverse?: number;
     disableLocalSearch?: boolean;
@@ -256,22 +266,24 @@ declare module 'react-native-dropdown-picker' {
     rtl?: boolean;
     testID?: string;
     closeOnBackPressed?: boolean;
+    hideSelectedItemIcon?: boolean;
+    extendableBadgeContainer?: boolean;
   }
 
-  interface DropDownPickerSingleProps {
+  interface DropDownPickerSingleProps<T> {
     multiple?: false;
-    onChangeValue?: (value: ValueType | null) => void;
-    onSelectItem?: (item: ItemType) => void;
-    setValue: Dispatch<SetStateAction<ValueType | null>>;
-    value: ValueType | null;
+    onChangeValue?: (value: T | null) => void;
+    onSelectItem?: (item: ItemType<T>) => void;
+    setValue: Dispatch<SetStateCallback<T | null | any>>;
+    value: T | null;
   }
 
-  interface DropDownPickerMultipleProps {
+  interface DropDownPickerMultipleProps<T> {
     multiple: true;
-    onChangeValue?: (value: ValueType[] | null) => void;
-    onSelectItem?: (items: ItemType[]) => void;
-    setValue: Dispatch<SetStateAction<ValueType[] | null>>;
-    value: ValueType[] | null;
+    onChangeValue?: (value: T[] | null) => void;
+    onSelectItem?: (items: ItemType<T>[]) => void;
+    setValue: Dispatch<SetStateCallback<T[] | null | any>>;
+    value: T[] | null;
   }
 
   interface DropDownPickerInterface {
@@ -297,13 +309,16 @@ declare module 'react-native-dropdown-picker' {
     ) => void;
   }
 
-  export type DropDownPickerProps = (
-    | DropDownPickerSingleProps
-    | DropDownPickerMultipleProps
+  export type DropDownPickerProps<T> = (
+    | DropDownPickerSingleProps<T>
+    | DropDownPickerMultipleProps<T>
   ) &
-    DropDownPickerBaseProps;
+    DropDownPickerBaseProps<T>;
 
-  const DropDownPicker: ComponentType<DropDownPickerProps> &
+  const DropDownPicker: (<T extends ValueType>(
+    props: PropsWithoutRef<DropDownPickerProps<T>>,
+  ) => React.ReactElement) &
     DropDownPickerInterface;
+
   export default DropDownPicker;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dropdown-picker",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
   "keywords": [
     "picker",