dxc 1.0.0

A concise, modern dioxus component library
Documentation 
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

use super::props::FocusTrapProps;
use dioxus::prelude::*;

#[component]
pub fn DxcFocusTrap(props: FocusTrapProps) -> Element {
    let loop_ = use_signal(|| props.loop_.unwrap_or(false));
    let trapped = use_signal(|| props.trapped.unwrap_or(false));

    let mut alt_key = use_signal(|| false);
    let mut ctrl_key = use_signal(|| false);
    let mut shift_key = use_signal(|| false);
    let mut meta_key = use_signal(|| false);
    let mut esc_pressed = use_signal(|| false);
    let mut tab_pressed = use_signal(|| false);

    let on_keydown = move |event: Event<KeyboardEvent>| {
        if !loop_() && !trapped() {
            return;
        };
        let key_board = event.data;
        let code = key_board.code();

        let is_tabbing = use_memo(move || {
            code == Code::Tab && !alt_key() && !ctrl_key() && !meta_key() && !shift_key()
        });

        if is_tabbing() {};
    };

    let mut has_focus = use_signal(|| false);

    rsx! {
        div {
            style: "display: contents;",
            tabindex: "0",
            onkeydown: move |evt| {
                alt_key.set(evt.modifiers().alt());
                ctrl_key.set(evt.modifiers().ctrl());
                shift_key.set(evt.modifiers().shift());
                meta_key.set(evt.modifiers().meta());

                match evt.key() {
                    Key::Escape => {
                        esc_pressed.set(true);
                    }
                    Key::Tab => {
                        tab_pressed.set(true);
                        evt.prevent_default();
                    }
                    _ => {}
                }
            },
            onkeyup: move |evt: KeyboardEvent| {
                if !evt.modifiers().alt() { alt_key.set(false); }
                if !evt.modifiers().ctrl() { ctrl_key.set(false); }
                if !evt.modifiers().shift() { shift_key.set(false); }
                if !evt.modifiers().meta() { meta_key.set(false); }

                match evt.key() {
                    Key::Escape => {
                        esc_pressed.set(false);
                    }
                    Key::Tab => {
                        tab_pressed.set(false);
                        evt.prevent_default();
                    }
                    _ => {}
                }
            },
            onfocusin: move |_| {
                has_focus.set(true);
            },
            onfocusout: move |_| {
                has_focus.set(false);
            },
            {props.children}
        }
    }
}