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
70
71
72
73
74
75
76
77

use crate::prelude::{AsClasses, ExtendClasses, ToolbarElementModifier, WithBreakpoints};
use yew::prelude::*;

/// Properties for [`ToolbarItem`]
#[derive(Clone, Default, Eq, PartialEq, Debug)]
pub enum ToolbarItemType {
    #[default]
    None,
    BulkSelect,
    ChipGroup,
    OverflowMenu,
    Pagination,
    SearchFilter,
}

impl AsClasses for ToolbarItemType {
    fn extend_classes(&self, classes: &mut Classes) {
        match self {
            Self::None => {}
            Self::BulkSelect => classes.push("pf-m-bulk-select"),
            Self::ChipGroup => classes.push("pf-m-chip-group"),
            Self::OverflowMenu => classes.push("pf-m-overflow-menu"),
            Self::Pagination => classes.push("pf-m-pagination"),
            Self::SearchFilter => classes.push("pf-m-search-filter"),
        }
    }
}

#[derive(Clone, PartialEq, Properties)]
pub struct ToolbarItemProperties {
    #[prop_or_default]
    pub id: Option<AttrValue>,

    #[prop_or_default]
    pub children: Html,

    #[prop_or_default]
    pub modifiers: WithBreakpoints<ToolbarElementModifier>,

    #[prop_or_default]
    pub r#type: ToolbarItemType,

    /// Control the width of the item
    #[prop_or_default]
    pub width: WithBreakpoints<String>,

    /// Control the minimal width of the item
    #[prop_or_default]
    pub min_width: WithBreakpoints<String>,

    /// Additional classes
    #[prop_or_default]
    pub class: Classes,
}

#[function_component(ToolbarItem)]
pub fn toolbar_item(props: &ToolbarItemProperties) -> Html {
    let mut class = classes!("pf-v6-c-toolbar__item");

    class.extend_from(&props.r#type);
    class.extend_from(&props.modifiers);
    class.extend(props.class.clone());

    let style = props
        .width
        .iter()
        .map(|w| format!("--pf-v6-c-toolbar__item--Width{}: {};", w.on, w.modifier))
        .chain(
            props
                .min_width
                .iter()
                .map(|w| format!("--pf-v6-c-toolbar__item--MinWidth{}: {};", w.on, w.modifier)),
        )
        .collect::<String>();

    html! (<div id={&props.id} {class} {style}>{ props.children.clone() }</div>)
}