Выбор элементов в дереве

Дерево компонентов в Carbon Components Svelte представляет собой иерархическую структуру, где каждый узел может быть либо родительским элементом с дочерними элементами, либо листовым узлом без потомков. Выбор элементов в дереве часто используется для фильтрации данных, настройки интерфейсов или управления состоянием приложения.

Структура данных для дерева

Дерево в Carbon Components Svelte строится на основе массива объектов, где каждый объект описывает узел. Обязательные ключи:

  • id — уникальный идентификатор узла.
  • label — текстовое название узла.
  • children — массив дочерних элементов (необязательный, используется для родительских узлов).
  • selected — булевое значение, указывающее, выбран ли узел (необязательный).

Пример структуры:

const treeData = [
  {
    id: '1',
    label: 'Документы',
    selected: false,
    children: [
      { id: '1-1', label: 'Отчеты', selected: false },
      { id: '1-2', label: 'Презентации', selected: false }
    ]
  },
  { id: '2', label: 'Изображения', selected: false }
];

Компонент TreeView

В Carbon Components Svelte для отображения и управления деревом используется компонент TreeView. Основные свойства:

  • items — массив узлов дерева.
  • selection — режим выбора (single или multi).
  • on:select — событие, срабатывающее при выборе узла.

Пример использования:

<script>
  import { TreeView, TreeNode } from 'carbon-components-svelte';

  let treeItems = treeData;

  function handleSelect(event) {
    console.log('Выбранные узлы:', event.detail);
  }
</script>

<TreeView {treeItems} selection="multi" on:select={handleSelect}>
  {#each treeItems as item}
    <TreeNode {item}>
      {#if item.children}
        {#each item.children as child}
          <TreeNode {child} />
        {/each}
      {/if}
    </TreeNode>
  {/each}
</TreeView>

Режимы выбора

Single Selection Позволяет выбрать только один элемент дерева одновременно. При выборе нового элемента предыдущий автоматически снимается. Используется для строгой фильтрации или навигации.

Multi Selection Позволяет выбрать несколько узлов одновременно. Удобно для операций с группами элементов. Carbon Components Svelte автоматически управляет состоянием selected для родительских и дочерних узлов:

  • Если все дочерние элементы родителя выбраны, родитель автоматически помечается как выбранный.
  • Если выбрано лишь часть дочерних элементов, родитель может иметь промежуточное состояние (indeterminate).

Программное управление выбором

Выбор элементов можно управлять через свойства объекта узла. Например, чтобы программно выбрать все дочерние элементы:

function selectAllChildren(node) {
  node.selected = true;
  if (node.children) {
    node.children.forEach(selectAllChildren);
  }
}

Для снятия выбора используется аналогичная рекурсивная функция.

Обработка событий выбора

Компонент TreeView генерирует событие select с массивом выбранных узлов. Каждое событие содержит:

  • id узла
  • label узла
  • selected — текущее состояние выбора

Пример:

function handleSelect(event) {
  const selectedNodes = event.detail.filter(node => node.selected);
  console.log('Выбранные узлы:', selectedNodes.map(n => n.label));
}

Визуальные состояния

Carbon Components Svelte поддерживает несколько визуальных состояний для узлов дерева:

  • Выбранный (selected) — узел подсвечивается и отмечается галочкой.
  • Промежуточный (indeterminate) — родитель имеет частично выбранные дочерние элементы.
  • Обычный (default) — узел не выбран.

Настройка этих состояний производится через объект узла и автоматически обновляется при изменении дочерних элементов.

Ленивая загрузка элементов

Для больших деревьев рекомендуется использовать ленивую загрузку дочерних элементов, чтобы не загружать все данные сразу:

<TreeNode {item} on:expand={() => loadChildren(item)} />

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

Интеграция с формами

Выбранные элементы дерева часто интегрируют с формами:

<form on:submit|preventDefault={submitForm}>
  <TreeView {treeItems} selection="multi" bind:selectedItems />
  <button type="submit">Сохранить</button>
</form>

<script>
  let selectedItems = [];

  function submitForm() {
    console.log('Отправка формы с выбранными узлами:', selectedItems);
  }
</script>

Привязка через bind:selectedItems позволяет хранить актуальный список выбранных элементов и использовать его в бизнес-логике приложения.

Советы по производительности

  • Использовать ленивую загрузку для больших деревьев.
  • Избегать глубоких рекурсий при обновлении состояния, применять методы обхода итеративно, если структура очень большая.
  • Сохранять состояние выбора в отдельном объекте, чтобы минимизировать количество реактивных обновлений.

Эти подходы позволяют создавать масштабируемые и отзывчивые интерфейсы с деревьями, полностью используя возможности Carbon Components Svelte.

Оглавление