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 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 />

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

<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 />

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

Код 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>

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

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

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

<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="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>