react-native-input-select 1.1.1 → 1.1.2

package/src/components/Dropdown/DropdownSectionList.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { SectionList, StyleSheet } from 'react-native';
 import DropdownListItem from './DropdownListItem';
 import {
@@ -8,6 +8,7 @@ import {
   SectionHeaderTitle,
 } from '../Others';
 import { extractPropertyFromArray } from '../../utils';
+import { TSectionList } from 'src/types/index.types';
 
 const DropdownSectionList = ({
   options,
@@ -25,6 +26,7 @@ const DropdownSectionList = ({
   checkboxLabelStyle,
   checkboxComponentStyles,
   listComponentStyles,
+  listIndex,
   ...rest
 }: any) => {
   const [expandedSections, setExpandedSections] = useState(new Set());
@@ -53,6 +55,24 @@ const DropdownSectionList = ({
     });
   };
 
+  /**
+   * @description Scroll to item location
+   */
+
+  const sectionlistRef = useRef<SectionList<TSectionList>>(null);
+
+  const scrollToLocation = (listIndex: any) => {
+    sectionlistRef.current?.scrollToLocation({
+      sectionIndex: listIndex.sectionIndex,
+      animated: true,
+      itemIndex: listIndex.itemIndex,
+    });
+  };
+
+  useEffect(() => {
+    scrollToLocation(listIndex);
+  }, [listIndex]);
+
   return (
     <SectionList
       sections={options}
@@ -100,6 +120,12 @@ const DropdownSectionList = ({
       }
       keyExtractor={(_item, index) => `Options${index}`}
       stickySectionHeadersEnabled={false}
+      ref={sectionlistRef}
+      onScrollToIndexFailed={() => {
+        setTimeout(() => {
+          scrollToLocation(listIndex);
+        }, 500);
+      }}
       {...rest}
     />
   );

package/src/components/Dropdown/DropdownSelectedItemsView.tsx

@@ -6,6 +6,7 @@ import {
   ScrollView,
   StyleSheet,
   Image,
+  TouchableOpacity,
 } from 'react-native';
 import { colors } from '../../styles/colors';
 import { inputStyles } from '../../styles/input';
@@ -27,6 +28,7 @@ const DropdownSelectedItemsView = ({
   dropdownErrorStyle,
   primaryColor,
   disabled,
+  setIndexOfSelectedItem,
 }: any) => {
   return (
     <Pressable
@@ -36,8 +38,7 @@ const DropdownSelectedItemsView = ({
           ...inputStyles.inputFocusState,
           borderColor: primaryColor,
         },
-        inputStyles.input,
-        dropdownStyle,
+        { ...inputStyles.input, ...dropdownStyle },
         error && //this must be last
           error !== '' &&
           !pressed && {
@@ -57,27 +58,37 @@ const DropdownSelectedItemsView = ({
           onStartShouldSetResponder={() => true}
         >
           {isMultiple ? (
-            getSelectedItemsLabel()?.map((item: any, i: Number) => (
-              <Text
+            getSelectedItemsLabel()?.map((label: string, i: Number) => (
+              <DropdownContent
+                onPress={() => {
+                  handleToggleModal();
+                  setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal
+                }}
                 key={`react-native-input-select-${Math.random()}-${i}`}
                 style={[
                   styles.selectedItems,
                   { backgroundColor: primaryColor },
                   multipleSelectedItemStyle,
                 ]}
-              >
-                {item}
-              </Text>
+                label={label}
+              />
             ))
           ) : (
-            <Text style={[styles.blackText, selectedItemStyle]}>
-              {getSelectedItemsLabel()}
-            </Text>
+            <DropdownContent
+              onPress={() => {
+                handleToggleModal();
+                setIndexOfSelectedItem(getSelectedItemsLabel()); // immediately scrolls to list item with the specified label when modal
+              }}
+              style={[styles.blackText, selectedItemStyle]}
+              label={getSelectedItemsLabel()}
+            />
           )}
           {!selectedItem && selectedItems?.length === 0 && (
-            <Text style={[styles.blackText, placeholderStyle]}>
-              {placeholder ?? 'Select an option'}
-            </Text>
+            <DropdownContent
+              onPress={() => handleToggleModal()}
+              style={[styles.blackText, placeholderStyle]}
+              label={placeholder ?? 'Select an option'}
+            />
           )}
         </View>
       </ScrollView>
@@ -90,6 +101,14 @@ const DropdownSelectedItemsView = ({
   );
 };
 
+const DropdownContent = ({ onPress, style, label, ...rest }: any) => {
+  return (
+    <TouchableOpacity onPress={() => onPress()} {...rest}>
+      <Text style={style}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
 const styles = StyleSheet.create({
   iconStyle: { position: 'absolute', right: 25, top: 25 },
   selectedItemsContainer: {

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { TouchableOpacity, StyleSheet, View } from 'react-native';
 import Input from './components/Input';
 import CheckBox from './components/CheckBox';
@@ -62,9 +62,13 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
   const [open, setOpen] = useState<boolean>(false);
   const [selectAll, setSelectAll] = useState<boolean>(false);
-  const [selectedItem, setSelectedItem] = useState<any>(''); //for single selection
-  const [selectedItems, setSelectedItems] = useState<any[]>([]); //for multiple selection
+  const [selectedItem, setSelectedItem] = useState<any>(''); // for single selection
+  const [selectedItems, setSelectedItems] = useState<any[]>([]); // for multiple selection
   const [searchValue, setSearchValue] = useState<string>('');
+  const [listIndex, setListIndex] = useState<{
+    sectionIndex?: number;
+    itemIndex: number;
+  }>({ itemIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist
 
   useEffect(() => {
     if (options) {
@@ -92,11 +96,15 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const ListTypeComponent = isSectionList
     ? DropdownSectionList
     : DropdownFlatList;
-  let modifiedSectionData = extractPropertyFromArray(newOptions, 'data').flat();
-  let modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
+  const modifiedSectionData = extractPropertyFromArray(
+    newOptions,
+    'data'
+  ).flat();
+  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
 
   /*===========================================
    * Selection handlers
@@ -121,19 +129,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       } else {
         selectedValues.push(value);
       }
-
-      setSelectedItems(selectedValues);
       onValueChange(selectedValues); //send value to parent
-
-      //select all checkbox should not be checked if the list contains disabled values
-      if (
-        modifiedOptions.filter((item: TFlatListItem) => !item.disabled)
-          .length === selectedValues.length
-      ) {
-        setSelectAll(true);
-      } else {
-        setSelectAll(false);
-      }
       return selectedValues;
     });
   };
@@ -159,6 +155,32 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     });
   };
 
+  /*===========================================
+   * Handle side effects
+   *==========================================*/
+  const checkSelectAll = useCallback(
+    (selectedValues: any[]) => {
+      //if the list contains disabled values, those values will not be selected
+      if (
+        modifiedOptions.filter((item: TFlatListItem) => !item.disabled)
+          .length === selectedValues.length
+      ) {
+        setSelectAll(true);
+      } else {
+        setSelectAll(false);
+      }
+    },
+    [modifiedOptions]
+  );
+
+  // anytime the selected items change, check if it is time to set `selectAll` to true
+  useEffect(() => {
+    if (isMultiple) {
+      checkSelectAll(selectedItems);
+    }
+    return () => {};
+  }, [checkSelectAll, isMultiple, selectedItems]);
+
   /*===========================================
    * Get label handler
    *==========================================*/
@@ -192,7 +214,6 @@ 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
-    const optionsCopy = JSON.parse(JSON.stringify(options));
     const searchResults = isSectionList
       ? searchSectionList(optionsCopy as TSectionList, regexFilter)
       : searchFlatList(optionsCopy as TFlatList, regexFilter);
@@ -241,6 +262,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     setOpen(!open);
     setSearchValue('');
     setNewOptions(options);
+    setListIndex({ itemIndex: 0, sectionIndex: 0 });
   };
 
   useEffect(() => {
@@ -261,6 +283,25 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     ? sectionListMaxLength > 1
     : newOptions.length > 1;
 
+  /*===========================================
+   * setIndexOfSelectedItem - For ScrollToIndex
+   *==========================================*/
+  const setIndexOfSelectedItem = (selectedLabel: string) => {
+    isSectionList
+      ? optionsCopy.map((item: TSectionListItem, sectionIndex: number) => {
+          item.data?.find((dataItem: TFlatListItem, itemIndex: number) => {
+            if (dataItem[optLabel] === selectedLabel) {
+              setListIndex({ sectionIndex, itemIndex });
+            }
+          });
+        })
+      : optionsCopy?.find((item: TFlatListItem, itemIndex: number) => {
+          if (item[optLabel] === selectedLabel) {
+            setListIndex({ itemIndex });
+          }
+        });
+  };
+
   return (
     <>
       <Dropdown
@@ -286,6 +327,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         primaryColor={primary}
         disabled={disabled}
         placeholderStyle={placeholderStyle}
+        setIndexOfSelectedItem={setIndexOfSelectedItem}
         {...rest}
       />
       <CustomModal
@@ -342,6 +384,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxStyle={checkboxStyle}
           checkboxLabelStyle={checkboxLabelStyle}
           checkboxComponentStyles={checkboxComponentStyles}
+          listIndex={listIndex}
         />
       </CustomModal>
     </>