fix: fix bugs

hoaphantn7604 · Oct 11, 2024 · f3eed81 · f3eed81
1 parent 7542ab2
commit f3eed81
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,7 @@ yarn add react-native-element-dropdown
 | searchQuery        | (keyword: string, labelValue: string) => Boolean| No        | Callback used to filter the list of items                           |
 | inputSearchStyle   | ViewStyle                                       | No        | Styling for input search                                            |
 | searchPlaceholder  | String                                          | No        | The string that will be rendered before text input has been entered |
+| searchPlaceholderTextColor  | String                                 | No        | The text color of the placeholder string                            |
 | renderInputSearch  | (onSearch: (text:string) => void) => JSX.Element| No        | Customize TextInput search                                          |
 | disable            | Boolean                                         | No        | Specifies the disabled state of the Dropdown                        |
 | dropdownPosition   | 'auto' or 'top' or 'bottom'                     | No        | Dropdown list position. Default is 'auto'                           |
@@ -125,6 +126,7 @@ yarn add react-native-element-dropdown
 | searchQuery        | (keyword: string, labelValue: string) => Boolean     | No        | Callback used to filter the list of items                           |
 | inputSearchStyle   | ViewStyle                                            | No        | Styling for input search                                            |
 | searchPlaceholder  | String                                               | No        | The string that will be rendered before text input has been entered |
+| searchPlaceholderTextColor  | String                                      | No        | The text color of the placeholder string                            |
 | renderInputSearch  | (onSearch: (text:string) => void) => JSX.Element     | No        | Customize TextInput search                                          |
 | disable            | Boolean                                              | No        | Specifies the disabled state of the Dropdown                        |
 | dropdownPosition   | 'auto' or 'top' or 'bottom'                          | No        | Dropdown list position. Default is 'auto'                           |

