zino-dioxus 0.3.3

Dioxus components for zino.
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

use super::DataEntry;
use crate::{class::Class, format_class};
use dioxus::prelude::*;
use std::borrow::Cow;
use zino_core::error::Error;

/// A control that provides a menu of data entries.
pub fn DataSelect<'a, T: DataEntry>(cx: Scope<'a, DataSelectProps<'a, T>>) -> Element {
    let class = format_class!(cx, "select");
    let fullwidth_class = Class::check("is-fullwidth", cx.props.fullwidth);
    if let Some(Ok(entries)) = cx.props.future.value() {
        render! {
            div {
                class: "{class} {fullwidth_class}",
                select {
                    name: "{cx.props.name}",
                    required: cx.props.required,
                    onmounted: move |_event| {
                        if let Some(handler) = cx.props.on_select.as_ref() {
                            if let Some(entry) = entries.first() {
                                handler.call(entry);
                            }
                        }
                    },
                    onchange: move |event| {
                        if let Some(handler) = cx.props.on_select.as_ref() {
                           let value = event.inner().value.as_str();
                           if let Some(entry) = entries.iter().find(|d| d.value() == value) {
                               handler.call(entry);
                           }
                        }
                    },
                    for entry in entries {
                        option {
                            key: "{entry.key()}",
                            value: "{entry.value()}",
                            "{entry.label()}"
                        }
                    }
                }
            }
        }
    } else {
        render! {
            div {
                class: "{class} {fullwidth_class}",
                select {
                    name: "{cx.props.name}",
                    required: cx.props.required,
                }
            }
        }
    }
}

/// The [`DataSelect`] properties struct for the configuration of the component.
#[derive(Props)]
pub struct DataSelectProps<'a, T: 'static> {
    /// The class attribute for the component.
    #[props(into)]
    pub class: Option<Class<'a>>,
    /// A future value which represents the data entries.
    pub future: &'a UseFuture<Result<Vec<T>, Error>>,
    /// The name of the control.
    #[props(into)]
    pub name: Cow<'a, str>,
    /// A flag to determine whether the control is fullwidth or not.
    #[props(default = false)]
    pub fullwidth: bool,
    /// A flag to determine whether the control is required or not.
    #[props(default = false)]
    pub required: bool,
    /// An event handler to be called when the choice is selected.
    pub on_select: Option<EventHandler<'a, &'a T>>,
}