flams_web_utils/components/
trees.rs

1#![allow(clippy::must_use_candidate)]
2use crate::inject_css;
3use leptos::prelude::*;
4
5#[component]
6pub fn Tree<T: IntoView + 'static>(children: TypedChildren<T>) -> impl IntoView {
7    let children = children.into_inner();
8    inject_css("flams-treeview", include_str!("trees.css"));
9    view! {
10        <ul class="flams-treeview">{children()}</ul>
11    }
12}
13
14#[component]
15pub fn Leaf<T: IntoView + 'static>(children: TypedChildren<T>) -> impl IntoView {
16    let children = children.into_inner();
17    view! {
18        <li class="flams-treeview-li">{children()}</li>
19    }
20}
21
22#[component]
23pub fn Subtree<T: IntoView + 'static>(
24    header: super::Header,
25    children: TypedChildren<T>,
26    #[prop(default = false)] expanded: bool,
27) -> impl IntoView {
28    let children = children.into_inner();
29    let children = move || {
30        view! {
31            <summary class="flams-treeview-summary">
32                {(header.children)()}
33            </summary>
34            <Tree>{children()}</Tree>
35        }
36    };
37    let spread = if expanded {
38        leptos::either::Either::Left(view!(<{..} open="true"/>))
39    } else {
40        leptos::either::Either::Right(view!(<{..}/>))
41    };
42    view! {
43        <li class="flams-treeview-li">
44            <details {..spread}>{children()}</details>
45        </li>
46    }
47}
48
49#[component]
50pub fn LazySubtree<T: IntoView + 'static>(
51    header: super::Header,
52    children: TypedChildrenMut<T>,
53) -> impl IntoView {
54    let mut children = children.into_inner();
55    let expanded = RwSignal::new(false);
56    let children = move || {
57        view! {
58            <summary class="flams-treeview-summary" on:click=move |_| {expanded.update(|b| *b = !*b)}>
59                {(header.children)()}
60            </summary>
61        <Tree>{move || if expanded.get() {
62            let children = children();
63            Some(children)
64        } else {None}
65        }</Tree>
66        }
67    };
68    view! {
69        <li class="flams-treeview-li"><details>
70            {children()}
71        </details></li>
72    }
73}