Merge branch 'feature-PrivatePocket' into 'dev'

fix: 修改隐私钱包添加弹窗查询 See merge request !40

Merge branch 'feature-PrivatePocket' into 'dev'
fix: 修改隐私钱包添加弹窗查询 See merge request !40
boyang
2 parents 98eb7e83 29930e03
Showing 1 changed file with 22 additions and 6 deletions
src/pages/Prepaid/PrivatePocket/components/AddPrivatePocketModal.tsx
@@ -5,7 +5,7 @@ import {
 } from '@/services';
 import { getUserInfo } from '@/utils/user';
 import { Form, Modal, Select, message } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 interface AddPrivatePocketModalProps {
   visible: boolean;
@@ -39,6 +39,7 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
   const [searchKeywords, setSearchKeywords] = useState<string>('');
   const userInfo = getUserInfo();
   const userName = userInfo?.username || '';
+  const searchTimerRef = useRef<any>(null);
   const fetchSalesCodeList = async () => {
     try {
@@ -55,6 +56,10 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
   // Define a function to fetch user list that can be called from multiple places
   const fetchUserList = async (keywords: string) => {
     try {
+      if (!keywords || keywords.trim() === '') {
+        return [];
+      }
+
       const res = await postCanrdApiUserList({
         data: { keywords: keywords, pageSize: 1000000 },
       });
@@ -109,6 +114,21 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
     }
   };
+  // Function to handle search with debounce
+  const handleSearch = (value: string) => {
+    setSearchKeywords(value);
+
+    // Clear any existing timer
+    if (searchTimerRef.current) {
+      clearTimeout(searchTimerRef.current);
+    }
+
+    // Set a new timer to fetch users after 1000ms of inactivity
+    searchTimerRef.current = setTimeout(() => {
+      fetchUserList(value);
+    }, 1000);
+  };
+
   return (
     <Modal
       title="添加隐私钱包"
@@ -131,11 +151,7 @@ const AddPrivatePocketModal: React.FC&lt;AddPrivatePocketModalProps&gt; = ({
             defaultActiveFirstOption={false}
             notFoundContent={null}
             filterOption={false} // Disable built-in filtering to use server-side search
-            onSearch={async (value) => {
-              setSearchKeywords(value);
-              // Immediately fetch results when searching
-              await fetchUserList(value);
-            }}
+            onSearch={handleSearch} // Use the debounced search handler
             onChange={(value) => {
               // When a value is selected, find the corresponding phone from userList
               // or use the value directly if it's a custom entry