Tree

Многоуровневый раскрывающийся список в виде дерева с возможностью выбора (selection) и выделения (checkbox).

Обязательным параметром является только массив items. Формат следующий:

type TreeItem = {
    /**
     * Уникальный идентификатор элемента.
     */
    key: React.Key;
    /**
     * Заголовок элемента.
     */
    title?: React.ReactNode | ((data: TreeItem) => React.ReactNode);
    /**
     * Classname для текущего элемента.
     */
    className?: string;
    /**
     * Стиль для текущего элемента.
     */
    style?: React.CSSProperties;
    /**
     * Флаг выключения элемента.
     * @default false
     */
    disabled?: boolean;
    /**
     * Иконка для текущего элемента.
     */
    icon?: React.ReactNode;
    /**
     * Дочерние items.
     */
    children?: TreeItem[];
    /**
     * Контент справа.
     */
    contentRight?: React.ReactNode;
};

Примеры​

Live Editor
Result
Open in CodeSandbox

Drag'n'Drop​

Для включения режима Drag and Drop нужно включить свойство draggable. Также имеется ряд обработчиков, однако наиболее важным из них является onDrop. Для более индивидуальной настройки логики работы механизма Drag'n'Drop данный обработчик настраивается на стороне клиента. Примеры ниже будут более наглядными:

Данный пример базовый, покрывающий наиболее распространенные сценарии использования. Также присутствует возможность создавать из крайних элементов группы, вкладывая в них другие элементы.

Live Editor
Result
Open in CodeSandbox

Пример с autoExpandParent​

Иногда может возникнуть необходимость раскрыть дерево до нужного ключа пробросив только его в поле expanded. В стандартном сценарии ничего не произойдет, т.к. вышестоящие уровни будут закрыты. Поэтому данное поведение можно реализовать с помощью свойства autoExpandParent.

Live Editor
Result
Open in CodeSandbox