shadow-design 0.5.0

Modular, high-performance UI component library for Dioxus 0.7 applications
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
78
79
80
81
82
83
84

use dioxus::prelude::*;
use std::cell::RefCell;
use std::rc::Rc;

/// Registers a keyboard shortcut (e.g. "Ctrl+K", "Escape", "Shift+Enter", "Alt+S")
/// and invokes the provided callback when triggered.
pub fn use_hotkey(
    shortcut: impl Into<String>,
    on_trigger: impl FnMut() + 'static,
) {
    let shortcut_str = shortcut.into();
    let cb = use_hook(|| Rc::new(RefCell::new(on_trigger)));
    let listener_key = crate::a11y::use_unique_id("sd-hotkey", None);

    let key_for_effect = listener_key.clone();
    let cb_clone = Rc::clone(&cb);

    use_effect(move || {
        let parts: Vec<&str> = shortcut_str.split('+').map(|s| s.trim()).collect();
        let mut ctrl = false;
        let mut shift = false;
        let mut alt = false;
        let mut meta = false;
        let mut key_name = String::new();

        for part in parts {
            match part.to_lowercase().as_str() {
                "ctrl" | "control" => ctrl = true,
                "shift" => shift = true,
                "alt" => alt = true,
                "cmd" | "meta" | "win" => meta = true,
                k => key_name = k.to_string(),
            }
        }

        let js = format!(
            r#"
            (function() {{
                const key = "{key_for_effect}";
                window._sd_hk = window._sd_hk || {{}};
                if (window._sd_hk[key]) {{
                    window.removeEventListener("keydown", window._sd_hk[key]);
                }}
                window._sd_hk[key] = function(e) {{
                    const matchCtrl = {ctrl} === (e.ctrlKey || false);
                    const matchShift = {shift} === (e.shiftKey || false);
                    const matchAlt = {alt} === (e.altKey || false);
                    const matchMeta = {meta} === (e.metaKey || false);
                    const keyLower = "{key_name}".toLowerCase();
                    const pressedKey = (e.key || "").toLowerCase();

                    if (matchCtrl && matchShift && matchAlt && matchMeta && (pressedKey === keyLower || keyLower === "")) {{
                        e.preventDefault();
                        dioxus.send(true);
                    }}
                }};
                window.addEventListener("keydown", window._sd_hk[key]);
            }})();
            "#
        );

        let cb_inner = Rc::clone(&cb_clone);
        spawn(async move {
            let mut eval = document::eval(&js);
            while eval.recv::<serde_json::Value>().await.is_ok() {
                if let Ok(mut f) = cb_inner.try_borrow_mut() {
                    f();
                }
            }
        });
    });

    let key_for_drop = listener_key;
    use_drop(move || {
        let _ = document::eval(&format!(
            r#"
            if (window._sd_hk && window._sd_hk["{key_for_drop}"]) {{
                window.removeEventListener("keydown", window._sd_hk["{key_for_drop}"]);
                delete window._sd_hk["{key_for_drop}"];
            }}
            "#
        ));
    });
}