orbital-discussion 0.1.1

Composable discussion and reply-thread components for Orbital
Documentation 
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

use leptos::prelude::*;
use orbital_core_components::{Material, MaterialElevation, MaterialVariant, ScrollArea};
use orbital_style::inject_style;
use orbital_theme::use_theme_options;

use crate::DiscussionSlots;

use super::styles::{density_modifier_class, discussion_styles};
use super::DiscussionDefaultThreadToolbar;

/// Scrollable shell for a discussion thread body.
#[component]
pub fn DiscussionThreadRoot(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional)] slots: DiscussionSlots,
    children: Children,
) -> impl IntoView {
    inject_style("orbital-discussion", discussion_styles());

    let theme_options = use_theme_options();
    let density_class =
        Memo::new(move |_| density_modifier_class(theme_options.get().density).to_string());

    let root_class = move || {
        let mut classes = vec!["orbital-discussion".to_string()];
        let density = density_class.get();
        if !density.is_empty() {
            classes.push(density.to_string());
        }
        if let Some(extra) = class.get() {
            if !extra.is_empty() {
                classes.push(extra);
            }
        }
        classes.join(" ")
    };

    view! {
        <div data-orbital-discussion="" class=root_class>
            {if let Some(toolbar) = slots.thread_toolbar {
                (toolbar.children)().into_any()
            } else {
                view! { <DiscussionDefaultThreadToolbar /> }.into_any()
            }}
            <Material variant=MaterialVariant::Solid elevation=MaterialElevation::Resting>
                <ScrollArea
                    class="orbital-discussion__scroll"
                    style="display: block; width: 100%; height: 480px; box-sizing: border-box;"
                >
                    {children()}
                </ScrollArea>
            </Material>
            {slots.composer.map(|composer| view! {
                <div class="orbital-discussion__composer-slot">{(composer.children)()}</div>
            })}
        </div>
    }
}