patternfly_yew/components/dual_list_selector/
pane.rs

1//! The DualListSelectorPane component.
2
3use yew::prelude::*;
4
5use super::{DualListSelectorItemRenderer, DualListSelectorList, DualListSelectorListWrapper};
6
7/// Acts as the container for a list of options that are either available or chosen,
8/// depending on the pane type (available or chosen).
9#[derive(Debug, Clone, PartialEq, Properties)]
10pub struct DualListSelectorPaneProps<T: DualListSelectorItemRenderer> {
11    /// Additional classes applied to the dual list selector pane.
12    #[prop_or_default]
13    pub class: Classes,
14
15    /// Options to list in the pane.
16    #[prop_or_default]
17    pub options: Vec<T>,
18
19    /// Options currently selected in the pane.
20    #[prop_or_default]
21    pub selected_options: Vec<usize>,
22
23    /// Callback for when an option is selected. Optionally used only when options prop is provided.
24    pub onoptionselect: Callback<super::OnOptionSelectArgsNoChosen>,
25
26    /// Title of the pane.
27    #[prop_or_default]
28    pub title: Option<AttrValue>,
29
30    /// Status to display above the pane.
31    #[prop_or_default]
32    pub status: Option<AttrValue>,
33
34    /// Flag indicating if this pane is the chosen pane.
35    #[prop_or_default]
36    pub is_chosen: bool,
37
38    /// Flag indicating whether the component is disabled.
39    #[prop_or_default]
40    pub disabled: bool,
41
42    /// A dual list selector list to be rendered in the pane.
43    #[prop_or_default]
44    pub children: ChildrenWithProps<DualListSelectorList<T>>,
45}
46
47#[function_component(DualListSelectorPane)]
48pub fn pane<T: DualListSelectorItemRenderer>(props: &DualListSelectorPaneProps<T>) -> Html {
49    let mut class = classes!["pf-v5-c-dual-list-selector__pane", props.class.clone()];
50    if props.is_chosen {
51        class.push("pf-m-chosen")
52    } else {
53        class.push("pf-m-available")
54    }
55    let title = match &props.title {
56        None => html! {},
57        Some(title) => html! {
58            <div class={classes!["pf-v5-c-dual-list-selector__header"]}>
59                <div class={classes!["pf-v5-c-dual-list-selector__title"]}>
60                    <div class={classes!["pf-v5-c-dual-list-selector__title-text"]}>
61                        { title }
62                    </div>
63                </div>
64            </div>
65        },
66    };
67    let status = match &props.status {
68        None => html! {},
69        Some(status) => html! {
70            <div class="pf-v5-c-dual-list-selector__status">
71                <div class="pf-v5-c-dual-list-selector__status-text" id="dual-list-selector-basic-available-pane-status">
72                    { status }
73                </div>
74            </div>
75        },
76    };
77    html! {
78        <div {class}>
79            { title }
80            { status }
81            <DualListSelectorListWrapper<T>
82                options={props.options.clone()}
83                selected_options={props.selected_options.clone()}
84                onoptionselect={props.onoptionselect.clone()}
85                disabled={props.disabled}
86            >
87                { for props.children.iter() }
88            </DualListSelectorListWrapper<T>>
89        </div>
90    }
91}
patternfly_yew/components/dual_list_selector/pane.rs

patternfly_yew/components/dual_list_selector/
pane.rs
