hikari-components 0.3.12

Core UI components (buttons, inputs, tables, modals) for the Hikari design system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

// hi-components/src/data/node.rs
// TreeNode component for tree data structures

#![expect(clippy::needless_update)]

use hikari_palette::classes::{ClassesBuilder, TreeNodeClass};

use crate::{
    data::{TreeNodeArrow, TreeNodeContent, TreeNodeLabel},
    prelude::*,
};

#[derive(Clone, PartialEq, Debug)]
pub struct TreeNodeData {
    pub key: String,
    pub label: String,
    pub children: Option<Vec<TreeNodeData>>,
    pub disabled: bool,
}

#[define_props]
pub struct TreeNodeProps {
    pub node_key: String,

    pub label: String,

    pub node_children: Option<Vec<TreeNodeData>>,

    #[default]
    pub icon: Option<Element>,

    #[default]
    pub disabled: bool,

    #[default]
    pub expanded: bool,

    #[default]
    pub selected: bool,

    #[default]
    pub level: usize,

    #[default]
    pub class: String,

    #[default]
    pub onclick: Option<EventHandler<MouseEvent>>,
}

///
#[component]
pub fn TreeNode(props: TreeNodeProps) -> Element {
    let mut is_expanded = use_signal(|| props.expanded);
    let has_children = props.node_children.is_some();

    let node_classes = ClassesBuilder::new()
        .add(TreeNodeClass::TreeNode)
        .add_if(TreeNodeClass::TreeNodeSelected, || props.selected)
        .add_if(TreeNodeClass::TreeNodeDisabled, || props.disabled)
        .add_if(TreeNodeClass::TreeNodeParent, || has_children)
        .add_raw(&props.class)
        .build();

    let node_key = props.node_key.clone();
    let level = props.level;

    // Pre-build child nodes as Vec<Element> to avoid let statements in for loop
    let child_nodes: Vec<Element> = if has_children && is_expanded.get() {
        if let Some(children) = &props.node_children {
            children
                .iter()
                .map(|child| {
                    rsx! {
                        TreeNode {
                            node_key: child.key.clone(),
                            label: child.label.clone(),
                            node_children: child.children.clone(),
                            disabled: child.disabled,
                            level: props.level + 1,
                        }
                    }
                })
                .collect()
        } else {
            vec![]
        }
    } else {
        vec![]
    };

    // Clone signals for use in closures
    let is_expanded_for_click = is_expanded.clone();
    let is_expanded_for_arrow = is_expanded.clone();
    let is_expanded_for_children = is_expanded.clone();

    rsx! {
        li {
            class: node_classes,
            role: "treeitem",
            "data-node-key": node_key,
            "data-level": level,
            aria_expanded: if has_children { is_expanded.get().to_string() } else { "false".to_string() },
            aria_selected: props.selected.to_string(),
            aria_disabled: props.disabled.to_string(),

            TreeNodeContent {
                level: props.level,
                disabled: props.disabled,
                class: props.class.clone(),
                onclick: EventHandler::new(move |e| {
                    if !props.disabled {
                        if has_children {
                            is_expanded_for_click.set(!is_expanded_for_click.get());
                        }

                        if let Some(handler) = props.onclick.as_ref() {
                            handler.call(e);
                        }
                    }
                }),

                // Expand/collapse arrow
                TreeNodeArrow {
                    expanded: is_expanded_for_arrow.get(),
                    disabled: props.disabled,
                    onclick: EventHandler::new(move |e: MouseEvent| {
                        e.stop_propagation();
                        if !props.disabled {
                            is_expanded_for_arrow.set(!is_expanded_for_arrow.get());
                        }
                    }),
                }

                // Node label with optional icon
                TreeNodeLabel { label: props.label.clone(), icon: props.icon.clone() }
            }

            // Render children if expanded
            if has_children && is_expanded_for_children.get() {
                ul {
                    class: "hi-tree-node-children",
                    role: "group",
                    ..child_nodes
                }
            }
        }
    }
}