DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #7885 from colinux/fix-address-debounce

Browse source
This commit is contained in:
Colin Darie 2022-10-11 09:14:48 +02:00 committed by GitHub
commit 717b7b7287
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/components/ComboAdresseSearch.tsx
View file

@ -25,6 +25,7 @@ export default function ComboAdresseSearch({
minimumInputLength={2} minimumInputLength={2}
transformResult={({ properties: { label } }) => [label, label, label]} transformResult={({ properties: { label } }) => [label, label, label]}
transformResults={(_, result) => (result as RawResult).features} transformResults={(_, result) => (result as RawResult).features}
debounceDelay={300}
/> />
</QueryClientProvider> </QueryClientProvider>
); );

12
app/javascript/components/ComboSearch.tsx
View file

@ -1,9 +1,5 @@
import React, { import React, { useState, useRef, ChangeEventHandler } from 'react';
useState, import { useDebounce } from 'use-debounce';
useRef,
useDeferredValue,
ChangeEventHandler
} from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { import {
Combobox, Combobox,
@ -35,6 +31,7 @@ export type ComboSearchProps<Result> = {
describedby?: string; describedby?: string;
className?: string; className?: string;
placeholder?: string; placeholder?: string;
debounceDelay?: number;
}; };
type QueryKey = readonly [ type QueryKey = readonly [
@ -54,6 +51,7 @@ function ComboSearch<Result>({
transformResults = (_, results) => results as Result[], transformResults = (_, results) => results as Result[],
id, id,
describedby, describedby,
debounceDelay = 0,
...props ...props
}: ComboSearchProps<Result>) { }: ComboSearchProps<Result>) {
invariant(id || onChange, 'ComboSearch: `id` or `onChange` are required'); invariant(id || onChange, 'ComboSearch: `id` or `onChange` are required');
@ -63,7 +61,7 @@ function ComboSearch<Result>({
const [, setExternalId] = useHiddenField(group, 'external_id'); const [, setExternalId] = useHiddenField(group, 'external_id');
const initialValue = externalValue ? externalValue : controlledValue; const initialValue = externalValue ? externalValue : controlledValue;
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDeferredValue(searchTerm); const [debouncedSearchTerm] = useDebounce(searchTerm, debounceDelay);
const [value, setValue] = useState(initialValue); const [value, setValue] = useState(initialValue);
const resultsMap = useRef< const resultsMap = useRef<
Record<string, { key: string; value: string; result: Result }> Record<string, { key: string; value: string; result: Result }>

1
package.json
View file

@ -38,6 +38,7 @@
"tiny-invariant": "^1.2.0", "tiny-invariant": "^1.2.0",
"trix": "^1.2.3", "trix": "^1.2.3",
"turbo-polyfills": "^0.3.0", "turbo-polyfills": "^0.3.0",
"use-debounce": "^8.0.4",
"whatwg-fetch": "^3.0.0", "whatwg-fetch": "^3.0.0",
"yet-another-abortcontroller-polyfill": "^0.0.4", "yet-another-abortcontroller-polyfill": "^0.0.4",
"zod": "^3.17.10" "zod": "^3.17.10"

5
yarn.lock
View file

@ -4238,6 +4238,11 @@ uri-js@^4.2.2:
dependencies: dependencies:
punycode "^2.1.0" punycode "^2.1.0"
use-debounce@^8.0.4:
version "8.0.4"
resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-8.0.4.tgz#27e93b2f010bd0b8ad06e9fc7de891d9ee5d6b8e"
integrity sha512-fGqsYQzl8kLHF2QpQSgIwgOgJmnh6j5L6SIzQiHdLfwp3q1egUL3btq5Bg2SJysH6A0ILLgT2IqXZKoNJr0nFw==
uuid@^3.3.2: uuid@^3.3.2:
version "3.4.0" version "3.4.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"