From 33dd08865018fa59b82eb1ce58d15a8022fb432c Mon Sep 17 00:00:00 2001 From: salopeklm <90268902+salopeklm@users.noreply.github.com> Date: Mon, 8 Nov 2021 15:28:59 -0500 Subject: [PATCH 01/26] Added testID support for the picker --- src/components/Picker.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Picker.js b/src/components/Picker.js index 8ad11bf8..30077c74 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -151,7 +151,8 @@ function Picker({ rtl = false, dropDownDirection = DROPDOWN_DIRECTION.DEFAULT, disableLocalSearch = false, - theme = THEMES.DEFAULT + theme = THEMES.DEFAULT, + testID = {testID} }) { const [necessaryItems, setNecessaryItems] = useState([]); const [searchText, setSearchText] = useState(''); @@ -1686,7 +1687,7 @@ function Picker({ return ( - + {_BodyComponent} {_ArrowComponent} @@ -1701,4 +1702,4 @@ const styles = StyleSheet.create({ } }); -export default memo(Picker); \ No newline at end of file +export default memo(Picker); From 619162fcd3048f1474d26a82ea06f239b66c7185 Mon Sep 17 00:00:00 2001 From: salopeklm <90268902+salopeklm@users.noreply.github.com> Date: Tue, 9 Nov 2021 12:00:29 -0500 Subject: [PATCH 02/26] Added testID to dropdownpicker props --- index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 49c7256c..b25d928e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -238,6 +238,7 @@ declare module "react-native-dropdown-picker" { dropDownDirection?: DropDownDirectionType; theme?: ThemeNameType; rtl?: boolean; + testId: string; }; interface DropDownPickerInterface { @@ -259,4 +260,4 @@ declare module "react-native-dropdown-picker" { const DropDownPicker: ComponentType & DropDownPickerInterface; export default DropDownPicker; - } \ No newline at end of file + } From 5530fde5923d8ff087a76b8c2717e187c472299a Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Wed, 10 Nov 2021 00:43:30 +0330 Subject: [PATCH 03/26] Update index.d.ts I changed the prop to testID (optional). --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index b25d928e..69aaf8de 100644 --- a/index.d.ts +++ b/index.d.ts @@ -238,7 +238,7 @@ declare module "react-native-dropdown-picker" { dropDownDirection?: DropDownDirectionType; theme?: ThemeNameType; rtl?: boolean; - testId: string; + testID?: string; }; interface DropDownPickerInterface { From 10d63c8c62d582faea59696df6275bb2674bf89b Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Wed, 10 Nov 2021 00:45:20 +0330 Subject: [PATCH 04/26] Update Picker.js --- src/components/Picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker.js b/src/components/Picker.js index 30077c74..243a7187 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -152,7 +152,7 @@ function Picker({ dropDownDirection = DROPDOWN_DIRECTION.DEFAULT, disableLocalSearch = false, theme = THEMES.DEFAULT, - testID = {testID} + testID }) { const [necessaryItems, setNecessaryItems] = useState([]); const [searchText, setSearchText] = useState(''); From ba3de18ab51f2604724a983330a4a077b88e32d6 Mon Sep 17 00:00:00 2001 From: blizzardnya Date: Wed, 10 Nov 2021 13:07:47 +0300 Subject: [PATCH 05/26] Added russian translation to component --- src/constants/index.js | 3 ++- src/translations/index.js | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/constants/index.js b/src/constants/index.js index 0679f228..b4b736aa 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -41,7 +41,8 @@ export const LANGUAGE = { ENGLISH: 'EN', ARABIC: 'AR', FARSI: 'FA', - TURKISH: 'TR' + TURKISH: 'TR', + RUSSIAN: 'RU' } export const GET_DROPDOWN_DIRECTION = (direction) => { diff --git a/src/translations/index.js b/src/translations/index.js index 6b671ed0..00435b19 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -22,5 +22,11 @@ export default { SEARCH_PLACEHOLDER: 'Arama...', SELECTED_ITEMS_COUNT_TEXT: '{count} öğe seçildi', NOTHING_TO_SHOW: 'Gösterecek hiçbir şey yok!' + }, + RU: { + PLACEHOLDER: 'Выберите элемент', + SEARCH_PLACEHOLDER: 'Введите текст...', + SELECTED_ITEMS_COUNT_TEXT: 'Выбрано элементов: {count}', + NOTHING_TO_SHOW: 'Элементы не найдены!' } } \ No newline at end of file From 32766a11fae38d2e96fb149cd1564bf46bb6fd27 Mon Sep 17 00:00:00 2001 From: blizzardnya Date: Wed, 10 Nov 2021 13:27:13 +0300 Subject: [PATCH 06/26] Added RU to LanguageType --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 0108dea0..80ed31d7 100644 --- a/index.d.ts +++ b/index.d.ts @@ -50,7 +50,7 @@ declare module "react-native-dropdown-picker" { disabled: string; } - export type LanguageType = "DEFAULT" | "FALLBACK" | "EN" | "AR" | "FA" | "TR"; + export type LanguageType = "DEFAULT" | "FALLBACK" | "EN" | "AR" | "FA" | "TR" | "RU"; export interface TranslationInterface { PLACEHOLDER: string; From af594d9615a1640392bee6b208bd4b4100cf6aad Mon Sep 17 00:00:00 2001 From: TechiePi <48295028+Techie-Pi@users.noreply.github.com> Date: Wed, 17 Nov 2021 11:06:13 +0100 Subject: [PATCH 07/26] feat: add spanish translation --- src/translations/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/translations/index.js b/src/translations/index.js index 00435b19..b9154944 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -28,5 +28,11 @@ export default { SEARCH_PLACEHOLDER: 'Введите текст...', SELECTED_ITEMS_COUNT_TEXT: 'Выбрано элементов: {count}', NOTHING_TO_SHOW: 'Элементы не найдены!' + }, + ES: { + PLACEHOLDER: 'Selecciona un elemento', + SEARCH_SOMETHING: 'Escribe algo...', + SELECTED_ITEMS_COUNT_TEXT: 'Se han seleccionado {count} elemento(s)', + NOTHING_TO_SHOW: '¡No hay nada que mostrar!' } -} \ No newline at end of file +} From 321b0a49fdb78e456c8b9fac0364d5a796cd7435 Mon Sep 17 00:00:00 2001 From: TechiePi <48295028+Techie-Pi@users.noreply.github.com> Date: Wed, 17 Nov 2021 11:08:18 +0100 Subject: [PATCH 08/26] chore: add spanish to LanguageType --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 775d5b36..f012d893 100644 --- a/index.d.ts +++ b/index.d.ts @@ -57,7 +57,7 @@ declare module "react-native-dropdown-picker" { labelStyle: string; } - export type LanguageType = "DEFAULT" | "FALLBACK" | "EN" | "AR" | "FA" | "TR" | "RU"; + export type LanguageType = "DEFAULT" | "FALLBACK" | "EN" | "AR" | "FA" | "TR" | "RU" | "ES"; export interface TranslationInterface { PLACEHOLDER: string; From 422eef168f7107d6d8e09074e1fe93e739fc5dbd Mon Sep 17 00:00:00 2001 From: TechiePi <48295028+Techie-Pi@users.noreply.github.com> Date: Wed, 17 Nov 2021 11:09:06 +0100 Subject: [PATCH 09/26] chore: add spanish to constants --- src/constants/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/constants/index.js b/src/constants/index.js index afa040e6..5a9c661f 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -45,7 +45,8 @@ export const LANGUAGE = { ARABIC: 'AR', FARSI: 'FA', TURKISH: 'TR', - RUSSIAN: 'RU' + RUSSIAN: 'RU', + SPANISH: 'ES' } export const GET_DROPDOWN_DIRECTION = (direction) => { @@ -130,4 +131,4 @@ export const ASCII_CODE = (str) => { chr+= str.charCodeAt(i); return chr; -} \ No newline at end of file +} From 6b31efddedcc59fe115758bf56f0712938112dc1 Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Thu, 18 Nov 2021 02:47:51 +0330 Subject: [PATCH 10/26] Rename SEARCH_SOMETHING to SEARCH_PLACEHOLDER. --- src/translations/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/index.js b/src/translations/index.js index b9154944..903578e8 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -31,7 +31,7 @@ export default { }, ES: { PLACEHOLDER: 'Selecciona un elemento', - SEARCH_SOMETHING: 'Escribe algo...', + SEARCH_PLACEHOLDER: 'Escribe algo...', SELECTED_ITEMS_COUNT_TEXT: 'Se han seleccionado {count} elemento(s)', NOTHING_TO_SHOW: '¡No hay nada que mostrar!' } From ccd03d2f1ed805f40796cf917761955303ba0834 Mon Sep 17 00:00:00 2001 From: Boy van der Laak Date: Fri, 10 Dec 2021 12:14:22 +0100 Subject: [PATCH 11/26] fix(ts): different prop types for single & multi component --- index.d.ts | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/index.d.ts b/index.d.ts index f012d893..761b827d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -133,9 +133,8 @@ declare module "react-native-dropdown-picker" { export type ThemeNameType = "DEFAULT" | "LIGHT" | "DARK"; export type ThemeType = object; - export type DropDownPickerProps = { + interface DropDownPickerBaseProps { items: ItemType[]; - value: ValueType | ValueType[] | null; open: boolean; placeholder?: string; closeAfterSelecting?: boolean; @@ -185,7 +184,6 @@ declare module "react-native-dropdown-picker" { schema?: Partial; language?: LanguageType; translation?: Partial; - multiple?: boolean; multipleText?: string; mode?: ModeType; itemKey?: string; @@ -223,7 +221,6 @@ declare module "react-native-dropdown-picker" { addCustomItem?: boolean; setOpen: Dispatch>; setItems?: Dispatch>; - setValue: Dispatch; disableBorderRadius?: boolean; containerProps?: ViewProps; onLayout?: (e: LayoutChangeEvent) => void; @@ -231,15 +228,28 @@ declare module "react-native-dropdown-picker" { onOpen?: () => void; onClose?: () => void; onChangeSearchText?: (text: string) => void; - onChangeValue?: (value: ValueType | ValueType[] | null) => void; zIndex?: number; zIndexInverse?: number; disableLocalSearch?: boolean; dropDownDirection?: DropDownDirectionType; theme?: ThemeNameType; rtl?: boolean; - testID?: string; - }; + } + + interface DropDownPickerSingleProps { + multiple?: false; + onChangeValue?: (value: ValueType | null) => void; + setValue: Dispatch>; + value: ValueType | null; + } + + interface DropDownPickerMultipleProps { + multiple: true; + onChangeValue?: (value: ValueType[] | null) => void; + setValue: Dispatch>; + value: ValueType[] | null; + } + interface DropDownPickerInterface { MODE: ModeInterface; @@ -258,6 +268,8 @@ declare module "react-native-dropdown-picker" { modifyTranslation: (language: string, translation: TranslationInterface) => void; } + export type DropDownPickerProps = (DropDownPickerSingleProps | DropDownPickerMultipleProps) & DropDownPickerBaseProps + const DropDownPicker: ComponentType & DropDownPickerInterface; export default DropDownPicker; } From 0f88d39e89b75b879b19fe3d1a16c77e232096bf Mon Sep 17 00:00:00 2001 From: Boy van der Laak Date: Fri, 10 Dec 2021 12:15:30 +0100 Subject: [PATCH 12/26] refactor(ts): applied eslint/prettier styles to index.d.ts --- index.d.ts | 542 ++++++++++++++++++++++++++++------------------------- 1 file changed, 286 insertions(+), 256 deletions(-) diff --git a/index.d.ts b/index.d.ts index 761b827d..ebe9dbbd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,275 +1,305 @@ -declare module "react-native-dropdown-picker" { - import type {ComponentType, SetStateAction, Dispatch} from "react"; - import type { - FlatListProps, - LayoutChangeEvent, - ModalProps, - ScrollViewProps, - StyleProp, - TextInputProps, - TextProps, - TextStyle, - ViewProps, - TouchableOpacityProps, - ViewStyle - } from "react-native"; +declare module 'react-native-dropdown-picker' { + import type { ComponentType, SetStateAction, Dispatch } from 'react'; + import type { + FlatListProps, + LayoutChangeEvent, + ModalProps, + ScrollViewProps, + StyleProp, + TextInputProps, + TextProps, + TextStyle, + ViewProps, + TouchableOpacityProps, + ViewStyle, + } from 'react-native'; - export type ValueType = string | number | boolean; + export type ValueType = string | number | boolean; - export type ItemType = { - label?: string; - value?: ValueType; - icon?: () => void; - parent?: ValueType; - selectable?: boolean; - disabled?: boolean; - testID?: string; - containerStyle?: StyleProp; - labelStyle?: StyleProp; - }; + export type ItemType = { + label?: string; + value?: ValueType; + icon?: () => void; + parent?: ValueType; + selectable?: boolean; + disabled?: boolean; + testID?: string; + containerStyle?: StyleProp; + labelStyle?: StyleProp; + }; - export type ModeType = "DEFAULT" | "SIMPLE" | "BADGE"; + export type ModeType = 'DEFAULT' | 'SIMPLE' | 'BADGE'; - export interface ModeInterface { - DEFAULT: string; - SIMPLE: string; - BADGE: string; - } - - export type ListModeType = "DEFAULT" | "FLATLIST" | "SCROLLVIEW" | "MODAL"; + export interface ModeInterface { + DEFAULT: string; + SIMPLE: string; + BADGE: string; + } - export interface ListModeInterface { - DEFAULT: string; - FLATLIST: string; - SCROLLVIEW: string; - MODAL: string; - } + export type ListModeType = 'DEFAULT' | 'FLATLIST' | 'SCROLLVIEW' | 'MODAL'; - export interface SchemaInterface { - label: string; - value: string; - icon: string; - parent: string; - selectable: string; - disabled: string; - testID: string; - containerStyle: string; - labelStyle: string; - } + export interface ListModeInterface { + DEFAULT: string; + FLATLIST: string; + SCROLLVIEW: string; + MODAL: string; + } - export type LanguageType = "DEFAULT" | "FALLBACK" | "EN" | "AR" | "FA" | "TR" | "RU" | "ES"; - - export interface TranslationInterface { - PLACEHOLDER: string; - SEARCH_PLACEHOLDER: string; - SELECTED_ITEMS_COUNT_TEXT: string; - NOTHING_TO_SHOW: string; - } + export interface SchemaInterface { + label: string; + value: string; + icon: string; + parent: string; + selectable: string; + disabled: string; + testID: string; + containerStyle: string; + labelStyle: string; + } - export interface RenderBadgeItemPropsInterface { - label: string; - value: ValueType; - IconComponent: () => JSX.Element; - textStyle: StyleProp; - badgeStyle: StyleProp; - badgeTextStyle: StyleProp; - badgeDotStyle: StyleProp; - getBadgeColor: (value: string) => string; - getBadgeDotColor: (value: string) => string; - showBadgeDot: boolean; - onPress: (value: ValueType) => void; - rtl: boolean; - THEME: ThemeType; - } + export type LanguageType = + | 'DEFAULT' + | 'FALLBACK' + | 'EN' + | 'AR' + | 'FA' + | 'TR' + | 'RU' + | 'ES'; - export interface RenderListItemPropsInterface { - rtl: boolean; - item: ItemType; - label: string; - value: ValueType; - parent: ValueType; - selectable: boolean; - disabled: boolean; - props: ViewProps; - custom: boolean; - isSelected: boolean; - IconComponent: () => JSX.Element; - TickIconComponent: () => JSX.Element; - listItemContainerStyle: StyleProp; - listItemLabelStyle: StyleProp; - listChildContainerStyle: StyleProp; - listParentContainerStyle: StyleProp; - listChildLabelStyle: StyleProp; - listParentLabelStyle: StyleProp; - customItemContainerStyle: StyleProp; - customItemLabelStyle: StyleProp; - selectedItemContainerStyle: StyleProp; - selectedItemLabelStyle: StyleProp; - disabledItemContainerStyle: StyleProp; - disabledItemLabelStyle: StyleProp; - containerStyle: StyleProp; - labelStyle: StyleProp; - categorySelectable: boolean; - onPress: () => void; - setPosition: (value: ValueType, y: number) => void; - theme: ThemeNameType; - THEME: ThemeType; - } + export interface TranslationInterface { + PLACEHOLDER: string; + SEARCH_PLACEHOLDER: string; + SELECTED_ITEMS_COUNT_TEXT: string; + NOTHING_TO_SHOW: string; + } - export interface ActivityIndicatorComponentPropsInterface { - size: number; - color: string; - } + export interface RenderBadgeItemPropsInterface { + label: string; + value: ValueType; + IconComponent: () => JSX.Element; + textStyle: StyleProp; + badgeStyle: StyleProp; + badgeTextStyle: StyleProp; + badgeDotStyle: StyleProp; + getBadgeColor: (value: string) => string; + getBadgeDotColor: (value: string) => string; + showBadgeDot: boolean; + onPress: (value: ValueType) => void; + rtl: boolean; + THEME: ThemeType; + } - export interface ListEmptyComponentPropsInterface { - listMessageContainer: StyleProp; - listMessageTextStyle: StyleProp; - ActivityIndicatorComponent: (props: ActivityIndicatorComponentPropsInterface) => JSX.Element - loading: boolean; - message: string; - } + export interface RenderListItemPropsInterface { + rtl: boolean; + item: ItemType; + label: string; + value: ValueType; + parent: ValueType; + selectable: boolean; + disabled: boolean; + props: ViewProps; + custom: boolean; + isSelected: boolean; + IconComponent: () => JSX.Element; + TickIconComponent: () => JSX.Element; + listItemContainerStyle: StyleProp; + listItemLabelStyle: StyleProp; + listChildContainerStyle: StyleProp; + listParentContainerStyle: StyleProp; + listChildLabelStyle: StyleProp; + listParentLabelStyle: StyleProp; + customItemContainerStyle: StyleProp; + customItemLabelStyle: StyleProp; + selectedItemContainerStyle: StyleProp; + selectedItemLabelStyle: StyleProp; + disabledItemContainerStyle: StyleProp; + disabledItemLabelStyle: StyleProp; + containerStyle: StyleProp; + labelStyle: StyleProp; + categorySelectable: boolean; + onPress: () => void; + setPosition: (value: ValueType, y: number) => void; + theme: ThemeNameType; + THEME: ThemeType; + } - export type DropDownDirectionType = "DEFAULT" | "TOP" | "BOTTOM" | "AUTO"; - export type ThemeNameType = "DEFAULT" | "LIGHT" | "DARK"; - export type ThemeType = object; - - interface DropDownPickerBaseProps { - items: ItemType[]; - open: boolean; - placeholder?: string; - closeAfterSelecting?: boolean; - labelProps?: TextProps; - disabled?: boolean; - disabledStyle?: StyleProp; - placeholderStyle?: StyleProp; - containerStyle?: StyleProp; - style?: StyleProp; - textStyle?: StyleProp; - labelStyle?: StyleProp; - arrowIconStyle?: StyleProp; - tickIconStyle?: StyleProp; - closeIconStyle?: StyleProp; - badgeStyle?: StyleProp; - badgeTextStyle?: StyleProp; - badgeDotStyle?: StyleProp; - iconContainerStyle?: StyleProp; - searchContainerStyle?: StyleProp; - searchTextInputStyle?: StyleProp; - searchPlaceholderTextColor?: string; - dropDownContainerStyle?: StyleProp; - modalContentContainerStyle?: StyleProp; - arrowIconContainerStyle?: StyleProp; - closeIconContainerStyle?: StyleProp; - tickIconContainerStyle?: StyleProp; - listItemContainerStyle?: StyleProp; - listItemLabelStyle?: StyleProp; - listChildContainerStyle?: StyleProp; - listChildLabelStyle?: StyleProp; - listParentContainerStyle?: StyleProp; - listParentLabelStyle?: StyleProp; - selectedItemContainerStyle?: StyleProp; - selectedItemLabelStyle?: StyleProp; - disabledItemContainerStyle?: StyleProp; - disabledItemLabelStyle?: StyleProp; - customItemContainerStyle?: StyleProp; - customItemLabelStyle?: StyleProp; - listMessageContainerStyle?: StyleProp; - listMessageTextStyle?: StyleProp; - itemSeparatorStyle?: StyleProp; - badgeSeparatorStyle?: StyleProp; - listMode?: ListModeType; - categorySelectable?: boolean; - searchable?: boolean; - searchPlaceholder?: string; - schema?: Partial; - language?: LanguageType; - translation?: Partial; - multipleText?: string; - mode?: ModeType; - itemKey?: string; - maxHeight?: number; - renderBadgeItem?: (props: RenderBadgeItemPropsInterface) => JSX.Element; - renderListItem?: (props: RenderListItemPropsInterface) => JSX.Element; - itemSeparator?: boolean; - bottomOffset?: number; - badgeColors?: string[] | string; - badgeDotColors?: string[] | string; - showArrowIcon?: boolean; - showBadgeDot?: boolean; - showTickIcon?: boolean; - stickyHeader?: boolean; - autoScroll?: boolean; - ArrowUpIconComponent?: (props: {style: StyleProp}) => JSX.Element; - ArrowDownIconComponent?: (props: {style: StyleProp}) => JSX.Element; - TickIconComponent?: (props: {style: StyleProp}) => JSX.Element; - CloseIconComponent?: (props: {style: StyleProp}) => JSX.Element; - ListEmptyComponent?: (props: ListEmptyComponentPropsInterface) => JSX.Element; - ActivityIndicatorComponent?: (props: ActivityIndicatorComponentPropsInterface) => JSX.Element; - activityIndicatorSize?: number; - activityIndicatorColor?: string; - props?: TouchableOpacityProps; - itemProps?: TouchableOpacityProps; - modalProps?: ModalProps; - flatListProps?: FlatListProps; - scrollViewProps?: ScrollViewProps; - searchTextInputProps?: TextInputProps; - modalTitle?: string; - modalTitleStyle?: StyleProp; - loading?: boolean; - min?: number; - max?: number; - addCustomItem?: boolean; - setOpen: Dispatch>; - setItems?: Dispatch>; - disableBorderRadius?: boolean; - containerProps?: ViewProps; - onLayout?: (e: LayoutChangeEvent) => void; - onPress?: (open: boolean) => void; - onOpen?: () => void; - onClose?: () => void; - onChangeSearchText?: (text: string) => void; - zIndex?: number; - zIndexInverse?: number; - disableLocalSearch?: boolean; - dropDownDirection?: DropDownDirectionType; - theme?: ThemeNameType; - rtl?: boolean; - } + export interface ActivityIndicatorComponentPropsInterface { + size: number; + color: string; + } - interface DropDownPickerSingleProps { - multiple?: false; - onChangeValue?: (value: ValueType | null) => void; - setValue: Dispatch>; - value: ValueType | null; - } + export interface ListEmptyComponentPropsInterface { + listMessageContainer: StyleProp; + listMessageTextStyle: StyleProp; + ActivityIndicatorComponent: ( + props: ActivityIndicatorComponentPropsInterface, + ) => JSX.Element; + loading: boolean; + message: string; + } - interface DropDownPickerMultipleProps { - multiple: true; - onChangeValue?: (value: ValueType[] | null) => void; - setValue: Dispatch>; - value: ValueType[] | null; - } + export type DropDownDirectionType = 'DEFAULT' | 'TOP' | 'BOTTOM' | 'AUTO'; + export type ThemeNameType = 'DEFAULT' | 'LIGHT' | 'DARK'; + export type ThemeType = object; + interface DropDownPickerBaseProps { + items: ItemType[]; + open: boolean; + placeholder?: string; + closeAfterSelecting?: boolean; + labelProps?: TextProps; + disabled?: boolean; + disabledStyle?: StyleProp; + placeholderStyle?: StyleProp; + containerStyle?: StyleProp; + style?: StyleProp; + textStyle?: StyleProp; + labelStyle?: StyleProp; + arrowIconStyle?: StyleProp; + tickIconStyle?: StyleProp; + closeIconStyle?: StyleProp; + badgeStyle?: StyleProp; + badgeTextStyle?: StyleProp; + badgeDotStyle?: StyleProp; + iconContainerStyle?: StyleProp; + searchContainerStyle?: StyleProp; + searchTextInputStyle?: StyleProp; + searchPlaceholderTextColor?: string; + dropDownContainerStyle?: StyleProp; + modalContentContainerStyle?: StyleProp; + arrowIconContainerStyle?: StyleProp; + closeIconContainerStyle?: StyleProp; + tickIconContainerStyle?: StyleProp; + listItemContainerStyle?: StyleProp; + listItemLabelStyle?: StyleProp; + listChildContainerStyle?: StyleProp; + listChildLabelStyle?: StyleProp; + listParentContainerStyle?: StyleProp; + listParentLabelStyle?: StyleProp; + selectedItemContainerStyle?: StyleProp; + selectedItemLabelStyle?: StyleProp; + disabledItemContainerStyle?: StyleProp; + disabledItemLabelStyle?: StyleProp; + customItemContainerStyle?: StyleProp; + customItemLabelStyle?: StyleProp; + listMessageContainerStyle?: StyleProp; + listMessageTextStyle?: StyleProp; + itemSeparatorStyle?: StyleProp; + badgeSeparatorStyle?: StyleProp; + listMode?: ListModeType; + categorySelectable?: boolean; + searchable?: boolean; + searchPlaceholder?: string; + schema?: Partial; + language?: LanguageType; + translation?: Partial; + multipleText?: string; + mode?: ModeType; + itemKey?: string; + maxHeight?: number; + renderBadgeItem?: (props: RenderBadgeItemPropsInterface) => JSX.Element; + renderListItem?: (props: RenderListItemPropsInterface) => JSX.Element; + itemSeparator?: boolean; + bottomOffset?: number; + badgeColors?: string[] | string; + badgeDotColors?: string[] | string; + showArrowIcon?: boolean; + showBadgeDot?: boolean; + showTickIcon?: boolean; + stickyHeader?: boolean; + autoScroll?: boolean; + ArrowUpIconComponent?: (props: { + style: StyleProp; + }) => JSX.Element; + ArrowDownIconComponent?: (props: { + style: StyleProp; + }) => JSX.Element; + TickIconComponent?: (props: { style: StyleProp }) => JSX.Element; + CloseIconComponent?: (props: { + style: StyleProp; + }) => JSX.Element; + ListEmptyComponent?: ( + props: ListEmptyComponentPropsInterface, + ) => JSX.Element; + ActivityIndicatorComponent?: ( + props: ActivityIndicatorComponentPropsInterface, + ) => JSX.Element; + activityIndicatorSize?: number; + activityIndicatorColor?: string; + props?: TouchableOpacityProps; + itemProps?: TouchableOpacityProps; + modalProps?: ModalProps; + flatListProps?: FlatListProps; + scrollViewProps?: ScrollViewProps; + searchTextInputProps?: TextInputProps; + modalTitle?: string; + modalTitleStyle?: StyleProp; + loading?: boolean; + min?: number; + max?: number; + addCustomItem?: boolean; + setOpen: Dispatch>; + setItems?: Dispatch>; + disableBorderRadius?: boolean; + containerProps?: ViewProps; + onLayout?: (e: LayoutChangeEvent) => void; + onPress?: (open: boolean) => void; + onOpen?: () => void; + onClose?: () => void; + onChangeSearchText?: (text: string) => void; + zIndex?: number; + zIndexInverse?: number; + disableLocalSearch?: boolean; + dropDownDirection?: DropDownDirectionType; + theme?: ThemeNameType; + rtl?: boolean; + } - interface DropDownPickerInterface { - MODE: ModeInterface; - LIST_MODE: ListModeInterface; - DROPDOWN_DIRECTION: DropDownDirectionType; - SCHEMA: SchemaInterface; - LANGUAGE: LanguageType; - THEMES: ThemeNameType; - setMode: (mode: string) => void; - setListMode: (mode: string) => void; - setDropDownDirection: (direction: DropDownDirectionType) => void; - setTheme: (name: string) => void; - addTheme: (name: string, theme: ThemeNameType) => void; - setLanguage: (language: string) => void; - addTranslation: (language: string, translation: TranslationInterface) => void; - modifyTranslation: (language: string, translation: TranslationInterface) => void; - } + interface DropDownPickerSingleProps { + multiple?: false; + onChangeValue?: (value: ValueType | null) => void; + setValue: Dispatch>; + value: ValueType | null; + } - export type DropDownPickerProps = (DropDownPickerSingleProps | DropDownPickerMultipleProps) & DropDownPickerBaseProps + interface DropDownPickerMultipleProps { + multiple: true; + onChangeValue?: (value: ValueType[] | null) => void; + setValue: Dispatch>; + value: ValueType[] | null; + } - const DropDownPicker: ComponentType & DropDownPickerInterface; - export default DropDownPicker; + interface DropDownPickerInterface { + MODE: ModeInterface; + LIST_MODE: ListModeInterface; + DROPDOWN_DIRECTION: DropDownDirectionType; + SCHEMA: SchemaInterface; + LANGUAGE: LanguageType; + THEMES: ThemeNameType; + setMode: (mode: string) => void; + setListMode: (mode: string) => void; + setDropDownDirection: (direction: DropDownDirectionType) => void; + setTheme: (name: string) => void; + addTheme: (name: string, theme: ThemeNameType) => void; + setLanguage: (language: string) => void; + addTranslation: ( + language: string, + translation: TranslationInterface, + ) => void; + modifyTranslation: ( + language: string, + translation: TranslationInterface, + ) => void; } + + export type DropDownPickerProps = ( + | DropDownPickerSingleProps + | DropDownPickerMultipleProps + ) & + DropDownPickerBaseProps; + + const DropDownPicker: ComponentType & + DropDownPickerInterface; + export default DropDownPicker; +} From 2e7c87ff71e2a1d6b0a5e8f5edbbc54ce0a8037b Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Dec 2021 00:29:12 +0330 Subject: [PATCH 13/26] Fix duplicate items with addCustomItem prop. --- src/components/Picker.js | 1 + tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Picker.js b/src/components/Picker.js index 243a7187..0e576f97 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -1164,6 +1164,7 @@ function Picker({ */ const onPressItem = useCallback((item, customItem = false) => { if (customItem !== false) { + item.custom = false; setItems(state => [...state, item]); } diff --git a/tsconfig.json b/tsconfig.json index f8e150e0..19cbebd3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,7 +16,7 @@ /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "types": [ /* Type declaration files to be included in compilation. */ - "react" + "react-native" ], "lib": [ /* which versions of type defs for built-in JavaScript libraries to use */ From 6faf79961430cef811e22bae2b5ad09278d1422c Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Dec 2021 00:32:25 +0330 Subject: [PATCH 14/26] Add testID. --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index ebe9dbbd..ff0b3d7d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -254,6 +254,7 @@ declare module 'react-native-dropdown-picker' { dropDownDirection?: DropDownDirectionType; theme?: ThemeNameType; rtl?: boolean; + testID?: string; } interface DropDownPickerSingleProps { From b1ecf19ff7d18ec68a4e9f840100552072092cb8 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 00:43:04 +0330 Subject: [PATCH 15/26] Add closeOnBackPressed prop. --- index.d.ts | 1 + src/components/Picker.js | 22 ++++++++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index ff0b3d7d..53db4c06 100644 --- a/index.d.ts +++ b/index.d.ts @@ -255,6 +255,7 @@ declare module 'react-native-dropdown-picker' { theme?: ThemeNameType; rtl?: boolean; testID?: string; + closeOnBackPressed?: boolean; } interface DropDownPickerSingleProps { diff --git a/src/components/Picker.js b/src/components/Picker.js index 0e576f97..56fa8b69 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -20,8 +20,9 @@ import { ScrollView, Modal, ActivityIndicator, + BackHandler, Platform, - StyleSheet + StyleSheet, } from 'react-native'; const { height: WINDOW_HEIGHT } = Dimensions.get('window'); @@ -152,7 +153,8 @@ function Picker({ dropDownDirection = DROPDOWN_DIRECTION.DEFAULT, disableLocalSearch = false, theme = THEMES.DEFAULT, - testID + testID, + closeOnBackPressed = false, }) { const [necessaryItems, setNecessaryItems] = useState([]); const [searchText, setSearchText] = useState(''); @@ -197,6 +199,22 @@ function Picker({ setNecessaryItems(initialSelectedItems); }, []); + useEffect(() => { + if (closeOnBackPressed) { + const backAction = () => { + setOpen(false); + + return true; + }; + const backHandler = BackHandler.addEventListener( + "hardwareBackPress", + backAction + ); + + return () => backHandler.remove(); + } + }, []); + /** * Update necessary items. */ From 75a0b223b15dd4be77110bc9d3ea00f0156e1edd Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 00:49:57 +0330 Subject: [PATCH 16/26] Add onSelectItem prop. --- index.d.ts | 1 + src/components/Picker.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/index.d.ts b/index.d.ts index 53db4c06..9597b1c5 100644 --- a/index.d.ts +++ b/index.d.ts @@ -248,6 +248,7 @@ declare module 'react-native-dropdown-picker' { onOpen?: () => void; onClose?: () => void; onChangeSearchText?: (text: string) => void; + onSelectItem?: (item: ItemType) => void; zIndex?: number; zIndexInverse?: number; disableLocalSearch?: boolean; diff --git a/src/components/Picker.js b/src/components/Picker.js index 56fa8b69..1bcf7fbe 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -155,6 +155,7 @@ function Picker({ theme = THEMES.DEFAULT, testID, closeOnBackPressed = false, + onSelectItem = (item) => {} }) { const [necessaryItems, setNecessaryItems] = useState([]); const [searchText, setSearchText] = useState(''); @@ -1186,6 +1187,9 @@ function Picker({ setItems(state => [...state, item]); } + // Not a reliable method for external value changes. + onSelectItem(item); + setValue(state => { if (multiple) { let _state = state !== null ? [...state] : []; @@ -1250,6 +1254,7 @@ function Picker({ min, max, onPressClose, + onSelectItem, closeAfterSelecting, multiple, setItems, From aada27f97cfe0b1602612a7d277106f46286d1b5 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 01:35:44 +0330 Subject: [PATCH 17/26] Make FlatList props optional. --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 9597b1c5..3b173fee 100644 --- a/index.d.ts +++ b/index.d.ts @@ -230,7 +230,7 @@ declare module 'react-native-dropdown-picker' { props?: TouchableOpacityProps; itemProps?: TouchableOpacityProps; modalProps?: ModalProps; - flatListProps?: FlatListProps; + flatListProps?: Partial>; scrollViewProps?: ScrollViewProps; searchTextInputProps?: TextInputProps; modalTitle?: string; From f03a94aed74ec6d85893d6cbdd29797a2c25bd43 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 01:47:01 +0330 Subject: [PATCH 18/26] onSelectItem only for single items. --- src/components/Picker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Picker.js b/src/components/Picker.js index 1bcf7fbe..23d8379f 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -1188,7 +1188,8 @@ function Picker({ } // Not a reliable method for external value changes. - onSelectItem(item); + if (! multiple) + onSelectItem(item); setValue(state => { if (multiple) { From 5cbaa4f33bf24e96cdd7644b7dd549322bb15394 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 01:48:42 +0330 Subject: [PATCH 19/26] onSelectItem only for single items. --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 3b173fee..8bbef2cd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -248,7 +248,6 @@ declare module 'react-native-dropdown-picker' { onOpen?: () => void; onClose?: () => void; onChangeSearchText?: (text: string) => void; - onSelectItem?: (item: ItemType) => void; zIndex?: number; zIndexInverse?: number; disableLocalSearch?: boolean; @@ -262,6 +261,7 @@ declare module 'react-native-dropdown-picker' { interface DropDownPickerSingleProps { multiple?: false; onChangeValue?: (value: ValueType | null) => void; + onSelectItem?: (item: ItemType) => void; setValue: Dispatch>; value: ValueType | null; } From 4222711feee7ae9fac02ba3521192feca540373b Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 02:56:38 +0330 Subject: [PATCH 20/26] Add onSelectItem for multiple items. --- index.d.ts | 1 + src/components/Picker.js | 38 +++++++++++++++++++++++++++++++------- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/index.d.ts b/index.d.ts index 8bbef2cd..7b648984 100644 --- a/index.d.ts +++ b/index.d.ts @@ -269,6 +269,7 @@ declare module 'react-native-dropdown-picker' { interface DropDownPickerMultipleProps { multiple: true; onChangeValue?: (value: ValueType[] | null) => void; + onSelectItem?: (items: ItemType[]) => void; setValue: Dispatch>; value: ValueType[] | null; } diff --git a/src/components/Picker.js b/src/components/Picker.js index 23d8379f..cae5c0a0 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -168,7 +168,10 @@ function Picker({ const itemPositionsRef = useRef({}); const flatListRef = useRef(); const scrollViewRef = useRef(); - const valueRef = useRef(null); + const memoryRef = useRef({ + value: null, + items: [] + }); const THEME = useMemo(() => THEMES[theme].default, [theme]); const ICON = useMemo(() => THEMES[theme].ICONS, [theme]) @@ -185,6 +188,8 @@ function Picker({ useEffect(() => { // LogBox.ignoreLogs(['VirtualizedLists should never be nested']); + memoryRef.current.value = multiple ? (Array.isArray(value) ? value : []) : value; + // Get initial seleted items let initialSelectedItems = []; const valueNotNull = value !== null && (Array.isArray(value) && value.length !== 0); @@ -284,12 +289,19 @@ function Picker({ }, [value, items]); /** - * Keep a ref of the value. + * Update value in the memory. */ useEffect(() => { - valueRef.current = value; + memoryRef.current.value = value; }, [value]); + /** + * Update items in the memory. + */ + useEffect(() => { + memoryRef.current.items = necessaryItems; + }, [necessaryItems]); + /** * Automatically scroll to the first selected item. */ @@ -373,12 +385,12 @@ function Picker({ const scroll = useCallback(() => { setTimeout(() => { if ((scrollViewRef.current || flatListRef.current)) { - const isArray = Array.isArray(valueRef.current); + const isArray = Array.isArray(memoryRef.current.value); - if (valueRef.current === null || (isArray && valueRef.current.length === 0)) + if (memoryRef.current.value === null || (isArray && memoryRef.current.value.length === 0)) return; - const value = isArray ? valueRef.current[0] : valueRef.current; + const value = isArray ? memoryRef.current.value[0] : memoryRef.current.value; if (scrollViewRef.current && itemPositionsRef.current.hasOwnProperty(value)) { scrollViewRef.current?.scrollTo?.({ @@ -1188,8 +1200,20 @@ function Picker({ } // Not a reliable method for external value changes. - if (! multiple) + if (multiple) { + if (memoryRef.current.value.includes(item[_schema.value])) { + const index = memoryRef.current.items.findIndex(x => x[_schema.value] === item[_schema.value]); + + if (index > -1) { + memoryRef.current.items.splice(index, 1); + onSelectItem(memoryRef.current.items.slice()); + } + } else { + onSelectItem([...memoryRef.current.items, item]); + } + } else { onSelectItem(item); + } setValue(state => { if (multiple) { From 85660de313b2f7ed1e7e168607e645aa16193e1b Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 04:42:06 +0330 Subject: [PATCH 21/26] Add donation section. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 01cb22e1..c1fea6d4 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ # Documentation **The documentation has been moved to https://hossein-zare.github.io/react-native-dropdown-picker-website/** -# Caution -Previous versions of this package are deprecated and incompatible with the current version. +# Donation +**[✨ Support us to devote more time to this project - Buy me a coffee](https://www.buymeacoffee.com/settings/notifications)** # Merge and Release Process From 4a0e66bc86924df48428f383928947e6bb44cb7a Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 04:45:42 +0330 Subject: [PATCH 22/26] Fix donation link. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c1fea6d4..9edae375 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ **The documentation has been moved to https://hossein-zare.github.io/react-native-dropdown-picker-website/** # Donation -**[✨ Support us to devote more time to this project - Buy me a coffee](https://www.buymeacoffee.com/settings/notifications)** +**[✨ Support us to devote more time to this project - Buy me a coffee](https://www.buymeacoffee.com/hossein_zare)** # Merge and Release Process From fad61265b9cfe60a38215d1a0a5c05d023fa1bbf Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Tue, 14 Dec 2021 05:15:03 +0330 Subject: [PATCH 23/26] + Donation button. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 9edae375..49dadef3 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,10 @@ # Donation **[✨ Support us to devote more time to this project - Buy me a coffee](https://www.buymeacoffee.com/hossein_zare)** +

+ Donation +

+ # Merge and Release Process ## Branches in use From ae12571c27419f623f93ee1d0327c84ff2e78f3a Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Thu, 23 Dec 2021 07:38:50 +0330 Subject: [PATCH 24/26] Update README.md --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index 49dadef3..aff68802 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,6 @@ # Documentation **The documentation has been moved to https://hossein-zare.github.io/react-native-dropdown-picker-website/** -# Donation -**[✨ Support us to devote more time to this project - Buy me a coffee](https://www.buymeacoffee.com/hossein_zare)** - -

- Donation -

- # Merge and Release Process ## Branches in use From a761eca140fe7de4c2fec30547ba6aa65ae9ede0 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Thu, 30 Dec 2021 12:25:04 +0330 Subject: [PATCH 25/26] Remove backHandler when open changes. --- package.json | 2 +- src/components/Picker.js | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 62c87770..e080a5b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-dropdown-picker", - "version": "5.2.3", + "version": "5.2.5-beta.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", diff --git a/src/components/Picker.js b/src/components/Picker.js index cae5c0a0..a154d882 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -186,8 +186,6 @@ function Picker({ * componentDidMount. */ useEffect(() => { - // LogBox.ignoreLogs(['VirtualizedLists should never be nested']); - memoryRef.current.value = multiple ? (Array.isArray(value) ? value : []) : value; // Get initial seleted items @@ -206,7 +204,7 @@ function Picker({ }, []); useEffect(() => { - if (closeOnBackPressed) { + if (closeOnBackPressed && open) { const backAction = () => { setOpen(false); @@ -219,7 +217,7 @@ function Picker({ return () => backHandler.remove(); } - }, []); + }, [open]); /** * Update necessary items. From 4c5fb2f3d7606e5cf37908ebcba840e688cdfb96 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Thu, 30 Dec 2021 12:25:38 +0330 Subject: [PATCH 26/26] Update version [5.3.0]. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e080a5b5..1846f418 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-dropdown-picker", - "version": "5.2.5-beta.0", + "version": "5.3.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",