react-native-input-select 1.1.5 → 1.1.7

package/src/index.tsx

@@ -15,10 +15,7 @@ import type {
   TSectionList,
   TSectionListItem,
 } from './types/index.types';
-import {
-  extractPropertyFromArray,
-  getMaxLengthOfSectionListProperty,
-} from './utils';
+import { extractPropertyFromArray } from './utils';
 
 export const DropdownSelect: React.FC<DropdownProps> = ({
   placeholder,
@@ -45,7 +42,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   multipleSelectedItemStyle,
   modalBackgroundStyle,
   modalOptionsContainerStyle,
-  searchInputStyle,
+  searchInputStyle, // kept for backwards compatibility
   primaryColor,
   disabled,
   checkboxSize, // kept for backwards compatibility
@@ -59,6 +56,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   modalProps,
   hideModal = false,
   listControls,
+  searchControls,
   ...rest
 }) => {
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
@@ -72,10 +70,12 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     itemIndex: number;
   }>({ itemIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist
 
+  if (!options || options.length === 0) {
+    throw new Error('Options array cannot be empty or undefined');
+  }
+
   useEffect(() => {
-    if (options) {
-      setNewOptions(options);
-    }
+    setNewOptions(options);
     return () => {};
   }, [options]);
 
@@ -91,6 +91,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
    * List type
    *==========================================*/
 
+  // check the structure of the new options array to determine if it is a section list or a
   const isSectionList = newOptions.some(
     (item) => item.title && item.data && Array.isArray(item.data)
   );
@@ -102,11 +103,16 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     newOptions,
     'data'
   ).flat();
+
+  /**
+   *`modifiedOptions` should only be used for computations newOptions remains the default array.
+   * At this point modifiedOptions now 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;
-  const optionsCopy = JSON.parse(JSON.stringify(options)); //copy of the original options array
+  const optionsCopy = JSON.parse(JSON.stringify(options)); // copy of the original options array
 
   /*===========================================
    * Selection handlers
@@ -114,11 +120,11 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const handleSingleSelection = (value: string | number) => {
     if (selectedItem === value) {
       setSelectedItem(null);
-      onValueChange(null); //send value to parent
+      onValueChange(null); // send value to parent
     } else {
       setSelectedItem(value);
-      onValueChange(value); //send value to parent
-      setOpen(false); //close modal upon selection
+      onValueChange(value); // send value to parent
+      setOpen(false); // close modal upon selection
     }
   };
 
@@ -131,18 +137,24 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       } else {
         selectedValues.push(value);
       }
-      onValueChange(selectedValues); //send value to parent
+      onValueChange(selectedValues); // send value to parent
       return selectedValues;
     });
   };
 
+  const removeDisabledItems = (items: TFlatList) => {
+    return items.filter((item: TFlatListItem) => !item.disabled);
+  };
+
   const handleSelectAll = () => {
     setSelectAll((prevVal) => {
       const selectedValues = [];
 
-      //don't select disabled items
-      const filteredOptions = modifiedOptions.filter(
-        (item: TFlatListItem) => !item.disabled
+      // don't select disabled items
+      const filteredOptions = removeDisabledItems(
+        isSectionList
+          ? extractPropertyFromArray(optionsCopy, 'data').flat()
+          : optionsCopy
       );
 
       if (!prevVal) {
@@ -152,21 +164,15 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       }
 
       setSelectedItems(selectedValues);
-      onValueChange(selectedValues); //send value to parent
+      onValueChange(selectedValues); // send value to parent
       return !prevVal;
     });
 
-    if (
-      typeof listControls?.selectAllCallback === 'function' &&
-      !selectAll
-    ) {
+    if (typeof listControls?.selectAllCallback === 'function' && !selectAll) {
       listControls.selectAllCallback();
     }
 
-    if (
-      typeof listControls?.unselectAllCallback === 'function' &&
-      selectAll
-    ) {
+    if (typeof listControls?.unselectAllCallback === 'function' && selectAll) {
       listControls.unselectAllCallback();
     }
   };
@@ -178,8 +184,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     (selectedValues: any[]) => {
       //if the list contains disabled values, those values will not be selected
       if (
-        modifiedOptions.filter((item: TFlatListItem) => !item.disabled)
-          .length === selectedValues.length
+        removeDisabledItems(modifiedOptions).length === selectedValues.length
       ) {
         setSelectAll(true);
       } else {
@@ -229,7 +234,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
     const regexFilter = new RegExp(searchText, 'i');
 
-    //Because Search mutates the initial state, we have to search with a copy of the original array
+    // Because the options array will be mutated after Search, we have to search with a copy of the original array
     const searchResults = isSectionList
       ? searchSectionList(optionsCopy as TSectionList, regexFilter)
       : searchFlatList(optionsCopy as TFlatList, regexFilter);
@@ -243,7 +248,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||
         item[optValue].toString().toLowerCase().search(regexFilter) !== -1
       ) {
-        return item;
+        return true;
       }
       return;
     });
@@ -290,15 +295,6 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
   let primary = primaryColor || colors.gray;
 
-  const sectionListMaxLength = getMaxLengthOfSectionListProperty(
-    newOptions as TSectionList,
-    'data'
-  );
-
-  const listIsEmpty = isSectionList
-    ? sectionListMaxLength > 1
-    : newOptions.length > 1;
-
   /*===========================================
    * setIndexOfSelectedItem - For ScrollToIndex
    *==========================================*/
@@ -348,25 +344,30 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       />
       <CustomModal
         open={open}
-        handleToggleModal={handleToggleModal}
         modalBackgroundStyle={modalBackgroundStyle}
         modalOptionsContainerStyle={modalOptionsContainerStyle}
-        onRequestClose={() => {}}
+        onRequestClose={() => handleToggleModal()}
         modalProps={modalProps}
       >
         <ListTypeComponent
+          removeClippedSubviews={false}
           ListHeaderComponent={
             <>
               {isSearchable && (
                 <Input
                   value={searchValue}
                   onChangeText={(text: string) => onSearch(text)}
-                  style={searchInputStyle}
+                  style={searchControls?.textInputStyle || searchInputStyle}
                   primaryColor={primary}
+                  textInputContainerStyle={
+                    searchControls?.textInputContainerStyle
+                  }
+                  openModal={() => setOpen(true)} // There seems to a known issue on expo web that closes the modal when the input is focused
+                  {...searchControls?.textInputProps}
                 />
               )}
               {listHeaderComponent}
-              {isMultiple && listIsEmpty && (
+              {isMultiple && modifiedOptions.length > 1 && (
                 <View style={styles.optionsContainerStyle}>
                   <TouchableOpacity onPress={() => {}}>
                     <CheckBox

package/src/types/index.types.ts

@@ -3,6 +3,7 @@ import type {
   ColorValue,
   TextStyle,
   ModalProps,
+  TextInputProps,
 } from 'react-native';
 
 export type DropdownProps = {
@@ -64,6 +65,11 @@ export type DropdownProps = {
     selectAllCallback?: () => void;
     unselectAllCallback?: () => void;
   };
+  searchControls?: {
+    textInputStyle?: ViewStyle | TextStyle;
+    textInputContainerStyle?: ViewStyle;
+    textInputProps?: TextInputProps;
+  };
 };
 
 export type TFlatList = TFlatListItem[];

package/src/utils/index.ts

@@ -1,25 +1,9 @@
-import { TSectionList } from 'src/types/index.types';
-
 /**
  * Extract property from array
  */
+
 export const extractPropertyFromArray = (arr: any, property: string) => {
   let extractedValue = arr.map((item: any) => item[property]);
 
   return extractedValue;
 };
-
-export const getMaxLengthOfSectionListProperty = (
-  sectionList: TSectionList,
-  property: 'title' | 'data'
-) => {
-  let maxLength = 0;
-
-  sectionList.forEach((obj) => {
-    if (obj[property]?.length > maxLength) {
-      maxLength = obj.data.length;
-    }
-  });
-
-  return maxLength;
-};