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

use yew::prelude::*;

/// # Properties for a [SelectOptgroup] component.
#[derive(Properties, Clone, PartialEq)]
pub struct SelectOptgroupProps {
    /// Label for the group
    pub label: AttrValue,
    /// Option or OptGroup children
    #[prop_or_default]
    pub children: Children,
    /// Optional CSS classes
    #[prop_or_default]
    pub class: Classes,
}

/// # Properties for [SelectOption]
#[derive(Properties, Clone, PartialEq)]
pub struct SelectOptionProps {
    /// Visible label
    pub label: AttrValue,
    /// Value for the select when this option is selected
    #[prop_or_default]
    pub value: AttrValue,
    /// When true, this option is selected. Only one should be selected unless
    /// multiple is set for the select
    #[prop_or_default]
    pub selected: bool,
    /// Optional CSS classes
    #[prop_or_default]
    pub class: Classes,
}


/// # Option group
///
/// Use to separate options inside a select. See [SelectOptgroupProps]
/// for a list of properties.
///
/// It can typically be used inside a [crate::component::form::FormControl] with
/// [crate::component::form::FormControlType::Select] type
#[function_component]
pub fn SelectOptgroup(props: &SelectOptgroupProps) -> Html {
    html! {
        <optgroup label={ props.label.clone() } class={ props.class.clone() }>
            { for props.children.iter() }
        </optgroup>
    }
}

/// # Select option
///
/// Options inside a select. See [SelectOptionProps] for a list of properties.
///
/// It can typically be used inside a [crate::component::form::FormControl] with
/// [crate::component::form::FormControlType::Select] type, or grouped inside a [SelectOptgroup]
#[function_component]
pub fn SelectOption(props: &SelectOptionProps) -> Html {
    html! {
        <option value={ props.value.clone() } class={ props.class.clone() }
                selected={ props.selected }>
            { props.label.clone()}
        </option>
    }
}