react-native-input-select 2.1.4 → 2.1.6

package/src/components/Dropdown/Dropdown.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import DropdownSelectedItemsView from './DropdownSelectedItemsView';
+import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
+import DropdownSelectedItemsContainer, {
+  DropdownSelectedItemsContainerProps,
+} from './DropdownSelectedItemsContainer';
 import { colors } from '../../styles/colors';
 import { typography } from '../../styles/typography';
+import { TDropdownInputProps } from 'src/types/index.types';
 
 const Dropdown = ({
   testID,
@@ -10,12 +13,14 @@ const Dropdown = ({
   placeholder,
   helperText,
   error,
-  labelsOfSelectedItems,
+  selectionData,
   openModal,
-  closeModal,
   isMultiple,
   selectedItem,
   selectedItems,
+  optionLabel,
+  optionValue,
+  selectedItemsControls,
   dropdownIcon,
   labelStyle,
   dropdownStyle,
@@ -30,7 +35,8 @@ const Dropdown = ({
   primaryColor,
   disabled,
   setIndexOfSelectedItem,
-}: any) => {
+  handleMultipleSelections,
+}: TDropdownInputProps & DropdownSelectedItemsContainerProps) => {
   return (
     <View
       style={[styles.dropdownInputContainer, dropdownContainerStyle]}
@@ -42,18 +48,17 @@ const Dropdown = ({
         <Text style={[styles.label, labelStyle]}>{label}</Text>
       )}
 
-      <DropdownSelectedItemsView
+      <DropdownSelectedItemsContainer
         placeholder={placeholder}
         error={error}
-        labelsOfSelectedItems={labelsOfSelectedItems}
+        selectionData={selectionData}
         openModal={openModal}
-        closeModal={closeModal}
         isMultiple={isMultiple}
         selectedItem={selectedItem}
         selectedItems={selectedItems}
-        dropdownIcon={dropdownIcon}
+        optionLabel={optionLabel}
+        optionValue={optionValue}
         dropdownStyle={dropdownStyle}
-        dropdownIconStyle={dropdownIconStyle}
         selectedItemStyle={selectedItemStyle}
         multipleSelectedItemStyle={multipleSelectedItemStyle}
         dropdownErrorStyle={dropdownErrorStyle}
@@ -61,6 +66,8 @@ const Dropdown = ({
         disabled={disabled}
         placeholderStyle={placeholderStyle}
         setIndexOfSelectedItem={setIndexOfSelectedItem}
+        handleMultipleSelections={handleMultipleSelections}
+        selectedItemsControls={selectedItemsControls}
       />
 
       {error && error !== '' && (
@@ -72,6 +79,17 @@ const Dropdown = ({
           {helperText}
         </Text>
       )}
+
+      {/* Trailing Icon */}
+      <TouchableOpacity
+        style={[styles.iconStyle, dropdownIconStyle]}
+        onPress={() => openModal()}
+        testID="dropdown-trailing-icon"
+      >
+        {dropdownIcon || (
+          <Image source={require('../../asset/arrow-down.png')} />
+        )}
+      </TouchableOpacity>
     </View>
   );
 };
@@ -82,6 +100,7 @@ const styles = StyleSheet.create({
   helper: { marginTop: 8, color: colors.primary, ...typography.caption },
   dropdownInputContainer: { marginBottom: 23, width: '100%' },
   blackText: { color: colors.black },
+  iconStyle: { position: 'absolute', right: 25, top: 60 },
 });
 
 export default Dropdown;

package/src/components/Dropdown/DropdownSelectedItem.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode } from 'react';
+import {
+  Text,
+  Pressable,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  ImageStyle,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { extractTextStylesFromArray } from '../../utils';
+
+export interface DropdownSelectedItemProps {
+  onPress: () => void;
+  style?: (TextStyle | ViewStyle)[];
+  label: string | ReactNode;
+  removeItemIcon?: ReactNode;
+  onRemoveItem?: () => void;
+  showRemoveIcon?: boolean;
+  disabled: boolean;
+  closeIconStyles?: ImageStyle;
+  testId?: string;
+}
+
+const DropdownSelectedItem = ({
+  onPress,
+  style,
+  label,
+  removeItemIcon,
+  onRemoveItem,
+  showRemoveIcon,
+  closeIconStyles,
+  testId,
+  disabled,
+  ...rest
+}: DropdownSelectedItemProps) => {
+  return (
+    <TouchableOpacity
+      onPress={() => onPress()}
+      {...rest}
+      style={[styles.dropdownInputContent, ...(style ?? [])]}
+      testID={`dropdown-selected-item-${testId}`}
+    >
+      <Text style={extractTextStylesFromArray(style)}>{label}</Text>
+
+      {showRemoveIcon && (
+        <Pressable
+          onPress={disabled ? null : () => onRemoveItem?.()}
+          testID={`dropdown-selected-item-remove-icon-${testId}`}
+        >
+          {removeItemIcon || (
+            <Image
+              source={require('../../asset/close.png')}
+              style={[styles.removeItemIcon, closeIconStyles]}
+            />
+          )}
+        </Pressable>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  dropdownInputContent: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  removeItemIcon: {
+    height: 10,
+    width: 10,
+  },
+});
+
+export default DropdownSelectedItem;

package/src/components/Dropdown/DropdownSelectedItemsContainer.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import {
+  View,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  TextStyle,
+} from 'react-native';
+import { colors } from '../../styles/colors';
+import { inputStyles } from '../../styles/input';
+import DropdownSelectedItem from './DropdownSelectedItem';
+import {
+  TDropdownInputProps,
+  TFlatListItem,
+  TSelectedItem,
+  TSelectedItemsControls,
+  TSelectedItemWithReactComponent,
+} from 'src/types/index.types';
+
+export interface DropdownSelectedItemsContainerProps {
+  openModal: () => void;
+  selectedItem: TSelectedItemWithReactComponent;
+  selectedItems: TSelectedItemWithReactComponent[];
+  optionLabel: string;
+  optionValue: string;
+  setIndexOfSelectedItem: (label: string) => void;
+  selectedItemsControls?: TSelectedItemsControls;
+  selectionData: TFlatListItem | TFlatListItem[];
+  handleMultipleSelections?: (value: TSelectedItem) => void;
+}
+
+const DropdownSelectedItemsContainer = ({
+  placeholder,
+  error,
+  selectionData = [],
+  openModal,
+  isMultiple,
+  selectedItem,
+  selectedItems,
+  optionLabel,
+  optionValue,
+  dropdownStyle,
+  placeholderStyle = {},
+  selectedItemStyle = {},
+  multipleSelectedItemStyle = {},
+  dropdownErrorStyle,
+  primaryColor,
+  disabled = false,
+  setIndexOfSelectedItem,
+  selectedItemsControls,
+  handleMultipleSelections,
+}: TDropdownInputProps & DropdownSelectedItemsContainerProps) => {
+  const openActions = (label: string) => {
+    openModal();
+    setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal
+  };
+
+  return (
+    <Pressable
+      onPress={() => openModal()}
+      style={({ pressed }) => [
+        pressed && {
+          ...inputStyles.inputFocusState,
+          borderColor: primaryColor,
+        },
+        { ...inputStyles.input, ...dropdownStyle },
+        error && //this must be last
+          error !== '' &&
+          !pressed && {
+            ...inputStyles.inputFocusErrorState,
+            ...dropdownErrorStyle,
+          },
+      ]}
+      disabled={disabled}
+      aria-disabled={disabled}
+      testID="react-native-input-select-dropdown-input-container"
+    >
+      <ScrollView
+        horizontal
+        alwaysBounceHorizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        <View
+          style={styles.selectedItemsContainer}
+          onStartShouldSetResponder={() => true}
+        >
+          {isMultiple ? (
+            (selectionData as TFlatListItem[])?.map((data, i) => {
+              const label = data[optionLabel];
+              const value = data[optionValue];
+
+              return (
+                <DropdownSelectedItem
+                  onPress={() => openActions(label as string)}
+                  key={`react-native-input-select-list-item-${Math.random()}-${i}`}
+                  style={[
+                    styles.selectedItems,
+                    { backgroundColor: primaryColor },
+                    multipleSelectedItemStyle,
+                  ]}
+                  closeIconStyles={{
+                    tintColor:
+                      (multipleSelectedItemStyle as TextStyle)?.color ||
+                      styles.selectedItems.color,
+                  }}
+                  label={label}
+                  disabled={disabled || (data.disabled as boolean)}
+                  showRemoveIcon={selectedItemsControls?.showRemoveIcon || true}
+                  removeItemIcon={selectedItemsControls?.removeItemIcon}
+                  onRemoveItem={() => {
+                    handleMultipleSelections?.(value as TSelectedItem);
+                    selectedItemsControls?.onRemoveItem?.(); //user defined control
+                  }}
+                  testId={`${i}`}
+                />
+              );
+            })
+          ) : (
+            <DropdownSelectedItem
+              onPress={() =>
+                openActions(
+                  String((selectionData as TFlatListItem)?.[optionLabel] ?? '')
+                )
+              }
+              style={[styles.blackText, selectedItemStyle]}
+              label={(selectionData as TFlatListItem)[optionLabel] as string}
+              disabled={disabled}
+            />
+          )}
+
+          {/* Placeholder */}
+          {selectedItem === '' && selectedItems?.length === 0 && (
+            <DropdownSelectedItem
+              onPress={() => openModal()}
+              style={[styles.blackText, placeholderStyle]}
+              label={placeholder ?? 'Select an option'}
+              disabled={disabled}
+            />
+          )}
+        </View>
+      </ScrollView>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  selectedItemsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+  },
+  selectedItems: {
+    color: colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: colors.primary,
+    marginRight: 10,
+    overflow: 'hidden',
+  },
+  blackText: { color: colors.black },
+});
+
+export default DropdownSelectedItemsContainer;

package/src/components/List/DropdownFlatList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useRef } from 'react';
 import { FlatList, FlatListProps, StyleSheet } from 'react-native';
-import DropdownListItem from '../Dropdown/DropdownListItem';
+import DropdownListItem from './DropdownListItem';
 import { ItemSeparatorComponent, ListEmptyComponent } from '../Others';
 import { TFlatList } from '../../types/index.types';
 

package/src/components/List/DropdownSectionList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useState, useRef } from 'react';
 import { SectionList, StyleSheet } from 'react-native';
-import DropdownListItem from '../Dropdown/DropdownListItem';
+import DropdownListItem from './DropdownListItem';
 import {
   ItemSeparatorComponent,
   ListEmptyComponent,

package/src/hooks/use-selection-handler.ts

@@ -4,6 +4,7 @@ import { TSelectedItem } from '../types/index.types';
 interface UseSelectionHandlerProps {
   initialSelectedValue: TSelectedItem | TSelectedItem[]; // Can be a single value or an array
   isMultiple: boolean;
+  minSelectableItems?: number;
   maxSelectableItems?: number;
   onValueChange: (selectedItems: TSelectedItem | TSelectedItem[]) => void;
   closeModal: () => void;
@@ -13,12 +14,13 @@ interface UseSelectionHandlerProps {
 export const useSelectionHandler = ({
   initialSelectedValue,
   isMultiple,
+  minSelectableItems = 0,
   maxSelectableItems,
   onValueChange,
   closeModal,
   autoCloseOnSelect,
 }: UseSelectionHandlerProps) => {
-  // Initialize state based on whether it's multiple selection or not
+  // Initialize state based on whether it is multiple selection or not
   const [selectedItem, setSelectedItem] = useState<TSelectedItem>(
     isMultiple ? '' : (initialSelectedValue as TSelectedItem)
   );
@@ -29,8 +31,11 @@ export const useSelectionHandler = ({
   const handleSingleSelection = useCallback(
     (value: TSelectedItem) => {
       if (selectedItem === value) {
-        setSelectedItem('');
-        onValueChange(''); // Send null to parent when deselected
+        // Deselect item if minSelectableItems is not reached
+        if (minSelectableItems === 0) {
+          setSelectedItem('');
+          onValueChange(''); // Send null to parent when deselected
+        }
       } else {
         setSelectedItem(value);
         onValueChange(value); // Send selected value to parent
@@ -40,7 +45,13 @@ export const useSelectionHandler = ({
         }
       }
     },
-    [selectedItem, onValueChange, autoCloseOnSelect, closeModal]
+    [
+      selectedItem,
+      minSelectableItems,
+      onValueChange,
+      autoCloseOnSelect,
+      closeModal,
+    ]
   );
 
   const handleMultipleSelections = useCallback(
@@ -49,8 +60,10 @@ export const useSelectionHandler = ({
         let selectedValues = [...prevVal];
 
         if (selectedValues.includes(value)) {
-          // Remove item
-          selectedValues = selectedValues.filter((item) => item !== value);
+          // Only remove item if it doesn't drop below the minimum required
+          if (selectedValues.length > minSelectableItems) {
+            selectedValues = selectedValues.filter((item) => item !== value);
+          }
         } else {
           // Add item
           if (
@@ -66,7 +79,7 @@ export const useSelectionHandler = ({
         return selectedValues;
       });
     },
-    [maxSelectableItems, onValueChange]
+    [minSelectableItems, maxSelectableItems, onValueChange]
   );
 
   // Return the relevant state and handlers

package/src/index.tsx

@@ -18,7 +18,7 @@ import type {
   DropdownSelectHandle,
   TSelectedItem,
 } from './types/index.types';
-import { extractPropertyFromArray, getLabelsOfSelectedItems } from './utils';
+import { extractPropertyFromArray, getSelectionsData } from './utils';
 import {
   useSelectionHandler,
   useModal,
@@ -63,7 +63,9 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
       searchControls,
       modalControls,
       checkboxControls,
+      selectedItemsControls,
       autoCloseOnSelect = true,
+      minSelectableItems,
       maxSelectableItems,
       ...rest
     },
@@ -138,6 +140,7 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
     } = useSelectionHandler({
       initialSelectedValue: selectedValue,
       isMultiple,
+      minSelectableItems,
       maxSelectableItems,
       onValueChange,
       closeModal: () => closeModal(),
@@ -149,14 +152,9 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
         ? setSelectedItems(selectedValue as TSelectedItem[])
         : setSelectedItem(selectedValue as TSelectedItem);
 
-      return () => {};
-    }, [
-      selectedValue,
-      setSelectedItems,
-      setSelectedItem,
-      isMultiple,
-      onValueChange,
-    ]);
+      // setSelectedItems already updates selectedValue, so omit it from dependency array to avoid infinite loop
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setSelectedItems, setSelectedItem, isMultiple, onValueChange]);
 
     /*===========================================
      * List type
@@ -198,18 +196,19 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
           placeholder={placeholder}
           helperText={helperText}
           error={error}
-          labelsOfSelectedItems={getLabelsOfSelectedItems({
+          selectionData={getSelectionsData({
             isMultiple,
-            optionLabel,
             optionValue,
             selectedItem,
             selectedItems,
             modifiedOptions,
           })}
+          optionLabel={optionLabel}
+          optionValue={optionValue}
           selectedItem={selectedItem}
           selectedItems={selectedItems}
+          selectedItemsControls={selectedItemsControls}
           openModal={() => openModal()}
-          closeModal={() => closeModal()}
           labelStyle={labelStyle}
           dropdownIcon={dropdownIcon}
           dropdownStyle={dropdownStyle}
@@ -225,6 +224,7 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
           disabled={disabled}
           placeholderStyle={placeholderStyle}
           setIndexOfSelectedItem={setIndexOfSelectedItem}
+          handleMultipleSelections={handleMultipleSelections}
           {...rest}
         />
         <CustomModal

package/src/styles/colors.ts

@@ -1,4 +1,4 @@
-export const colors: any = {
+export const colors = {
   primary: 'green',
   red: '#FA4169',
   black: '#000000',

package/src/styles/input.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { colors } from './colors';
 
-export const inputStyles: any = StyleSheet.create({
+export const inputStyles = StyleSheet.create({
   input: {
     paddingVertical: 18,
     paddingHorizontal: 23,

package/src/types/index.types.ts

@@ -13,18 +13,19 @@ export type DropdownProps = CommonDropdownProps &
   TListProps;
 
 export type CommonDropdownProps = {
-  testID?: string;
-  label?: string;
   options: TFlatList | TSectionList;
-  optionLabel?: string;
-  optionValue?: string;
   onValueChange: (selectedItems: TSelectedItem | TSelectedItem[]) => void;
   selectedValue: TSelectedItem | TSelectedItem[];
+  optionLabel?: string;
+  optionValue?: string;
   autoCloseOnSelect?: boolean;
+  minSelectableItems?: number;
   maxSelectableItems?: number;
 };
 
 export type TDropdownInputProps = {
+  testID?: string;
+  label?: string;
   placeholder?: string;
   error?: string;
   helperText?: string;
@@ -38,8 +39,8 @@ export type TDropdownInputProps = {
   dropdownErrorStyle?: ViewStyle;
   dropdownErrorTextStyle?: TextStyle;
   dropdownHelperTextStyle?: TextStyle;
-  selectedItemStyle?: TextStyle;
-  multipleSelectedItemStyle?: TextStyle;
+  selectedItemStyle?: TextStyle | ViewStyle;
+  multipleSelectedItemStyle?: TextStyle | ViewStyle;
   primaryColor?: ColorValue;
   disabled?: boolean;
   placeholderStyle?: TextStyle;
@@ -50,6 +51,7 @@ type TControls = {
   checkboxControls?: TCheckboxControls;
   modalControls?: TCustomModalControls;
   listControls?: TListControls;
+  selectedItemsControls?: TSelectedItemsControls;
 };
 
 type TSearchControls = {
@@ -95,6 +97,12 @@ type TListControls = {
   keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
 };
 
+export type TSelectedItemsControls = {
+  showRemoveIcon?: boolean;
+  removeItemIcon?: React.ReactNode;
+  onRemoveItem?: () => void;
+};
+
 export type TSelectedItem = string | number | boolean | undefined;
 export type TSelectedItemWithReactComponent =
   | TSelectedItem

package/src/utils/index.ts

@@ -1,10 +1,6 @@
+import { TextStyle, ViewStyle } from 'react-native';
 import { TSelectedItem } from '../types/index.types';
-import {
-  TFlatList,
-  TFlatListItem,
-  TSectionList,
-  TSelectedItemWithReactComponent,
-} from '../types/index.types';
+import { TFlatList, TFlatListItem, TSectionList } from '../types/index.types';
 
 export const extractPropertyFromArray = (arr: any[], property: string) => {
   let extractedValue = arr?.map((item: any) => item[property]);
@@ -31,40 +27,76 @@ export const isSectionList = (options: TFlatList | TSectionList): boolean => {
  * @description get the labels of the items that were selected from the options array for either multiple or single selections
  * @returns
  */
-export const getLabelsOfSelectedItems = ({
+export const getSelectionsData = ({
   isMultiple,
-  optionLabel,
   optionValue,
   selectedItem,
   selectedItems,
   modifiedOptions,
 }: {
   isMultiple: boolean;
-  optionLabel: string;
   optionValue: string;
   selectedItem: TSelectedItem;
   selectedItems: TSelectedItem[];
   modifiedOptions: TFlatList;
-}) => {
+}): TFlatListItem | TFlatListItem[] => {
   // Multiple select
-  if (isMultiple && Array.isArray(selectedItems)) {
-    let selectedLabels: TSelectedItemWithReactComponent[] = [];
+  if (isMultiple) {
+    let currentSelections: TFlatListItem[] = [];
 
-    selectedItems?.forEach((element: TSelectedItem) => {
-      let selectedItemLabel = modifiedOptions?.find(
-        (item: TFlatListItem) => item[optionValue] === element
-      )?.[optionLabel];
+    Array.isArray(selectedItems) &&
+      selectedItems.forEach((element: TSelectedItem) => {
+        const currentSelection = modifiedOptions?.find(
+          (item: TFlatListItem) => item[optionValue] === element
+        );
 
-      if (selectedItemLabel !== '') {
-        selectedLabels.push(selectedItemLabel);
-      }
-    });
-    return selectedLabels;
+        // Only push if currentSelection is defined and is of the correct type
+        if (currentSelection) {
+          currentSelections.push(currentSelection);
+        }
+      });
+
+    return currentSelections;
   }
 
   // Single select
-  let selectedItemLabel = modifiedOptions?.find(
+  let current = modifiedOptions?.find(
     (item: TFlatListItem) => item[optionValue] === selectedItem
   );
-  return selectedItemLabel?.[optionLabel];
+  return current ? current : {};
+};
+
+const textStyleKeys = [
+  'color',
+  'fontSize',
+  'fontFamily',
+  'fontWeight',
+  'fontStyle',
+  'textAlign',
+  'lineHeight',
+  'textDecorationLine',
+  'textDecorationStyle',
+  'textDecorationColor',
+  'textShadowColor',
+  'textShadowOffset',
+  'textShadowRadius',
+  'letterSpacing',
+  'textTransform',
+];
+
+export const extractTextStylesFromArray = (
+  styleArray: (ViewStyle & TextStyle)[] = []
+) => {
+  const extractedStyles: Record<string, any> = {};
+  for (const styleObject of styleArray) {
+    if (styleObject && typeof styleObject === 'object') {
+      // Ensure it's a valid style object
+      for (const prop in styleObject) {
+        if (textStyleKeys.includes(prop)) {
+          extractedStyles[prop] = (styleObject as Record<string, any>)[prop];
+        }
+      }
+    }
+  }
+  return extractedStyles;
 };