List

Список интерактивных элементов.

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

Кнопки сгруппированны по секциям подписаным заголовками и могут быть трех видов.

Mоделью для списка служит массив обьектов типа IList src/models/models.ts.:

interface IListItem {
  id: string; // Уникальный идентификатор
  text: string; // Текстовый контент
  subtext?: string; // Дополнительный текст
  value?: boolean | null; // Значение
  disabled?: boolean; // Недоступна?
  token?: 'default' | 'checkbox' | 'icon'; // "Тип" кнопки: простая, чекбокс или с иконкой
  icon?: string; // Иконка
  color?: Colors; // Цвет иконки
}

interface IList {
  header?: string; // Заголовок группы
  items: IListItem[]; // Элементы группы
}

HTML

Передать данные в модель можно даже из HTML, следующим образом, с помощью значения в виде строки, которую сможет разобрать функция JSON.parse():

<ds-list
  model='[{ "id": "1", "text": "1111" }, { "id": "2", "disabled": true, "text": "2222" }, { "id": "3", "text": "3333" }]'
>
</ds-list>

WARNING

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

INFO

Для того чтобы сразу выбрать определенный элемент списка, нужно передать проп value компонента со значением id нужного элемента.

INFO

Для кнопок со значением поля token="checkbox" можно передать в поле value: true, для того чтобы "включить их" сразу. Кнопки с другими значениями в token, будут всегда иметь null как value.

Дизайн-Система покажет сообщения в консоли в следующих случаях:

• идентификатор (id) какого-либо выбора не указан, неверного типа или пустой
• идентификатор не уникальный
• отсутсвует основная подпись (text) у какого-либо выбора
• основная подпись не уникальна

Или установить из javascript:

<!-- Переключатель с идентификатором "1" будет "выбран" по умолчанию -->
<ds-list
  id="list"
  value='1'
>
</ds-list> 

<script>
  const list = document.getElementById('list');
  if (list) {
    const data = [
      {
        header: 'Заголовок 1',
        items: [
          {
            id: '1',
            text: '1111',
          },
          {
            id: '2',
            text: '2222 2222 fdgdfrg 2222 fgdfgfg',
            subtext: 'aaaaa dfgfg fgfdgf',
            token: 'checkbox',
            disabled: true,
          },
          {
            id: '3',
            text: '3333 44 654656 56564 565645 56456456 5645645645645',
            subtext: 'aaaaa dfgfg dsfdfdf fgfdgf',
            token: 'checkbox',
            value: true, // Чекбокс будет включен "по умолчанию"
          },
          {
            id: '4',
            text: '45335 ftget re e565e6r fterter reterte rt ert ert e',
            subtext: 'dsfdsf sdfds  sdf sdf dssdf sdf sdf sdf sdfs fsdfdsf',
            token: 'icon',
            icon: 'avatar',
            color: 'fargo'
          },
        ]
      },
      {
        header: 'Заголовок 2',
        items: [
          {
            id: '5',
            text: '111выавыав1',
          },
          {
            id: '6',
            text: '2222 2222 выавfdgdfrg 2222 fgdfgfg',
            subtext: 'aaaaa dfgfg fgfdgf',
            token: 'checkbox',
            disabled: true,
          },
          {
            id: '7',
            text: '3333 44 654656 выаыва 56564 565645 56456456 5645645645645',
            subtext: 'aaaaa dfgfg dsfdfdf fgfdgf',
            token: 'checkbox',
          },
          {
            id: '8',
            text: '45335 ftget reм выава e565e6r fterter reterte rt ert ert e',
            subtext: 'dsfdsf sdfds  sdf sdf dssdf sdf sdf sdf sdfs fsdfdsf',
            token: 'icon',
            icon: 'avatar',
            color: 'fargo'
          },
        ]
      }
    ];

    list.setAttribute('model', JSON.stringify(data));

    list.addEventListener('input', (e) => {
      // В консоль выведет идентефикатор по полю id актуального выбора и всю модель группы целиком
      console.log('Выбор в списке:', e.target.getAttribute('value'), JSON.parse(e.target.getAttribute('model')));
    });
  }
</script>

React

import { useState, useCallback } from 'react';
import { List } from '@rir/ds-library';

const data = [
  {
    header: 'Заголовок 1',
    items: [
      {
        id: '1',
        text: '1111',
      },
      {
        id: '2',
        text: '2222 2222 fdgdfrg 2222 fgdfgfg',
        subtext: 'aaaaa dfgfg fgfdgf',
        token: 'checkbox',
        disabled: true,
      },
      {
        id: '3',
        text: '3333 44 654656 56564 565645 56456456 5645645645645',
        subtext: 'aaaaa dfgfg dsfdfdf fgfdgf',
        token: 'checkbox',
        value: true, // Чекбокс будет включен "по умолчанию"
      },
      {
        id: '4',
        text: '45335 ftget re e565e6r fterter reterte rt ert ert e',
        subtext: 'dsfdsf sdfds  sdf sdf dssdf sdf sdf sdf sdfs fsdfdsf',
        token: 'icon',
        icon: 'avatar',
        color: 'fargo'
      },
    ]
  },
  {
    header: 'Заголовок 2',
    items: [
      {
        id: '5',
        text: '111выавыав1',
      },
      {
        id: '6',
        text: '2222 2222 выавfdgdfrg 2222 fgdfgfg',
        subtext: 'aaaaa dfgfg fgfdgf',
        token: 'checkbox',
        disabled: true,
      },
      {
        id: '7',
        text: '3333 44 654656 выаыва 56564 565645 56456456 5645645645645',
        subtext: 'aaaaa dfgfg dsfdfdf fgfdgf',
        token: 'checkbox',
      },
      {
        id: '8',
        text: '45335 ftget reм выава e565e6r fterter reterte rt ert ert e',
        subtext: 'dsfdsf sdfds  sdf sdf dssdf sdf sdf sdf sdfs fsdfdsf',
        token: 'icon',
        icon: 'avatar',
        color: 'fargo'
      },
    ]
  }
];

function Component() {
  const [model, setModel] = useState(data);
  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'), JSON.parse(e.target?.getAttribute('model')));
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    setValue(e.target.getAttribute('value'));
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    setModel(JSON.parse(e.target.getAttribute('model')));
  }, []);

  return (
    <>
      <List
        model={model}
        onInput={onInput}
      ></List>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
model	IList[]	Модель данных группы переключателей	[]
value	undefined, String	Актуальный ввод, после первого выбора - содержит значение поле id кнопки по которой произошел последний щелчок мыши	undefined

Events

Name	Description
input	Событие на изменение ввода

Примеры проектов

React

Angular

Vue