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-v6-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-v6-c-dual-list-selector__header"]}>
59                <div class={classes!["pf-v6-c-dual-list-selector__title"]}>
60                    <div class={classes!["pf-v6-c-dual-list-selector__title-text"]}>{ title }</div>
61                </div>
62            </div>
63        },
64    };
65    let status = match &props.status {
66        None => html! {},
67        Some(status) => html! {
68            <div class="pf-v6-c-dual-list-selector__status">
69                <div
70                    class="pf-v6-c-dual-list-selector__status-text"
71                    id="dual-list-selector-basic-available-pane-status"
72                >
73                    { status }
74                </div>
75            </div>
76        },
77    };
78    html! {
79        <div {class}>
80            { title }
81            { status }
82            <DualListSelectorListWrapper<T>
83                options={props.options.clone()}
84                selected_options={props.selected_options.clone()}
85                onoptionselect={props.onoptionselect.clone()}
86                disabled={props.disabled}
87            >
88                { for props.children.iter() }
89            </DualListSelectorListWrapper<T>>
90        </div>
91    }
92}
patternfly_yew/components/dual_list_selector/pane.rs

patternfly_yew/components/dual_list_selector/
pane.rs
