euv-example 0.3.6

An example application demonstrating the euv UI framework with reactive signals, custom components, and WebAssembly.
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
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

use crate::*;

/// Reactive state for the select and textarea demo feature.
#[derive(Clone, Copy, Data, New)]
pub struct UseSelect {
    /// The selected fruit value.
    #[get(pub, type(copy))]
    #[set(pub)]
    pub selected_fruit: Signal<String>,
    /// The selected country value.
    #[get(pub, type(copy))]
    #[set(pub)]
    pub selected_country: Signal<String>,
    /// The selected city value.
    #[get(pub, type(copy))]
    #[set(pub)]
    pub selected_city: Signal<String>,
    /// The feedback result message.
    #[get(pub, type(copy))]
    #[set(pub)]
    pub feedback: Signal<String>,
    /// The textarea content.
    #[get(pub, type(copy))]
    #[set(pub)]
    pub textarea_content: Signal<String>,
}

/// Creates select demo state signals wrapped in a `UseSelect` struct.
///
/// # Returns
///
/// - `UseSelect`: The select state.
pub fn use_select() -> UseSelect {
    UseSelect::new(
        use_signal(|| "apple".to_string()),
        use_signal(|| "".to_string()),
        use_signal(|| "".to_string()),
        use_signal(|| "".to_string()),
        use_signal(|| "".to_string()),
    )
}

/// Creates a change event handler that updates the country and resets the city.
///
/// # Arguments
///
/// - `UseSelect`: The select state.
///
/// # Returns
///
/// - `NativeEventHandler`: A change handler for the country select.
pub fn select_on_country_change(state: UseSelect) -> NativeEventHandler {
    NativeEventHandler::new(NativeEventName::Change, move |event: NativeEvent| {
        if let NativeEvent::Change(change_event) = event {
            state.selected_country.set(change_event.get_value().clone());
            state.selected_city.set("".to_string());
        }
    })
}

/// Creates a click event handler that submits the textarea feedback.
///
/// # Arguments
///
/// - `UseSelect`: The select state.
///
/// # Returns
///
/// - `NativeEventHandler`: A click handler to submit feedback.
pub fn select_on_submit_feedback(state: UseSelect) -> NativeEventHandler {
    NativeEventHandler::new(NativeEventName::Click, move |_event: NativeEvent| {
        let content: String = state.textarea_content.get();
        if content.trim().is_empty() {
            state
                .feedback
                .set("Please enter some feedback.".to_string());
        } else if content.len() > 200 {
            state
                .feedback
                .set("Feedback is too long (max 200 chars).".to_string());
        } else {
            state
                .feedback
                .set(format!("Thank you for your feedback: \"{}\"", content));
            state.textarea_content.set("".to_string());
        }
    })
}