Skip to main content

patternfly_yew/components/toolbar/
item.rs

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