react-native-input-select 1.3.13 → 1.3.15

package/src/components/Dropdown/DropdownSectionList.tsx

@@ -30,6 +30,7 @@ const DropdownSectionList = ({
   listComponentStyles,
   listIndex,
   emptyListMessage,
+  listEmptyComponent,
   ...rest
 }: any) => {
   const [expandedSections, setExpandedSections] = useState(new Set());
@@ -84,10 +85,14 @@ const DropdownSectionList = ({
       extraData={isMultiple ? selectedItems : selectedItem}
       initialNumToRender={5}
       ListEmptyComponent={
-        <ListEmptyComponent
-          listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}
-          emptyListMessage={emptyListMessage}
-        />
+        listEmptyComponent || (
+          <ListEmptyComponent
+            listEmptyComponentStyle={
+              listComponentStyles?.listEmptyComponentStyle
+            }
+            emptyListMessage={emptyListMessage}
+          />
+        )
       }
       contentContainerStyle={[
         isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,

package/src/index.tsx

@@ -18,13 +18,14 @@ import type {
 import { escapeRegExp, extractPropertyFromArray } from './utils';
 
 export const DropdownSelect: React.FC<DropdownProps> = ({
+  testID,
   placeholder,
   label,
   error,
   helperText,
   options,
-  optionLabel,
-  optionValue,
+  optionLabel = DEFAULT_OPTION_LABEL,
+  optionValue = DEFAULT_OPTION_VALUE,
   onValueChange,
   selectedValue,
   isMultiple,
@@ -43,7 +44,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   modalBackgroundStyle, // kept for backwards compatibility
   modalOptionsContainerStyle, // kept for backwards compatibility
   searchInputStyle, // kept for backwards compatibility
-  primaryColor,
+  primaryColor = colors.gray,
   disabled,
   checkboxSize, // kept for backwards compatibility
   checkboxStyle, // kept for backwards compatibility
@@ -53,13 +54,14 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   listHeaderComponent,
   listFooterComponent,
   listComponentStyles,
+  listEmptyComponent,
   modalProps, // kept for backwards compatibility
   hideModal = false,
   listControls,
   searchControls,
   modalControls,
   checkboxControls,
-  autoCloseOnSelect=true,
+  autoCloseOnSelect = true,
   ...rest
 }) => {
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
@@ -105,14 +107,11 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
   /**
    * `options` is the original array, it never changes. (Do not use except you really need the original array) .
-   * `newOptions` is a copy of options but can be mutated by `setNewOptions`, as a result, the value many change.
+   * `newOptions` is a copy of options but can be mutated by `setNewOptions`, as a result, the value may change.
    * `modifiedOptions` should only be used for computations. It has the same structure for both `FlatList` and `SectionList`
    */
   const modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
 
-  const optLabel = optionLabel || DEFAULT_OPTION_LABEL;
-  const optValue = optionValue || DEFAULT_OPTION_VALUE;
-
   /*===========================================
    * Selection handlers
    *==========================================*/
@@ -124,8 +123,8 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       setSelectedItem(value);
       onValueChange(value); // send value to parent
 
-      if(autoCloseOnSelect){
-      setOpen(false); // close modal upon selection
+      if (autoCloseOnSelect) {
+        setOpen(false); // close modal upon selection
       }
     }
   };
@@ -161,7 +160,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
       if (!prevVal) {
         for (let i = 0; i < filteredOptions.length; i++) {
-          selectedValues.push(filteredOptions[i][optValue]);
+          selectedValues.push(filteredOptions[i][optionValue]);
         }
       }
 
@@ -213,17 +212,17 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
       selectedItems?.forEach((element: number | string) => {
         let selectedItemLabel = modifiedOptions?.find(
-          (item: TFlatListItem) => item[optValue] === element
-        )?.[optLabel];
+          (item: TFlatListItem) => item[optionValue] === element
+        )?.[optionLabel];
         selectedLabels.push(selectedItemLabel);
       });
       return selectedLabels;
     }
 
     let selectedItemLabel = modifiedOptions?.find(
-      (item: TFlatListItem) => item[optValue] === selectedItem
+      (item: TFlatListItem) => item[optionValue] === selectedItem
     );
-    return selectedItemLabel?.[optLabel];
+    return selectedItemLabel?.[optionLabel];
   };
 
   /*===========================================
@@ -231,6 +230,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
    *==========================================*/
   const onSearch = (value: string) => {
     setSearchValue(value);
+    searchControls?.searchCallback?.(value);
 
     let searchText = escapeRegExp(value).toString().toLocaleLowerCase().trim();
 
@@ -247,8 +247,8 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const searchFlatList = (flatList: TFlatList, regexFilter: RegExp) => {
     const searchResults = flatList.filter((item: TFlatListItem) => {
       if (
-        item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||
-        item[optValue].toString().toLowerCase().search(regexFilter) !== -1
+        item[optionLabel].toString().toLowerCase().search(regexFilter) !== -1 ||
+        item[optionValue].toString().toLowerCase().search(regexFilter) !== -1
       ) {
         return true;
       }
@@ -264,8 +264,9 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     const searchResults = sectionList.map((listItem: TSectionListItem) => {
       const filteredData = listItem.data.filter((item: TFlatListItem) => {
         if (
-          item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||
-          item[optValue].toString().toLowerCase().search(regexFilter) !== -1
+          item[optionLabel].toString().toLowerCase().search(regexFilter) !==
+            -1 ||
+          item[optionValue].toString().toLowerCase().search(regexFilter) !== -1
         ) {
           return true;
         }
@@ -328,8 +329,6 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     return () => {};
   }, [hideModal]);
 
-  let primary = primaryColor || colors.gray;
-
   /*===========================================
    * setIndexOfSelectedItem - For ScrollToIndex
    *==========================================*/
@@ -338,7 +337,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       ? (options as TSectionListItem[] | undefined)?.map(
           (item: TSectionListItem, sectionIndex: number) => {
             item?.data?.find((dataItem: TFlatListItem, itemIndex: number) => {
-              if (dataItem[optLabel] === selectedLabel) {
+              if (dataItem[optionLabel] === selectedLabel) {
                 setListIndex({ sectionIndex, itemIndex });
               }
             });
@@ -346,7 +345,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         )
       : (options as TFlatListItem[] | undefined)?.find(
           (item: TFlatListItem, itemIndex: number) => {
-            if (item[optLabel] === selectedLabel) {
+            if (item[optionLabel] === selectedLabel) {
               setListIndex({ itemIndex });
             }
           }
@@ -356,6 +355,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   return (
     <>
       <Dropdown
+        testID={testID}
         label={label}
         placeholder={placeholder}
         helperText={helperText}
@@ -376,7 +376,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         selectedItemStyle={selectedItemStyle}
         multipleSelectedItemStyle={multipleSelectedItemStyle}
         isMultiple={isMultiple}
-        primaryColor={primary}
+        primaryColor={primaryColor}
         disabled={disabled}
         placeholderStyle={placeholderStyle}
         setIndexOfSelectedItem={setIndexOfSelectedItem}
@@ -394,11 +394,11 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           ListHeaderComponent={
             <>
               {isSearchable && (
-                <Input 
+                <Input
                   value={searchValue}
                   onChangeText={(text: string) => onSearch(text)}
                   style={searchControls?.textInputStyle || searchInputStyle}
-                  primaryColor={primary}
+                  primaryColor={primaryColor}
                   textInputContainerStyle={
                     searchControls?.textInputContainerStyle
                   }
@@ -422,7 +422,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                             : listControls?.selectAllText || 'Select all'
                         }
                         onChange={() => handleSelectAll()}
-                        primaryColor={primary}
+                        primaryColor={primaryColor}
                         checkboxControls={checkboxControls}
                         checkboxSize={checkboxSize}
                         checkboxStyle={checkboxStyle}
@@ -438,15 +438,15 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           ListFooterComponent={listFooterComponent}
           listComponentStyles={listComponentStyles}
           options={newOptions}
-          optionLabel={optLabel}
-          optionValue={optValue}
+          optionLabel={optionLabel}
+          optionValue={optionValue}
           isMultiple={isMultiple}
           isSearchable={isSearchable}
           selectedItems={selectedItems}
           selectedItem={selectedItem}
           handleMultipleSelections={handleMultipleSelections}
           handleSingleSelection={handleSingleSelection}
-          primaryColor={primary}
+          primaryColor={primaryColor}
           checkboxSize={checkboxSize}
           checkboxStyle={checkboxStyle}
           checkboxLabelStyle={checkboxLabelStyle}
@@ -454,6 +454,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxComponent={checkboxComponent}
           checkboxControls={checkboxControls}
           listIndex={listIndex}
+          listEmptyComponent={listEmptyComponent}
           emptyListMessage={listControls?.emptyListMessage}
         />
       </CustomModal>

package/src/types/index.types.ts

@@ -15,6 +15,7 @@ export type DropdownProps = CommonDropdownProps &
   TListControls;
 
 export type CommonDropdownProps = {
+  testID?: string;
   label?: string;
   options: TFlatList | TSectionList;
   optionLabel?: string;
@@ -60,6 +61,7 @@ export type TSearchControls = {
     textInputStyle?: ViewStyle | TextStyle;
     textInputContainerStyle?: ViewStyle;
     textInputProps?: TextInputProps;
+    searchCallback?: (value: string) => void;
   };
 };
 export type TCheckboxControls = {
@@ -82,6 +84,8 @@ export type TCheckboxControls = {
     checkboxStyle?: ViewStyle;
     checkboxLabelStyle?: TextStyle;
     checkboxComponent?: React.ReactNode;
+    checkboxDisabledStyle?: ViewStyle;
+    checkboxUnselectedColor?: ColorValue;
   };
 };
 
@@ -109,6 +113,7 @@ export type TListControls = {
     itemSeparatorStyle?: ViewStyle;
     sectionHeaderStyle?: TextStyle;
   };
+  listEmptyComponent?: React.ReactNode;
   listControls?: {
     selectAllText?: string;
     unselectAllText?: string;