dioxus-tw-components 0.2.11

Components made for Dioxus
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

use dioxus::prelude::*;

#[derive(Clone)]
struct RadioGroupCtx {
    value: Signal<String>,
    default_value: Signal<String>,
    onchange: EventHandler<MouseEvent>,
}

#[derive(Clone, PartialEq, Props)]
pub struct RadioGroupProps {
    #[props(extends = div, extends = GlobalAttributes)]
    attributes: Vec<Attribute>,
    children: Element,

    #[props(optional)]
    default_value: String,

    #[props(optional)]
    value: Signal<String>,

    #[props(optional)]
    onchange: EventHandler<MouseEvent>,
}

#[component]
pub fn RadioGroup(mut props: RadioGroupProps) -> Element {
    let mut default_value = use_signal(|| props.default_value.clone());

    use_context_provider(|| RadioGroupCtx {
        value: props.value,
        default_value,
        onchange: props.onchange,
    });

    // Sync default_value from prop when it changes.
    // peek() avoids subscription; write only when different to prevent re-render loops.
    if *default_value.peek() != props.default_value {
        *default_value.write() = props.default_value.clone();
    }

    let default_classes = "radio";
    crate::setup_class_attribute(&mut props.attributes, default_classes);

    rsx! {
        div { ..props.attributes, {props.children} }
    }
}

#[derive(Clone, PartialEq, Props)]
pub struct RadioItemProps {
    #[props(extends = input, extends = GlobalAttributes)]
    attributes: Vec<Attribute>,
    value: String,
}

#[component]
pub fn RadioItem(mut props: RadioItemProps) -> Element {
    let mut state = use_context::<RadioGroupCtx>();

    let default_classes = "radio-input";
    crate::setup_class_attribute(&mut props.attributes, default_classes);

    let value = props.value.clone();
    let checked = use_memo(move || {
        if state.value.read().is_empty() {
            *state.default_value.read() == value
        } else {
            (state.value)() == value
        }
    });

    rsx! {
        input {
            r#type: "radio",
            checked,
            onclick: move |event| {
                state.value.set(props.value.clone());
                state.onchange.call(event);
            },
            ..props.attributes,
        }
    }
}