Search

import { Search } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Код DemoSearchWrapperconst DemoSearchWrapper: React.FC<IDemoSearchWrapperProps> = ({ children }) => {
    const [value, setValue] = React.useState('');
    const [items, setItems] = React.useState([]);

    const handleChange = React.useCallback((query: string) => {
        if (!query) {
            return;
        }

        setItems((oldItems) => [...oldItems, query]);
    }, [items, setItems]);

    return (
        <div>
            <p style={{ marginTop: 0, marginBottom: '15px' }}>Value: {value}</p>
            {children({ onChange: handleChange, onSubmit: setValue, items: items, chosenValue: value })}
        </div>
    );
};

Тип отображения

Визуальное отображение аналгично компоненту TextField (по умолчанию)

<Search label="Заголовок поля" searchId="2" />

Установлен режим textarea

<Search label="Заголовок поля" textarea />

Установлен режим textarea и показан resizer

<Search label="Заголовок поля" textarea showResizer />

Компактное отображение

иконка поиска расположена слева, добавлена возможность очистить поле по клику на крестик

<Search value="очистить поле по клику на крестик" placeholder="Введите что-нибудь" type="compact" />

Без иконки (только для type=textfield)

<Search hideIcon searchId="1" />

<Search hideIcon textarea />

Заголовок и подсказка

Установлен только label

<Search label="Заголовок поля" searchId="2" />

<Search label="Заголовок поля" textarea />

Установлен только placeholder

<Search searchId="3" placeholder="Введите что-нибудь" />

<Search placeholder="Введите что-нибудь" textarea />

Установлены и label, и placeholder

<Search label="Заголовок поля" placeholder="Введите что-нибудь" searchId="4" />

<Search label="Заголовок поля" placeholder="Введите что-нибудь" textarea />

<Search label="Заголовок поля" placeholder="Введите что-нибудь длинное" textarea />

Выключенное состояние

<Search placeholder="This field is disabled" searchId="5" disabled />

<Search placeholder="This field is disabled" textarea disabled />

Установлено значение по умолчанию

<Search placeholder="Type here for search" value="Previous request" searchId="6" />

<Search placeholder="Type here for search" value="Previous request" textarea />

<Search placeholder="Type here for search" value="Какое-то длинное значение поля" textarea />

Ограничение длины текста

<Search label="Заголовок поля" maxLength={10} />

Обработчики ввода

<DemoSearchWrapper>
  {({ onSubmit }) => (
      <Search placeholder="Type here for search" onSubmit={onSubmit} label="Обработчик onSubmit" searchId="7" />
  )}
</DemoSearchWrapper>
<DemoSearchWrapper>
  {({ onSubmit }) => (
      <Search
          placeholder="Type here for search"
          onChange={onSubmit}
          changeDelay={50}
          label="Обработчик onChange"
          searchId="8"
      />
  )}
</DemoSearchWrapper>

Эмулирование получения данных

<DemoSearchWrapper>
  {({ onSubmit, chosenValue, items, onChange }) => (
      <Search
          value={chosenValue}
          items={items}
          placeholder="Type and wait for results"
          searchId="7"
          onChange={onChange}
          onSubmit={onSubmit}
      />
  )}
</DemoSearchWrapper>

Обязательное поле

<Search label="Заголовок поля" searchId="8" required />

Дополнительный текст снизу

<Search noticeText="Текст под полем" searchId="9" />

<Search noticeText="Текст под полем" textarea />

Валидация

<Search noticeText="Успешная валидация" verification="valid" searchId="10" />
<Search noticeText="Ошибка валидации" verification="error" searchId="11" />
<Search noticeText="Успешная валидация" verification="valid" textarea />
<Search noticeText="Ошибка валидации" verification="error" textarea />

Индикатор загрузки

<Search label="Заголовок поля" searchId="2" showLoader />
<Search label="Заголовок поля" textarea showLoader />
<Search label="Заголовок поля" type="compact" showLoader />

Кастомизированный список результатов поиска

Код DemoSearchCustomItemsWrapperconst DemoSearchCustomItemsWrapper: React.FC<IDemoSearchCustomItemsWrapper> = ({ children }) => {
    const [value, setValue] = React.useState<string>('');

    const getContent = React.useCallback((index: number) => (
        <div>
            <div>
                <b>ИП Баранник Александр Николаевич {index + 1}</b>
            </div>
            <div>
                <b>ИНН: 503209463031</b>
            </div>
            <div>Московская обл, Одинцовский р-н, г Одинцово</div>
        </div>
    ), []);

    const items = React.useMemo(() => (
        new Array(5).fill('').map((_, i) => ({
            value: `ИП Баранник Александр Николаевич ${i + 1}`,
            searchView: getContent(i),
        }))
    ), []);

    return <div>{children({ value, onSubmit: setValue, items })}</div>;
};

<DemoSearchCustomItemsWrapper>
  {({ value, onSubmit, items }) => (
      <Search
          value={value}
          onSubmit={onSubmit}
          items={items}
          placeholder="Type and wait for results"
          searchId="12"
      />
  )}
</DemoSearchCustomItemsWrapper>

