Add extendableBadgeContainer prop.

Author: hossein-zare

index.d.ts

@@ -265,6 +265,7 @@ declare module 'react-native-dropdown-picker' {
     testID?: string;
     closeOnBackPressed?: boolean;
     hideSelectedItemIcon?: boolean;
+    extendableBadgeContainer?: boolean;
   }
 
   interface DropDownPickerSingleProps<T> {

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",

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(() => (
-        <View style={labelContainer}>
+        <View style={labelContainerStyle}>
             <Text style={_labelStyle} {...labelProps}>
                 {_placeholder}
             </Text>
         </View>
-    ), [_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 (
+                <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,
         __renderBadge,
         keyExtractor,
@@ -1765,4 +1813,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export default memo(Picker);
+export default memo(Picker);

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
     }
 });

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
     }
 });