radix_leptos_primitives/components/

tree_view.rs

use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;

/// Tree View component for displaying hierarchical data
#[component]
pub fn TreeView(
    /// Tree data
    #[prop(optional)]
    data: Option<Vec<TreeNode>>,
    /// Whether to show expand/collapse icons
    #[prop(optional)]
    show_icons: Option<bool>,
    /// Whether to allow multiple selection
    #[prop(optional)]
    multiple: Option<bool>,
    /// Whether to allow checkbox selection
    #[prop(optional)]
    checkable: Option<bool>,
    /// Whether to show lines connecting nodes
    #[prop(optional)]
    show_lines: Option<bool>,
    /// Whether to show node icons
    #[prop(optional)]
    show_node_icons: Option<bool>,
    /// Callback when node is selected
    #[prop(optional)]
    on_select: Option<Callback<TreeNode>>,
    /// Callback when node is expanded/collapsed
    #[prop(optional)]
    on_expand: Option<Callback<TreeNode>>,
    /// Callback when node is checked/unchecked
    #[prop(optional)]
    on_check: Option<Callback<TreeNode>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    #[prop(optional)]
    children: Option<Children>,
) -> impl IntoView {
    let data = data.unwrap_or_default();
    let show_icons = show_icons.unwrap_or(true);
    let multiple = multiple.unwrap_or(false);
    let checkable = checkable.unwrap_or(false);
    let show_lines = show_lines.unwrap_or(false);
    let show_node_icons = show_node_icons.unwrap_or(true);

    let class = "tree-view".to_string();

    let style = style.unwrap_or_default();

    view! {
        <div class=class style=style role="tree">
            {children.map(|c| c())}
        </div>
    }
}

/// Tree Node structure
#[derive(Debug, Clone, PartialEq, Default)]
pub struct TreeNode {
    pub id: String,
    pub label: String,
    pub value: Option<String>,
    pub icon: Option<String>,
    pub children: Option<Vec<TreeNode>>,
    pub expanded: bool,
    pub _selected: bool,
    pub _checked: bool,
    pub _disabled: bool,
    pub level: usize,
    pub parent_id: Option<String>,
}

