Merge pull request #60 from azeezat/type-fixes

chore: type fixes and deprecation notices

example/src/App.tsx

@@ -14,19 +14,23 @@ import DropdownSelect from 'react-native-input-select';
 import { countries } from './data';
 
 export default function App() {
-  const [users, setUsers] = useState<any>('');
+  const [users, setUsers] = useState<string[]>([]);
   const [country, setCountry] = useState<any>('');
-  const [gender, setGender] = useState<any>('');
-  const [currency, setCurrency] = useState<any>('');
-  const [meals, setMeals] = useState<any>('');
+  const [gender, setGender] = useState<number>();
+  const [currency, setCurrency] = useState<string[]>([]);
+  const [meals, setMeals] = useState<string[]>([]);
   const [item, setItem] = useState<any>('');
-  const [menu, setMenu] = useState<any>('');
+  const [menu, setMenu] = useState<string[]>([]);
 
   useEffect(() => {
     setCurrency(['NGN']);
     setMenu(['F']);
   }, []);
 
+  const logMovies = async () => {
+    console.log('You can make an API call when the modal opens.');
+  };
+
   return (
     <SafeAreaView>
       <ScrollView>
@@ -74,6 +78,9 @@ export default function App() {
             dropdownErrorTextStyle={{ color: 'red', fontWeight: '500' }}
             error={gender ? '' : 'Gender is required'}
             primaryColor={'green'}
+            modalControls={{
+              modalProps: { onShow: () => logMovies() },
+            }}
           />
 
           <DropdownSelect
@@ -147,19 +154,21 @@ export default function App() {
               color: 'green',
               fontWeight: '900',
             }}
-            modalBackgroundStyle={{
-              backgroundColor: 'rgba(196, 198, 246, 0.5)',
+            modalControls={{
+              modalBackgroundStyle: {
+                backgroundColor: 'rgba(196, 198, 246, 0.5)',
+              },
             }}
             helperText="Some items in this list are disabled"
             isMultiple
-            checkboxComponent={<View style={styles.radioButton} />}
-            checkboxComponentStyles={{
+            checkboxControls={{
               checkboxStyle: {
                 backgroundColor: 'green',
                 borderRadius: 30,
                 borderColor: 'green',
               },
               checkboxLabelStyle: { color: 'green', fontSize: 20 },
+              checkboxComponent: <View style={styles.radioButton} />,
             }}
             listControls={{
               hideSelectAll: true,
@@ -185,12 +194,13 @@ export default function App() {
               color: 'green',
               fontWeight: '900',
             }}
-            modalBackgroundStyle={{
-              backgroundColor: 'rgba(196, 198, 246, 0.5)',
+            modalControls={{
+              modalBackgroundStyle: {
+                backgroundColor: 'rgba(196, 198, 246, 0.5)',
+              },
             }}
             helperText="The placeholder has been styled"
-            checkboxComponent={<View style={styles.radioButton} />}
-            checkboxComponentStyles={{
+            checkboxControls={{
               checkboxSize: 15,
               checkboxStyle: {
                 backgroundColor: 'purple',
@@ -199,6 +209,7 @@ export default function App() {
                 borderColor: 'red',
               },
               checkboxLabelStyle: { color: 'red', fontSize: 20 },
+              checkboxComponent: <View style={styles.radioButton} />,
             }}
             selectedItemStyle={{
               color: 'hotpink',
@@ -254,19 +265,21 @@ export default function App() {
                 </Text>
               </View>
             }
-            modalOptionsContainerStyle={{
-              padding: 10,
-              backgroundColor: 'cyan',
-            }}
-            modalProps={{
-              supportedOrientations: [
-                'portrait',
-                'portrait-upside-down',
-                'landscape',
-                'landscape-left',
-                'landscape-right',
-              ],
-              transparent: false,
+            modalControls={{
+              modalOptionsContainerStyle: {
+                padding: 10,
+                backgroundColor: 'cyan',
+              },
+              modalProps: {
+                supportedOrientations: [
+                  'portrait',
+                  'portrait-upside-down',
+                  'landscape',
+                  'landscape-left',
+                  'landscape-right',
+                ],
+                transparent: false,
+              },
             }}
             listComponentStyles={{
               listEmptyComponentStyle: {

package.json

@@ -73,7 +73,7 @@
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.18.2",
     "release-it": "^14.14.3",
-    "typescript": "^4.1.3"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": "*",

src/components/CheckBox/checkbox.types.ts

@@ -0,0 +1,10 @@
+import type { ColorValue } from 'react-native';
+import { TCheckboxControls } from 'src/types/index.types';
+
+export type CheckboxProps = {
+  label?: string;
+  value?: boolean;
+  disabled?: boolean;
+  primaryColor?: ColorValue;
+  onChange?: (value: boolean | string | number) => void;
+} & TCheckboxControls;

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,
           ]}
         >

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>

src/components/Dropdown/DropdownSectionList.tsx

@@ -64,7 +64,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,

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]} />;
 };
 

src/index.tsx

@@ -40,8 +40,8 @@ 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,
@@ -53,10 +53,12 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   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={
@@ -414,6 +417,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxLabelStyle={checkboxLabelStyle}
           checkboxComponentStyles={checkboxComponentStyles}
           checkboxComponent={checkboxComponent}
+          checkboxControls={checkboxControls}
           listIndex={listIndex}
           emptyListMessage={listControls?.emptyListMessage}
         />