diff --git a/example/src/dropdown/Dropdown1.tsx b/example/src/dropdown/Dropdown1.tsx
@@ -45,7 +45,7 @@ const DropdownComponent = () => {
         inputSearchStyle={styles.inputSearchStyle}
         iconStyle={styles.iconStyle}
         data={data}
-        excludeSearchItems={excludeItem}
+        excludeItems={excludeItem}
         autoScroll
         search
         maxHeight={300}

diff --git a/example/src/dropdown/MultiSelectAll.tsx b/example/src/dropdown/MultiSelectAll.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { MultiSelect } from 'react-native-element-dropdown';
+import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { IMultiSelectRef, MultiSelect } from 'react-native-element-dropdown';
 
 const data = [
   { label: 'Item 1', value: '1' },
@@ -20,7 +20,7 @@ const excludeItem = [
 
 const MultiSelectComponent = () => {
   const [selected, setSelected] = useState<string[]>([]);
-  const ref = useRef(null);
+  const ref = useRef<IMultiSelectRef>(null);
 
   const onSelectAll = (isSelectAll = true) => {
     const selectItem: string[] = [];
@@ -71,15 +71,24 @@ const MultiSelectComponent = () => {
         selectedStyle={styles.selectedStyle}
         flatListProps={{ ListHeaderComponent: renderSelectAllIcon }}
       />
+      <View style={styles.button}>
+        <Button
+          title="Open"
+          onPress={() => {
+            ref.current?.open();
+          }}
+        />
+      </View>
     </View>
   );
 };
 
 export default MultiSelectComponent;
 
 const styles = StyleSheet.create({
-  container: { padding: 16 },
+  container: { padding: 16, flexDirection: 'row' },
   dropdown: {
+    flex: 1,
     backgroundColor: 'transparent',
     borderBottomColor: 'gray',
     borderBottomWidth: 0.5,
@@ -109,4 +118,7 @@ const styles = StyleSheet.create({
   txtSelectAll: {
     color: 'blue',
   },
+  button: {
+    marginHorizontal: 16,
+  },
 });
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -69,6 +69,7 @@ const DropdownComponent: <T>(
       fontFamily,
       iconColor = 'gray',
       searchPlaceholder,
+      searchPlaceholderTextColor = 'gray',
       placeholder = 'Select item',
       search = false,
       maxHeight = 340,
@@ -148,8 +149,11 @@ const DropdownComponent: <T>(
     );
 
     useEffect(() => {
-      const filterData = excludeData(data);
-      setListData([...filterData]);
+      if (data && searchText.length === 0) {
+        const filterData = excludeData(data);
+        setListData([...filterData]);
+      }
+
       if (searchText) {
         onSearch(searchText);
       }
@@ -158,6 +162,7 @@ const DropdownComponent: <T>(
 
     const eventOpen = () => {
       if (!disable) {
+        _measure();
         setVisible(true);
         if (onFocus) {
           onFocus();
@@ -316,8 +321,11 @@ const DropdownComponent: <T>(
 
         _measure();
         setVisible(visibleStatus);
-        const filterData = excludeData(data);
-        setListData(filterData);
+
+        if (data) {
+          const filterData = excludeData(data);
+          setListData(filterData);
+        }
 
         if (visibleStatus) {
           if (onFocus) {
@@ -560,7 +568,8 @@ const DropdownComponent: <T>(
                 }
                 onSearch(e);
               }}
-              placeholderTextColor="gray"
+              placeholderTextColor={searchPlaceholderTextColor}
+              showIcon
               iconStyle={[{ tintColor: iconColor }, iconStyle]}
             />
           );
@@ -578,6 +587,7 @@ const DropdownComponent: <T>(
       renderInputSearch,
       search,
       searchPlaceholder,
+      searchPlaceholderTextColor,
       testID,
       searchText,
     ]);

diff --git a/src/components/Dropdown/model.ts b/src/components/Dropdown/model.ts
@@ -42,6 +42,7 @@ export interface DropdownProps<T> {
   searchField?: keyof T;
   search?: boolean;
   searchPlaceholder?: string;
+  searchPlaceholderTextColor?: string;
   disable?: boolean;
   autoScroll?: boolean;
   showsVerticalScrollIndicator?: boolean;

diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx
@@ -66,6 +66,7 @@ const MultiSelectComponent: <T>(
       iconColor = 'gray',
       inputSearchStyle,
       searchPlaceholder,
+      searchPlaceholderTextColor = 'gray',
       placeholder = 'Select item',
       search = false,
       maxHeight = 340,
@@ -149,8 +150,10 @@ const MultiSelectComponent: <T>(
     );
 
     useEffect(() => {
-      const filterData = excludeData(data);
-      setListData([...filterData]);
+      if (data && searchText.length === 0) {
+        const filterData = excludeData(data);
+        setListData([...filterData]);
+      }
 
       if (searchText) {
         onSearch(searchText);
@@ -160,6 +163,7 @@ const MultiSelectComponent: <T>(
 
     const eventOpen = () => {
       if (!disable) {
+        _measure();
         setVisible(true);
         if (onFocus) {
           onFocus();
@@ -269,8 +273,11 @@ const MultiSelectComponent: <T>(
 
         _measure();
         setVisible(visibleStatus);
-        const filterData = excludeData(data);
-        setListData(filterData);
+
+        if (data) {
+          const filterData = excludeData(data);
+          setListData(filterData);
+        }
 
         if (visibleStatus) {
           if (onFocus) {
@@ -536,7 +543,8 @@ const MultiSelectComponent: <T>(
                 }
                 onSearch(e);
               }}
-              placeholderTextColor="gray"
+              showIcon
+              placeholderTextColor={searchPlaceholderTextColor}
               iconStyle={[{ tintColor: iconColor }, iconStyle]}
             />
           );
@@ -554,6 +562,7 @@ const MultiSelectComponent: <T>(
       renderInputSearch,
       search,
       searchPlaceholder,
+      searchPlaceholderTextColor,
       testID,
     ]);
 

diff --git a/src/components/MultiSelect/model.ts b/src/components/MultiSelect/model.ts
@@ -46,6 +46,7 @@ export interface MultiSelectProps<T> {
   disable?: boolean;
   showsVerticalScrollIndicator?: boolean;
   searchPlaceholder?: string;
+  searchPlaceholderTextColor?: string;
   dropdownPosition?: 'auto' | 'top' | 'bottom';
   flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
   alwaysRenderSelectedItem?: boolean;