react-native-input-select 1.3.18 → 2.0.0

package/src/components/Dropdown/DropdownSelectedItemsView.tsx

@@ -14,7 +14,7 @@ import { inputStyles } from '../../styles/input';
 const DropdownSelectedItemsView = ({
   placeholder,
   error,
-  getSelectedItemsLabel,
+  labelsOfSelectedItems,
   openModal,
   isMultiple,
   selectedItem,
@@ -30,6 +30,10 @@ const DropdownSelectedItemsView = ({
   disabled,
   setIndexOfSelectedItem,
 }: any) => {
+  const openActions = (label: string) => {
+    openModal();
+    setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal
+  };
   return (
     <Pressable
       onPress={() => openModal()}
@@ -47,6 +51,8 @@ const DropdownSelectedItemsView = ({
           },
       ]}
       disabled={disabled}
+      aria-disabled={disabled}
+      testID="react-native-input-select-dropdown-input-container"
     >
       <ScrollView
         horizontal
@@ -58,13 +64,10 @@ const DropdownSelectedItemsView = ({
           onStartShouldSetResponder={() => true}
         >
           {isMultiple ? (
-            getSelectedItemsLabel()?.map((label: string, i: Number) => (
+            labelsOfSelectedItems?.map((label: string, i: Number) => (
               <DropdownContent
-                onPress={() => {
-                  openModal();
-                  setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal
-                }}
-                key={`react-native-input-select-${Math.random()}-${i}`}
+                onPress={() => openActions(label)}
+                key={`react-native-input-select-list-item-${Math.random()}-${i}`}
                 style={[
                   styles.selectedItems,
                   { backgroundColor: primaryColor },
@@ -76,12 +79,9 @@ const DropdownSelectedItemsView = ({
             ))
           ) : (
             <DropdownContent
-              onPress={() => {
-                openModal();
-                setIndexOfSelectedItem(getSelectedItemsLabel()); // immediately scrolls to list item with the specified label when modal
-              }}
+              onPress={() => openActions(labelsOfSelectedItems)}
               style={[styles.blackText, selectedItemStyle]}
-              label={getSelectedItemsLabel()}
+              label={labelsOfSelectedItems}
               disabled={disabled}
             />
           )}

package/src/components/Input/index.tsx

@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { TextInput, StyleSheet, View, Platform } from 'react-native';
+import {
+  TextInput,
+  StyleSheet,
+  View,
+  Platform,
+  TextInputProps,
+  ViewStyle,
+  ColorValue,
+} from 'react-native';
 import { inputStyles } from '../../styles/input';
 
 export const Input = ({
@@ -10,7 +18,10 @@ export const Input = ({
   primaryColor,
   textInputContainerStyle,
   ...rest
-}: any) => {
+}: {
+  primaryColor?: ColorValue;
+  textInputContainerStyle?: ViewStyle;
+} & TextInputProps) => {
   const [isFocused, setFocus] = useState(false);
 
   return (

package/src/components/{Dropdown → List}/DropdownFlatList.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useRef } from 'react';
 import { FlatList, FlatListProps, StyleSheet } from 'react-native';
-import DropdownListItem from './DropdownListItem';
+import DropdownListItem from '../Dropdown/DropdownListItem';
 import { ItemSeparatorComponent, ListEmptyComponent } from '../Others';
-import { TFlatList } from 'src/types/index.types';
+import { TFlatList } from '../../types/index.types';
 
 const DropdownFlatList = ({
   options,
@@ -31,7 +31,7 @@ const DropdownFlatList = ({
   const flatlistRef = useRef<FlatList<TFlatList>>(null);
 
   const scrollToItem = (index: number) => {
-    flatlistRef.current?.scrollToIndex({
+    flatlistRef?.current?.scrollToIndex({
       index,
       animated: true,
     });
@@ -43,8 +43,15 @@ const DropdownFlatList = ({
     }
   }, [listIndex]);
 
+  const itemSeparator = () => (
+    <ItemSeparatorComponent
+      itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
+    />
+  );
+
   return (
     <FlatList
+      testID="react-native-input-select-flat-list"
       data={options}
       extraData={isMultiple ? selectedItems : selectedItem}
       initialNumToRender={5}
@@ -61,11 +68,7 @@ const DropdownFlatList = ({
       contentContainerStyle={[
         isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
       ]}
-      ItemSeparatorComponent={() => (
-        <ItemSeparatorComponent
-          itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
-        />
-      )}
+      ItemSeparatorComponent={itemSeparator}
       renderItem={(item) =>
         _renderItem(item, {
           optionLabel,

package/src/components/{Dropdown → List}/DropdownSectionList.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useState, useRef } from 'react';
 import { SectionList, StyleSheet } from 'react-native';
-import DropdownListItem from './DropdownListItem';
+import DropdownListItem from '../Dropdown/DropdownListItem';
 import {
   ItemSeparatorComponent,
   ListEmptyComponent,
   SectionHeaderTitle,
 } from '../Others';
 import { extractPropertyFromArray } from '../../utils';
-import { TSectionList } from 'src/types/index.types';
+import { TSectionList } from '../../types/index.types';
 
 const DropdownSectionList = ({
   options,
@@ -79,8 +79,15 @@ const DropdownSectionList = ({
     }
   }, [listIndex]);
 
+  const itemSeparator = () => (
+    <ItemSeparatorComponent
+      itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
+    />
+  );
+
   return (
     <SectionList
+      testID="react-native-input-select-section-list"
       sections={options}
       extraData={isMultiple ? selectedItems : selectedItem}
       initialNumToRender={5}
@@ -97,11 +104,7 @@ const DropdownSectionList = ({
       contentContainerStyle={[
         isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
       ]}
-      ItemSeparatorComponent={() => (
-        <ItemSeparatorComponent
-          itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
-        />
-      )}
+      ItemSeparatorComponent={itemSeparator}
       renderItem={(item) =>
         _renderItem(item, {
           optionLabel,

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './use-search';
+export * from './use-selection-handler';
+export * from './use-index-of-selected-item';
+export * from './use-modal';
+export * from './use-select-all';

package/src/hooks/use-index-of-selected-item.ts

@@ -0,0 +1,49 @@
+import { useState, useCallback } from 'react';
+import type { TFlatListItem, TSectionListItem } from '../types/index.types';
+
+interface UseIndexOfSelectedItemProps {
+  options: (TFlatListItem | TSectionListItem)[];
+  optionLabel: string;
+  isSectionList: boolean;
+}
+
+/**
+ *
+ * @description for scrollToIndex in Sectionlist and Flatlist
+ */
+
+export const useIndexOfSelectedItem = ({
+  options,
+  optionLabel,
+  isSectionList,
+}: UseIndexOfSelectedItemProps) => {
+  const [listIndex, setListIndex] = useState<{
+    sectionIndex?: number;
+    itemIndex: number;
+  }>({ itemIndex: -1, sectionIndex: -1 });
+
+  const setIndexOfSelectedItem = useCallback(
+    (selectedLabel: string) => {
+      if (isSectionList) {
+        (options as TSectionListItem[]).forEach((section, sectionIndex) => {
+          const itemIndex = section.data.findIndex(
+            (item) => item[optionLabel] === selectedLabel
+          );
+          if (itemIndex !== -1) {
+            setListIndex({ sectionIndex, itemIndex });
+          }
+        });
+      } else {
+        const itemIndex = (options as TFlatListItem[]).findIndex(
+          (item) => item[optionLabel] === selectedLabel
+        );
+        if (itemIndex !== -1) {
+          setListIndex({ itemIndex });
+        }
+      }
+    },
+    [options, optionLabel, isSectionList]
+  );
+
+  return { listIndex, setListIndex, setIndexOfSelectedItem };
+};

package/src/hooks/use-modal.ts

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { ModalProps, Platform } from 'react-native';
+import { TCustomModalControls } from '../types/index.types';
+
+interface UseModalProps {
+  resetOptionsRelatedState: () => void;
+  disabled?: boolean;
+  modalProps?: ModalProps;
+  modalControls?: TCustomModalControls;
+}
+
+export const useModal = ({
+  resetOptionsRelatedState,
+  disabled,
+  modalProps,
+  modalControls,
+}: UseModalProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const openModal = () => {
+    if (disabled) return;
+    setIsVisible(true);
+    resetOptionsRelatedState();
+  };
+
+  const closeModal = () => {
+    setIsVisible(false);
+    resetOptionsRelatedState();
+
+    // iOS supports the onDismiss prop but android does not, so we do this explicitly here
+    // https://reactnative.dev/docs/modal#ondismiss-ios
+    if (Platform.OS === 'android') {
+      modalControls?.modalProps?.closeModal?.(); //kept for backwards compatibility
+      modalProps?.onDismiss?.(); //kept for backwards compatibility
+      modalControls?.modalProps?.onDismiss?.();
+    }
+  };
+
+  return {
+    isVisible,
+    openModal: () => openModal(),
+    closeModal: () => closeModal(),
+  };
+};

package/src/hooks/use-search.ts

@@ -0,0 +1,95 @@
+import { useState, useCallback, useEffect } from 'react';
+import type {
+  TFlatList,
+  TSectionList,
+  TFlatListItem,
+  TSectionListItem,
+} from '../types/index.types';
+import { escapeRegExp, isSectionList } from '../utils';
+
+interface UseSearchProps {
+  initialOptions: TFlatList | TSectionList;
+  optionLabel: string;
+  optionValue: string;
+  searchCallback: (value: string) => void;
+}
+
+export const useSearch = ({
+  initialOptions,
+  optionLabel,
+  optionValue,
+  searchCallback,
+}: UseSearchProps) => {
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [filteredOptions, setFilteredOptions] = useState<
+    TFlatList | TSectionList
+  >(initialOptions);
+
+  useEffect(() => {
+    setFilteredOptions(initialOptions);
+    return () => {};
+  }, [initialOptions]);
+
+  const searchFlatList = useCallback(
+    (flatList: TFlatList, regexFilter: RegExp) => {
+      return flatList.filter((item: TFlatListItem) => {
+        return (
+          item[optionLabel].toString().toLowerCase().search(regexFilter) !==
+            -1 ||
+          item[optionValue].toString().toLowerCase().search(regexFilter) !== -1
+        );
+      });
+    },
+    [optionLabel, optionValue]
+  );
+
+  const searchSectionList = useCallback(
+    (sectionList: TSectionList, regexFilter: RegExp) => {
+      return sectionList.map((listItem: TSectionListItem) => {
+        // A section list is the combination of several flat lists
+        const filteredData = searchFlatList(listItem.data, regexFilter);
+
+        return { ...listItem, data: filteredData };
+      });
+    },
+    [searchFlatList]
+  );
+
+  const isSection = isSectionList(initialOptions);
+
+  const onSearch = useCallback(
+    (value: string) => {
+      searchCallback?.(value);
+
+      const searchText = escapeRegExp(value).toLowerCase().trim();
+      const regexFilter = new RegExp(searchText, 'i');
+
+      const searchResults = isSection
+        ? searchSectionList(initialOptions as TSectionList, regexFilter)
+        : searchFlatList(initialOptions as TFlatList, regexFilter);
+
+      setFilteredOptions(searchResults);
+    },
+    [
+      initialOptions,
+      isSection,
+      searchCallback,
+      searchFlatList,
+      searchSectionList,
+    ]
+  );
+
+  useEffect(() => {
+    if (searchValue) {
+      onSearch(searchValue);
+    }
+  }, [onSearch, searchValue]);
+
+  return {
+    searchValue,
+    setSearchValue,
+    filteredOptions,
+    setFilteredOptions,
+    isSectionList: isSection,
+  };
+};

package/src/hooks/use-select-all.ts

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from 'react';
+import { TFlatListItem, TSelectedItem } from '../types/index.types';
+import { removeDisabledItems } from '../utils';
+
+interface UseCheckSelectAllProps {
+  options: TFlatListItem[];
+  selectedItems: TSelectedItem[];
+  isMultiple: boolean;
+  onValueChange: (selectedValues: TSelectedItem[]) => void;
+  listControls?: {
+    selectAllCallback?: () => void;
+    unselectAllCallback?: () => void;
+  };
+  optionValue: string;
+}
+
+export const useSelectAll = ({
+  options,
+  selectedItems,
+  isMultiple,
+  onValueChange,
+  listControls,
+  optionValue,
+}: UseCheckSelectAllProps) => {
+  const [selectAll, setSelectAll] = useState<boolean>(false);
+
+  /**
+   * @description Handle "Select All" logic
+   */
+  const handleSelectAll = useCallback(() => {
+    setSelectAll((prevVal) => {
+      let selectedValues: TSelectedItem[] = [];
+
+      // Remove disabled items from selection
+      const filteredOptions = removeDisabledItems(options);
+
+      // if everything has not been selected, select all the values in the list
+      if (!prevVal) {
+        selectedValues = filteredOptions.map(
+          (obj) => obj[optionValue]
+        ) as TSelectedItem[];
+      }
+
+      onValueChange(selectedValues); // Send selected values to parent
+      return !prevVal;
+    });
+
+    if (typeof listControls?.selectAllCallback === 'function' && !selectAll) {
+      listControls.selectAllCallback();
+    }
+
+    if (typeof listControls?.unselectAllCallback === 'function' && selectAll) {
+      listControls.unselectAllCallback();
+    }
+  }, [options, optionValue, listControls, selectAll, onValueChange]);
+
+  /**
+   * Check if all items are selected
+   */
+  const checkSelectAll = useCallback(() => {
+    if (removeDisabledItems(options)?.length === selectedItems?.length) {
+      setSelectAll(true);
+    } else {
+      setSelectAll(false);
+    }
+  }, [options, selectedItems]);
+
+  /**
+   * if the user decides to select the options one by one, this hook
+   * runs to check if everything has been selected so that the `selectAll checkbox` can be selected
+   */
+  useEffect(() => {
+    if (isMultiple) {
+      checkSelectAll();
+    }
+  }, [checkSelectAll, isMultiple, selectedItems]);
+
+  return { selectAll, handleSelectAll };
+};

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

@@ -0,0 +1,81 @@
+import { useState, useCallback } from 'react';
+import { TSelectedItem } from '../types/index.types';
+
+interface UseSelectionHandlerProps {
+  initialSelectedValue: TSelectedItem | TSelectedItem[]; // Can be a single value or an array
+  isMultiple: boolean;
+  maxSelectableItems?: number;
+  onValueChange: (selectedItems: TSelectedItem | TSelectedItem[]) => void;
+  closeModal: () => void;
+  autoCloseOnSelect: boolean;
+}
+
+export const useSelectionHandler = ({
+  initialSelectedValue,
+  isMultiple,
+  maxSelectableItems,
+  onValueChange,
+  closeModal,
+  autoCloseOnSelect,
+}: UseSelectionHandlerProps) => {
+  // Initialize state based on whether it's multiple selection or not
+  const [selectedItem, setSelectedItem] = useState<TSelectedItem>(
+    isMultiple ? '' : (initialSelectedValue as TSelectedItem)
+  );
+  const [selectedItems, setSelectedItems] = useState<TSelectedItem[]>(
+    isMultiple ? (initialSelectedValue as TSelectedItem[]) : []
+  );
+
+  const handleSingleSelection = useCallback(
+    (value: TSelectedItem) => {
+      if (selectedItem === value) {
+        setSelectedItem('');
+        onValueChange(''); // Send null to parent when deselected
+      } else {
+        setSelectedItem(value);
+        onValueChange(value); // Send selected value to parent
+
+        if (autoCloseOnSelect) {
+          closeModal(); // close modal upon selection
+        }
+      }
+    },
+    [selectedItem, onValueChange, autoCloseOnSelect, closeModal]
+  );
+
+  const handleMultipleSelections = useCallback(
+    (value: TSelectedItem) => {
+      setSelectedItems((prevVal) => {
+        let selectedValues = [...prevVal];
+
+        if (selectedValues.includes(value)) {
+          // Remove item
+          selectedValues = selectedValues.filter((item) => item !== value);
+        } else {
+          // Add item
+          if (
+            maxSelectableItems &&
+            selectedValues.length >= maxSelectableItems
+          ) {
+            return selectedValues;
+          }
+          selectedValues.push(value);
+        }
+
+        onValueChange(selectedValues); // Send selected values to parent
+        return selectedValues;
+      });
+    },
+    [maxSelectableItems, onValueChange]
+  );
+
+  // Return the relevant state and handlers
+  return {
+    selectedItem,
+    selectedItems,
+    handleSingleSelection,
+    handleMultipleSelections,
+    setSelectedItems, // Expose for potential manual control
+    setSelectedItem, // Expose for potential manual control
+  };
+};