Merge pull request #39 from azeezat/feat/search

refactor: searchControls
azeezat · Sep 8, 2023 · 83b2fa1 · 83b2fa1
2 parents 1998326 + dd1891a
commit 83b2fa1
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -271,10 +271,10 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native-
 | listFooterComponent        | `React Component`        | `<Text> You can add any component here <Text>`                       |
 | hideModal                  | `Boolean`                | Use this to hide the modal as needed                                 |
 | listComponentStyles        | `Object`                 | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` |
-| checkboxComponentStyles    | `Object`                 | `{checkboxSize?: number, checkboxStyle?: ViewStyle, checkboxLabelStyle: TextStyle}` |
+| checkboxComponentStyles    | `Object`                 | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle}` |
 | checkboxComponent          | `React Component`        | `<View style={styles.radioButton} />`                                |
-| listControls          | `Object`                 | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback?: () => {}, unselectAllCallback?: () => {}}`   |
-| searchControls             | `Object`                 | `{ searchInputStyle?: ViewStyle | TextStyle, textInputProps: TextInputProps}`                |
+| listControls               | `Object`                 | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}}`   |
+| searchControls             | `Object`                 | `{ textInputStyle: ViewStyle \| TextStyle,  textInputContainerStyle: ViewStyle, textInputProps: TextInputProps}` |
 
 ## Deprecation Notice
 
@@ -295,20 +295,29 @@ checkboxComponentStyles = {
 };
 ```
 
-- `searchInputStyle` would now be inside `searchControls`
+- `searchInputStyle` would now be inside replaced with `textInputStyle` in the `searchControls` object
 
 ```js
-searchControls={{
-  searchInputStyle: {
-    backgroundColor: 'yellow',
+searchControls={
+  textInputStyle: {
     color: 'blue',
-    fontWeight: '900',
+    fontWeight: '500',
+    minHeight: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 5,
+    width: '50%',
+    textAlign: 'center',
+  },
+  textInputContainerStyle: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   textInputProps: {
     placeholder: 'Search anything here',
     placeholderTextColor: 'gray',
   },
-}}
+}
 ```
 
 ## Contributing

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -92,10 +92,19 @@ export default function App() {
             }
             dropdownIconStyle={users && { top: 20, right: 15 }}
             searchControls={{
-              searchInputStyle: {
-                backgroundColor: 'yellow',
+              textInputStyle: {
                 color: 'blue',
-                fontWeight: '900',
+                fontWeight: '500',
+                minHeight: 10,
+                paddingVertical: 10,
+                paddingHorizontal: 5,
+                width: '50%',
+                textAlign: 'center',
+              },
+              textInputContainerStyle: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
               },
               textInputProps: {
                 placeholder: 'Search anything here',

diff --git a/src/components/CustomModal/index.tsx b/src/components/CustomModal/index.tsx
@@ -9,7 +9,6 @@ import { colors } from '../../styles/colors';
 
 const CustomModal = ({
   open,
-  handleToggleModal,
   onRequestClose,
   modalBackgroundStyle,
   modalOptionsContainerStyle,
@@ -25,7 +24,7 @@ const CustomModal = ({
       {...modalProps}
     >
       <TouchableOpacity
-        onPress={() => handleToggleModal()}
+        onPress={() => onRequestClose()}
         style={[
           styles.modalContainer,
           styles.modalBackgroundStyle,

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -8,12 +8,14 @@ export const Input = ({
   onChangeText,
   style,
   primaryColor,
+  textInputContainerStyle,
+  openModal,
   ...rest
 }: any) => {
   const [isFocused, setFocus] = useState(false);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, textInputContainerStyle]}>
       <TextInput
         placeholder={placeholder}
         style={[
@@ -26,7 +28,10 @@ export const Input = ({
           isFocused && { borderColor: primaryColor },
           style,
         ]}
-        onFocus={() => setFocus(true)}
+        onFocus={() => {
+          setFocus(true);
+          openModal();
+        }}
         onBlur={() => setFocus(false)}
         value={value}
         onChangeText={onChangeText}

diff --git a/src/index.tsx b/src/index.tsx
@@ -70,10 +70,12 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     itemIndex: number;
   }>({ itemIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist
 
+  if (!options || options.length === 0) {
+    throw new Error('Options array cannot be empty or undefined');
+  }
+
   useEffect(() => {
-    if (options) {
-      setNewOptions(options);
-    }
+    setNewOptions(options);
     return () => {};
   }, [options]);
 
@@ -342,22 +344,25 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       />
       <CustomModal
         open={open}
-        handleToggleModal={handleToggleModal}
         modalBackgroundStyle={modalBackgroundStyle}
         modalOptionsContainerStyle={modalOptionsContainerStyle}
-        onRequestClose={() => {}}
+        onRequestClose={() => handleToggleModal()}
         modalProps={modalProps}
       >
         <ListTypeComponent
-          keyboardShouldPersistTaps="always"
+          removeClippedSubviews={false}
           ListHeaderComponent={
             <>
               {isSearchable && (
                 <Input
                   value={searchValue}
                   onChangeText={(text: string) => onSearch(text)}
-                  style={searchControls?.searchInputStyle || searchInputStyle}
+                  style={searchControls?.textInputStyle || searchInputStyle}
                   primaryColor={primary}
+                  textInputContainerStyle={
+                    searchControls?.textInputContainerStyle
+                  }
+                  openModal={() => setOpen(true)} // There seems to a known issue on expo web that closes the modal when the input is focused
                   {...searchControls?.textInputProps}
                 />
               )}

diff --git a/src/types/index.types.ts b/src/types/index.types.ts
@@ -66,7 +66,8 @@ export type DropdownProps = {
     unselectAllCallback?: () => void;
   };
   searchControls?: {
-    searchInputStyle?: ViewStyle | TextStyle;
+    textInputStyle?: ViewStyle | TextStyle;
+    textInputContainerStyle?: ViewStyle;
     textInputProps?: TextInputProps;
   };
 };