/// Tree Node component
#[component]
pub fn TreeNode(
    /// Node data
    node: TreeNode,
    /// Whether to show expand/collapse icons
    #[prop(optional)]
    show_icons: Option<bool>,
    /// Whether to allow multiple selection
    #[prop(optional)]
    multiple: Option<bool>,
    /// Whether to allow checkbox selection
    #[prop(optional)]
    checkable: Option<bool>,
    /// Whether to show lines connecting nodes
    #[prop(optional)]
    show_lines: Option<bool>,
    /// Whether to show node icons
    #[prop(optional)]
    show_node_icons: Option<bool>,
    /// Callback when node is selected
    #[prop(optional)]
    on_select: Option<Callback<TreeNode>>,
    /// Callback when node is expanded/collapsed
    #[prop(optional)]
    on_expand: Option<Callback<TreeNode>>,
    /// Callback when node is checked/unchecked
    #[prop(optional)]
    on_check: Option<Callback<TreeNode>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    #[prop(optional)]
    children: Option<Children>,
) -> impl IntoView {
    let show_icons = show_icons.unwrap_or(true);
    let multiple = multiple.unwrap_or(false);
    let checkable = checkable.unwrap_or(false);
    let show_lines = show_lines.unwrap_or(false);
    let show_node_icons = show_node_icons.unwrap_or(true);

    let class = format!(
        "tree-node {} {} {} {} {}",
        if node.expanded {
            "expanded"
        } else {
            "collapsed"
        },
        if node._selected {
            "selected"
        } else {
            "unselected"
        },
        if node._disabled {
            "disabled"
        } else {
            "enabled"
        },
        node.level * 20,
        style.clone().unwrap_or_default()
    );

    let node_clone = node.clone();
    let handle_select = move |_| {
        if !node_clone._disabled {
            if let Some(callback) = on_select {
                callback.run(node_clone.clone());
            }
        }
    };

    let node_clone = node.clone();
    let handle_expand = move |_: ()| {
        if !node_clone._disabled {
            if let Some(callback) = on_expand {
                callback.run(node_clone.clone());
            }
        }
    };

    let node_clone = node.clone();
    let handle_check = move |_| {
        if !node_clone._disabled {
            if let Some(callback) = on_check {
                callback.run(node_clone.clone());
            }
        }
    };

    view! {
        <div class=class style=style role="treeitem" aria-expanded=node.expanded aria-selected=node._selected>
            <div class="tree-node-content">
                {if show_icons && node.children.is_some() {
                    view! {
                        <button
                            class="tree-expand-icon"
                            type="button"
                        >
                        </button>
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}

                {if checkable {
                    view! {
                        <input
                            class="tree-checkbox"
                            type="checkbox"
                            checked=node._checked
                            disabled=node._disabled
                            on:change=handle_check
                        />
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}

                {if show_node_icons && node.icon.is_some() {
                    view! {
                        <span class="tree-node-icon">{node.icon.clone().unwrap()}</span>
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}

                <span class="tree-node-label" on:click=handle_select>
                    {node.label.clone()}
                </span>
            </div>

            {if node.expanded && node.children.is_some() {
                view! {
                    <div class="tree-children" role="group">
                        {node.children.clone().unwrap().into_iter().map(|child| {
                            view! {
                                <TreeNode
                                    node=child
                                    show_icons=show_icons
                                    multiple=multiple
                                    checkable=checkable
                                    show_lines=show_lines
                                    show_node_icons=show_node_icons
                                    on_select=on_select.unwrap_or_else(|| Callback::new(|_| {}))
                                    on_expand=on_expand.unwrap_or_else(|| Callback::new(|_| {}))
                                    on_check=on_check.unwrap_or_else(|| Callback::new(|_| {}))
                                >
                                    <></>
                                </TreeNode>
                            }
                        }).collect::<Vec<_>>()}
                    </div>
                }.into_any()
            } else {
                view! { <div></div> }.into_any()
            }}

            {children.map(|c| c())}
        </div>
    }
}

/// Tree View Search component
#[component]
pub fn TreeViewSearch(
    /// Search query value
    #[prop(optional)]
    value: Option<String>,
    /// Placeholder text
    #[prop(optional)]
    placeholder: Option<String>,
    /// Whether the search is disabled
    #[prop(optional)]
    disabled: Option<bool>,
    /// Callback when search query changes
    #[prop(optional)]
    on_change: Option<Callback<String>>,
    /// Callback when search is cleared
    #[prop(optional)]
    on_clear: Option<Callback<()>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    #[prop(optional)]
    children: Option<Children>,
) -> impl IntoView {
    let value = value.unwrap_or_default();
    let placeholder = placeholder.unwrap_or_else(|| "Search tree...".to_string());
    let disabled = disabled.unwrap_or(false);
    let class = format!(
        "tree-search {} {}",
        class.as_deref().unwrap_or(""),
        style.as_deref().unwrap_or("")
    );

    view! {
        <input
            class=class
            style=style
            type="text"
            placeholder=placeholder
            value=value
            disabled=disabled
            on:input=move |ev| {
                if let Some(callback) = on_change {
                    callback.run(event_target_value(&ev));
                }
            }
        />
    }
}

/// Tree View Actions component
#[component]
pub fn TreeViewActions(
    /// Callback when expand all is clicked
    #[prop(optional)]
    on_expand_all: Option<Callback<()>>,
    /// Callback when collapse all is clicked
    #[prop(optional)]
    on_collapse_all: Option<Callback<()>>,
    /// Callback when select all is clicked
    #[prop(optional)]
    on_select_all: Option<Callback<()>>,
    /// Callback when deselect all is clicked
    #[prop(optional)]
    on_deselect_all: Option<Callback<()>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    #[prop(optional)]
    children: Option<Children>,
) -> impl IntoView {
    let class = format!("tree-actions {}", class.unwrap_or_default());
    let style = style.unwrap_or_default();

    view! {
        <div class=class style=style>
            {children.map(|c| c())}
        </div>
    }
}

#[cfg(test)]
mod tests {
    use crate::TreeNode;
use crate::utils::{merge_optional_classes, generate_id};

    // Component structure tests
    #[test]
    fn test_treeview_component_creation() {}

    #[test]
    fn test_treenode_component_creation() {}

    #[test]
    fn test_treeview_search_component_creation() {}

    #[test]
    fn test_treeview_actions_component_creation() {}

    // Data structure tests
    #[test]
    fn test_treenode_struct() {
        let node = TreeNode {
            id: "node1".to_string(),
            label: "Node 1".to_string(),
            value: Some("value1".to_string()),
            icon: Some("📁".to_string()),
            children: Some(Vec::new()),
            expanded: false,
            _selected: false,
            _checked: false,
            _disabled: false,
            level: 0,
            parent_id: None,
        };
        assert_eq!(node.id, "node1");
        assert_eq!(node.label, "Node 1");
        assert!(node.value.is_some());
        assert!(node.icon.is_some());
        assert!(node.children.is_some());
        assert!(!node.expanded);
        assert!(!node._selected);
        assert!(!node._checked);
        assert!(!node._disabled);
        assert_eq!(node.level, 0);
        assert!(node.parent_id.is_none());
    }

    #[test]
    fn test_treenode_default() {
        let node = TreeNode::default();
        assert_eq!(node.id, "");
        assert_eq!(node.label, "");
        assert!(node.value.is_none());
        assert!(node.icon.is_none());
        assert!(node.children.is_none());
        assert!(!node.expanded);
        assert!(!node._selected);
        assert!(!node._checked);
        assert!(!node._disabled);
        assert_eq!(node.level, 0);
        assert!(node.parent_id.is_none());
    }

    // Props and state tests
    #[test]
    fn test_treeview_props_handling() {}

    #[test]
    fn test_treeview_data_handling() {}

    #[test]
    fn test_treeview_show_icons() {}

    #[test]
    fn test_treeview_multiple_selection_2() {}

    #[test]
    fn test_treeview_checkable() {}

    #[test]
    fn test_treeview_show_lines() {}

    #[test]
    fn test_treeview_show_node_icons() {}

    // Event handling tests
    #[test]
    fn test_treeview_node_select() {}

    #[test]
    fn test_treeview_node_expand() {}

    #[test]
    fn test_treeview_node_check() {}

    #[test]
    fn test_treeview_search_change() {}

    #[test]
    fn test_treeview_search_clear() {}

    #[test]
    fn test_treeview_expand_all() {}

    #[test]
    fn test_treeview_collapse_all() {}

    #[test]
    fn test_treeview_select_all() {}

    #[test]
    fn test_treeview_deselect_all() {}

    // Accessibility tests
    #[test]
    fn test_treeview_aria_attributes() {}

    #[test]
    fn test_treeview_keyboard_navigation() {}

    #[test]
    fn test_treeview_screen_reader_support() {}

    #[test]
    fn test_treeview_focus_management() {}

    // Hierarchical data tests
    #[test]
    fn test_treeview_nested_structure() {}

    #[test]
    fn test_treeview_node_levels() {}

    #[test]
    fn test_treeview_parent_child_relationships() {}

    // Expand/collapse tests
    #[test]
    fn test_treeview_expand_node() {}

    #[test]
    fn test_treeview_collapse_node() {}

    #[test]
    fn test_treeview_expand_all_nodes() {}

    #[test]
    fn test_treeview_collapse_all_nodes() {}

    // Selection tests
    #[test]
    fn test_treeview_single_selection() {}

    #[test]
    fn test_treeview_checkbox_selection() {}

    #[test]
    fn test_treeview_selection_state() {}

    // Search functionality tests
    #[test]
    fn test_treeview_search_filtering() {}

    #[test]
    fn test_treeview_search_highlighting() {}

    #[test]
    fn test_treeview_search_expand_matches() {}

    // Performance tests
    #[test]
    fn test_treeview_large_dataset() {}

    #[test]
    fn test_treeview_deep_nesting() {}

    #[test]
    fn test_treeview_rendering_performance() {}

    // Integration tests
    #[test]
    fn test_treeview_full_workflow() {}

    #[test]
    fn test_treeview_with_search() {}

    #[test]
    fn test_treeview_with_actions() {}

    // Edge case tests
    #[test]
    fn test_treeview_empty_data() {}

    #[test]
    fn test_treeview_single_node() {}

    #[test]
    fn test_treeviewdisabled_nodes() {}

    #[test]
    fn test_treeview_duplicate_ids() {}

    // Styling tests
    #[test]
    fn test_treeview_custom_classes() {}

    #[test]
    fn test_treeview_custom_styles() {}

    #[test]
    fn test_treeview_responsive_design() {}

    #[test]
    fn test_treeview_icon_display() {}

    #[test]
    fn test_treeview_line_display() {}
}