@eisgs/dropdown-multiple v1.1.13

DEPRECATED

Весь функционал переехал в компонент Dropdown. Данный компонент поддерживаться не будет.

Базовый Dropdown

label, labelHint и placeholder позволяют показывать дополнительную информацию пользователю. withSearch, searchPlaceholder и onSearch позволяют управлять поиском среди опций. renderPlaceholder обязательное поле для показа информации о том, сколько элементов выбрано. clearable очистка поля по кнопке

  const [values, setValues] = React.useState([]);

  const options = [
    { label: 'Опция 1', value: '1' },
    { label: 'Опция 2', value: '2' },
    { label: 'Опция 3', value: '3' }
  ];
  
  <DropdownMultiple
    label="Имя поля"
    labelHint="Подсказка"
    placeholder="Заполните поле"
    values={values}
    options={options}
    onChange={setValues}
    clearable
    withSearch
    searchPlaceholder="Поиск"
    renderPlaceholder={(count) => <div>Выбрано: {count}</div>}
  />

disabled и Валидация

disabled - заблокированное состояние.

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

  <>
    <div style={{ marginBottom: "20px" }}>
      <DropdownMultiple disabled options={options} />
    </div>
  </>

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

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

  const [values, setValues] = React.useState([]);

  const options = [
    { label: 'Опция 1', value: '1' },
    { label: 'Опция 2', value: '2' },
    { label: 'Опция 3', value: '3' }
  ];
  
  <div style={{ width: '300px' }}>
    <DropdownMultiple
      withSelectedControlList
      label="Имя поля"
      labelHint="Подсказка"
      placeholder="Заполните поле"
      values={values}
      options={options}
      onChange={setValues}
      clearable
      withSearch
      searchPlaceholder="Поиск"
      renderPlaceholder={(count) => <div>Выбрано: {count}</div>}
    />
  </div>