botón para cancelar la búsqueda de cliente

Endurance-Soft · Jun 1, 2024 · dfd963e · dfd963e
1 parent 04c3e17
commit dfd963e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 29 deletions.
diff --git a/src/screens/ClientSearch/ClientSearchScreen.js b/src/screens/ClientSearch/ClientSearchScreen.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect, useMemo } from "react";
-import { SafeAreaView, TouchableOpacity, FlatList, StyleSheet, View, } from "react-native";
+import { SafeAreaView, TouchableOpacity, FlatList, StyleSheet, View } from "react-native";
 import SearchBar from "./SearchBar";
 import ClientItem from "./ClientItem";
 import { StatusBar } from "expo-status-bar";
@@ -22,6 +22,7 @@ const ClientSearchScreen = () => {
   const [filteredData, setFilteredData] = useState([]);
   const [animationKey, setAnimationKey] = useState(Date.now());
   const [visibleItemCount, setVisibleItemCount] = useState(10);
+  const [isSearching, setIsSearching] = useState(false);
 
   const fetchClientes = useCallback(async () => {
     try {
@@ -52,6 +53,7 @@ const ClientSearchScreen = () => {
 
   const handleSearch = useCallback((text) => {
     setSearchQuery(text);
+    setIsSearching(true);
     const formattedQuery = text.toLowerCase();
     const newData = clientesConNotas.filter((item) => {
       if (selectedOption === "cliente") {
@@ -61,25 +63,35 @@ const ClientSearchScreen = () => {
       }
     });
     setFilteredData(newData);
+    setIsSearching(false);
   }, [clientesConNotas, selectedOption]);
 
   const handleOptionChange = useCallback((option) => {
     setSelectedOption(option);
   }, []);
 
   const renderItem = useCallback(({ item, index }) => (
-    <Cascading
-      delay={index > 9 ? 0 : 400 + 100 * index}
-      animationKey={animationKey}
-    >
+    isSearching ? (
       <ClientItem
         client={item}
         onSelect={() =>
           navigation.navigate("ClientPaymentScreen", { itemClient: item })
         }
       />
-    </Cascading>
-  ), [animationKey, navigation]);
+    ) : (
+      <Cascading
+        delay={index > 9 ? 0 : 400 + 100 * index}
+        animationKey={animationKey}
+      >
+        <ClientItem
+          client={item}
+          onSelect={() =>
+            navigation.navigate("ClientPaymentScreen", { itemClient: item })
+          }
+        />
+      </Cascading>
+    )
+  ), [animationKey, navigation, isSearching]);
 
   const keyExtractor = useCallback((item) => item.cliente_ID.toString(), []);
 

diff --git a/src/screens/ClientSearch/SearchBar.js b/src/screens/ClientSearch/SearchBar.js
@@ -1,55 +1,69 @@
-// SearchBar.js
-import React, { useState } from "react";
-import { View, TextInput, Text, TouchableOpacity, StyleSheet, Dimensions } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { FontAwesome5 } from "@expo/vector-icons";
+import React, { useState, useCallback } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet, Dimensions, Keyboard } from "react-native";
+import { Ionicons, FontAwesome5 } from "@expo/vector-icons";
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from "react-native-popup-menu";
 import { theme } from "../../assets/Theme";
 import StyledText from "../../utils/StyledText";
+
 const windowWidth = Dimensions.get("window").width;
 const { height } = Dimensions.get('window');
-const regularTextSize = height * 0.021
-const SearchBar = ({ searchQuery, setSearchQuery, selectedOption, onOptionChange,}) => {
+const regularTextSize = height * 0.021;
+
+const SearchBar = ({ searchQuery, setSearchQuery, selectedOption, onOptionChange }) => {
   const [menuVisible, setMenuVisible] = useState(false);
 
   const toggleMenu = () => {
     setMenuVisible((prevState) => !prevState);
   };
 
+  const handleClear = useCallback(() => {
+    setSearchQuery('');
+    Keyboard.dismiss();
+  }, [setSearchQuery]);
+
   return (
     <View style={searchBarStyles.container}>
-      <Ionicons name="search" size={25} color="#2E3233" />
-      <TextInput placeholder="Search..." style={searchBarStyles.searchTextInput} onChangeText={setSearchQuery} value={searchQuery} />
+      {searchQuery.length === 0 ? (
+        <Ionicons name="search" size={25} color="#2E3233" />
+      ) : (
+        <TouchableOpacity onPress={handleClear}>
+          <Ionicons name="close" size={25} color="#2E3233" />
+        </TouchableOpacity>
+      )}
+      <TextInput
+        placeholder="Search..."
+        style={searchBarStyles.searchTextInput}
+        onChangeText={setSearchQuery}
+        value={searchQuery}
+      />
       <Menu opened={menuVisible} onBackdropPress={() => setMenuVisible(false)}>
         <MenuTrigger onPress={toggleMenu} style={searchBarStyles.trigger}>
           <TouchableOpacity onPress={toggleMenu} activeOpacity={1} style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", }}>
-            <StyledText buttonText style={{marginRight: 12}}>
+            <StyledText buttonText style={{ marginRight: 12 }}>
               {selectedOption.charAt(0).toUpperCase() + selectedOption.slice(1)}
             </StyledText>
             <FontAwesome5 name={menuVisible ? "chevron-up" : "chevron-down"} size={20} color="white" />
           </TouchableOpacity>
         </MenuTrigger>
-        <MenuOptions customStyles={{ optionsContainer: searchBarStyles.optionsContainer, optionsWrapper: searchBarStyles.optionsWrapper, }}>
-          <MenuOption onSelect={() => { onOptionChange("cliente"); setMenuVisible(false); }} >
+        <MenuOptions customStyles={{ optionsContainer: searchBarStyles.optionsContainer, optionsWrapper: searchBarStyles.optionsWrapper }}>
+          <MenuOption onSelect={() => { onOptionChange("cliente"); setMenuVisible(false); }}>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <StyledText buttonText>Cliente</StyledText>
-              {selectedOption === "cliente" && (
-                <FontAwesome5 name="check" size={17} color="white" marginLeft={10} />)}
+              <StyledText buttonText>Cliente  </StyledText>
+              {selectedOption === "cliente" && <FontAwesome5 name="check" size={17} color="white" />}
             </View>
           </MenuOption>
           <MenuOption onSelect={() => { onOptionChange("cuenta"); setMenuVisible(false); }}>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <StyledText buttonText>Cuenta</StyledText>
-              {selectedOption === "cuenta" && (
-                <FontAwesome5 name="check" size={17} color="white" marginLeft={10} />
-              )}
+              <StyledText buttonText>Cuenta  </StyledText>
+              {selectedOption === "cuenta" && <FontAwesome5 name="check" size={17} color="white" />}
             </View>
           </MenuOption>
         </MenuOptions>
       </Menu>
     </View>
   );
 };
+
 const searchBarStyles = StyleSheet.create({
   container: {
     marginBottom: 20,
@@ -62,9 +76,9 @@ const searchBarStyles = StyleSheet.create({
     marginHorizontal: windowWidth * 0.05,
   },
   searchTextInput: {
-    flex: 1,//
-    marginLeft: 7,//
-    marginRight: 10,//
+    flex: 1,
+    marginLeft: 7,
+    marginRight: 10,
     fontSize: regularTextSize,
     color: theme.colors.primaryText,
   },
@@ -86,4 +100,5 @@ const searchBarStyles = StyleSheet.create({
     marginLeft: 20,
   },
 });
+
 export default SearchBar;