dioxus-nox-tag-input 0.13.2

Headless tag/multi-select input primitive for Dioxus
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
80
81
82
83
84
85

use dioxus::prelude::*;

/// Responsive breakpoint categories based on viewport width.
#[derive(Clone, Copy, PartialEq, Eq, Debug)]
pub enum Breakpoint {
    /// Width < 768px
    Mobile,
    /// 768px <= Width < 1400px
    Tablet,
    /// Width >= 1400px
    Desktop,
}

impl Breakpoint {
    /// Determine breakpoint from a pixel width.
    pub fn from_width(width: u32) -> Self {
        if width < 768 {
            Breakpoint::Mobile
        } else if width < 1400 {
            Breakpoint::Tablet
        } else {
            Breakpoint::Desktop
        }
    }
}

/// Hook that returns the current responsive breakpoint.
///
/// On WASM targets, reads `window.innerWidth` via web-sys and listens for
/// resize events. On non-WASM targets, defaults to `Breakpoint::Desktop`.
pub fn use_breakpoint() -> Signal<Breakpoint> {
    #[cfg(target_arch = "wasm32")]
    {
        use_breakpoint_wasm()
    }
    #[cfg(not(target_arch = "wasm32"))]
    {
        use_breakpoint_default()
    }
}

#[cfg(not(target_arch = "wasm32"))]
fn use_breakpoint_default() -> Signal<Breakpoint> {
    use_signal(|| Breakpoint::Desktop)
}

#[cfg(target_arch = "wasm32")]
fn use_breakpoint_wasm() -> Signal<Breakpoint> {
    use wasm_bindgen::JsCast;
    use wasm_bindgen::closure::Closure;

    let mut breakpoint = use_signal(|| {
        let width = get_window_width();
        Breakpoint::from_width(width)
    });

    use_hook(|| {
        let closure = Closure::<dyn FnMut()>::new(move || {
            let width = get_window_width();
            let new_bp = Breakpoint::from_width(width);
            breakpoint.set(new_bp);
        });

        let window = web_sys::window().expect("no global window");
        window
            .add_event_listener_with_callback("resize", closure.as_ref().unchecked_ref())
            .expect("failed to add resize listener");

        // Leak the closure so it lives for the lifetime of the page.
        // In a real app you'd store it and remove on drop, but for a
        // singleton hook this is acceptable.
        closure.forget();
    });

    breakpoint
}

#[cfg(target_arch = "wasm32")]
fn get_window_width() -> u32 {
    web_sys::window()
        .and_then(|w| w.inner_width().ok())
        .and_then(|v| v.as_f64())
        .map(|f| f as u32)
        .unwrap_or(1024)
}