QuickSearch
QuickSearch — модалка быстрого поиска, аналог Search Everywhere в IDE. В шапке — ряд табов типов документов и строка поиска, ниже — область результатов. Компонент презентационный: он рисует каркас, но сам ничего не ищет — и список результатов (children), и набор табов (tabs) приходят снаружи. Внутрь children кладётся любая вёрстка: секции по типам, строки-Cell, заглушка «ничего не найдено», индикатор загрузки. Табы фильтруют выдачу по типу — активный задаёт tab, переключение ловит onTabChange; в tabs приходят готовые Tabs.Item, а Tabs.Root вокруг них рисует сам QuickSearch. Строка поиска отдаёт ввод с задержкой (дебаунс) через onSearchChange; search — лишь начальное значение, дальше поле хранит текст само, searchPlaceholder задаёт подсказку. Открытость всегда контролируемая — пара open / onOpenChange: onOpenChange(false) приходит при закрытии крестиком, по Esc или клику по затемнению вокруг окна, а open меняет хост. Окно прижато к верху экрана, порталится в body, монтируется лениво при открытии и размонтируется при закрытии; при открытии автофокус уходит в строку поиска, список результатов скроллится внутри. Собрано на Ark UI Dialog в каркасе Panel из ДС (Tabs и Search — оттуда же). В IDE смонтирован один раз в корневом layout и открывается двойным нажатием Shift.
Использует: ButtonIcon, Tabs, Search, Panel
Анатомия
Примеры
Пустое состояние
Область результатов целиком за потребителем: что показать, когда ничего не найдено (или пока идёт загрузка), решает children — здесь это просто заглушка с текстом.
API
| Prop | Type | Default |
|---|---|---|
open*Открыто ли окно. Открытость всегда контролируемая — держит её хост | boolean | - |
onOpenChange*Запрос сменить открытость: | (open: boolean) => void | - |
tabs*Табы в шапке — типы документов; готовые | ReactNode | - |
tabАктивный таб ( | string | - |
onTabChangeВызывается при переключении таба | (value: string) => void | - |
searchНачальное значение строки поиска — дальше поле хранит текст само | string | - |
onSearchChangeВызывается с задержкой после последнего ввода | (value: string) => void | - |
searchPlaceholderПлейсхолдер строки поиска | string | - |
children*Контент — список результатов, передаётся извне | ReactNode | - |