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
use *;
use component_doc;
/// Event callbacks for focus, collapse, and host integration.
///
/// # When to use
///
/// - Persisting focus navigation or collapse state to the host store.
/// - Logging user interactions during integration testing.
///
/// # Usage
///
/// Pass `events` with `on_focus_change` and `on_collapse_change` on `DiscussionThread`.
///
/// # Examples
///
/// ## Event log panel
/// Displays focus and collapse events fired by the thread.
/// <!-- preview -->
/// ```rust,ignore
/// use crate::preview::fixtures::deep_thread;
/// use crate::{DiscussionEvents, DiscussionFeatures, DiscussionFocus, DiscussionThread, DiscussionViewMode};
/// use leptos::prelude::*;
/// use std::collections::HashSet;
/// let (replies, _set_replies) = signal(deep_thread());
/// let (focus, set_focus) = signal(DiscussionFocus::Root);
/// let (view_mode, set_view_mode) = signal(DiscussionViewMode::Tree);
/// let (collapsed, set_collapsed) = signal(HashSet::<String>::new());
/// let (log, set_log) = signal(String::new());
/// let events = DiscussionEvents {
/// on_focus_change: Some(Callback::new(move |f| {
/// set_log.set(format!("focus: {f:?}"));
/// })),
/// on_collapse_change: Some(Callback::new(move |(id, c)| {
/// set_log.set(format!("collapse: {id} -> {c}"));
/// })),
/// ..Default::default()
/// };
/// let features = DiscussionFeatures::MARKDOWN | DiscussionFeatures::FOCUS_NAVIGATION;
/// view! {
/// <div data-testid="discussion-events-preview">
/// <pre data-testid="discussion-events-log">{move || log.get()}</pre>
/// <DiscussionThread
/// replies=Signal::derive(move || replies.get())
/// focus=Signal::derive(move || focus.get())
/// set_focus=set_focus
/// view_mode=Signal::derive(move || view_mode.get())
/// set_view_mode=set_view_mode
/// collapsed=Signal::derive(move || collapsed.get())
/// set_collapsed=set_collapsed
/// events=events
/// features=features
/// />
/// </div>
/// }
/// ```