❤
npm
Sign UpSign In

@eisgs/dropdown

3.0.2 • Public • Published

Базовый Dropdown

label, labelHint и placeholder позволяют показывать дополнительную информацию пользователю. Если флаг clearable передан со значением true, то будет отображена кнопка сброса состояния.

const [value, setValue] = React.useState();

const options = [
  { id: 1, description: 'Опция 1', code: '1' },
  { id: 2, description: 'Опция 2', code: '2' },
  { id: 3, description: 'Опция 3', code: '3' },
];

<Dropdown
  clearable
  label="Имя поля"
  labelHint="Подсказка"
  options={options}
  placeholder="Заполните поле"
  value={value}
  onChange={setValue}
/>

Поиск

withSearch, searchPlaceholder и onSearch позволяют управлять поиском среди опций.

const [value, setValue] = React.useState();

const options = [
  { id: 1, description: 'Опция 1', code: '1' },
  { id: 2, description: 'Опция 2', code: '2' },
  { id: 3, description: 'Опция 3', code: '3' },
];

<Dropdown
  clearable
  withSearch
  options={options}
  placeholder="Заполните поле" 
  value={value}
  onChange={setValue}
/>

Ограничения

Если флаг disabled передан со значением true, компонент будет заблокирован.

const options = [
  { id: 1, description: 'Опция 1', code: '1' },
  { id: 2, description: 'Опция 2', code: '2' },
  { id: 3, description: 'Опция 3', code: '3' },
];
const [firstOption] = options;

<Dropdown 
  disabled 
  options={options} 
  value={firstOption.code}
/>

Валидация

В параметре warning можно передать предупреждение.

const [value, setValue] = React.useState({ id: 1, description: 'Опция 1', code: '1' });

const options = [
  { id: 1, description: 'Опция 1', code: '1' },
  { id: 2, description: 'Опция 2', code: '2' },
  { id: 3, description: 'Опция 3', code: '3' },
];

<Dropdown
  options={options}
  styles={{ marginBottom: '20px' }}
  value={value}
  onChange={setValue}
  warning="Значение отличается от данных в ЕГРЗ"
/>

В параметре error можно передать сообщение об ошибке.

const [value, setValue] = React.useState({ id: 1, description: 'Опция 1', code: '1' });

const options = [
  { id: 1, description: 'Опция 1', code: '1' },
  { id: 2, description: 'Опция 2', code: '2' },
  { id: 3, description: 'Опция 3', code: '3' },
];

<Dropdown
  error="Произошла ошибка"
  options={options}
  styles={{ marginBottom: '20px' }}
  value={value}
  onChange={setValue}
/>

Состояние загрузки

Для отображения loading spinner у поля поиска необходимо передать флаг loading со значением true.

const [value, setValue] = React.useState();

const options = [
  { id: 1, description: 'Опция 1', code: '1' },
  { id: 2, description: 'Опция 2', code: '2' },
  { id: 3, description: 'Опция 3', code: '3' },
];

<Dropdown
  loading
  withSearch
  options={options}
  placeholder="Заполните поле"
  value={value}
  onChange={setValue}
/>

Multiple

Чтобы выбрать несколько значений из выпадающего списка, необходимо передать флаг multiple. Параметр value в этом случае должен представлять собой массив выбранных опций. В данном сценарии onChange вызывается с массивом выбранных опций.

const [value, setValue] = React.useState([]);

const options = [
  { id: 1, description: 'ЖК «Новые Черемушки»', code: '1' },
  { id: 2, description: 'ЖК «Тысяча квартир»', code: '2' },
  { id: 3, description: 'ЖК «Новые Черемушки 1»', code: '3' },
  { id: 4, description: 'ЖК «Новые Черемушки 2»', code: '4' },
  { id: 5, description: 'ЖК «Новые Черемушки 3»', code: '5' },
];

<Dropdown
  clearable
  multiple
  options={options}
  label="Объекты строительства"
  placeholder="Выбрать объекты"
  value={value}
  onChange={setValue}
/>

Кастомный placeholder (multiple)

Для отображения кастомного placeholder'а можно использовать callback renderPlaceholder.

const [value, setValue] = React.useState([]);

const options = [
  { id: 1, description: 'ЖК «Новые Черемушки»', code: '1' },
  { id: 2, description: 'ЖК «Тысяча квартир»', code: '2' },
  { id: 3, description: 'ЖК «Новые Черемушки 1»', code: '3' },
  { id: 4, description: 'ЖК «Новые Черемушки 2»', code: '4' },
  { id: 5, description: 'ЖК «Новые Черемушки 3»', code: '5' },
];

<Dropdown
  clearable
  multiple
  withSearch
  options={options}
  label="Объекты строительства"
  placeholder="Выбрать объекты"
  value={value}
  onChange={setValue}
  renderPlaceholder={(count, selectedOptions) => {
    const selectedOptionsDescriptions = selectedOptions
      .map(({ description }) => description)
      .join(', ');
    
    return (
      <div>
        Выбрано объектов: {count},
        {selectedOptionsDescriptions}
      </div>
    )
  }}
/>

Выбор всех доступных опций (multiple)

При передаче флага withSelectAllOption в списке опций появится опция для выбора всех доступных вариантов. Текст опции можно задавать в параметре selectAllOptionLabel.

const [value, setValue] = React.useState([]);

const options = [
  { id: 1, description: 'ЖК «Новые Черемушки»', code: '1' },
  { id: 2, description: 'ЖК «Тысяча квартир»', code: '2' },
  { id: 3, description: 'ЖК «Новые Черемушки 1»', code: '3' },
  { id: 4, description: 'ЖК «Новые Черемушки 2»', code: '4' },
  { id: 5, description: 'ЖК «Новые Черемушки 3»', code: '5' },
];

