patternfly-yew 0.7.4

PatternFly 5 components for Yew
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
89
90
91
92

//! The DualListSelectorPane component.

use yew::prelude::*;

use super::{DualListSelectorItemRenderer, DualListSelectorList, DualListSelectorListWrapper};

/// Acts as the container for a list of options that are either available or chosen,
/// depending on the pane type (available or chosen).
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct DualListSelectorPaneProps<T: DualListSelectorItemRenderer> {
    /// Additional classes applied to the dual list selector pane.
    #[prop_or_default]
    pub class: Classes,

    /// Options to list in the pane.
    #[prop_or_default]
    pub options: Vec<T>,

    /// Options currently selected in the pane.
    #[prop_or_default]
    pub selected_options: Vec<usize>,

    /// Callback for when an option is selected. Optionally used only when options prop is provided.
    pub onoptionselect: Callback<super::OnOptionSelectArgsNoChosen>,

    /// Title of the pane.
    #[prop_or_default]
    pub title: Option<AttrValue>,

    /// Status to display above the pane.
    #[prop_or_default]
    pub status: Option<AttrValue>,

    /// Flag indicating if this pane is the chosen pane.
    #[prop_or_default]
    pub is_chosen: bool,

    /// Flag indicating whether the component is disabled.
    #[prop_or_default]
    pub disabled: bool,

    /// A dual list selector list to be rendered in the pane.
    #[prop_or_default]
    pub children: ChildrenWithProps<DualListSelectorList<T>>,
}

#[function_component(DualListSelectorPane)]
pub fn pane<T: DualListSelectorItemRenderer>(props: &DualListSelectorPaneProps<T>) -> Html {
    let mut class = classes!["pf-v6-c-dual-list-selector__pane", props.class.clone()];
    if props.is_chosen {
        class.push("pf-m-chosen")
    } else {
        class.push("pf-m-available")
    }
    let title = match &props.title {
        None => html! {},
        Some(title) => html! {
            <div class={classes!["pf-v6-c-dual-list-selector__header"]}>
                <div class={classes!["pf-v6-c-dual-list-selector__title"]}>
                    <div class={classes!["pf-v6-c-dual-list-selector__title-text"]}>{ title }</div>
                </div>
            </div>
        },
    };
    let status = match &props.status {
        None => html! {},
        Some(status) => html! {
            <div class="pf-v6-c-dual-list-selector__status">
                <div
                    class="pf-v6-c-dual-list-selector__status-text"
                    id="dual-list-selector-basic-available-pane-status"
                >
                    { status }
                </div>
            </div>
        },
    };
    html! {
        <div {class}>
            { title }
            { status }
            <DualListSelectorListWrapper<T>
                options={props.options.clone()}
                selected_options={props.selected_options.clone()}
                onoptionselect={props.onoptionselect.clone()}
                disabled={props.disabled}
            >
                { for props.children.iter() }
            </DualListSelectorListWrapper<T>>
        </div>
    }
}