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

Comparing version 5.4.0-beta.0 to 5.4.0

.eslintrc.js

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

index.d.ts

 declare module 'react-native-dropdown-picker' {
-  import type { SetStateAction, Dispatch, PropsWithoutRef } from 'react';
+  import type { Dispatch, PropsWithoutRef } from 'react';
   import type {
@@ -17,2 +17,5 @@ FlatListProps,
 
+  type SetStateCallback<S> = ((prevState: S) => S);
+  type SetStateValue<S> = ((prevState: S) => S);
+
   export type ValueType = string | number | boolean;
@@ -76,3 +79,5 @@
     SEARCH_PLACEHOLDER: string;
-    SELECTED_ITEMS_COUNT_TEXT: string;
+    SELECTED_ITEMS_COUNT_TEXT: string | {
+      [key in (number | "n")]: string;
+    };
     NOTHING_TO_SHOW: string;
@@ -248,4 +253,4 @@ }
     addCustomItem?: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
-    setItems?: Dispatch<SetStateAction<any[]>>;
+    setOpen: Dispatch<SetStateValue<boolean>>;
+    setItems?: Dispatch<SetStateCallback<any[]>>;
     disableBorderRadius?: boolean;
@@ -268,2 +273,3 @@ containerProps?: ViewProps;
     hideSelectedItemIcon?: boolean;
+    extendableBadgeContainer?: boolean;
   }
@@ -275,3 +281,3 @@
     onSelectItem?: (item: ItemType<T>) => void;
-    setValue: Dispatch<SetStateAction<T | null>>;
+    setValue: Dispatch<SetStateCallback<T | null | any>>;
     value: T | null;
@@ -284,3 +290,3 @@ }
     onSelectItem?: (items: ItemType<T>[]) => void;
-    setValue: Dispatch<SetStateAction<T[] | null>>;
+    setValue: Dispatch<SetStateCallback<T[] | null | any>>;
     value: T[] | null;
@@ -287,0 +293,0 @@ }

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

README.md

@@ -1,2 +0,2 @@
-# 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
 
@@ -3,0 +3,0 @@ <p float="left">

src/components/ListEmpty.js

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

src/components/Picker.js

@@ -161,2 +161,3 @@ import React, {
     closeOnBackPressed = false,
+    extendableBadgeContainer = false,
     onSelectItem = (item) => {}
@@ -1043,6 +1044,6 @@ }) {
     /**
-     * The label container.
+     * The label container style.
      * @returns {object}
      */
-    const labelContainer = useMemo(() => ([
+    const labelContainerStyle = useMemo(() => ([
         THEME.labelContainer, rtl && {
@@ -1060,3 +1061,3 @@ transform: [
     const BadgeListEmptyComponent = useCallback(() => (
-        <View style={labelContainer}>
+        <View style={labelContainerStyle}>
             <Text style={_labelStyle} {...labelProps}>
@@ -1066,3 +1067,3 @@ {_placeholder}
         </View>
-    ), [_labelStyle, labelContainer, labelProps, _placeholder]);
+    ), [_labelStyle, labelContainerStyle, labelProps, _placeholder]);
 
@@ -1077,21 +1078,68 @@ /**
     /**
+     * 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 (
+                <View style={extendableBadgeContainerStyle}>
+                    {selectedItems.map((item, index) => (
+                        <View key={index} style={extendableBadgeItemContainerStyle}>
+                            <__renderBadge item={item} />
+                        </View>
+                    ))}
+                </View>
+            );
+        }
+        
+        return <BadgeListEmptyComponent />;
+    }, [__renderBadge, extendableBadgeContainerStyle, extendableBadgeItemContainerStyle]);
+
+    /**
      * The badge body component.
      * @returns {JSX.Element}
      */
-     const BadgeBodyComponent = useMemo(() => (
-        <FlatList
-            ref={setBadgeFlatListRef}
-            data={selectedItems}
-            renderItem={__renderBadge}
-            horizontal={true}
-            showsHorizontalScrollIndicator={false}
-            keyExtractor={keyExtractor}
-            ItemSeparatorComponent={BadgeSeparatorComponent}
-            ListEmptyComponent={BadgeListEmptyComponent}
-            style={THEME.listBody}
-            contentContainerStyle={THEME.listBodyContainer}
-            inverted={rtl}
-        />
-    ), [
+     const BadgeBodyComponent = useMemo(() => {
+        if (extendableBadgeContainer) { 
+            return <ExtendableBadgeContainer selectedItems={selectedItems} />
+        }
+        
+        return (
+            <FlatList
+                ref={setBadgeFlatListRef}
+                data={selectedItems}
+                renderItem={__renderBadge}
+                horizontal={true}
+                showsHorizontalScrollIndicator={false}
+                keyExtractor={keyExtractor}
+                ItemSeparatorComponent={BadgeSeparatorComponent}
+                ListEmptyComponent={BadgeListEmptyComponent}
+                style={THEME.listBody}
+                contentContainerStyle={THEME.listBodyContainer}
+                inverted={rtl}
+            />
+        );
+    }, [
         rtl,
+        extendableBadgeContainer,
+        ExtendableBadgeContainer,
         selectedItems,
@@ -1773,2 +1821,2 @@ __renderBadge,
 
-export default memo(Picker);
+export default memo(Picker);

src/components/RenderBadgeItem.js

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

src/components/RenderListItem.js

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

src/constants/colors.js

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

src/constants/index.js

@@ -0,0 +0,0 @@ import {I18nManager} from 'react-native';

src/themes/dark/index.js

@@ -23,3 +23,3 @@ import {
         width: '100%',
-        height: 50,
+        minHeight: 50,
         borderRadius: 8,
@@ -29,2 +29,3 @@ borderWidth: 1,
         paddingHorizontal: 10,
+        paddingVertical: 3,
         backgroundColor: Colors.EBONY_CLAY,
@@ -175,3 +176,12 @@ },
         color: Colors.HEATHER
+    },
+    extendableBadgeContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        flex: 1
+    },
+    extendableBadgeItemContainer: {
+        marginVertical: 3,
+        marginEnd: 7
     }
 });

src/themes/index.js

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

src/themes/light/index.js

@@ -23,3 +23,3 @@ import {
         width: '100%',
-        height: 50,
+        minHeight: 50,
         borderRadius: 8,
@@ -29,2 +29,3 @@ borderWidth: 1,
         paddingHorizontal: 10,
+        paddingVertical: 3,
         backgroundColor: Colors.WHITE
@@ -174,3 +175,12 @@ },
         color: Colors.BLACK
+    },
+    extendableBadgeContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        flex: 1
+    },
+    extendableBadgeItemContainer: {
+        marginVertical: 3,
+        marginEnd: 7
     }
 });

src/translations/index.js

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

tsconfig.json

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

Fixed 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

Lines of code

2894

increased by2.37%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

159848

decreased by-0.78%

No dependency changes