react-native-input-select 2.0.0 → 2.1.1

package/src/components/CustomModal/index.tsx

@@ -11,7 +11,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { colors } from '../../styles/colors';
-import { TCustomModalControls, TCustomModalProps } from 'src/types/index.types';
+import { TCustomModalControls } from 'src/types/index.types';
 
 // In iOS, `SafeAreaView` does not automatically account on keyboard.
 // Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.
@@ -27,13 +27,10 @@ const ModalContentWrapper = ({ children }: PropsWithChildren): ReactElement => {
 
 const CustomModal = ({
   visible,
-  modalBackgroundStyle, //kept for backwards compatibility
-  modalOptionsContainerStyle, //kept for backwards compatibility
   modalControls,
-  modalProps, //kept for backwards compatibility
   children,
   onRequestClose,
-}: TCustomModalProps & {
+}: {
   modalControls?: TCustomModalControls;
 } & ModalProps) => {
   return (
@@ -43,7 +40,6 @@ const CustomModal = ({
       transparent={true}
       animationType="fade"
       {...modalControls?.modalProps}
-      {...modalProps} //kept for backwards compatibility
     >
       {/*Used to fix the select with search box behavior in iOS*/}
       <ModalContentWrapper>
@@ -52,7 +48,7 @@ const CustomModal = ({
           style={[
             styles.modalContainer,
             styles.modalBackgroundStyle,
-            modalControls?.modalBackgroundStyle || modalBackgroundStyle,
+            modalControls?.modalBackgroundStyle,
           ]}
           aria-label="close modal"
         >
@@ -61,8 +57,7 @@ const CustomModal = ({
             <SafeAreaView
               style={[
                 styles.modalOptionsContainer,
-                modalControls?.modalOptionsContainerStyle ||
-                  modalOptionsContainerStyle,
+                modalControls?.modalOptionsContainerStyle,
               ]}
               testID="react-native-input-select-modal-body"
             >

package/src/components/Dropdown/DropdownListItem.tsx

@@ -10,11 +10,6 @@ const DropdownListItem = ({
   selectedOption,
   onChange,
   primaryColor,
-  checkboxSize,
-  checkboxStyle,
-  checkboxLabelStyle,
-  checkboxComponentStyles,
-  checkboxComponent,
   checkboxControls,
 }: any) => {
   return (
@@ -32,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

@@ -85,7 +85,7 @@ const DropdownSelectedItemsView = ({
               disabled={disabled}
             />
           )}
-          {!selectedItem && selectedItems?.length === 0 && (
+          {selectedItem === '' && selectedItems?.length === 0 && (
             <DropdownContent
               onPress={() => openModal()}
               style={[styles.blackText, placeholderStyle]}

package/src/components/List/DropdownFlatList.tsx

@@ -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,
@@ -80,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,
         })
       }
@@ -110,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/List/DropdownSectionList.tsx

@@ -21,11 +21,6 @@ const DropdownSectionList = ({
   handleMultipleSelections,
   handleSingleSelection,
   primaryColor,
-  checkboxSize,
-  checkboxStyle,
-  checkboxLabelStyle,
-  checkboxComponentStyles,
-  checkboxComponent,
   checkboxControls,
   listComponentStyles,
   listIndex,
@@ -115,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,
         })
@@ -160,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/use-modal.ts

@@ -1,18 +1,16 @@
 import { useState } from 'react';
-import { ModalProps, Platform } from 'react-native';
+import { 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);
@@ -30,8 +28,6 @@ export const useModal = ({
     // 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?.();
     }
   };

package/src/hooks/use-search.ts

@@ -25,8 +25,12 @@ export const useSearch = ({
     TFlatList | TSectionList
   >(initialOptions);
 
+  const resetOptionsToDefault = (options: TFlatList | TSectionList) => {
+    setFilteredOptions(options);
+  };
+
   useEffect(() => {
-    setFilteredOptions(initialOptions);
+    resetOptionsToDefault(initialOptions);
     return () => {};
   }, [initialOptions]);
 
@@ -34,9 +38,9 @@ export const useSearch = ({
     (flatList: TFlatList, regexFilter: RegExp) => {
       return flatList.filter((item: TFlatListItem) => {
         return (
-          item[optionLabel].toString().toLowerCase().search(regexFilter) !==
+          item[optionLabel]?.toString().toLowerCase().search(regexFilter) !==
             -1 ||
-          item[optionValue].toString().toLowerCase().search(regexFilter) !== -1
+          item[optionValue]?.toString().toLowerCase().search(regexFilter) !== -1
         );
       });
     },
@@ -82,8 +86,10 @@ export const useSearch = ({
   useEffect(() => {
     if (searchValue) {
       onSearch(searchValue);
+    } else {
+      resetOptionsToDefault(initialOptions);
     }
-  }, [onSearch, searchValue]);
+  }, [initialOptions, onSearch, searchValue]);
 
   return {
     searchValue,

package/src/index.tsx

@@ -53,21 +53,12 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
       dropdownHelperTextStyle,
       selectedItemStyle,
       multipleSelectedItemStyle,
-      modalBackgroundStyle, // kept for backwards compatibility
-      modalOptionsContainerStyle, // kept for backwards compatibility
-      searchInputStyle, // kept for backwards compatibility
       primaryColor = colors.gray,
       disabled = false,
-      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
       listHeaderComponent,
       listFooterComponent,
       listComponentStyles,
       listEmptyComponent,
-      modalProps, // kept for backwards compatibility
       listControls,
       searchControls,
       modalControls,
@@ -131,7 +122,6 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
     const { isVisible, openModal, closeModal } = useModal({
       resetOptionsRelatedState,
       disabled,
-      modalProps,
       modalControls,
     });
 
@@ -156,8 +146,8 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
 
     useEffect(() => {
       isMultiple
-        ? setSelectedItems(Array.isArray(selectedValue) ? selectedValue : [])
-        : setSelectedItem((selectedValue as TSelectedItem) || '');
+        ? setSelectedItems(selectedValue as TSelectedItem[])
+        : setSelectedItem(selectedValue as TSelectedItem);
 
       return () => {};
     }, [
@@ -240,10 +230,7 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
         <CustomModal
           visible={isVisible}
           onRequestClose={() => closeModal()}
-          modalBackgroundStyle={modalBackgroundStyle} // kept for backwards compatibility
-          modalOptionsContainerStyle={modalOptionsContainerStyle} // kept for backwards compatibility
           modalControls={modalControls}
-          modalProps={modalProps} // kept for backwards compatibility
         >
           <ListTypeComponent
             ListHeaderComponent={
@@ -252,7 +239,7 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
                   <Input
                     value={searchValue}
                     onChangeText={(text: string) => setSearchValue(text)}
-                    style={searchControls?.textInputStyle || searchInputStyle}
+                    style={searchControls?.textInputStyle}
                     primaryColor={primaryColor}
                     textInputContainerStyle={
                       searchControls?.textInputContainerStyle
@@ -282,11 +269,6 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
                           onChange={() => handleSelectAll()}
                           primaryColor={primaryColor}
                           checkboxControls={checkboxControls}
-                          checkboxSize={checkboxSize}
-                          checkboxStyle={checkboxStyle}
-                          checkboxLabelStyle={checkboxLabelStyle}
-                          checkboxComponentStyles={checkboxComponentStyles}
-                          checkboxComponent={checkboxComponent}
                         />
                       </TouchableOpacity>
                     </View>
@@ -305,11 +287,6 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
             handleMultipleSelections={handleMultipleSelections}
             handleSingleSelection={handleSingleSelection}
             primaryColor={primaryColor}
-            checkboxSize={checkboxSize}
-            checkboxStyle={checkboxStyle}
-            checkboxLabelStyle={checkboxLabelStyle}
-            checkboxComponentStyles={checkboxComponentStyles}
-            checkboxComponent={checkboxComponent}
             checkboxControls={checkboxControls}
             listIndex={listIndex}
             listEmptyComponent={listEmptyComponent}

package/src/types/index.types.ts

@@ -9,11 +9,8 @@ import type {
 
 export type DropdownProps = CommonDropdownProps &
   TDropdownInputProps &
-  TSearchProps &
-  TCheckboxProps &
-  TCustomModalProps &
-  TListProps &
-  TControls;
+  TControls &
+  TListProps;
 
 export type CommonDropdownProps = {
   testID?: string;
@@ -46,8 +43,6 @@ export type TDropdownInputProps = {
   primaryColor?: ColorValue;
   disabled?: boolean;
   placeholderStyle?: TextStyle;
-  /** @deprecated Use useRef to access the open and close props.*/
-  hideModal?: boolean;
 };
 
 type TControls = {
@@ -57,11 +52,6 @@ type TControls = {
   listControls?: TListControls;
 };
 
-export type TSearchProps = {
-  /** @deprecated Use `searchControls = {{textInputStyle: ViewStyle | TextStyle }}` instead.*/
-  searchInputStyle?: ViewStyle;
-};
-
 type TSearchControls = {
   textInputStyle?: ViewStyle | TextStyle;
   textInputContainerStyle?: ViewStyle;
@@ -69,23 +59,6 @@ type TSearchControls = {
   searchCallback?: (value: string) => void;
 };
 
-export type TCheckboxProps = {
-  /** @deprecated Use `checkboxControls = {{checkboxSize: number }}` instead.*/
-  checkboxSize?: number;
-  /** @deprecated Use `checkboxControls = {{checkboxStyle: ViewStyle }}` instead.*/
-  checkboxStyle?: ViewStyle;
-  /** @deprecated Use `checkboxControls = {{checkboxLabelStyle: TextStyle }}` instead.*/
-  checkboxLabelStyle?: TextStyle;
-  /** @deprecated Use `checkboxControls` instead.*/
-  checkboxComponentStyles?: {
-    checkboxSize?: number;
-    checkboxStyle?: ViewStyle;
-    checkboxLabelStyle?: TextStyle;
-  };
-  /** @deprecated Use `checkboxControls = {{checkboxComponent: <View></View> }}` instead.*/
-  checkboxComponent?: React.ReactNode;
-};
-
 export type TCheckboxControls = {
   checkboxSize?: number;
   checkboxStyle?: ViewStyle;
@@ -95,25 +68,10 @@ export type TCheckboxControls = {
   checkboxUnselectedColor?: ColorValue;
 };
 
-export type TCustomModalProps = {
-  /** @deprecated Use `modalControls = {{modalBackgroundStyle: ViewStyle}} instead.*/
-  modalBackgroundStyle?: ViewStyle;
-  /** @deprecated Use `modalControls = {{ modalOptionsContainerStyle: ViewStyle}} instead.*/
-  modalOptionsContainerStyle?: ViewStyle;
-  /** @deprecated Use `modalControls = {{modalProps: ModalProps }}` instead.*/
-  modalProps?: ModalProps & {
-    /** @deprecated Use `onDismiss` instead.*/
-    closeModal?: () => void;
-  };
-};
-
 export type TCustomModalControls = {
   modalBackgroundStyle?: ViewStyle;
   modalOptionsContainerStyle?: ViewStyle;
-  modalProps?: ModalProps & {
-    /** @deprecated Use `onDismiss` instead.*/
-    closeModal?: () => void;
-  };
+  modalProps?: ModalProps;
 };
 
 export type TListProps = {
@@ -136,7 +94,7 @@ type TListControls = {
   emptyListMessage?: string;
 };
 
-export type TSelectedItem = string | number | boolean;
+export type TSelectedItem = string | number | boolean | undefined;
 export type TSelectedItemWithReactComponent =
   | TSelectedItem
   | React.ReactElement;

package/src/utils/index.ts

@@ -55,7 +55,7 @@ export const getLabelsOfSelectedItems = ({
         (item: TFlatListItem) => item[optionValue] === element
       )?.[optionLabel];
 
-      if (selectedItemLabel) {
+      if (selectedItemLabel !== '') {
         selectedLabels.push(selectedItemLabel);
       }
     });