Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 49370f9

Browse files
committed
[Fix]: #1849 add useDebouncedValue hook, and fix chars length
1 parent 52fe548 commit 49370f9

File tree

6 files changed

+62
-41
lines changed

6 files changed

+62
-41
lines changed

‎client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useDispatch, useSelector } from "react-redux";
22
import { useParams } from "react-router-dom";
33
import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
4-
import {useEffect, useState} from "react";
4+
import { useEffect, useState } from "react";
5+
import { useDebouncedValue } from "util/hooks";
56
import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
67
import { buildFolderUrl } from "../../constants/routesURL";
78
import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
@@ -100,13 +101,12 @@ export function FolderView() {
100101
}, [searchValues]
101102
);
102103

103-
useEffect(()=> {
104-
const timer = setTimeout(() => {
105-
if (searchValue.length > 2 || searchValue === "")
106-
setSearchValues(searchValue)
107-
}, 500);
108-
return () => clearTimeout(timer);
109-
}, [searchValue])
104+
const debouncedSearchValue = useDebouncedValue(searchValue, 500);
105+
106+
useEffect(() => {
107+
if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "")
108+
setSearchValues(debouncedSearchValue);
109+
}, [debouncedSearchValue]);
110110

111111
return (
112112
<>

‎client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { HomeLayout } from "./HomeLayout";
33
import { getUser } from "../../redux/selectors/usersSelectors";
44
import { Helmet } from "react-helmet";
55
import { trans } from "i18n";
6-
import {useState, useEffect } from "react";
6+
import { useState, useEffect } from "react";
7+
import { useDebouncedValue } from "util/hooks";
78
import {fetchFolderElements} from "@lowcoder-ee/util/pagination/axios";
89
import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
910
import {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
@@ -53,13 +54,13 @@ export function HomeView() {
5354
}, [searchValues]
5455
);
5556

56-
useEffect(()=>{
57-
consttimer=setTimeout(()=>{
58-
if(searchValue.length>2||searchValue==="")
59-
setSearchValues(searchValue)
60-
},500);
61-
return()=>clearTimeout(timer);
62-
}, [searchValue])
57+
constdebouncedSearchValue=useDebouncedValue(searchValue,500);
58+
59+
useEffect(()=>{
60+
if(debouncedSearchValue.trim().length>0||debouncedSearchValue===""){
61+
setSearchValues(debouncedSearchValue);
62+
}
63+
}, [debouncedSearchValue]);
6364

6465
const user = useSelector(getUser);
6566

‎client/packages/lowcoder/src/pages/ApplicationV2/TrashView.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { HomeLayout } from "./HomeLayout";
22
import { TRASH_URL } from "../../constants/routesURL";
3-
import {useEffect, useState} from "react";
3+
import { useEffect, useState } from "react";
4+
import { useDebouncedValue } from "util/hooks";
45
import { trans } from "../../i18n";
56
import { Helmet } from "react-helmet";
67
import {fetchApplicationElements} from "@lowcoder-ee/util/pagination/axios";
@@ -46,14 +47,13 @@ export function TrashView() {
4647
}, [searchValues]
4748
);
4849

49-
//debouncing
50-
useEffect(()=> {
51-
const timer = setTimeout(() => {
52-
if (searchValue.length > 2 || searchValue === "")
53-
setSearchValues(searchValue)
54-
}, 500);
55-
return () => clearTimeout(timer);
56-
}, [searchValue])
50+
const debouncedSearchValue = useDebouncedValue(searchValue, 500);
51+
52+
useEffect(() => {
53+
if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "") {
54+
setSearchValues(debouncedSearchValue);
55+
}
56+
}, [debouncedSearchValue]);
5757

5858
return (
5959
<>

‎client/packages/lowcoder/src/pages/datasource/datasourceList.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from "styled-components";
22
import { EditPopover, PointIcon, Search, TacoButton } from "lowcoder-design";
3-
import {useEffect, useState} from "react";
3+
import { useState, useEffect } from "react";
4+
import { useDebouncedValue } from "util/hooks";
45
import { useDispatch, useSelector } from "react-redux";
56
import { getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
67
import { deleteDatasource } from "../../redux/reduxActions/datasourceActions";
@@ -124,13 +125,13 @@ export const DatasourceList = () => {
124125
const [pageSize, setPageSize] = useState(10);
125126
const [paginationLoading, setPaginationLoading] = useState(false);
126127

127-
useEffect(()=>{
128-
consttimer=setTimeout(()=>{
129-
if(searchValue.length>2||searchValue==="")
130-
setSearchValues(searchValue)
131-
},500);
132-
return()=>clearTimeout(timer);
133-
}, [searchValue])
128+
constdebouncedSearchValue=useDebouncedValue(searchValue,500);
129+
130+
useEffect(()=>{
131+
if(debouncedSearchValue.trim().length>0||debouncedSearchValue===""){
132+
setSearchValues(debouncedSearchValue);
133+
}
134+
}, [debouncedSearchValue]);
134135

135136
useEffect( () => {
136137
setPaginationLoading(true);

‎client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {useEffect, useState} from "react";
1+
import { useEffect, useState } from "react";
2+
import { useDebouncedValue } from "util/hooks";
23
import styled, { css } from "styled-components";
34
import {
45
BluePlusIcon,
@@ -174,14 +175,13 @@ export const LeftNav = (props: {
174175
const [searchValue, setSearchValue] = useState("");
175176
const datasourceTypes = useSelector(getDataSourceTypesMap);
176177

177-
useEffect(()=> {
178-
const timer = setTimeout(() => {
179-
if (searchValue.length > 2 || searchValue === "")
180-
setSearchValues(searchValue)
181-
}, 500);
182-
return () => clearTimeout(timer);
183-
}, [searchValue])
178+
const debouncedSearchValue = useDebouncedValue(searchValue, 500);
184179

180+
useEffect(() => {
181+
if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "") {
182+
setSearchValues(debouncedSearchValue);
183+
}
184+
}, [debouncedSearchValue]);
185185

186186

187187
return (

‎client/packages/lowcoder/src/util/hooks.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { constantColors } from "components/colorSelect/colorUtils";
2929
import { AppState } from "@lowcoder-ee/redux/reducers";
3030
import { getOrgUserStats } from "@lowcoder-ee/redux/selectors/orgSelectors";
3131
import { fetchGroupsAction } from "@lowcoder-ee/redux/reduxActions/orgActions";
32+
import debounce from "lodash/debounce";
3233

3334
export const ForceViewModeContext = React.createContext<boolean>(false);
3435

@@ -282,3 +283,21 @@ export const useOrgUserCount = (orgId: string) => {
282283

283284
return userCount;
284285
};
286+
287+
/**
288+
* Returns a debounced version of the incoming value that only updates
289+
*/
290+
export function useDebouncedValue<T>(value: T, delay = 500): T {
291+
const [debouncedValue, setDebouncedValue] = useState<T>(value);
292+
293+
const updater = useMemo(() => debounce(setDebouncedValue, delay), [delay]);
294+
295+
useEffect(() => {
296+
updater(value);
297+
return () => {
298+
updater.cancel();
299+
};
300+
}, [value, updater]);
301+
302+
return debouncedValue;
303+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /