patternfly_yew/components/dual_list_selector/control/
button.rs

1//! The DualListSelectorControl component.
2
3use crate::{
4    components::{
5        button::{Button, ButtonVariant},
6        tooltip::Tooltip,
7    },
8    prelude::TooltipProperties,
9};
10use yew::prelude::*;
11
12/// Renders an individual control button for moving selected options between each
13/// dual list selector pane.
14#[derive(Debug, Clone, PartialEq, Properties)]
15pub struct DualListSelectorControlProps {
16    /// Additional classes applied to the dual list selector control.
17    #[prop_or_default]
18    pub class: Classes,
19
20    /// Content to be displayed in a tooltip on hover of control.
21    #[prop_or_default]
22    pub tooltip: Option<AttrValue>,
23
24    /// Additional tooltip properties passed to the tooltip.
25    #[prop_or_default]
26    pub tooltip_props: Option<TooltipProperties>,
27
28    /// Flag indicating the control is disabled.
29    #[prop_or(true)]
30    pub disabled: bool,
31
32    /// Content to be rendered in the dual list selector control.
33    #[prop_or_default]
34    pub children: Html,
35
36    /// Callback fired when dual list selector control is selected.
37    #[prop_or_default]
38    pub onclick: Callback<MouseEvent>,
39}
40
41#[function_component(DualListSelectorControl)]
42pub fn control(props: &DualListSelectorControlProps) -> Html {
43    let button = html! {
44        <Button
45            disabled={props.disabled}
46            variant={ButtonVariant::Plain}
47            tabindex={Some(-1)}
48            onclick={props.onclick.clone()}
49        >
50            { props.children.clone() }
51        </Button>
52    };
53    let inner = if let Some(text) = &props.tooltip {
54        html! {
55            if let Some(props) = &props.tooltip_props {
56                <Tooltip text={text.to_string()} ..props.clone()>
57                    { button }
58                </Tooltip>
59            } else {
60                <Tooltip text={text.to_string()}>
61                    { button }
62                </Tooltip>
63            }
64        }
65    } else {
66        button
67    };
68    html! {
69        <div class={classes!["pf-v5-c-dual-list-selector__controls-item", props.class.clone()]}>
70            { inner }
71        </div>
72    }
73}
patternfly_yew/components/dual_list_selector/control/button.rs

patternfly_yew/components/dual_list_selector/control/
button.rs
