react-native-input-select 1.3.18 → 2.1.0

package/src/components/CustomModal/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+/* eslint-disable react-native/no-inline-styles */
+import React, { PropsWithChildren, ReactElement } from 'react';
 import {
   KeyboardAvoidingView,
   Modal,
@@ -12,15 +13,9 @@ import {
 import { colors } from '../../styles/colors';
 import { TCustomModalControls } from 'src/types/index.types';
 
-type ScreenWrapperProps = {
-  children: React.ReactNode;
-};
-
 // In iOS, `SafeAreaView` does not automatically account on keyboard.
 // Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.
-const ModalContentWrapper = ({
-  children,
-}: ScreenWrapperProps): ReactElement => {
+const ModalContentWrapper = ({ children }: PropsWithChildren): ReactElement => {
   return Platform.OS === 'ios' ? (
     <KeyboardAvoidingView style={[{ flex: 1 }]} behavior="padding">
       {children}
@@ -32,42 +27,39 @@ const ModalContentWrapper = ({
 
 const CustomModal = ({
   visible,
-  closeModal,
-  modalBackgroundStyle, //kept for backwards compatibility
-  modalOptionsContainerStyle, //kept for backwards compatibility
   modalControls,
-  modalProps, //kept for backwards compatibility
   children,
-}: TCustomModalControls & ModalProps) => {
+  onRequestClose,
+}: {
+  modalControls?: TCustomModalControls;
+} & ModalProps) => {
   return (
     <Modal
-      transparent={true}
       visible={visible}
-      onRequestClose={() => closeModal?.()}
+      testID="react-native-input-select-modal"
+      transparent={true}
       animationType="fade"
       {...modalControls?.modalProps}
-      {...modalProps} //kept for backwards compatibility
     >
       {/*Used to fix the select with search box behavior in iOS*/}
       <ModalContentWrapper>
         <TouchableOpacity
-          onPress={() =>
-            closeModal?.() || modalControls?.modalProps?.closeModal?.()
-          }
+          onPress={onRequestClose}
           style={[
             styles.modalContainer,
             styles.modalBackgroundStyle,
-            modalControls?.modalBackgroundStyle || modalBackgroundStyle,
+            modalControls?.modalBackgroundStyle,
           ]}
+          aria-label="close modal"
         >
           {/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */}
-          <TouchableWithoutFeedback onPress={() => {}}>
+          <TouchableWithoutFeedback accessible={false}>
             <SafeAreaView
               style={[
                 styles.modalOptionsContainer,
-                modalControls?.modalOptionsContainerStyle ||
-                  modalOptionsContainerStyle,
+                modalControls?.modalOptionsContainerStyle,
               ]}
+              testID="react-native-input-select-modal-body"
             >
               {children}
             </SafeAreaView>

package/src/components/Dropdown/Dropdown.tsx

@@ -10,7 +10,7 @@ const Dropdown = ({
   placeholder,
   helperText,
   error,
-  getSelectedItemsLabel,
+  labelsOfSelectedItems,
   openModal,
   closeModal,
   isMultiple,
@@ -35,6 +35,7 @@ const Dropdown = ({
     <View
       style={[styles.dropdownInputContainer, dropdownContainerStyle]}
       accessibilityRole="combobox"
+      pointerEvents="box-none"
       testID={testID}
     >
       {label && label !== '' && (
@@ -44,7 +45,7 @@ const Dropdown = ({
       <DropdownSelectedItemsView
         placeholder={placeholder}
         error={error}
-        getSelectedItemsLabel={getSelectedItemsLabel}
+        labelsOfSelectedItems={labelsOfSelectedItems}
         openModal={openModal}
         closeModal={closeModal}
         isMultiple={isMultiple}

package/src/components/Dropdown/DropdownListItem.tsx

@@ -10,19 +10,12 @@ const DropdownListItem = ({
   selectedOption,
   onChange,
   primaryColor,
-  checkboxSize,
-  checkboxStyle,
-  checkboxLabelStyle,
-  checkboxComponentStyles,
-  checkboxComponent,
   checkboxControls,
 }: any) => {
   return (
     <TouchableOpacity
       style={styles.listItemContainerStyle}
-      onPress={
-        item.disabled ? () => {} : () => onChange(item[optionValue]) // intentionally didn't use the disable property
-      }
+      onPress={item.disabled ? () => {} : () => onChange(item[optionValue])}
     >
       <CheckBox
         value={
@@ -34,13 +27,7 @@ const DropdownListItem = ({
         onChange={() => onChange(item[optionValue])}
         primaryColor={primaryColor}
         checkboxControls={checkboxControls}
-        checkboxSize={checkboxComponentStyles?.checkboxSize || checkboxSize}
-        checkboxStyle={checkboxComponentStyles?.checkboxStyle || checkboxStyle}
-        checkboxLabelStyle={
-          checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle
-        }
         disabled={item.disabled}
-        checkboxComponent={checkboxComponent}
       />
     </TouchableOpacity>
   );

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,16 +79,13 @@ 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}
             />
           )}
-          {!selectedItem && selectedItems?.length === 0 && (
+          {selectedItem === '' && selectedItems?.length === 0 && (
             <DropdownContent
               onPress={() => openModal()}
               style={[styles.blackText, placeholderStyle]}

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,
@@ -16,11 +16,6 @@ const DropdownFlatList = ({
   handleMultipleSelections,
   handleSingleSelection,
   primaryColor,
-  checkboxSize, // kept for backwards compatibility to be removed in future release
-  checkboxStyle, // kept for backwards compatibility to be removed in future release
-  checkboxLabelStyle, // kept for backwards compatibility to be removed  in future release
-  checkboxComponentStyles,
-  checkboxComponent,
   checkboxControls,
   listComponentStyles,
   listIndex,
@@ -31,7 +26,7 @@ const DropdownFlatList = ({
   const flatlistRef = useRef<FlatList<TFlatList>>(null);
 
   const scrollToItem = (index: number) => {
-    flatlistRef.current?.scrollToIndex({
+    flatlistRef?.current?.scrollToIndex({
       index,
       animated: true,
     });
@@ -43,8 +38,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 +63,7 @@ const DropdownFlatList = ({
       contentContainerStyle={[
         isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
       ]}
-      ItemSeparatorComponent={() => (
-        <ItemSeparatorComponent
-          itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
-        />
-      )}
+      ItemSeparatorComponent={itemSeparator}
       renderItem={(item) =>
         _renderItem(item, {
           optionLabel,
@@ -77,11 +75,6 @@ const DropdownFlatList = ({
             : handleSingleSelection,
           scrollToItem,
           primaryColor,
-          checkboxSize, // kept for backwards compatibility
-          checkboxStyle, // kept for backwards compatibility
-          checkboxLabelStyle, // kept for backwards compatibility
-          checkboxComponentStyles, // kept for backwards compatibility
-          checkboxComponent, // kept for backwards compatibility
           checkboxControls,
         })
       }
@@ -107,12 +100,7 @@ const _renderItem = ({ item }: any, props: any) => {
       selectedOption={props.selectedOption}
       onChange={props.onChange}
       primaryColor={props.primaryColor}
-      checkboxSize={props.checkboxSize}
-      checkboxStyle={props.checkboxStyle}
-      checkboxLabelStyle={props.checkboxLabelStyle}
       scrollToItem={props.scrollToItem}
-      checkboxComponentStyles={props.checkboxComponentStyles}
-      checkboxComponent={props.checkboxComponent}
       checkboxControls={props.checkboxControls}
     />
   );

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,
@@ -21,11 +21,6 @@ const DropdownSectionList = ({
   handleMultipleSelections,
   handleSingleSelection,
   primaryColor,
-  checkboxSize,
-  checkboxStyle,
-  checkboxLabelStyle,
-  checkboxComponentStyles,
-  checkboxComponent,
   checkboxControls,
   listComponentStyles,
   listIndex,
@@ -79,8 +74,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 +99,7 @@ const DropdownSectionList = ({
       contentContainerStyle={[
         isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
       ]}
-      ItemSeparatorComponent={() => (
-        <ItemSeparatorComponent
-          itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
-        />
-      )}
+      ItemSeparatorComponent={itemSeparator}
       renderItem={(item) =>
         _renderItem(item, {
           optionLabel,
@@ -112,11 +110,6 @@ const DropdownSectionList = ({
             ? handleMultipleSelections
             : handleSingleSelection,
           primaryColor,
-          checkboxSize, // kept for backwards compatibility
-          checkboxStyle, // kept for backwards compatibility
-          checkboxLabelStyle, // kept for backwards compatibility
-          checkboxComponentStyles, // kept for backwards compatibility
-          checkboxComponent, // kept for backwards compatibility
           checkboxControls,
           expandedSections,
         })
@@ -157,11 +150,6 @@ const _renderItem = ({ section: { title }, item }: any, props: any) => {
       selectedOption={props.selectedOption}
       onChange={props.onChange}
       primaryColor={props.primaryColor}
-      checkboxSize={props.checkboxSize}
-      checkboxStyle={props.checkboxStyle}
-      checkboxLabelStyle={props.checkboxLabelStyle}
-      checkboxComponentStyles={props.checkboxComponentStyles}
-      checkboxComponent={props.checkboxComponent}
       checkboxControls={props.checkboxControls}
     />
   );

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,40 @@
+import { useState } from 'react';
+import { Platform } from 'react-native';
+import { TCustomModalControls } from '../types/index.types';
+
+interface UseModalProps {
+  resetOptionsRelatedState: () => void;
+  disabled?: boolean;
+  modalControls?: TCustomModalControls;
+}
+
+export const useModal = ({
+  resetOptionsRelatedState,
+  disabled,
+  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?.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 };
+};