docs(AutoComplete): add docs for searchDebounceDelay in AutoComplete

consta-design-system · Dec 5, 2024 · 3cfde49 · 3cfde49
1 parent 53d28db
commit 3cfde49
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 deletions.
diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
@@ -96,6 +96,7 @@ const AutoCompleteRender = <
 
   const onResolveValue: TextFieldPropOnChange = useCallback(
     (value, { id, name, e }) => {
+      console.log('here resolve');
       onChangeRef.current?.(value, { id: id?.toString(), name, e });
     },
     [],
@@ -109,9 +110,11 @@ const AutoCompleteRender = <
   const handleInputChange: TextFieldPropOnChange = useCallback(
     (value, { id, name, e }) => {
       if (searchDebounceDelay) {
+        console.log('debounce change');
         setSearchValue(value ?? '');
         onDebouncedChange(value, { id, name, e });
       } else {
+        console.log('default change');
         onResolveValue(value, { id, name, e });
       }
     },

diff --git a/src/components/AutoComplete/__stand__/AutoComplete.dev.stand.mdx b/src/components/AutoComplete/__stand__/AutoComplete.dev.stand.mdx
@@ -21,6 +21,7 @@ import {
   AutoCompleteExampleIsLoading,
   AutoCompleteExampleOnScrollBottom,
 } from './examples/AutoCompleteExampleIsLoading/AutoCompleteExampleIsLoading';
+import { AutoCompleteExampleDebounce } from './examples/AutoCompleteExampleDebounce/AutoCompleteExampleDebounce';
 import { MdxMenu } from '@consta/stand';
 
 ```tsx
@@ -44,6 +45,7 @@ import { AutoComplete } from '@consta/uikit/AutoComplete';
 - [Внешний вид](#внешний-вид)
 - [Виртуализация списка](#виртуализация-списка)
 - [Индикация загрузки](#индикация-загрузки)
+- [Дебаунсинг](#дебаунсинг)
 - [Неактивный выпадающий список](#неактивный-выпадающий-список)
 - [Управление состоянием выподающего списка](#управление-состоянием-выподающего-списка)
 - [Кастомизация](#кастомизация)
@@ -894,6 +896,55 @@ export const AutoCompleteExampleOnScrollBottom = () => {
 
 <AutoCompleteExampleOnScrollBottom />
 
+## Дебаунсинг
+
+Для добавления задержки между вводом пользователя и выполнением поискового запроса необходимо установить значения для свойства `searchDebounceDelay`.
+
+Это помогает оптимизировать компонент, предотвращая чрезмерные вызовы функции `onChange`, особенно когда данные загружаются динамически с сервера.
+По умолчанию значение для данного свойства равно `300`.
+
+```tsx
+import React, { useState } from 'react';
+
+import { AutoComplete } from '@consta/uikit/AutoComplete';
+
+type Item = {
+  label: string;
+  id: number;
+};
+
+const items: Item[] = [
+  {
+    label: 'Первый',
+    id: 1,
+  },
+  {
+    label: 'Второй',
+    id: 2,
+  },
+  {
+    label: 'Третий',
+    id: 3,
+  },
+];
+const AutoCompleteExampleView = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <AutoComplete
+      value={value}
+      items={items}
+      getItemKey={(item) => item}
+      getItemLabel={(item) => item}
+      onChange={setValue}
+      type="text"
+      searchDebounceDelay={1000}
+    />
+  );
+};
+```
+
+<AutoCompleteExampleDebounce />
+
 ## Неактивный выпадающий список
 
 Чтобы сделать весь комбобокс неактивным, добавьте `disabled`.
@@ -1201,6 +1252,7 @@ type AutoCompletePropOnChange = (
 | [`required?`](##LIBS.LIB.STAND/lib:uikit/stand:components-textfield-stable/hash:обязательность)                 | `boolean`                                                                                                                                                           | -                                                                                    | Нужно заполнить                                                                                                                              |
 | `tabIndex?`                                                                                                     | `number`                                                                                                                                                            | -                                                                                    | Порядковый номер при переходе между элементами интерфейса по клавише **tab**                                                                 |
 | [`autoFocus?`](##LIBS.LIB.STAND/lib:uikit/stand:components-textfield-stable/hash:фокус)                         | `boolean`                                                                                                                                                           | -                                                                                    | Перемещает фокус в поле                                                                                                                      |
+| `searchDebounceDelay?`                                                                                          | `number`                                                                                                                                                            | -                                                                                    | Время задержки в миллисекундах между вводом пользователя и выполнением поискового запроса                                                    |
 | `onFocus?`                                                                                                      | `React.FocusEventHandler<HTMLElement>`                                                                                                                              | -                                                                                    | Действие по фокусу                                                                                                                           |
 | `onBlur?`                                                                                                       | `React.FocusEventHandler<HTMLElement>`                                                                                                                              | -                                                                                    | Действие при потере фокуса                                                                                                                   |
 | `autoComplete?`                                                                                                 | [`AutoCompete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)                                                                          | -                                                                                    | Автозаполнение поля ввода — аналог HTML-атрибута [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) |

diff --git a/...toComplete/__stand__/examples/AutoCompleteExampleDebounce/AutoCompleteExampleDebounce.tsx b/...toComplete/__stand__/examples/AutoCompleteExampleDebounce/AutoCompleteExampleDebounce.tsx
@@ -0,0 +1,23 @@
+import { Example } from '@consta/stand';
+import React, { useState } from 'react';
+
+import { AutoComplete } from '##/components/AutoComplete';
+import { groups } from '##/components/AutoComplete/__mocks__/data.mock';
+
+export const AutoCompleteExampleDebounce = () => {
+  const [value, setValue] = useState<string | null>(null);
+
+  return (
+    <Example>
+      <AutoComplete
+        value={value}
+        items={groups}
+        getItemKey={(item) => item.label}
+        getItemLabel={(item) => item.label}
+        onChange={setValue}
+        type="text"
+        searchDebounceDelay={1000}
+      />
+    </Example>
+  );
+};