react-native-input-select 1.3.3 → 1.3.5

package/src/components/CheckBox/index.tsx

@@ -2,25 +2,7 @@ import React from 'react';
 import { Pressable, Text, StyleSheet, Image, View } from 'react-native';
 import { colors } from '../../styles/colors';
 import { CHECKBOX_SIZE } from '../../constants';
-import type { CheckboxProps } from './types';
-
-/**
-  * Individual props `checkboxSize`, `checkboxStyle`, `checkboxLabelStyle` would be replaced in future releases
-  * and replaced with a single object `checkboxComponentStyles` e.g
-
-```js
-const checkboxComponentStyles = {
-  checkboxSize: 20,
-  checkboxStyle: {
-    backgroundColor: 'purple',
-    borderRadius: 30,
-    padding: 10,
-    borderColor: 'red',
-  },
-  checkboxLabelStyle: { color: 'red', fontSize: 20 },
-};
-```
-  */
+import type { CheckboxProps } from './checkbox.types';
 
 const CheckBox = ({
   label,
@@ -32,22 +14,23 @@ const CheckBox = ({
   checkboxLabelStyle,
   checkboxComponentStyles,
   checkboxComponent,
+  checkboxControls,
   onChange,
 }: CheckboxProps) => {
-  // const { checkboxSize, checkboxStyle, checkboxLabelStyle } =
-  //   checkboxComponentStyles || undefined;
   const fillColor = {
     backgroundColor: disabled
       ? '#d3d3d3'
       : value
-      ? checkboxComponentStyles?.checkboxStyle?.backgroundColor ||
+      ? checkboxControls?.checkboxStyle?.backgroundColor ||
+        checkboxComponentStyles?.checkboxStyle?.backgroundColor ||
         checkboxStyle?.backgroundColor ||
         primaryColor ||
         'green'
       : 'white',
     borderColor: disabled
       ? colors.disabled
-      : checkboxComponentStyles?.checkboxStyle?.borderColor ||
+      : checkboxControls?.checkboxStyle?.borderColor ||
+        checkboxComponentStyles?.checkboxStyle?.borderColor ||
         checkboxStyle?.borderColor ||
         styles.checkbox.borderColor,
   };
@@ -61,20 +44,24 @@ const CheckBox = ({
       <View
         style={[
           styles.checkbox,
-          checkboxComponentStyles?.checkboxStyle || checkboxStyle,
+          checkboxControls?.checkboxStyle ||
+            checkboxComponentStyles?.checkboxStyle ||
+            checkboxStyle,
           fillColor,
         ]}
       >
-        {checkboxComponent || (
+        {checkboxControls?.checkboxComponent || checkboxComponent || (
           <Image
             source={require('../../asset/check.png')}
             style={[
               {
                 height:
+                  checkboxControls?.checkboxSize ||
                   checkboxComponentStyles?.checkboxSize ||
                   checkboxSize ||
                   CHECKBOX_SIZE,
                 width:
+                  checkboxControls?.checkboxSize ||
                   checkboxComponentStyles?.checkboxSize ||
                   checkboxSize ||
                   CHECKBOX_SIZE,
@@ -86,7 +73,9 @@ const CheckBox = ({
       {label && label !== '' && (
         <Text
           style={[
-            checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle,
+            checkboxControls?.checkboxLabelStyle ||
+              checkboxComponentStyles?.checkboxLabelStyle ||
+              checkboxLabelStyle,
             styles.labelStyle,
           ]}
         >

package/src/components/CustomModal/index.tsx

@@ -5,37 +5,45 @@ import {
   SafeAreaView,
   StyleSheet,
   TouchableWithoutFeedback,
+  ModalProps,
 } from 'react-native';
 import { colors } from '../../styles/colors';
+import { TCustomModalControls } from 'src/types/index.types';
 
 const CustomModal = ({
-  open,
+  visible,
   onRequestClose,
-  modalBackgroundStyle,
-  modalOptionsContainerStyle,
-  modalProps,
+  modalBackgroundStyle, //kept for backwards compatibility
+  modalOptionsContainerStyle, //kept for backwards compatibility
+  modalControls,
+  modalProps, //kept for backwards compatibility
   children,
-}: any) => {
+}: TCustomModalControls & ModalProps) => {
   return (
     <Modal
       transparent={true}
-      visible={open}
-      onRequestClose={() => onRequestClose()}
+      visible={visible}
+      onRequestClose={() => onRequestClose?.()}
       animationType="fade"
-      {...modalProps}
+      {...modalControls?.modalProps}
+      {...modalProps} //kept for backwards compatibility
     >
       <TouchableOpacity
-        onPress={() => onRequestClose()}
+        onPress={() => onRequestClose?.()}
         style={[
           styles.modalContainer,
           styles.modalBackgroundStyle,
-          modalBackgroundStyle,
+          modalControls?.modalBackgroundStyle || modalBackgroundStyle,
         ]}
       >
         {/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */}
         <TouchableWithoutFeedback onPress={() => {}}>
           <SafeAreaView
-            style={[styles.modalOptionsContainer, modalOptionsContainerStyle]}
+            style={[
+              styles.modalOptionsContainer,
+              modalControls?.modalOptionsContainerStyle ||
+                modalOptionsContainerStyle,
+            ]}
           >
             {children}
           </SafeAreaView>

package/src/components/Dropdown/DropdownFlatList.tsx

@@ -21,6 +21,7 @@ const DropdownFlatList = ({
   checkboxLabelStyle, // kept for backwards compatibility to be removed  in future release
   checkboxComponentStyles,
   checkboxComponent,
+  checkboxControls,
   listComponentStyles,
   listIndex,
   emptyListMessage,
@@ -74,8 +75,9 @@ const DropdownFlatList = ({
           checkboxSize, // kept for backwards compatibility
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
-          checkboxComponentStyles,
-          checkboxComponent,
+          checkboxComponentStyles, // kept for backwards compatibility
+          checkboxComponent, // kept for backwards compatibility
+          checkboxControls,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -106,6 +108,7 @@ const _renderItem = ({ item }: any, props: any) => {
       scrollToItem={props.scrollToItem}
       checkboxComponentStyles={props.checkboxComponentStyles}
       checkboxComponent={props.checkboxComponent}
+      checkboxControls={props.checkboxControls}
     />
   );
 };

package/src/components/Dropdown/DropdownListItem.tsx

@@ -15,6 +15,7 @@ const DropdownListItem = ({
   checkboxLabelStyle,
   checkboxComponentStyles,
   checkboxComponent,
+  checkboxControls,
 }: any) => {
   return (
     <TouchableOpacity
@@ -32,6 +33,7 @@ const DropdownListItem = ({
         label={item[optionLabel]}
         onChange={() => onChange(item[optionValue])}
         primaryColor={primaryColor}
+        checkboxControls={checkboxControls}
         checkboxSize={checkboxComponentStyles?.checkboxSize || checkboxSize}
         checkboxStyle={checkboxComponentStyles?.checkboxStyle || checkboxStyle}
         checkboxLabelStyle={

package/src/components/Dropdown/DropdownSectionList.tsx

@@ -26,6 +26,7 @@ const DropdownSectionList = ({
   checkboxLabelStyle,
   checkboxComponentStyles,
   checkboxComponent,
+  checkboxControls,
   listComponentStyles,
   listIndex,
   emptyListMessage,
@@ -64,7 +65,7 @@ const DropdownSectionList = ({
   const sectionlistRef = useRef<SectionList<TSectionList>>(null);
 
   const scrollToLocation = (listIndex: any) => {
-    sectionlistRef.current?.scrollToLocation({
+    sectionlistRef?.current?.scrollToLocation({
       sectionIndex: listIndex.sectionIndex,
       animated: true,
       itemIndex: listIndex.itemIndex,
@@ -109,8 +110,9 @@ const DropdownSectionList = ({
           checkboxSize, // kept for backwards compatibility
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
-          checkboxComponentStyles,
-          checkboxComponent,
+          checkboxComponentStyles, // kept for backwards compatibility
+          checkboxComponent, // kept for backwards compatibility
+          checkboxControls,
           expandedSections,
         })
       }
@@ -155,6 +157,7 @@ const _renderItem = ({ section: { title }, item }: any, props: any) => {
       checkboxLabelStyle={props.checkboxLabelStyle}
       checkboxComponentStyles={props.checkboxComponentStyles}
       checkboxComponent={props.checkboxComponent}
+      checkboxControls={props.checkboxControls}
     />
   );
 };

package/src/components/Others/index.tsx

@@ -23,7 +23,11 @@ export const ListEmptyComponent = ({
   );
 };
 
-export const ItemSeparatorComponent = ({ itemSeparatorStyle }: any) => {
+export const ItemSeparatorComponent = ({
+  itemSeparatorStyle,
+}: {
+  itemSeparatorStyle: ViewStyle;
+}) => {
   return <View style={[styles.itemSeparatorStyle, itemSeparatorStyle]} />;
 };
 

package/src/index.tsx

@@ -40,23 +40,25 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   dropdownHelperTextStyle,
   selectedItemStyle,
   multipleSelectedItemStyle,
-  modalBackgroundStyle,
-  modalOptionsContainerStyle,
+  modalBackgroundStyle, // kept for backwards compatibility
+  modalOptionsContainerStyle, // kept for backwards compatibility
   searchInputStyle, // kept for backwards compatibility
   primaryColor,
   disabled,
   checkboxSize, // kept for backwards compatibility
   checkboxStyle, // kept for backwards compatibility
   checkboxLabelStyle, // kept for backwards compatibility
-  checkboxComponentStyles,
-  checkboxComponent,
+  checkboxComponentStyles, // kept for backwards compatibility
+  checkboxComponent, // kept for backwards compatibility
   listHeaderComponent,
   listFooterComponent,
   listComponentStyles,
-  modalProps,
+  modalProps, // kept for backwards compatibility
   hideModal = false,
   listControls,
   searchControls,
+  modalControls,
+  checkboxControls,
   ...rest
 }) => {
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
@@ -347,11 +349,12 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         {...rest}
       />
       <CustomModal
-        open={open}
-        modalBackgroundStyle={modalBackgroundStyle}
-        modalOptionsContainerStyle={modalOptionsContainerStyle}
+        visible={open}
+        modalBackgroundStyle={modalBackgroundStyle} // kept for backwards compatibility
+        modalOptionsContainerStyle={modalOptionsContainerStyle} // kept for backwards compatibility
         onRequestClose={() => handleToggleModal()}
-        modalProps={modalProps}
+        modalControls={modalControls}
+        modalProps={modalProps} // kept for backwards compatibility
       >
         <ListTypeComponent
           ListHeaderComponent={
@@ -386,6 +389,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                         }
                         onChange={() => handleSelectAll()}
                         primaryColor={primary}
+                        checkboxControls={checkboxControls}
                         checkboxSize={checkboxSize}
                         checkboxStyle={checkboxStyle}
                         checkboxLabelStyle={checkboxLabelStyle}
@@ -414,6 +418,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxLabelStyle={checkboxLabelStyle}
           checkboxComponentStyles={checkboxComponentStyles}
           checkboxComponent={checkboxComponent}
+          checkboxControls={checkboxControls}
           listIndex={listIndex}
           emptyListMessage={listControls?.emptyListMessage}
         />

package/src/types/index.types.ts

@@ -6,11 +6,15 @@ import type {
   TextInputProps,
 } from 'react-native';
 
-export type DropdownProps = {
-  placeholder?: string;
+export type DropdownProps = CommonDropdownProps &
+  TDropdownInputProps &
+  TSearchControls &
+  TCheckboxControls &
+  TCustomModalControls &
+  TListControls;
+
+export type CommonDropdownProps = {
   label?: string;
-  error?: string;
-  helperText?: string;
   options: TFlatList | TSectionList;
   optionLabel?: string;
   optionValue?: string;
@@ -23,6 +27,12 @@ export type DropdownProps = {
     | boolean[]
     | number[]
     | null;
+};
+
+export type TDropdownInputProps = {
+  placeholder?: string;
+  error?: string;
+  helperText?: string;
   isMultiple?: boolean;
   isSearchable?: boolean;
   dropdownIcon?: React.ReactNode;
@@ -35,25 +45,61 @@ export type DropdownProps = {
   dropdownHelperTextStyle?: TextStyle;
   selectedItemStyle?: TextStyle;
   multipleSelectedItemStyle?: TextStyle;
-  modalBackgroundStyle?: ViewStyle;
-  modalOptionsContainerStyle?: ViewStyle;
-  searchInputStyle?: ViewStyle;
   primaryColor?: ColorValue;
   disabled?: boolean;
+  placeholderStyle?: TextStyle;
+  hideModal?: boolean;
+};
+
+export type TSearchControls = {
+  /** @deprecated Use `searchControls = {{textInputStyle: ViewStyle | TextStyle }}` instead.*/
+  searchInputStyle?: ViewStyle;
+  searchControls?: {
+    textInputStyle?: ViewStyle | TextStyle;
+    textInputContainerStyle?: ViewStyle;
+    textInputProps?: TextInputProps;
+  };
+};
+export type TCheckboxControls = {
+  /** @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;
-  placeholderStyle?: TextStyle;
+  checkboxControls?: {
+    checkboxSize?: number;
+    checkboxStyle?: ViewStyle;
+    checkboxLabelStyle?: TextStyle;
+    checkboxComponent?: React.ReactNode;
+  };
+};
+
+export type TCustomModalControls = {
+  /** @deprecated Use `modalControls = {{modalBackgroundStyle: ViewStyle}} instead.*/
+  modalBackgroundStyle?: ViewStyle;
+  /** @deprecated Use `modalControls = {{ modalOptionsContainerStyle: ViewStyle}} instead.*/
+  modalOptionsContainerStyle?: ViewStyle;
+  /** @deprecated Use `modalControls = {{modalProps: ModalProps }}` instead.*/
+  modalProps?: ModalProps;
+  modalControls?: {
+    modalBackgroundStyle?: ViewStyle;
+    modalOptionsContainerStyle?: ViewStyle;
+    modalProps?: ModalProps;
+  };
+};
+
+export type TListControls = {
   listHeaderComponent?: React.ReactNode;
   listFooterComponent?: React.ReactNode;
-  hideModal?: boolean;
-  modalProps?: ModalProps;
   listComponentStyles?: {
     listEmptyComponentStyle?: TextStyle;
     itemSeparatorStyle?: ViewStyle;
@@ -67,11 +113,6 @@ export type DropdownProps = {
     hideSelectAll?: boolean;
     emptyListMessage?: string;
   };
-  searchControls?: {
-    textInputStyle?: ViewStyle | TextStyle;
-    textInputContainerStyle?: ViewStyle;
-    textInputProps?: TextInputProps;
-  };
 };
 
 export type TFlatList = TFlatListItem[];

package/src/utils/index.ts

@@ -2,7 +2,7 @@
  * Extract property from array
  */
 
-export const extractPropertyFromArray = (arr: any, property: string) => {
+export const extractPropertyFromArray = (arr: any[], property: string) => {
   let extractedValue = arr?.map((item: any) => item[property]);
 
   return extractedValue;

package/lib/commonjs/components/CheckBox/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from 'react';\nimport type { ColorValue, ViewStyle, TextStyle } from 'react-native';\n\nexport type CheckboxProps = {\n  label?: string;\n  value?: boolean;\n  disabled?: boolean;\n  primaryColor?: ColorValue;\n  checkboxSize?: number;\n  checkboxStyle?: ViewStyle;\n  checkboxLabelStyle?: TextStyle;\n  checkboxComponentStyles?: {\n    checkboxSize?: number;\n    checkboxStyle?: ViewStyle;\n    checkboxLabelStyle?: TextStyle;\n  };\n  checkboxComponent?: React.ReactNode;\n  onChange?: (value: boolean | string | number) => void;\n};\n"],"mappings":""}

package/lib/module/components/CheckBox/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/lib/module/components/CheckBox/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from 'react';\nimport type { ColorValue, ViewStyle, TextStyle } from 'react-native';\n\nexport type CheckboxProps = {\n  label?: string;\n  value?: boolean;\n  disabled?: boolean;\n  primaryColor?: ColorValue;\n  checkboxSize?: number;\n  checkboxStyle?: ViewStyle;\n  checkboxLabelStyle?: TextStyle;\n  checkboxComponentStyles?: {\n    checkboxSize?: number;\n    checkboxStyle?: ViewStyle;\n    checkboxLabelStyle?: TextStyle;\n  };\n  checkboxComponent?: React.ReactNode;\n  onChange?: (value: boolean | string | number) => void;\n};\n"],"mappings":""}

package/lib/typescript/components/CheckBox/types.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
-export type CheckboxProps = {
-    label?: string;
-    value?: boolean;
-    disabled?: boolean;
-    primaryColor?: ColorValue;
-    checkboxSize?: number;
-    checkboxStyle?: ViewStyle;
-    checkboxLabelStyle?: TextStyle;
-    checkboxComponentStyles?: {
-        checkboxSize?: number;
-        checkboxStyle?: ViewStyle;
-        checkboxLabelStyle?: TextStyle;
-    };
-    checkboxComponent?: React.ReactNode;
-    onChange?: (value: boolean | string | number) => void;
-};

package/src/components/CheckBox/types.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
-
-export type CheckboxProps = {
-  label?: string;
-  value?: boolean;
-  disabled?: boolean;
-  primaryColor?: ColorValue;
-  checkboxSize?: number;
-  checkboxStyle?: ViewStyle;
-  checkboxLabelStyle?: TextStyle;
-  checkboxComponentStyles?: {
-    checkboxSize?: number;
-    checkboxStyle?: ViewStyle;
-    checkboxLabelStyle?: TextStyle;
-  };
-  checkboxComponent?: React.ReactNode;
-  onChange?: (value: boolean | string | number) => void;
-};