Кастомизированный список результатов поиска и режим textarea

<DemoSearchCustomItemsWrapper>
  {({ value, onSubmit, items }) => (
      <Search
          value={value}
          onSubmit={onSubmit}
          items={items}
          placeholder="Start typing"
          searchId="12"
          textarea
      />
  )}
</DemoSearchCustomItemsWrapper>

Список результатов поиска с "Ничего не найдено"

<DemoSearchItemsNotFoundWrapper>
  {({ value, searchItems, initialItems, isNotFound, onChange, onSubmit }) => (
      <Search
          value={value}
          items={searchItems}
          label="Поиск"
          placeholder="Type and wait for results"
          showNotFound={isNotFound}
          onChange={onChange}
          onSubmit={onSubmit}
      />
  )}
</DemoSearchItemsNotFoundWrapper>
<DemoSearchItemsNotFoundWrapper>
  {({ value, searchItems, initialItems, isNotFound, onChange, onSubmit }) => (
      <Search
          value={value}
          items={searchItems}
          label="Поиск"
          placeholder="Start typing"
          textarea
          showNotFound={isNotFound}
          onChange={onChange}
          onSubmit={onSubmit}
      />
  )}
</DemoSearchItemsNotFoundWrapper>
<DemoSearchItemsNotFoundWrapper>
  {({ value, searchItems, initialItems, isNotFound, onChange, onSubmit }) => (
      <Search
          value={value}
          items={searchItems}
          label="Поиск"
          placeholder="Type and wait for results"
          textNotFound="Not found"
          type="compact"
          showNotFound={isNotFound}
          onChange={onChange}
          onSubmit={onSubmit}
      />
  )}
</DemoSearchItemsNotFoundWrapper>

Список результатов поиска с "Ничего не найдено" и "Популярные действия"

<DemoSearchItemsNotFoundWrapper>
  {({ value, searchItems, initialItems, isNotFound, popularItems, onChange, onSubmit, onPopularItemClick }) => (
      <Search
          value={value}
          items={searchItems}
          label="Поиск"
          placeholder="Type and wait for results"
          showNotFound={isNotFound}
          popularItems={popularItems}
          onChange={onChange}
          onSubmit={onSubmit}
          onPopularItemClick={onPopularItemClick}
      />
  )}
</DemoSearchItemsNotFoundWrapper>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; control?: Record<string, string> \| undefined; searchField?: Record<string, string> \| undefined; submit?: Record<...> \| undefined; ... 5 more ...; resizer?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
value	string \| undefined		Значение
type	"textfield" \| "compact" \| undefined	textfield	Вид отображения
textarea	boolean \| undefined		Включить режим textarea
label	string \| undefined		Заголовок поля
searchId	string \| undefined	mfuiSearchId	HTML идентификатор поля поиска
placeholder	string \| undefined		Текст внутри поля по умолчанию
hideIcon	boolean \| undefined		Запрещает отрисовку иконки
items	SearchItem[] \| undefined	[]	Элементы выпадающего списка
changeDelay	number \| undefined	250	Использование функции debounce для onChange
verification	VerificationType \| undefined		Результат проверки данных
noticeText	string \| Element \| undefined		Дополнительный текст под полем. Свойство verification влияет на цвет текста.
maxLength	number \| undefined		Максимальное вводимое количество текста
maxHeightScrollBar	number \| undefined	350	Максимальная высота для скролла
disabled	boolean \| undefined		Отключение поля ввода
required	boolean \| undefined		Делает поле обязательным
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ label?: string \| undefined; input?: string \| undefined; listItemTitle?: string \| undefined; list?: string \| undefined; listInner?: string \| undefined; control?: string \| undefined; ... 5 more ...; resizer?: string \| undefined; } \| undefined		Дополнительные классы для внутренних элементов
showLoader	boolean \| undefined		Отображение загрузки
showNotFound	boolean \| undefined		Выводить результат, когда нет результатов поиска
textNotFound	string \| undefined		Текст, когда нет результатов поиска
popularItems	PopularItem[] \| undefined	[]	Популярные элементы (max 5)
popularTitle	string \| undefined		Заголовок перед популярными элементами
listRef	Ref<HTMLDivElement> \| undefined		Ссылка на элемент списка с результатами
minTextareaHeight	number \| undefined	24	Минимальная высота textarea, px
showResizer	boolean \| undefined		Показать хендлер для ресайза текстового поля
inputRef	((node: HTMLInputElement \| HTMLTextAreaElement) => void) \| undefined		Ref обработчик
onChange	((value: string) => void) \| undefined		Обработчик изменения поля
onSubmit	((value: string) => void) \| undefined		Обработчик нажатия на enter
onBlur	((e: FocusEvent<HTMLInputElement \| HTMLTextAreaElement, Element>) => void) \| undefined		Обработчик выхода из фокуса
onFocus	((e: FocusEvent<HTMLInputElement \| HTMLTextAreaElement, Element>) => void) \| undefined		Обработчик входа в фокус
onPopularItemClick	((popularItemValue?: string \| undefined) => void) \| undefined		Обработчик нажатия на популярный элемент