Search

Код DemoSearchWrapper
const 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 }}>Value: {value}</p>
            {children({ onChange: handleChange, onSubmit: setValue, items: items, chosenValue: value })}
        </div>
    );
};

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

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

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

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

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

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

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

<Search hideIcon searchId="1" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Код DemoSearchCustomItemsWrapper
const 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="Заголовок поля" type="compact" showLoader />