patternfly_yew/components/dual_list_selector/list/
wrapper.rs

1//! The DualListSelcotrListWrapper component.
2
3use yew::prelude::*;
4
5use crate::components::dual_list_selector::OnOptionSelectArgsNoChosen;
6
7use super::{super::DualListSelectorItemRenderer as ItemRenderer, DualListSelectorList};
8
9#[derive(Debug, Clone, PartialEq, Properties)]
10pub struct DualListSelectorListWrapperProps<T: ItemRenderer> {
11    /// Additional classes applied to the dual list selector.
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<OnOptionSelectArgsNoChosen>,
25
26    /// Flag indicating whether the component is disabled.
27    #[prop_or_default]
28    pub disabled: bool,
29
30    /// Anything that can be rendered inside of the list.
31    #[prop_or_default]
32    pub children: Children,
33}
34
35#[derive(Debug, Clone, PartialEq)]
36pub struct DualListSelectorListContext<T: ItemRenderer> {
37    pub options: Vec<T>,
38    pub selected_options: Vec<usize>,
39    pub onoptionselect: Callback<OnOptionSelectArgsNoChosen>,
40    pub disabled: bool,
41}
42
43#[function_component(DualListSelectorListWrapper)]
44pub fn wrapper<T: ItemRenderer>(props: &DualListSelectorListWrapperProps<T>) -> Html {
45    let context = DualListSelectorListContext {
46        options: props.options.clone(),
47        selected_options: props.selected_options.clone(),
48        onoptionselect: props.onoptionselect.clone(),
49        disabled: props.disabled,
50    };
51    html! {
52        <div class={classes!["pf-v5-c-dual-list-selector__menu", props.class.clone()]} tabindex=0>
53            <ContextProvider<DualListSelectorListContext<T>> {context}>
54                if !props.children.is_empty() {
55                    { props.children.clone() }
56                } else {
57                    <DualListSelectorList<T>/>
58                }
59            </ContextProvider<DualListSelectorListContext<T>>>
60        </div>
61    }
62}