react-native-input-select 2.0.0 → 2.1.0

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

@@ -34,9 +34,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
         );
       });
     },

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);
       }
     });