patternfly_yew/components/toolbar/
item.rs

1use crate::prelude::{AsClasses, ExtendClasses, ToolbarElementModifier, WithBreakpoints};
2use yew::prelude::*;
3
4/// Properties for [`ToolbarItem`]
5#[derive(Clone, Eq, PartialEq, Debug)]
6pub enum ToolbarItemType {
7    None,
8    BulkSelect,
9    ChipGroup,
10    OverflowMenu,
11    Pagination,
12    SearchFilter,
13}
14
15impl Default for ToolbarItemType {
16    fn default() -> Self {
17        Self::None
18    }
19}
20
21impl AsClasses for ToolbarItemType {
22    fn extend_classes(&self, classes: &mut Classes) {
23        match self {
24            Self::None => {}
25            Self::BulkSelect => classes.push("pf-m-bulk-select"),
26            Self::ChipGroup => classes.push("pf-m-chip-group"),
27            Self::OverflowMenu => classes.push("pf-m-overflow-menu"),
28            Self::Pagination => classes.push("pf-m-pagination"),
29            Self::SearchFilter => classes.push("pf-m-search-filter"),
30        }
31    }
32}
33
34#[derive(Clone, PartialEq, Properties)]
35pub struct ToolbarItemProperties {
36    #[prop_or_default]
37    pub id: Option<AttrValue>,
38
39    #[prop_or_default]
40    pub children: Html,
41
42    #[prop_or_default]
43    pub modifiers: WithBreakpoints<ToolbarElementModifier>,
44
45    #[prop_or_default]
46    pub r#type: ToolbarItemType,
47
48    /// Control the width of the item
49    #[prop_or_default]
50    pub width: WithBreakpoints<String>,
51
52    /// Control the minimal width of the item
53    #[prop_or_default]
54    pub min_width: WithBreakpoints<String>,
55
56    /// Additional classes
57    #[prop_or_default]
58    pub class: Classes,
59}
60
61#[function_component(ToolbarItem)]
62pub fn toolbar_item(props: &ToolbarItemProperties) -> Html {
63    let mut class = classes!("pf-v5-c-toolbar__item");
64
65    class.extend_from(&props.r#type);
66    class.extend_from(&props.modifiers);
67    class.extend(props.class.clone());
68
69    let style = props
70        .width
71        .iter()
72        .map(|w| format!("--pf-v5-c-toolbar__item--Width{}: {};", w.on, w.modifier))
73        .chain(
74            props
75                .min_width
76                .iter()
77                .map(|w| format!("--pf-v5-c-toolbar__item--MinWidth{}: {};", w.on, w.modifier)),
78        )
79        .collect::<String>();
80
81    html! (
82        <div
83            id={&props.id}
84            {class}
85            {style}
86        >
87            { props.children.clone() }
88        </div>
89    )
90}