patternfly_yew/components/menu/
mod.rs

1//! Menu components
2mod child;
3mod context;
4mod group;
5mod item;
6mod loading;
7mod toggle;
8mod variant;
9
10pub use child::*;
11pub use context::*;
12pub use group::*;
13pub use item::*;
14pub use loading::*;
15pub use toggle::*;
16pub use variant::*;
17
18use crate::ouia;
19use crate::prelude::OuiaComponentType;
20use crate::utils::{Ouia, OuiaSafe};
21use wasm_bindgen::JsCast;
22use web_sys::{Element, HtmlElement};
23use web_tools::prelude::*;
24use yew::{html::ChildrenRenderer, prelude::*};
25use yew_hooks::use_event_with_window;
26
27const OUIA: Ouia = ouia!("Menu");
28
29#[derive(Clone, Debug, PartialEq, Properties)]
30pub struct MenuProperties {
31    #[prop_or_default]
32    pub id: Option<String>,
33
34    #[prop_or_default]
35    pub style: AttrValue,
36
37    #[prop_or_default]
38    pub r#ref: NodeRef,
39
40    #[prop_or_default]
41    pub scrollable: bool,
42
43    #[prop_or_default]
44    pub plain: bool,
45
46    #[prop_or_default]
47    pub children: ChildrenRenderer<MenuChildVariant>,
48
49    /// OUIA Component id
50    #[prop_or_default]
51    pub ouia_id: Option<String>,
52    /// OUIA Component Type
53    #[prop_or(OUIA.component_type())]
54    pub ouia_type: OuiaComponentType,
55    /// OUIA Component Safe
56    #[prop_or(OuiaSafe::TRUE)]
57    pub ouia_safe: OuiaSafe,
58}
59
60#[component]
61pub fn Menu(props: &MenuProperties) -> Html {
62    let ouia_id = use_memo(props.ouia_id.clone(), |id| {
63        id.clone().unwrap_or(OUIA.generated_id())
64    });
65    let mut class = classes!("pf-v6-c-menu");
66
67    if props.scrollable {
68        class.push(classes!("pf-m-scrollable"));
69    }
70
71    if props.plain {
72        class.push(classes!("pf-m-plain"));
73    }
74
75    html!(
76        <div
77            ref={props.r#ref.clone()}
78            id={props.id.clone()}
79            style={&props.style}
80            {class}
81            data-ouia-component-id={(*ouia_id).clone()}
82            data-ouia-component-type={props.ouia_type}
83            data-ouia-safe={props.ouia_safe}
84        >
85            <div class="pf-v6-c-menu__content">
86                <MenuList>{ props.children.clone() }</MenuList>
87            </div>
88        </div>
89    )
90}
91
92#[derive(Clone, Debug, PartialEq, Properties)]
93pub(crate) struct MenuListProperties {
94    pub(crate) children: ChildrenRenderer<MenuChildVariant>,
95}
96
97#[component]
98pub(crate) fn MenuList(props: &MenuListProperties) -> Html {
99    let r#ref = use_node_ref();
100
101    {
102        let r#ref = r#ref.clone();
103        use_event_with_window("keydown", move |e: KeyboardEvent| {
104            handle_key(&r#ref, e);
105        });
106    }
107
108    html!(<ul ref={r#ref} class="pf-v6-c-menu__list" role="menu">{ for props.children.iter() }</ul>)
109}
110
111fn focusable_element(element: &HtmlElement) -> Option<HtmlElement> {
112    element
113        .query_selector("a, button, input")
114        .ok()??
115        .dyn_into::<HtmlElement>()
116        .ok()
117}
118
119fn handle_key(node: &NodeRef, e: KeyboardEvent) {
120    match e.key().as_str() {
121        "Enter" => {
122            if let Some(active) = gloo_utils::document()
123                .active_element()
124                .and_then(|element| element.dyn_into::<HtmlElement>().ok())
125            {
126                e.prevent_default();
127                active.click();
128            }
129        }
130        "ArrowUp" | "ArrowDown" => handle_arrows(node, e),
131        _ => {}
132    }
133}
134
135fn handle_arrows(node: &NodeRef, e: KeyboardEvent) {
136    e.prevent_default();
137    e.stop_immediate_propagation();
138
139    let active = gloo_utils::document()
140        .active_element()
141        .and_then(|element| element.dyn_into::<HtmlElement>().ok());
142
143    let elements = match node
144        .cast::<Element>()
145        .map(|ele| ele.get_elements_by_tag_name("LI"))
146    {
147        Some(elements) => elements,
148        None => return,
149    };
150
151    let items = IterableHtmlCollection(&elements)
152        .into_iter()
153        .filter_map(|node| node.dyn_into::<HtmlElement>().ok())
154        .filter(|element| {
155            !element.class_list().contains("pf-m-disabled")
156                && !element.class_list().contains("pf-v6-c-divider")
157        })
158        .collect::<Vec<_>>();
159
160    let len = items.len();
161
162    let index = items
163        .iter()
164        .position(|node| focusable_element(node) == active);
165
166    let offset: isize = if e.key() == "ArrowDown" { 1 } else { -1 };
167
168    let next_index = index
169        // apply offset
170        .map(|index| index as isize + offset)
171        // handle overflow
172        .map(|index| {
173            if index < 0 {
174                len.saturating_sub(1)
175            } else if index as usize >= len {
176                0
177            } else {
178                index as _
179            }
180        })
181        // or default
182        .unwrap_or_else(|| if offset > 0 { 0 } else { len.saturating_sub(1) });
183
184    // get as node
185    let next_node = items
186        .get(next_index)
187        .and_then(focusable_element)
188        .and_then(|ele| ele.dyn_into::<HtmlElement>().ok());
189
190    // apply
191    if let Some(node) = &next_node {
192        if let Some(active) = &active {
193            active.set_tab_index(-1);
194        }
195
196        node.set_tab_index(0);
197        let _ = node.focus();
198    }
199}
patternfly_yew/components/menu/mod.rs

patternfly_yew/components/menu/
mod.rs
