Компонент TreeGrid в WordPress — это экспериментальный компонент для создания иерархических таблиц. TreeGrid поддерживает навигацию с клавиатуры, что позволяет пользователям перемещаться по строкам и столбцам таблицы с помощью клавиш со стрелками. Этот компонент часто используется для построения интерфейсов, таких как файловые менеджеры, где данные отображаются в виде древовидной структуры.
Компонент TreeGrid работает вместе с компонентами TreeGridRow и TreeGridCell для построения полной иерархии и навигации. Давайте разберёмся, как их использовать и какие свойства можно применить для настройки.
Пример создания TreeGrid
Для начала импортируем компонент TreeGrid и его подкомпоненты из WordPress:
import { TreeGrid, TreeGridRow, TreeGridCell } from '@wordpress/components';
function TreeMenu() {
return (
<TreeGrid>
<TreeGridRow level={1} positionInSet={1} setSize={2}>
<TreeGridCell>
{(props) => (
<button onClick={() => console.log('Выбрано')} {...props}>Выбрать</button>
)}
</TreeGridCell>
<TreeGridCell>
{(props) => (
<button onClick={() => console.log('Перемещено')} {...props}>Переместить</button>
)}
</TreeGridCell>
</TreeGridRow>
<TreeGridRow level={1} positionInSet={2} setSize={2}>
<TreeGridCell>
{(props) => (
<button onClick={() => console.log('Выбрано')} {...props}>Выбрать</button>
)}
</TreeGridCell>
<TreeGridCell>
{(props) => (
<button onClick={() => console.log('Перемещено')} {...props}>Переместить</button>
)}
</TreeGridCell>
</TreeGridRow>
</TreeGrid>
);
}
Свойства компонентов
TreeGrid
Основной компонент TreeGrid рендерит таблицу (<table> и <tbody>) и используется для построения структуры. Он поддерживает несколько важных свойств для управления поведением и взаимодействием.
1. onFocusRow
- Тип:
function(event: KeyboardEvent, startRow: HTMLElement, destinationRow: HTMLElement) - Описание: Колбэк, срабатывающий при фокусе на новой строке при помощи клавиш
UpиDownилиHomeиEnd. - Обязательное: Нет
<TreeGrid onFocusRow={(event, startRow, destinationRow) => console.log("Фокус переместился")}>
{/* Вложенные TreeGridRow */}
</TreeGrid>
2. onCollapseRow
- Тип:
function(row: HTMLElement) - Описание: Колбэк, который срабатывает при сворачивании строки.
- Обязательное: Нет
<TreeGrid onCollapseRow={(row) => console.log("Строка свернута", row)}>
{/* Вложенные TreeGridRow */}
</TreeGrid>
3. onExpandRow
- Тип:
function(row: HTMLElement) - Описание: Колбэк, срабатывающий при раскрытии строки.
- Обязательное: Нет
<TreeGrid onExpandRow={(row) => console.log("Строка раскрыта", row)}>
{/* Вложенные TreeGridRow */}
</TreeGrid>
TreeGridRow
Компонент TreeGridRow представляет собой строку (<tr>) иерархии. Его свойства определяют уровень, позицию и количество элементов на определённом уровне.
1. level
- Тип:
number - Описание: Уровень в иерархической структуре, где 1 — это корневой уровень.
- Обязательное: Да
2. positionInSet
- Тип:
number - Описание: Позиция элемента на уровне, начиная с 1.
- Обязательное: Да
3. setSize
- Тип:
number - Описание: Общее количество элементов на этом уровне.
- Обязательное: Да
4. isExpanded
- Тип:
boolean - Описание: Указывает, развернута или свернута строка. Устанавливает атрибут
aria-expanded. - Обязательное: Нет
Пример
<TreeGridRow level={2} positionInSet={1} setSize={3} isExpanded={true}>
<TreeGridCell>{(props) => <button {...props}>Элемент 1</button>}</TreeGridCell>
<TreeGridCell>{(props) => <button {...props}>Элемент 2</button>}</TreeGridCell>
</TreeGridRow>
TreeGridCell
TreeGridCell представляет собой ячейку (<td>) внутри строки. Она принимает функцию в качестве дочернего элемента для передачи свойств в интерактивные элементы внутри ячейки.
Пример
<TreeGridCell>
{(props) => (
<button onClick={() => console.log("Кликнуто")} {...props}>
Действие
</button>
)}
</TreeGridCell>
Полный пример TreeGrid
В этом примере создаётся иерархическая структура с тремя строками на разных уровнях:
import { TreeGrid, TreeGridRow, TreeGridCell } from '@wordpress/components';
function FileTree() {
return (
<TreeGrid
onFocusRow={(event, startRow, destinationRow) =>
console.log('Перемещение фокуса')
}
onCollapseRow={(row) => console.log('Строка свернута:', row)}
onExpandRow={(row) => console.log('Строка раскрыта:', row)}
>
<TreeGridRow level={1} positionInSet={1} setSize={2} isExpanded={true}>
<TreeGridCell>
{(props) => <button {...props}>Папка 1</button>}
</TreeGridCell>
<TreeGridCell>
{(props) => <button {...props}>Открыть</button>}
</TreeGridCell>
</TreeGridRow>
<TreeGridRow level={1} positionInSet={2} setSize={2} isExpanded={false}>
<TreeGridCell>
{(props) => <button {...props}>Папка 2</button>}
</TreeGridCell>
<TreeGridCell>
{(props) => <button {...props}>Открыть</button>}
</TreeGridCell>
</TreeGridRow>
<TreeGridRow level={2} positionInSet={1} setSize={1}>
<TreeGridCell>
{(props) => <button {...props}>Файл 1</button>}
</TreeGridCell>
<TreeGridCell>
{(props) => <button {...props}>Просмотр</button>}
</TreeGridCell>
</TreeGridRow>
</TreeGrid>
);
}
Заключение
Компонент TreeGrid предоставляет мощные инструменты для создания сложных иерархических интерфейсов с поддержкой навигации с клавиатуры. Этот компонент особенно полезен для создания структур, где требуется вложенность и взаимодействие, такие как менеджеры файлов или каталоги.