patternfly_yew/components/toolbar/
mod.rs

1//! Toolbar
2mod child;
3mod divider;
4mod group;
5mod item;
6
7pub use child::*;
8pub use divider::*;
9pub use group::*;
10pub use item::*;
11
12use crate::ouia;
13use crate::prelude::{AsClasses, ExtendClasses, WithBreakpoints};
14use crate::utils::{Ouia, OuiaComponentType, OuiaSafe};
15use yew::{html::ChildrenRenderer, prelude::*};
16
17const OUIA: Ouia = ouia!("Toolbar");
18
19/// Modifier for toolbar elements.
20#[derive(Clone, Copy, Eq, PartialEq, Debug)]
21pub enum ToolbarElementModifier {
22    Hidden,
23    Visible,
24    Left,
25    Right,
26}
27
28impl AsClasses for ToolbarElementModifier {
29    fn extend_classes(&self, classes: &mut Classes) {
30        classes.push(match self {
31            Self::Hidden => "pf-m-hidden",
32            Self::Visible => "pf-m-visible",
33            Self::Left => "pf-m-align-left", // Only allowed as direct descendants of toolbar...
34            Self::Right => "pf-m-align-right", // ^
35        });
36    }
37}
38
39#[derive(Debug, Clone, Copy, PartialEq, Eq)]
40pub enum ToolbarInset {
41    None,
42    Small,
43    Medium,
44    Large,
45    XLarge,
46    XXLarge,
47}
48
49impl AsClasses for ToolbarInset {
50    fn extend_classes(&self, classes: &mut Classes) {
51        classes.push(match self {
52            ToolbarInset::None => "pf-m-inset-none",
53            ToolbarInset::Small => "pf-m-inset-sm",
54            ToolbarInset::Medium => "pf-m-inset-md",
55            ToolbarInset::Large => "pf-m-inset-lg",
56            ToolbarInset::XLarge => "pf-m-inset-xl",
57            ToolbarInset::XXLarge => "pf-m-inset-2xl",
58        });
59    }
60}
61
62/// Properties for [`Toolbar`]
63#[derive(Clone, PartialEq, Properties)]
64pub struct ToolbarProperties {
65    #[prop_or_default]
66    pub class: Classes,
67
68    #[prop_or_default]
69    pub children: ChildrenWithProps<ToolbarContent>,
70
71    #[prop_or_default]
72    pub id: AttrValue,
73
74    #[prop_or_default]
75    pub full_height: bool,
76
77    #[prop_or_default]
78    pub insets: WithBreakpoints<ToolbarInset>,
79
80    /// OUIA Component id
81    #[prop_or_default]
82    pub ouia_id: Option<String>,
83    /// OUIA Component Type
84    #[prop_or(OUIA.component_type())]
85    pub ouia_type: OuiaComponentType,
86    /// OUIA Component Safe
87    #[prop_or(OuiaSafe::TRUE)]
88    pub ouia_safe: OuiaSafe,
89}
90
91/// Toolbar component
92///
93/// > A **toolbar** allows a user to manage and manipulate a data set. Data can be presented in any valid presentation, a table, a list, or a data visualization (chart), for example. The toolbar responsively accommodates controls and displays applied filters in chip groups.
94///
95/// See: <https://www.patternfly.org/components/toolbar>
96///
97/// ## Properties
98///
99/// Defined by [`ToolbarProperties`].
100///
101/// ## Children
102///
103/// The toolbar requires one or more [`ToolbarContent`] children.
104#[function_component(Toolbar)]
105pub fn toolbar(props: &ToolbarProperties) -> Html {
106    let ouia_id = use_memo(props.ouia_id.clone(), |id| {
107        id.clone().unwrap_or(OUIA.generated_id())
108    });
109    let mut class = classes!("pf-v5-c-toolbar", props.class.clone());
110    class.extend_from(&props.insets);
111
112    if props.full_height {
113        class.push("pf-m-full-height")
114    }
115
116    html! (
117        <div
118            id={&props.id}
119            {class}
120            data-ouia-component-id={(*ouia_id).clone()}
121            data-ouia-component-type={props.ouia_type}
122            data-ouia-safe={props.ouia_safe}
123        >
124            { for props.children.iter() }
125        </div>
126    )
127}
128
129/// Properties for [`Toolbar`]
130#[derive(Clone, PartialEq, Properties)]
131pub struct ToolbarContentProperties {
132    #[prop_or_default]
133    pub children: ChildrenRenderer<ToolbarChildVariant>,
134
135    #[prop_or_default]
136    pub id: AttrValue,
137}
138
139#[function_component(ToolbarContent)]
140pub fn toolbar_content(props: &ToolbarContentProperties) -> Html {
141    html! (
142        <div class="pf-v5-c-toolbar__content" id={&props.id}>
143            <div class="pf-v5-c-toolbar__content-section">
144                { for props.children.iter() }
145            </div>
146        </div>
147    )
148}
patternfly_yew/components/toolbar/mod.rs

patternfly_yew/components/toolbar/
mod.rs
