Figma

Select

import { Select } from '@megafon/ui-core';
Код DemoSelectWrapper
const 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>
                    ))}
                </>
            );
        },
    },
];

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

<DemoSelectWrapper>
      {({ onSelect, currentValue }) => (
          <Select
              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>

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

<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, currentValue }) => (
          <Select
              label="Заголовок"
              disabled
              onSelect={onSelect}
              placeholder="You have no choice"
              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

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