<Dropdown
  clearable
  multiple
  withSearch
  withSelectAllOption
  options={options}
  label="Объекты строительства"
  placeholder="Выбрать объекты"
  value={value}
  onChange={setValue}
  selectAllOptionLabel="Все объекты"
/>

Список выбранных значений (multiple)

Для отображения списка выбранных значений над компонентом Dropdown необходимо передать флаг withSelectedControlList. Для скрытия списка выбранных значений под компонентом необходимо передать флаг hideControlList.

const options = [
  { id: 1, description: 'ЖК «Новые Черемушки»', code: '1' },
  { id: 2, description: 'ЖК «Тысяча квартир»', code: '2' },
  { id: 3, description: 'ЖК «Новые Черемушки 1»'.repeat(5), code: '3' },
  { id: 4, description: 'ЖК «Новые Черемушки 2»', code: '4' },
  { id: 5, description: 'ЖК «Новые Черемушки 3»', code: '5' },
];

const [value, setValue] = React.useState(options);

const props = {
  clearable: true,
  multiple: true,
  withSearch: true,
  withSelectedControlList: true,
  options,
  placeholder: "Заполните поле",
  styles: `margin-bottom: 40px`,
};

<div style={{ width: '600px' }}>
  <Dropdown {...props} label="Multiple" value={value} onChange={setValue}/>
  <Dropdown {...props} label="Multiple disabled filled" value={options.slice(0, 3)} disabled/>
  <Dropdown {...props} label="Multiple disabled empty" value={[]} disabled/>
</div>

Различные варианты отображения опций

Доступны различные варианты отображения опций благодаря параметру renderOption - 2 lines, 2 values, icon, либо функция-рендер.

import { ArrowForwardCircleIcon } from "@eisgs/icon";

const options = Array.from(Array(3), (_, index) => {
  const realIndex = index + 1;
    
  return {
    id: realIndex,
    label: `Текст ${realIndex}`,
    value: realIndex,
    caption: `подпись ${realIndex}`,
    Icon: ArrowForwardCircleIcon
  }
});

const gridGap = 40;
const gridStyles = {
  display: 'grid',
  gridGap,
}
const gridRowStyles = {
  display: 'grid',
  gridTemplateColumns: `repeat(2, 250px)`,
  gridGap,
};

const props = {
  placeholder: "Заполните поле",
  keyLabel: "label",
  keyValue: "value",
  options,
};

<div style={gridStyles}>
  <div style={gridRowStyles}>
    <Dropdown {...props} label="Text"/>
    <Dropdown {...props} multiple label="Text Multiple"/>
  </div>
  <div style={gridRowStyles}>
    <Dropdown {...props} renderOption="2 lines" label="2 lines"/>
    <Dropdown {...props} renderOption="2 lines" multiple label="2 lines multiple"/>
  </div>  
  <div style={gridRowStyles}>
    <Dropdown {...props} renderOption="2 values" label="2 values"/>
    <Dropdown {...props} renderOption="2 values" multiple label="2 values multiple"/>
  </div>
  <div style={gridRowStyles}>
    <Dropdown {...props} renderOption="icon" label="Icon"/>
  </div>
</div>

Стили для выпадающего списка

Используя параметр dropdownStyles, можно задавать стили для выпадающего списка, например - добавить/убрать скролл.

const getOptions = (length = 3) => Array.from(Array(length), (_, index) => {
  const realIndex = index + 1;
    
  return {
    id: realIndex,
    label: `Текст ${realIndex}`,
    value: realIndex,
    caption: `подпись ${realIndex}`,
  }
});

const gridGap = 40;
const gridStyles = {
  display: 'grid',
  gridGap,
}
const gridRowStyles = {
  display: 'grid',
  gridTemplateColumns: `repeat(2, 250px)`,
  gridGap,
};

const optionHeight = 44;
const twoLinesOptionHeight = 64;

const props = {
  placeholder: "Заполните поле",
  keyLabel: "label",
  keyValue: "value",
  multiple: true,
  withSearch: true,
  withSelectAllOption: true,
  renderOption: "2 lines",
};

<div style={gridStyles}>
  <div style={gridRowStyles}>
    <Dropdown 
      {...props}
      label="2 lines без скролла"
      options={getOptions()}
    />
    <Dropdown
      {...props}
      label="2 lines со скроллом"
      dropdownStyles={`max-height: ${twoLinesOptionHeight * 3 + optionHeight}px;`}
      options={getOptions(4)}
    />
  </div>
</div>

View (ИЖС)

const viewList = ['desktop', 'mobile'];

const options = [
  {id: 1, description: 'Опция 1', code: '1'},
  {id: 2, description: 'Опция 2', code: '2'},
  {id: 3, description: 'Опция 3', code: '3'},
];

viewList.map((view, index) => (
  <Dropdown
    key={view}
    view={view}
    placeholder={view}
    withSearch
    label={`${view} label`}
    renderPlaceholder={() => `${view} placeholder`}
    multiple
    options={options}
    {...index === 0 && {styles: `margin-bottom: 40px`}}
  />
))

Readme

Keywords

none

Package Sidebar

Install

npm i @eisgs/dropdown

Weekly Downloads

10

Version

3.0.2

License

MIT

Unpacked Size

210 kB

Total Files

6

Last publish

Collaborators

  • traidersu
  • krll_mdntsv
  • lzdyd
Try on RunKit
Report malware