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

//! The DualListSelectorControl component.

use crate::{
    components::{
        button::{Button, ButtonVariant},
        tooltip::Tooltip,
    },
    prelude::TooltipProperties,
};
use yew::prelude::*;

/// Renders an individual control button for moving selected options between each
/// dual list selector pane.
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct DualListSelectorControlProps {
    /// Additional classes applied to the dual list selector control.
    #[prop_or_default]
    pub class: Classes,

    /// Content to be displayed in a tooltip on hover of control.
    #[prop_or_default]
    pub tooltip: Option<AttrValue>,

    /// Additional tooltip properties passed to the tooltip.
    #[prop_or_default]
    pub tooltip_props: Option<TooltipProperties>,

    /// Flag indicating the control is disabled.
    #[prop_or(true)]
    pub disabled: bool,

    /// Content to be rendered in the dual list selector control.
    #[prop_or_default]
    pub children: Html,

    /// Callback fired when dual list selector control is selected.
    #[prop_or_default]
    pub onclick: Callback<MouseEvent>,
}

#[function_component(DualListSelectorControl)]
pub fn control(props: &DualListSelectorControlProps) -> Html {
    let button = html! {
        <Button
            disabled={props.disabled}
            variant={ButtonVariant::Plain}
            tabindex={Some(-1)}
            onclick={props.onclick.clone()}
        >
            { props.children.clone() }
        </Button>
    };
    let inner = if let Some(text) = &props.tooltip {
        html! {
            if let Some(props) = &props.tooltip_props {
                <Tooltip text={text.to_string()} ..props.clone()>{ button }</Tooltip>
            } else {
                <Tooltip text={text.to_string()}>{ button }</Tooltip>
            }
        }
    } else {
        button
    };
    html! {
        <div class={classes!["pf-v6-c-dual-list-selector__controls-item", props.class.clone()]}>
            { inner }
        </div>
    }
}