Menu
Меню для боковой панели дашбордов.
Использование
В очень редких случаях компонент может использоваться вне лейаута-дашборда, отдельно. Для этого пропс separately должен быть выставлен в true. Внимание!!! Компактный режим будет недоступен в этом случае.
Mоделью для меню служит массив обьектов типа IMenuItem src/models/models.ts.:
ts
interface IMenuItem {
id: string; // Уникальный идентификатор
text: string; // Текстовый контент
disabled?: boolean; // Недоступна?
icon?: string; // Иконка для пункта
bulb?: string; // Подпись "bulb"
color?: Colors; // Цвета для подписи, bulb
link?: boolean; // Этот пункт - ссылка на внешний ресурс
childrens: IMenuItem[]; // Дочерние вложенные пункты
}HTML
Передать данные в модель можно даже из HTML, следующим образом, с помощью значения в виде строки, которую сможет разобрать функция JSON.parse():
html
<ds-menu
model='[{ "id": "1", "text": "1111" }, { "id": "2", "disabled": true, "text": "2222" }, { "id": "3", "text": "3333" }]'
>
</ds-menu>WARNING
Для корректной работы компонента в данных конфигурации не должно быть одинаковых полей id для разных пунктов.
WARNING
Внимание! В данный момент по требованиям от дизайна при выборе "пункта с потомками" событие input не происходит, и в атрибут value не устанавливается id таких клавиш. Если на вашем проекте будет затребовано иное поведение (пункты имеющие вложенные пунткты и выбираются визуально, и могут вызывать какие-то спецэффекты в бизнес-логике проектов, предположим - переход по роутам) - потребуется доработка Дизайн-Системы. Также, на данный момент, событие input не отправляется при повторном нажатии на уже выбранную клавишу (id которой в данный момент содержит атрибут value компонента)!
INFO
Для того чтобы сразу выбрать определенную клавишу меню, нужно передать проп value компонента со значением id этой клавиши.
Дизайн-Система покажет сообщения в консоли в следующих случаях:
- идентификатор (id) какого-либо выбора не указан, неверного типа или пустой
- идентификатор не уникальный
- отсутсвует основная подпись (text) у какого-либо выбора
- основная подпись не уникальна
Или установить из javascript:
html
<ds-menu
id="menu"
>
</ds-menu>
<script>
const menu = document.getElementById('menu');
if (menu) {
const data = [
{
id: '1',
text: '1111',
icon: 'avatar',
bulb: '99+',
color: 'fargo',
},
{
id: '2',
text: '2222 sdaf asd asd asd asdsa asddf asdf dsf zsdFFGZSDFDF sdaF dsf DFS dfgg dfdfg fdgh fdgd f ',
disabled: true,
icon: 'avatar',
},
{
id: '3',
text: '3333',
link: true,
childrens: [
{
id: '5',
text: '111111111111111 111 1 111 5456 564545 5646 5 xdscfsdc sdf sdf sdf sdf sdf sdfsd sdfsd f dsfds sdf sdf sdf sdfsd',
},
{
id: '6',
text: 'Ffdfdgf dfgsddf s fdgdgfgf',
childrens: [
{
id: '7',
text: '5555 5456 564545 sadds5646 5',
bulb: '99+',
},
{
id: '8',
text: 'Ffdfdgf dfgsddf s sadd fdgdgfgf',
disabled: true,
icon: 'avatar',
},
],
},
],
},
{
id: '4',
text: '444 dfdrsg rfg vdfdfg gd fgdf gdf dfgf fdfgd sdf sdf dfs',
bulb: '99+',
childrens: [
{
id: '9',
text: '5555 5456 564545 dsfd sadds5646 5',
},
{
id: '10',
text: 'Ffdfdgf dfgsddf s cxcv sadd fdgdgfgf',
icon: 'avatar',
childrens: [
{
id: '11',
text: '5555 5456 564545 sdd sadds5646 5',
},
{
id: '12',
text: 'Ffdfdgf dfgsddfdsfd s sadd fdgdgfgf',
icon: 'avatar',
childrens: [
{
id: '18',
text: '5555 5456 564545 sdd sadds5646 5',
},
{
id: '19',
text: 'Ffdfdgf dfgsddfdsfd s sadd fdgdgfgf',
icon: 'avatar',
},
],
},
],
},
],
},
{
id: '13',
text: '5555 dfgdfg dsfds',
childrens: [
{
id: '14',
text: '111111111111111 111 1 111 5456 564545 5646 5 xdscfsdc sdf sdf sdf sdf sdf sdfsd sdfsd f dsfds sdf sdf sdf sdfsd',
},
{
id: '15',
text: 'Ffdfdgf dfgsddf s fdgdgfgf',
childrens: [
{
id: '16',
text: '5555 5456 564545 sadds5646 5',
bulb: '99+',
},
{
id: '17',
text: 'Ffdfdgf dfgsddf s sadd fdgdgfgf',
disabled: true,
icon: 'avatar',
},
],
},
],
},
];
menu.setAttribute('model', JSON.stringify(data));
menu.addEventListener('input', (e) => {
// В консоль выведет идентефикатор по полю id актуального выбора
console.log('Выбор в меню:', e.target.getAttribute('value'));
});
}
</script>React
js
import { useState, useCallback } from 'react';
import { Menu } from '@rir/ds-library';
const data = [
{
id: '1',
text: '1111',
icon: 'avatar',
bulb: '99+',
color: 'fargo',
},
{
id: '2',
text: '2222 sdaf asd asd asd asdsa asddf asdf dsf zsdFFGZSDFDF sdaF dsf DFS dfgg dfdfg fdgh fdgd f ',
disabled: true,
icon: 'avatar',
},
{
id: '3',
text: '3333',
link: true,
childrens: [
{
id: '5',
text: '111111111111111 111 1 111 5456 564545 5646 5 xdscfsdc sdf sdf sdf sdf sdf sdfsd sdfsd f dsfds sdf sdf sdf sdfsd',
},
{
id: '6',
text: 'Ffdfdgf dfgsddf s fdgdgfgf',
childrens: [
{
id: '7',
text: '5555 5456 564545 sadds5646 5',
bulb: '99+',
},
{
id: '8',
text: 'Ffdfdgf dfgsddf s sadd fdgdgfgf',
disabled: true,
icon: 'avatar',
},
],
},
],
},
{
id: '4',
text: '444 dfdrsg rfg vdfdfg gd fgdf gdf dfgf fdfgd sdf sdf dfs',
bulb: '99+',
childrens: [
{
id: '9',
text: '5555 5456 564545 dsfd sadds5646 5',
},
{
id: '10',
text: 'Ffdfdgf dfgsddf s cxcv sadd fdgdgfgf',
icon: 'avatar',
childrens: [
{
id: '11',
text: '5555 5456 564545 sdd sadds5646 5',
},
{
id: '12',
text: 'Ffdfdgf dfgsddfdsfd s sadd fdgdgfgf',
icon: 'avatar',
childrens: [
{
id: '18',
text: '5555 5456 564545 sdd sadds5646 5',
},
{
id: '19',
text: 'Ffdfdgf dfgsddfdsfd s sadd fdgdgfgf',
icon: 'avatar',
},
],
},
],
},
],
},
{
id: '13',
text: '5555 dfgdfg dsfds',
childrens: [
{
id: '14',
text: '111111111111111 111 1 111 5456 564545 5646 5 xdscfsdc sdf sdf sdf sdf sdf sdfsd sdfsd f dsfds sdf sdf sdf sdfsd',
},
{
id: '15',
text: 'Ffdfdgf dfgsddf s fdgdgfgf',
childrens: [
{
id: '16',
text: '5555 5456 564545 sadds5646 5',
bulb: '99+',
},
{
id: '17',
text: 'Ffdfdgf dfgsddf s sadd fdgdgfgf',
disabled: true,
icon: 'avatar',
},
],
},
],
},
];
function Component() {
const [value, setValue] = useState('');
const onInput = useCallback((e: Event) => {
// В консоль выведет идентефикатор по полю id актуального выбора и всю модель списка целиком
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
console.log('Выбор в меню:', e.target?.getAttribute('value'));
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
setValue(e.target.getAttribute('value'));
}, []);
return (
<>
<Menu
model={data}
onInput={onInput}
></Menu>
</>
);
}
export default Component;API
Props
| Name | Type | Description | Default |
|---|---|---|---|
| model | IMenuItem[] | Модель данных группы переключателей | [] |
| value | undefined, String | Актуальный ввод, после первого выбора - содержит значение поле id кнопки по которой произошел последний щелчок мыши | undefined |
| lines | Number | Количество строк после которого текстовый контент сокращается многоточием в Меню или Поповере | 1 |
| prevent | Boolean | Не закрывать поповер компактного вида при клике на элементы без вложенных уровней? | false |
| separately | Boolean | Для использования вне лейаута-дашборда. Без компактного режима. | false |
| hide | Boolean | Отображать ли иконки? Статический логический пропс позволяющий игнорировать поле icon в данных и не отображать иконки (или - по требованиям - первые символы текстов если иконка не указанна) на клавишах в любом случае. | false |
| compact | Boolean | Компактный вид? | false |
| _compact | undefined, String: ['true', 'false'] | Дублирующий литеральный атбрибут | undefined |
Events
| Name | Description |
|---|---|
| input | Событие на изменение ввода |