From 58003e7367eca920d7f83c235bc399964b3d209d Mon Sep 17 00:00:00 2001 From: Ahmad Syarifuddin Randiko Date: Mon, 24 Jan 2022 16:25:23 +0700 Subject: [PATCH 01/22] feat: add indonesian translation --- index.d.ts | 3 ++- src/constants/index.js | 3 ++- src/translations/index.js | 6 ++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 7b648984..9c405cde 100644 --- a/index.d.ts +++ b/index.d.ts @@ -65,7 +65,8 @@ declare module 'react-native-dropdown-picker' { | 'FA' | 'TR' | 'RU' - | 'ES'; + | 'ES' + | 'ID'; export interface TranslationInterface { PLACEHOLDER: string; diff --git a/src/constants/index.js b/src/constants/index.js index 5a9c661f..e610dea9 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -46,7 +46,8 @@ export const LANGUAGE = { FARSI: 'FA', TURKISH: 'TR', RUSSIAN: 'RU', - SPANISH: 'ES' + SPANISH: 'ES', + INDONESIAN: 'ID' } export const GET_DROPDOWN_DIRECTION = (direction) => { diff --git a/src/translations/index.js b/src/translations/index.js index 903578e8..babd4d1e 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -34,5 +34,11 @@ export default { SEARCH_PLACEHOLDER: 'Escribe algo...', SELECTED_ITEMS_COUNT_TEXT: 'Se han seleccionado {count} elemento(s)', NOTHING_TO_SHOW: '¡No hay nada que mostrar!' + }, + ID: { + PLACEHOLDER: 'Pilih item', + SEARCH_PLACEHOLDER: 'Ketik sesuatu...', + SELECTED_ITEMS_COUNT_TEXT: '{count} item telah dipilih', + NOTHING_TO_SHOW: 'Tidak ada yang bisa ditampilkan!' } } From 81b34c412d2ba9a8d563cf10bfaaad3a0c4499db Mon Sep 17 00:00:00 2001 From: TommysG Date: Sat, 29 Jan 2022 16:52:15 +0200 Subject: [PATCH 02/22] badgeProps added --- index.d.ts | 2 ++ src/components/Picker.js | 2 ++ src/components/RenderBadgeItem.js | 3 ++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 9c405cde..a78cbc57 100644 --- a/index.d.ts +++ b/index.d.ts @@ -78,6 +78,7 @@ declare module 'react-native-dropdown-picker' { export interface RenderBadgeItemPropsInterface { label: string; value: ValueType; + props: TouchableOpacityProps, IconComponent: () => JSX.Element; textStyle: StyleProp; badgeStyle: StyleProp; @@ -230,6 +231,7 @@ declare module 'react-native-dropdown-picker' { activityIndicatorColor?: string; props?: TouchableOpacityProps; itemProps?: TouchableOpacityProps; + badgeProps?: TouchableOpacityProps; modalProps?: ModalProps; flatListProps?: Partial>; scrollViewProps?: ScrollViewProps; diff --git a/src/components/Picker.js b/src/components/Picker.js index a154d882..d411161b 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -128,6 +128,7 @@ function Picker({ activityIndicatorColor = Colors.GREY, props = {}, itemProps = {}, + badgeProps= {}, modalProps = {}, flatListProps = {}, scrollViewProps = {}, @@ -957,6 +958,7 @@ function Picker({ */ const __renderBadge = useCallback(({item}) => ( + {showBadgeDot && } {label} From 4449b3e6db6c9dfbd78e24adf241abd5a2816f07 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Fri, 4 Feb 2022 22:53:36 +0330 Subject: [PATCH 03/22] Add onDirectionChanged typedef. --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index a78cbc57..79b4c3f6 100644 --- a/index.d.ts +++ b/index.d.ts @@ -251,6 +251,7 @@ declare module 'react-native-dropdown-picker' { onOpen?: () => void; onClose?: () => void; onChangeSearchText?: (text: string) => void; + onDirectionChanged?: (direction: DropDownDirectionType) => void; zIndex?: number; zIndexInverse?: number; disableLocalSearch?: boolean; From 410e9b7d385beff705cdfe35cfe27190603cdb4a Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Fri, 4 Feb 2022 23:14:04 +0330 Subject: [PATCH 04/22] Add onDirectionChanged prop. --- src/components/Picker.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Picker.js b/src/components/Picker.js index d411161b..25269076 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -148,6 +148,7 @@ function Picker({ setValue = (callback) => {}, onChangeValue = (value) => {}, onChangeSearchText = (text) => {}, + onDirectionChanged = (direction) => {}, zIndex = 5000, zIndexInverse = 6000, rtl = false, @@ -635,7 +636,10 @@ function Picker({ ); const size = y + maxHeight + pickerHeight + bottomOffset; - setDirection(size < WINDOW_HEIGHT ? 'top' : 'bottom'); + const direction = size < WINDOW_HEIGHT ? 'top' : 'bottom'; + + onDirectionChanged(direction); + setDirection(direction); } onPressToggle(); @@ -643,6 +647,7 @@ function Picker({ open, onPressToggle, onPress, + onDirectionChanged, maxHeight, pickerHeight, bottomOffset, From e635afa1897da8ee2b3f80275055486934d07d5e Mon Sep 17 00:00:00 2001 From: mangjuned Date: Tue, 22 Feb 2022 14:26:03 +0700 Subject: [PATCH 05/22] add renderListItem onPress params --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 79b4c3f6..e3a02878 100644 --- a/index.d.ts +++ b/index.d.ts @@ -120,7 +120,7 @@ declare module 'react-native-dropdown-picker' { containerStyle: StyleProp; labelStyle: StyleProp; categorySelectable: boolean; - onPress: () => void; + onPress: (value:ValueType) => void; setPosition: (value: ValueType, y: number) => void; theme: ThemeNameType; THEME: ThemeType; From ba04ae86b7baf175baa2613a7585f7c334032b7a Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Tue, 22 Feb 2022 11:43:46 +0330 Subject: [PATCH 06/22] Update index.d.ts --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index e3a02878..f3fbd516 100644 --- a/index.d.ts +++ b/index.d.ts @@ -120,7 +120,7 @@ declare module 'react-native-dropdown-picker' { containerStyle: StyleProp; labelStyle: StyleProp; categorySelectable: boolean; - onPress: (value:ValueType) => void; + onPress: (value: ValueType) => void; setPosition: (value: ValueType, y: number) => void; theme: ThemeNameType; THEME: ThemeType; From 72c67634a32aaf26016c2d3e093e6aaa21c38dd4 Mon Sep 17 00:00:00 2001 From: Mickael Lecoq Date: Thu, 10 Mar 2022 12:40:27 +0100 Subject: [PATCH 07/22] fix: set dropdown as generic --- index.d.ts | 71 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/index.d.ts b/index.d.ts index f3fbd516..cdf9fbfd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,5 @@ declare module 'react-native-dropdown-picker' { - import type { ComponentType, SetStateAction, Dispatch } from 'react'; + import type { SetStateAction, Dispatch, PropsWithoutRef } from 'react'; import type { FlatListProps, LayoutChangeEvent, @@ -16,11 +16,11 @@ declare module 'react-native-dropdown-picker' { export type ValueType = string | number | boolean; - export type ItemType = { + export type ItemType = { label?: string; - value?: ValueType; + value?: T; icon?: () => void; - parent?: ValueType; + parent?: T; selectable?: boolean; disabled?: boolean; testID?: string; @@ -75,10 +75,10 @@ declare module 'react-native-dropdown-picker' { NOTHING_TO_SHOW: string; } - export interface RenderBadgeItemPropsInterface { + export interface RenderBadgeItemPropsInterface { label: string; - value: ValueType; - props: TouchableOpacityProps, + value: T; + props: TouchableOpacityProps; IconComponent: () => JSX.Element; textStyle: StyleProp; badgeStyle: StyleProp; @@ -87,17 +87,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 { rtl: boolean; - item: ItemType; + item: ItemType; label: string; - value: ValueType; - parent: ValueType; + value: T; + parent: T; selectable: boolean; disabled: boolean; props: ViewProps; @@ -120,8 +120,8 @@ declare module 'react-native-dropdown-picker' { containerStyle: StyleProp; labelStyle: StyleProp; categorySelectable: boolean; - onPress: (value: ValueType) => void; - setPosition: (value: ValueType, y: number) => void; + onPress: (value: T) => void; + setPosition: (value: T, y: number) => void; theme: ThemeNameType; THEME: ThemeType; } @@ -145,8 +145,8 @@ declare module 'react-native-dropdown-picker' { export type ThemeNameType = 'DEFAULT' | 'LIGHT' | 'DARK'; export type ThemeType = object; - interface DropDownPickerBaseProps { - items: ItemType[]; + interface DropDownPickerBaseProps { + items: ItemType[]; open: boolean; placeholder?: string; closeAfterSelecting?: boolean; @@ -200,8 +200,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) => JSX.Element; + renderListItem?: (props: RenderListItemPropsInterface) => JSX.Element; itemSeparator?: boolean; bottomOffset?: number; badgeColors?: string[] | string; @@ -233,7 +233,7 @@ declare module 'react-native-dropdown-picker' { itemProps?: TouchableOpacityProps; badgeProps?: TouchableOpacityProps; modalProps?: ModalProps; - flatListProps?: Partial>; + flatListProps?: Partial>>; scrollViewProps?: ScrollViewProps; searchTextInputProps?: TextInputProps; modalTitle?: string; @@ -262,20 +262,20 @@ declare module 'react-native-dropdown-picker' { closeOnBackPressed?: boolean; } - interface DropDownPickerSingleProps { + interface DropDownPickerSingleProps { multiple?: false; - onChangeValue?: (value: ValueType | null) => void; - onSelectItem?: (item: ItemType) => void; - setValue: Dispatch>; - value: ValueType | null; + onChangeValue?: (value: T | null) => void; + onSelectItem?: (item: ItemType) => void; + setValue: Dispatch>; + value: T | null; } - interface DropDownPickerMultipleProps { + interface DropDownPickerMultipleProps { multiple: true; - onChangeValue?: (value: ValueType[] | null) => void; - onSelectItem?: (items: ItemType[]) => void; - setValue: Dispatch>; - value: ValueType[] | null; + onChangeValue?: (value: T[] | null) => void; + onSelectItem?: (items: ItemType[]) => void; + setValue: Dispatch>; + value: T[] | null; } interface DropDownPickerInterface { @@ -301,13 +301,16 @@ declare module 'react-native-dropdown-picker' { ) => void; } - export type DropDownPickerProps = ( - | DropDownPickerSingleProps - | DropDownPickerMultipleProps + export type DropDownPickerProps = ( + | DropDownPickerSingleProps + | DropDownPickerMultipleProps ) & - DropDownPickerBaseProps; + DropDownPickerBaseProps; - const DropDownPicker: ComponentType & + const DropDownPicker: (( + props: PropsWithoutRef>, + ) => React.ReactElement) & DropDownPickerInterface; + export default DropDownPicker; } From 71c166b68d3d8fc0ac8356eb487c091c0aa1253c Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Thu, 24 Mar 2022 03:24:34 +0430 Subject: [PATCH 08/22] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aff68802..886b73ea 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# React Native Dropdown Picker 5.x +# React Native Dropdown Picker 5.x [![Verified on Openbase](https://badges.openbase.com/js/verified/react-native-dropdown-picker.svg?token=Z1kyT9XFZj/yUB3urbRXWJEt/4f2e3yjjbPIlhhotNo=)](https://openbase.com/js/react-native-dropdown-picker?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)

Screenshot From e37d8696f5010d45c0a0998a787fe675d87fdb24 Mon Sep 17 00:00:00 2001 From: Angelk90 Date: Sun, 27 Mar 2022 17:15:20 +0200 Subject: [PATCH 09/22] add italian translation --- index.d.ts | 3 ++- src/constants/index.js | 3 ++- src/translations/index.js | 8 +++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/index.d.ts b/index.d.ts index cdf9fbfd..3b2f4d00 100644 --- a/index.d.ts +++ b/index.d.ts @@ -66,7 +66,8 @@ declare module 'react-native-dropdown-picker' { | 'TR' | 'RU' | 'ES' - | 'ID'; + | 'ID' + | 'IT'; export interface TranslationInterface { PLACEHOLDER: string; diff --git a/src/constants/index.js b/src/constants/index.js index e610dea9..f4e9c768 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -47,7 +47,8 @@ export const LANGUAGE = { TURKISH: 'TR', RUSSIAN: 'RU', SPANISH: 'ES', - INDONESIAN: 'ID' + INDONESIAN: 'ID', + ITALIAN: 'IT' } export const GET_DROPDOWN_DIRECTION = (direction) => { diff --git a/src/translations/index.js b/src/translations/index.js index babd4d1e..9127fc6f 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -40,5 +40,11 @@ export default { SEARCH_PLACEHOLDER: 'Ketik sesuatu...', SELECTED_ITEMS_COUNT_TEXT: '{count} item telah dipilih', NOTHING_TO_SHOW: 'Tidak ada yang bisa ditampilkan!' - } + }, + IT: { + PLACEHOLDER: 'Seleziona un elemento', + SEARCH_PLACEHOLDER: 'Digita qualcosa...', + SELECTED_ITEMS_COUNT_TEXT: {count} === 1 ? '1 elemento è stato selezionato' : '{count} elementi sono stati selezionati', + NOTHING_TO_SHOW: 'Non c\'è nulla da mostrare!' + }, } From c16e21ec263cb8337684057adf60f4418af5c65c Mon Sep 17 00:00:00 2001 From: Angelk90 Date: Sun, 27 Mar 2022 18:10:31 +0200 Subject: [PATCH 10/22] Update index.js --- 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 9127fc6f..38fb9ead 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -44,7 +44,7 @@ export default { IT: { PLACEHOLDER: 'Seleziona un elemento', SEARCH_PLACEHOLDER: 'Digita qualcosa...', - SELECTED_ITEMS_COUNT_TEXT: {count} === 1 ? '1 elemento è stato selezionato' : '{count} elementi sono stati selezionati', + SELECTED_ITEMS_COUNT_TEXT: 'Si sta selezionando {count} elemento(i)', NOTHING_TO_SHOW: 'Non c\'è nulla da mostrare!' }, } From 54dd5a43c0509842f0d7dc91d2dd75b8b514cd6b Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Sun, 27 Mar 2022 22:02:29 +0430 Subject: [PATCH 11/22] Update index.js --- src/themes/dark/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/themes/dark/index.js b/src/themes/dark/index.js index 6f3fb4f4..e19831b9 100644 --- a/src/themes/dark/index.js +++ b/src/themes/dark/index.js @@ -159,7 +159,7 @@ export default StyleSheet.create({ padding: 10, }, listMessageText: { - + color: Colors.HEATHER }, selectedItemContainer: { @@ -171,4 +171,4 @@ export default StyleSheet.create({ fontSize: 18, color: Colors.HEATHER } -}); \ No newline at end of file +}); From cdb37508decb0bd5cdf504a577e6576a01242bc8 Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Sun, 27 Mar 2022 22:32:45 +0430 Subject: [PATCH 12/22] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 886b73ea..6b0b42a7 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,8 @@ Screenshot

+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/** From 0d5cb65d65cbb94260d0e80d744024f8185bdd54 Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Mon, 28 Mar 2022 01:39:06 +0430 Subject: [PATCH 13/22] Update index.js --- src/translations/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/translations/index.js b/src/translations/index.js index 38fb9ead..f7e51276 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -44,7 +44,10 @@ export default { IT: { PLACEHOLDER: 'Seleziona un elemento', SEARCH_PLACEHOLDER: 'Digita qualcosa...', - SELECTED_ITEMS_COUNT_TEXT: 'Si sta selezionando {count} elemento(i)', + SELECTED_ITEMS_COUNT_TEXT: { + 1: '1 elemento è stato selezionato', + n: '{count} elementi sono stati selezionati' + }, NOTHING_TO_SHOW: 'Non c\'è nulla da mostrare!' }, } From 91d6d6bcc0cc21e95929c6078834bf5ab71b3501 Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Mon, 28 Mar 2022 01:51:15 +0430 Subject: [PATCH 14/22] Update Picker.js --- src/components/Picker.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Picker.js b/src/components/Picker.js index 25269076..1d565223 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -588,9 +588,15 @@ function Picker({ const item = getSelectedItem(); if (multiple) - if (item.length > 0) - return _multipleText.replace('{count}', item.length); - else + if (item.length > 0) { + let mtext = _multipleText; + + if (typeof mtext !== 'string') { + mtext = mtext[item.length] ?? mtext.n; + } + + return mtext.replace('{count}', item.length); + } else return fallback; try { From 5302299e4d4135fc266b040efd24155411732ad8 Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Mon, 28 Mar 2022 01:54:44 +0430 Subject: [PATCH 15/22] Update translations. --- src/translations/index.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/translations/index.js b/src/translations/index.js index babd4d1e..a441239d 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -2,7 +2,10 @@ export default { EN: { PLACEHOLDER: 'Select an item', SEARCH_PLACEHOLDER: 'Type something...', - SELECTED_ITEMS_COUNT_TEXT: '{count} item(s) have been selected', + SELECTED_ITEMS_COUNT_TEXT: { + 1: 'An item has been selected', + n: '{count} items have been selected' + }, NOTHING_TO_SHOW: 'There\'s nothing to show!' }, AR: { @@ -14,13 +17,19 @@ export default { FA: { PLACEHOLDER: 'آیتمی انتخاب کنید', SEARCH_PLACEHOLDER: 'چیزی تایپ کنید...', - SELECTED_ITEMS_COUNT_TEXT: '{count} آیتم انتخاب شده است', + SELECTED_ITEMS_COUNT_TEXT: { + 1: 'یک آیتم انتخاب شده است', + n: '{count} آیتم انتخاب شده است' + }, NOTHING_TO_SHOW: 'چیزی برای نمایش وجود ندارد!' }, TR: { PLACEHOLDER: 'Bir seçenek seçin', SEARCH_PLACEHOLDER: 'Arama...', - SELECTED_ITEMS_COUNT_TEXT: '{count} öğe seçildi', + SELECTED_ITEMS_COUNT_TEXT: { + 1: 'Bir öğe seçildi', + n: '{count} öğe seçildi' + }, NOTHING_TO_SHOW: 'Gösterecek hiçbir şey yok!' }, RU: { From 403d1c0cbeefa3dd974c56f119c2043804221316 Mon Sep 17 00:00:00 2001 From: Angelk90 Date: Mon, 28 Mar 2022 08:53:28 +0200 Subject: [PATCH 16/22] Update translations ita --- 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 f7e51276..dcc3f7e6 100644 --- a/src/translations/index.js +++ b/src/translations/index.js @@ -45,7 +45,7 @@ export default { PLACEHOLDER: 'Seleziona un elemento', SEARCH_PLACEHOLDER: 'Digita qualcosa...', SELECTED_ITEMS_COUNT_TEXT: { - 1: '1 elemento è stato selezionato', + 1: 'Un elemento è stato selezionato', n: '{count} elementi sono stati selezionati' }, NOTHING_TO_SHOW: 'Non c\'è nulla da mostrare!' From f92283d806e3c8811f58e2ad20edd764fa7d23fc Mon Sep 17 00:00:00 2001 From: Justin D Mathew Date: Tue, 5 Apr 2022 21:01:46 +0100 Subject: [PATCH 17/22] Updated setState types The types specified for `SetValue`, `SetOpen` and `SetItems` are incorrect because we explicitly pass a call back or a value in the Picker. For example see `SetValue` here: https://github.com/hossein-zare/react-native-dropdown-picker/blob/743acd6eaaa28f149cd025d7108c97dbe8ff6de1/src/components/Picker.js#L1229 --- index.d.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/index.d.ts b/index.d.ts index 3b2f4d00..d789bae2 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,5 @@ declare module 'react-native-dropdown-picker' { - import type { SetStateAction, Dispatch, PropsWithoutRef } from 'react'; + import type { Dispatch, PropsWithoutRef } from 'react'; import type { FlatListProps, LayoutChangeEvent, @@ -14,6 +14,9 @@ declare module 'react-native-dropdown-picker' { ViewStyle, } from 'react-native'; + type SetStateCallback = ((prevState: S) => S); + type SetStateValue = ((prevState: S) => S); + export type ValueType = string | number | boolean; export type ItemType = { @@ -243,8 +246,8 @@ declare module 'react-native-dropdown-picker' { min?: number; max?: number; addCustomItem?: boolean; - setOpen: Dispatch>; - setItems?: Dispatch>; + setOpen: Dispatch>; + setItems?: Dispatch>; disableBorderRadius?: boolean; containerProps?: ViewProps; onLayout?: (e: LayoutChangeEvent) => void; @@ -267,7 +270,7 @@ declare module 'react-native-dropdown-picker' { multiple?: false; onChangeValue?: (value: T | null) => void; onSelectItem?: (item: ItemType) => void; - setValue: Dispatch>; + setValue: Dispatch>; value: T | null; } @@ -275,7 +278,7 @@ declare module 'react-native-dropdown-picker' { multiple: true; onChangeValue?: (value: T[] | null) => void; onSelectItem?: (items: ItemType[]) => void; - setValue: Dispatch>; + setValue: Dispatch>; value: T[] | null; } From c8d31ecb38c72f80bf7bbc350130127b19bf338e Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Fri, 8 Apr 2022 00:54:11 +0430 Subject: [PATCH 18/22] Add `hideSelectedItemIcon` --- index.d.ts | 1 + src/components/Picker.js | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 3b2f4d00..dbb22c9e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -261,6 +261,7 @@ declare module 'react-native-dropdown-picker' { rtl?: boolean; testID?: string; closeOnBackPressed?: boolean; + hideSelectedItemIcon?: boolean; } interface DropDownPickerSingleProps { diff --git a/src/components/Picker.js b/src/components/Picker.js index 1d565223..4dba6072 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -65,6 +65,7 @@ function Picker({ arrowIconStyle = {}, tickIconStyle = {}, closeIconStyle = {}, + hideSelectedItemIcon = false, badgeStyle = {}, badgeTextStyle = {}, badgeDotStyle = {}, @@ -876,12 +877,15 @@ function Picker({ const SelectedItemIconComponent = useMemo(() => { const Component = _selectedItemIcon(); + if (hideSelectedItemIcon) + return null; + return Component !== null && ( ); - }, [_selectedItemIcon, _iconContainerStyle]); + }, [_selectedItemIcon, hideSelectedItemIcon, _iconContainerStyle]); /** * The simple body component. @@ -1199,7 +1203,6 @@ function Picker({ ...[textStyle].flat(), ...[listMessageTextStyle].flat() ]), [listMessageTextStyle, THEME]); - /** * onPress item. From eb919cf96cd27f4b5f4936cc1c285a815f8b6f20 Mon Sep 17 00:00:00 2001 From: Hossein Zare <56504893+hossein-zare@users.noreply.github.com> Date: Fri, 8 Apr 2022 01:34:08 +0430 Subject: [PATCH 19/22] Update index.d.ts --- index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index d789bae2..79d507fe 100644 --- a/index.d.ts +++ b/index.d.ts @@ -270,7 +270,7 @@ declare module 'react-native-dropdown-picker' { multiple?: false; onChangeValue?: (value: T | null) => void; onSelectItem?: (item: ItemType) => void; - setValue: Dispatch>; + setValue: Dispatch>; value: T | null; } @@ -278,7 +278,7 @@ declare module 'react-native-dropdown-picker' { multiple: true; onChangeValue?: (value: T[] | null) => void; onSelectItem?: (items: ItemType[]) => void; - setValue: Dispatch>; + setValue: Dispatch>; value: T[] | null; } From 7b5e92196f9345505f870addfde79499fb35bc36 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Fri, 8 Apr 2022 02:50:08 +0430 Subject: [PATCH 20/22] Add `extendableBadgeContainer` prop. --- index.d.ts | 1 + package.json | 2 +- src/components/Picker.js | 88 ++++++++++++++++++++++++++++++--------- src/themes/dark/index.js | 12 +++++- src/themes/light/index.js | 12 +++++- 5 files changed, 92 insertions(+), 23 deletions(-) diff --git a/index.d.ts b/index.d.ts index 4c8c3790..50621112 100644 --- a/index.d.ts +++ b/index.d.ts @@ -265,6 +265,7 @@ declare module 'react-native-dropdown-picker' { testID?: string; closeOnBackPressed?: boolean; hideSelectedItemIcon?: boolean; + extendableBadgeContainer?: boolean; } interface DropDownPickerSingleProps { diff --git a/package.json b/package.json index 1846f418..9472e79e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-dropdown-picker", - "version": "5.3.0", + "version": "5.4.0-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 4dba6072..6ddf29b6 100644 --- a/src/components/Picker.js +++ b/src/components/Picker.js @@ -158,6 +158,7 @@ function Picker({ theme = THEMES.DEFAULT, testID, closeOnBackPressed = false, + extendableBadgeContainer = false, onSelectItem = (item) => {} }) { const [necessaryItems, setNecessaryItems] = useState([]); @@ -1039,10 +1040,10 @@ function Picker({ ), [_badgeSeparatorStyle]); /** - * The label container. + * The label container style. * @returns {object} */ - const labelContainer = useMemo(() => ([ + const labelContainerStyle = useMemo(() => ([ THEME.labelContainer, rtl && { transform: [ {scaleX: -1} @@ -1055,12 +1056,12 @@ function Picker({ * @returns {JSX.Element} */ const BadgeListEmptyComponent = useCallback(() => ( - + {_placeholder} - ), [_labelStyle, labelContainer, labelProps, _placeholder]); + ), [_labelStyle, labelContainerStyle, labelProps, _placeholder]); /** * Set ref. @@ -1069,26 +1070,73 @@ function Picker({ badgeFlatListRef.current = ref; }, []); + /** + * The extendable badge container style. + * @returns {object} + */ + const extendableBadgeContainerStyle = useMemo(() => ([ + RTL_DIRECTION(rtl, THEME.extendableBadgeContainer) + ]), [rtl, THEME]); + + /** + * The extendable badge item container style. + * @returns {object} + */ + const extendableBadgeItemContainerStyle = useMemo(() => ([ + THEME.extendableBadgeItemContainer, rtl && { + marginEnd: 0, + marginStart: THEME.extendableBadgeItemContainer.marginEnd + } + ]), [rtl, THEME]); + + /** + * Extendable badge container. + * @returns {JSX.Element} + */ + const ExtendableBadgeContainer = useCallback(({selectedItems}) => { + if (selectedItems.length > 0) { + return ( + + {selectedItems.map((item, index) => ( + + <__renderBadge item={item} /> + + ))} + + ); + } + + return ; + }, [__renderBadge, extendableBadgeContainerStyle, extendableBadgeItemContainerStyle]); + /** * The badge body component. * @returns {JSX.Element} */ - const BadgeBodyComponent = useMemo(() => ( - - ), [ + const BadgeBodyComponent = useMemo(() => { + if (extendableBadgeContainer) { + return + } + + return ( + + ); + }, [ rtl, + extendableBadgeContainer, + ExtendableBadgeContainer, selectedItems, __renderBadge, keyExtractor, @@ -1765,4 +1813,4 @@ const styles = StyleSheet.create({ } }); -export default memo(Picker); +export default memo(Picker); \ No newline at end of file diff --git a/src/themes/dark/index.js b/src/themes/dark/index.js index e19831b9..1d778d9a 100644 --- a/src/themes/dark/index.js +++ b/src/themes/dark/index.js @@ -20,11 +20,12 @@ export default StyleSheet.create({ alignItems: 'center', justifyContent: 'space-between', width: '100%', - height: 50, + minHeight: 50, borderRadius: 8, borderWidth: 1, borderColor: Colors.BLACK, paddingHorizontal: 10, + paddingVertical: 3, backgroundColor: Colors.EBONY_CLAY, }, label: { @@ -170,5 +171,14 @@ export default StyleSheet.create({ modalTitle: { fontSize: 18, color: Colors.HEATHER + }, + extendableBadgeContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + flex: 1 + }, + extendableBadgeItemContainer: { + marginVertical: 3, + marginEnd: 7 } }); diff --git a/src/themes/light/index.js b/src/themes/light/index.js index 4186419a..ba38795c 100644 --- a/src/themes/light/index.js +++ b/src/themes/light/index.js @@ -20,11 +20,12 @@ export default StyleSheet.create({ alignItems: 'center', justifyContent: 'space-between', width: '100%', - height: 50, + minHeight: 50, borderRadius: 8, borderWidth: 1, borderColor: Colors.BLACK, paddingHorizontal: 10, + paddingVertical: 3, backgroundColor: Colors.WHITE }, label: { @@ -169,5 +170,14 @@ export default StyleSheet.create({ modalTitle: { fontSize: 18, color: Colors.BLACK + }, + extendableBadgeContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + flex: 1 + }, + extendableBadgeItemContainer: { + marginVertical: 3, + marginEnd: 7 } }); \ No newline at end of file From 7c4ead05c8d983b3882ec1822b48a27aeadebaf3 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Fri, 8 Apr 2022 04:33:25 +0430 Subject: [PATCH 21/22] Update version [v5.4.0] --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6b0b42a7..a60397e2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# React Native Dropdown Picker 5.x [![Verified on Openbase](https://badges.openbase.com/js/verified/react-native-dropdown-picker.svg?token=Z1kyT9XFZj/yUB3urbRXWJEt/4f2e3yjjbPIlhhotNo=)](https://openbase.com/js/react-native-dropdown-picker?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) +# React Native Dropdown Picker 5.x

Screenshot diff --git a/package.json b/package.json index 9472e79e..a03b8238 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-dropdown-picker", - "version": "5.4.0-beta.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", From b3c52d402ba8a2a1cca24bb67eabfcb6384531f0 Mon Sep 17 00:00:00 2001 From: Hossein Zare Date: Fri, 8 Apr 2022 04:37:56 +0430 Subject: [PATCH 22/22] Update SELECTED_ITEMS_COUNT_TEXT typedef. --- index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 50621112..9beba118 100644 --- a/index.d.ts +++ b/index.d.ts @@ -75,7 +75,9 @@ declare module 'react-native-dropdown-picker' { 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; }