yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-01 11:21:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: useDebounce hook

Browse Source
This commit is contained in:
Marc-Roig 2025-01-27 10:58:08 +01:00
parent d325780fea
commit 5f30c63bed
No known key found for this signature in database
GPG Key ID: FB4E2C43A0BEE249
1 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations.tsx
View File

@ -36,6 +36,7 @@ import { styled } from 'styled-components';
import { RelationDragPreviewProps } from '../../../../components/DragPreviews/RelationDragPreview'; import { RelationDragPreviewProps } from '../../../../components/DragPreviews/RelationDragPreview';
import { COLLECTION_TYPES } from '../../../../constants/collections'; import { COLLECTION_TYPES } from '../../../../constants/collections';
import { ItemTypes } from '../../../../constants/dragAndDrop'; import { ItemTypes } from '../../../../constants/dragAndDrop';
import { useDebounce } from '../../../../hooks/useDebounce';
import { useDoc } from '../../../../hooks/useDocument'; import { useDoc } from '../../../../hooks/useDocument';
import { type EditFieldLayout } from '../../../../hooks/useDocumentLayout'; import { type EditFieldLayout } from '../../../../hooks/useDocumentLayout';
import { import {
@ -461,6 +462,7 @@ const RelationsInput = ({
const fieldRef = useFocusInputField<HTMLInputElement>(name); const fieldRef = useFocusInputField<HTMLInputElement>(name);
const field = useField<RelationsFormValue>(name); const field = useField<RelationsFormValue>(name);
const searchParamsDebounced = useDebounce(searchParams, 300);
const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery(); const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();
/** /**
@ -478,7 +480,6 @@ const RelationsInput = ({
*/ */
const [targetField] = name.split('.').slice(-1); const [targetField] = name.split('.').slice(-1);
const timeout = setTimeout(() => {
searchForTrigger({ searchForTrigger({
model, model,
targetField, targetField,
@ -488,12 +489,9 @@ const RelationsInput = ({
pageSize: 10, pageSize: 10,
idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [], idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],
idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [], idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],
...searchParams, ...searchParamsDebounced,
}, },
}); });
}, 300);
return () => clearTimeout(timeout);
}, [ }, [
field.value?.connect, field.value?.connect,
field.value?.disconnect, field.value?.disconnect,
@ -502,7 +500,7 @@ const RelationsInput = ({
name, name,
query, query,
searchForTrigger, searchForTrigger,
searchParams, searchParamsDebounced,
]); ]);
const handleSearch = async (search: string) => { const handleSearch = async (search: string) => {