react-native-dropdown-picker - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0-beta.0

.eslintrc.js

@@ -0,0 +0,0 @@ module.exports = {

index.d.ts

 declare module 'react-native-dropdown-picker' {
-  import type { ComponentType, SetStateAction, Dispatch } from 'react';
+  import type { SetStateAction, Dispatch, PropsWithoutRef } from 'react';
   import type {
@@ -19,7 +19,7 @@ FlatListProps,
 
-  export type ItemType = {
+  export type ItemType<T> = {
     label?: string;
-    value?: ValueType;
+    value?: T;
     icon?: () => void;
-    parent?: ValueType;
+    parent?: T;
     selectable?: boolean;
@@ -69,3 +69,5 @@ disabled?: boolean;
     | 'RU'
-    | 'ES';
+    | 'ES'
+    | 'ID'
+    | 'IT';
 
@@ -79,5 +81,6 @@ export interface TranslationInterface {
 
-  export interface RenderBadgeItemPropsInterface {
+  export interface RenderBadgeItemPropsInterface<T> {
     label: string;
-    value: ValueType;
+    value: T;
+    props: TouchableOpacityProps;
     IconComponent: () => JSX.Element;
@@ -91,3 +94,3 @@ textStyle: StyleProp<TextStyle>;
     showBadgeDot: boolean;
-    onPress: (value: ValueType) => void;
+    onPress: (value: T) => void;
     rtl: boolean;
@@ -97,8 +100,8 @@ 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;
@@ -126,4 +129,4 @@ disabled: boolean;
     categorySelectable: boolean;
-    onPress: () => void;
-    setPosition: (value: ValueType, y: number) => void;
+    onPress: (value: T) => void;
+    setPosition: (value: T, y: number) => void;
     theme: ThemeNameType;
@@ -152,4 +155,4 @@ THEME: ThemeType;
 
-  interface DropDownPickerBaseProps {
-    items: ItemType[];
+  interface DropDownPickerBaseProps<T> {
+    items: ItemType<T>[];
     open: boolean;
@@ -208,4 +211,4 @@ placeholder?: 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;
@@ -240,4 +243,5 @@ bottomOffset?: number;
     itemProps?: TouchableOpacityProps;
+    badgeProps?: TouchableOpacityProps;
     modalProps?: ModalProps;
-    flatListProps?: Partial<FlatListProps<ItemType>>;
+    flatListProps?: Partial<FlatListProps<ItemType<T>>>;
     scrollViewProps?: ScrollViewProps;
@@ -260,2 +264,3 @@ searchTextInputProps?: TextInputProps;
     onChangeSearchText?: (text: string) => void;
+    onDirectionChanged?: (direction: DropDownDirectionType) => void;
     zIndex?: number;
@@ -269,18 +274,19 @@ zIndexInverse?: number;
     closeOnBackPressed?: boolean;
+    hideSelectedItemIcon?: 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<SetStateAction<T | null>>;
+    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<SetStateAction<T[] | null>>;
+    value: T[] | null;
   }
@@ -311,11 +317,14 @@
 
-  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;
 }

index.js

@@ -0,0 +0,0 @@ import { MODE, LIST_MODE, DROPDOWN_DIRECTION, LANGUAGE, TRANSLATIONS } from './src/constants';

package.json

 {
   "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.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,2 +0,2 @@
-# 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)
 
@@ -9,2 +9,4 @@ <p float="left">
 
+The example in the screenshots: https://snack.expo.dev/8mHmLfcZf
+
 # Documentation
@@ -11,0 +13,0 @@ **The documentation has been moved to https://hossein-zare.github.io/react-native-dropdown-picker-website/**

src/components/ListEmpty.js

@@ -0,0 +0,0 @@ import React, { memo } from 'react';

src/components/Picker.js

@@ -68,2 +68,3 @@ import React, {
     closeIconStyle = {},
+    hideSelectedItemIcon = false,
     badgeStyle = {},
@@ -132,2 +133,3 @@ badgeTextStyle = {},
     itemProps = {},
+    badgeProps= {},
     modalProps = {},
@@ -152,2 +154,3 @@ flatListProps = {},
     onChangeSearchText = (text) => {},
+    onDirectionChanged = (direction) => {},
     zIndex = 5000,
@@ -592,5 +595,11 @@ zIndexInverse = 6000,
         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;
@@ -641,3 +650,6 @@
 
-            setDirection(size < WINDOW_HEIGHT ? 'top' : 'bottom');
+            const direction = size < WINDOW_HEIGHT ? 'top' : 'bottom';
+
+            onDirectionChanged(direction);
+            setDirection(direction);
         }
@@ -650,2 +662,3 @@
         onPress,
+        onDirectionChanged,
         maxHeight,
@@ -873,2 +886,5 @@ pickerHeight,
 
+        if (hideSelectedItemIcon)
+            return null;
+
         return Component !== null && (
@@ -879,3 +895,3 @@ <View style={_iconContainerStyle}>
         );
-     }, [_selectedItemIcon, _iconContainerStyle]);
+     }, [_selectedItemIcon, hideSelectedItemIcon, _iconContainerStyle]);
 
@@ -968,2 +984,3 @@ /**
         <RenderBadgeComponent
+            props={badgeProps}
             rtl={rtl}
@@ -1198,3 +1215,2 @@ label={item[_schema.label]}
     ]), [listMessageTextStyle, THEME]);
-    
 
@@ -1201,0 +1217,0 @@ /**

src/components/RenderBadgeItem.js

@@ -16,2 +16,3 @@ import React, {
     label,
+    props,
     value,
@@ -65,3 +66,3 @@ textStyle,
     return (
-        <TouchableOpacity style={_badgeStyle} onPress={__onPress}>
+        <TouchableOpacity style={_badgeStyle} {...props} onPress={__onPress}>
             {showBadgeDot && <View style={_badgeDotStyle} />}
@@ -68,0 +69,0 @@ <Text style={_badgeTextStyle}>{label}</Text>

src/components/RenderListItem.js

@@ -0,0 +0,0 @@ import React, {

src/constants/colors.js

@@ -0,0 +0,0 @@ export default {

src/constants/index.js

@@ -49,3 +49,5 @@ import {I18nManager} from 'react-native';
     RUSSIAN: 'RU',
-    SPANISH: 'ES'
+    SPANISH: 'ES',
+    INDONESIAN: 'ID',
+    ITALIAN: 'IT'
 }
@@ -52,0 +54,0 @@

src/themes/dark/index.js

@@ -162,3 +162,3 @@ import {
     listMessageText: {
-
+        color: Colors.HEATHER
     },
@@ -175,2 +175,2 @@ selectedItemContainer: {
     }
-});
+});

src/themes/index.js

@@ -0,0 +0,0 @@ export default {

src/themes/light/index.js

@@ -0,0 +0,0 @@ import {

src/translations/index.js

@@ -5,3 +5,6 @@ export default {
         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!'
@@ -18,3 +21,6 @@ },
         SEARCH_PLACEHOLDER: 'چیزی تایپ کنید...',
-        SELECTED_ITEMS_COUNT_TEXT: '{count} آیتم انتخاب شده است',
+        SELECTED_ITEMS_COUNT_TEXT: {
+            1: 'یک آیتم انتخاب شده است',
+            n: '{count} آیتم انتخاب شده است'
+        },
         NOTHING_TO_SHOW: 'چیزی برای نمایش وجود ندارد!'
@@ -25,3 +31,6 @@ },
         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!'
@@ -40,3 +49,18 @@ },
         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!'
+    },
+    IT: {
+        PLACEHOLDER: 'Seleziona un elemento',
+        SEARCH_PLACEHOLDER: 'Digita qualcosa...',
+        SELECTED_ITEMS_COUNT_TEXT: {
+            1: 'Un elemento è stato selezionato',
+            n: '{count} elementi sono stati selezionati'
+        },
+        NOTHING_TO_SHOW: 'Non c\'è nulla da mostrare!'
+    },
 }

tsconfig.json

@@ -0,0 +0,0 @@ {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

161108

increased by3.35%

Lines of code

2827

increased by1.8%

Number of lines in readme file

35

increased by6.06%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes