Component Tree

Tree

A hierarchical data structure for displaying nested information.

Design Rationale

The Tree component uses a different construction pattern from other components: tree(state, nodes) requires both TreeState and &[TreeNode] as constructor parameters.

This design choice was made because:

• State and data are fundamental: Unlike styling properties that can be added later, the tree's data structure (TreeNode) and state management (TreeState) are core to its functionality and must exist at creation time
• Consistency with data-driven components: Tree represents hierarchical data, similar to how a data table or list view requires data at initialization
• Avoiding partial states: Allowing creation without data could lead to inconsistent states where the component exists but has no content

If you need to create a tree dynamically, consider passing an empty slice initially and populating it later through the state management.

Example

use yororen_ui::component::{tree, tree_data::{TreeNode, TreeState, SelectionMode, ArcTreeNode};

let state = TreeState::new();
let nodes = vec![
    TreeNode::new("root", ArcTreeNode::new("Root"))
        .expanded(true)
        .children(vec![
            TreeNode::new("child1", ArcTreeNode::new("Child 1")),
            TreeNode::new("child2", ArcTreeNode::new("Child 2")),
        ])
];

tree(state, &nodes)
    .selection_mode(SelectionMode::Multiple)
    .show_checkbox(true);

When to use

• File browsers
• Organizational charts
• Nested categories
• Directory structures

API

Constructor

• tree(state, nodes): Create a new tree

State Management

• TreeState: Manages expanded/collapsed/selected/checked state
• TreeState::new(): Create new state
• state.set_expanded(id, bool): Set node expansion
• state.is_expanded(id): Check if expanded
• state.set_selected(id, bool): Set selection
• state.is_selected(id): Check if selected

Tree Methods

• .selection_mode(SelectionMode): Single/Multiple/None
• .show_checkbox(bool): Display checkboxes
• .draggable(bool): Enable drag and drop
• .indent(px): Indent width
• .row_height(px): Row height for virtualization
• .on_click(handler): Click handler
• .on_select(handler): Selection handler
• .on_toggle_expand(handler): Expand/collapse handler
• .toggle_expand(id): Toggle programmatically
• .expand(id): Expand node
• .collapse(id): Collapse node
• .expand_all(): Expand all nodes
• .collapse_all(): Collapse all nodes

SelectionMode

• SelectionMode::Single: One node at a time
• SelectionMode::Multiple: Multiple nodes
• SelectionMode::None: No selection

TreeCheckedState

• TreeCheckedState::Checked
• TreeCheckedState::Unchecked
• TreeCheckedState::Indeterminate

TreeNode

• TreeNode::new(id, data): Create node
• .expanded(bool): Initial expansion state
• .selected(bool): Initial selection
• .checked(TreeCheckedState): Checkbox state
• .children(vec): Child nodes
• .has_children(bool): Mark as having children

TreeNodeData Trait

Implement for custom data types:

impl TreeNodeData for MyData {
    fn label(&self) -> &str { &self.name }
    fn icon(&self) -> Option<IconName> { self.icon }
    fn disabled(&self) -> bool { self.is_disabled }
}

Notes

• Tree uses flattening for rendering - only visible nodes are rendered
• State is managed externally via TreeState
• For large trees, consider virtualization with FlatTreeNode