Select

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

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

Код DemoSelectWrapperconst DemoSelectWrapper = props => {
    const [currentValue, setCurrentValue] = React.useState();
    const handleSelect = (_e, data) => {
        if (!data) {
            setCurrentValue('');
            return;
        }
        setCurrentValue(data.value);
    };
    return (
        <div style={DemoSelectWrapperStyle}>
            {props.children({
                onSelect: handleSelect,
                currentValue: currentValue,
            })}
        </div>
    );
};

Демо данныеconst items = [
    {
        value: 0,
        title: 'Авиамоторная',
    },
    {
        value: 1,
        title: 'Автозаводская',
    },
    {
        value: 2,
        title: 'Академическая',
    },
    {
        value: 3,
        title: 'Бабушкинская',
    },
    {
        value: 4,
        title: 'Багратионовская',
    },
    {
        value: 5,
        title: 'ВДНХ',
    },
    {
        value: 6,
        title: 'Варшавская',
    },
    {
        value: 7,
        title: 'Деловой центр',
    },
    {
        value: 8,
        title: 'Дмитровская',
    },
    {
        value: 9,
        title: 'Калужская',
    },
    {
        value: 10,
        title: 'Кантемировская',
        view: ({ filterValue }) => {
            const query = filterValue.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, (w) => '\\' + w);
            const stringFragments = 'Кантемировская'.split(RegExp(`(${query})`, 'ig'));
            return (
                <>
                    {stringFragments.map((fragment, i) => (
                        <React.Fragment key={i}>
                            {(fragment.toLowerCase() === filterValue.toLowerCase() && fragment !== '')
                                ? <b>{fragment}</b>
                                : fragment
                            }
                        </React.Fragment>
                    ))}
                </>
            );
        },
    },
];

Базовое использование

Choose your step

Заголовок

Авиамоторная

Автозаводская

Академическая

Бабушкинская

Багратионовская

ВДНХ

Варшавская

Деловой центр

Дмитровская

Калужская

Кантемировская

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Заголовок"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Заголовок"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

С коротким списком элементов

Choose your step

Заголовок

Авиамоторная

Автозаводская

Академическая

Бабушкинская

Багратионовская

ВДНХ

Варшавская

Деловой центр

Дмитровская

Калужская

Кантемировская

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      shortList
      label="Заголовок"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      shortList
      label="Заголовок"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

С кастомным отображением элементов

Choose your step

Заголовок

Авиамоторная

Автозаводская

Академическая

Бабушкинская

Багратионовская

ВДНХ

Варшавская

Деловой центр

Дмитровская

Калужская

Кантемировская

<DemoSelectWrapper>
  {({ onSelect, canOpen, currentValue }) => (
    <Select
      label="Заголовок"
      placeholder="Choose your step"
      items={items.map(item => ({
        title: item.title,
        value: item.value,
        paddings: 'small',
        view: (
          <>
            <Metro
              style={{
                width: '24px',
                minWidth: '24px',
                height: '24px',
                marginRight: '16px',
              }}
            />
            {item.title}
          </>
        ),
        selectedView: (
          <>
            <Metro
              style={{
                width: '24px',
                minWidth: '24px',
                height: '24px',
                marginRight: '16px',
              }}
            />
            {item.title}
          </>
        ),
      }))}
      onSelect={onSelect}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

<DemoSelectWrapper>
  {({ onSelect, canOpen, currentValue }) => (
    <Select
      label="Заголовок"
      placeholder="Choose your step"
      items={items.map(item => ({
        title: item.title,
        value: item.value,
        paddings: 'small',
        view: (
          <>
            <Metro
              style={{
                width: '24px',
                minWidth: '24px',
                height: '24px',
                marginRight: '16px',
              }}
            />
            {item.title}
          </>
        ),
        selectedView: (
          <>
            <Metro
              style={{
                width: '24px',
                minWidth: '24px',
                height: '24px',
                marginRight: '16px',
              }}
            />
            {item.title}
          </>
        ),
      }))}
      onSelect={onSelect}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

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

You have no choice

Заголовок

Авиамоторная

Автозаводская

Академическая

Бабушкинская

Багратионовская

ВДНХ

Варшавская

Деловой центр

Дмитровская

Калужская

Кантемировская

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Заголовок"
      disabled
      onSelect={onSelect}
      placeholder="You have no choice"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Заголовок"
      disabled
      onSelect={onSelect}
      placeholder="You have no choice"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

Валидация

Бабушкинская

Успешное состояние*

Авиамоторная

Автозаводская

Академическая

Бабушкинская

Багратионовская

ВДНХ

Варшавская

Деловой центр

Дмитровская

Калужская

Кантемировская

Success message

Choose your step

Состояние ошибки*

Авиамоторная

Автозаводская

Академическая

Бабушкинская

Багратионовская

ВДНХ

Варшавская

Деловой центр

Дмитровская

Калужская

Кантемировская

Error message

<DemoSelectWrapper>
  {({ onSelect, currentValue = 3 }) => (
    <Select
      label="Успешное состояние"
      required
      verification="valid"
      noticeText="Success message"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>
<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Состояние ошибки"
      required
      verification="error"
      noticeText="Error message"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

<DemoSelectWrapper>
  {({ onSelect, currentValue = 3 }) => (
    <Select
      label="Успешное состояние"
      required
      verification="valid"
      noticeText="Success message"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>
<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Состояние ошибки"
      required
      verification="error"
      noticeText="Error message"
      onSelect={onSelect}
      placeholder="Choose your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

Тип сombobox

Сombobox

Ничего не нашлось

Combobox с выбранным по умолчанию значением

Ничего не нашлось

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Сombobox"
      type="combobox"
      onSelect={onSelect}
      placeholder="Choose or type your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>
<DemoSelectWrapper>
  {({ onSelect, currentValue = 6 }) => (
    <Select
      label="Combobox с выбранным по умолчанию значением"
      type="combobox"
      onSelect={onSelect}
      placeholder="Choose or type your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>

<DemoSelectWrapper>
  {({ onSelect, currentValue }) => (
    <Select
      label="Сombobox"
      type="combobox"
      onSelect={onSelect}
      placeholder="Choose or type your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>
<DemoSelectWrapper>
  {({ onSelect, currentValue = 6 }) => (
    <Select
      label="Combobox с выбранным по умолчанию значением"
      type="combobox"
      onSelect={onSelect}
      placeholder="Choose or type your step"
      items={items}
      currentValue={currentValue}
    />
  )}
</DemoSelectWrapper>