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

/// The DualListSelectorItem component
use yew::prelude::*;

/// Creates an individual option that can be selected and moved between the dual list selector panes.
/// This is contained within the DualListSelectorList sub-component.
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct DualListSelectorItemProps {
    /// Additional classes applied to the dual list selector.
    #[prop_or_default]
    pub class: Classes,

    /// Flag indicating the list item is currently selected.
    #[prop_or_default]
    pub is_selected: bool,

    /// Callback fired when an option is selected.
    pub onoptionselect: Callback<MouseEvent>,

    /// Content rendered inside the dual list selector.
    pub children: Html,

    /// Flag indicating if the dual list selector is in a disabled state.
    #[prop_or_default]
    pub disabled: bool,
}

#[function_component(DualListSelectorListItem)]
pub fn list_item(props: &DualListSelectorItemProps) -> Html {
    let mut row_class = classes![
        "pf-v5-c-dual-list-selector__list-item-row",
        props.class.clone()
    ];
    if props.is_selected {
        row_class.push("pf-m-selected");
    }
    let mut item_class = classes!["pf-v5-c-dual-list-selector__list-item"];
    if props.disabled {
        item_class.push("pf-m-disabled")
    }
    html! {
        <li class={item_class} onclick={props.onoptionselect.clone()} tabindex="-1">
            <div class={row_class}>
                <span class="pf-v5-c-dual-list-selector__item">
                    <span class="pf-v5-c-dual-list-selector__item-main">
                        <span class="pf-v5-c-dual-list-selector__item-text">
                            { props.children.clone() }
                        </span>
                    </span>
                </span>
            </div>
        </li>
    }
}