@eisgs/dropdown
v3.0.3
Published
`label`, `labelHint` и `placeholder` позволяют показывать дополнительную информацию пользователю. Если флаг `clearable` передан со значением `true`, то будет отображена кнопка сброса состояния.
Downloads
92
Readme
Базовый 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`}}
/>
))