yewlish-utils 0.1.12

Common utils for yewlish component set
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
86
87
88
89
90
91
92
93

use std::cell::RefCell;
use std::rc::Rc;
use web_sys::{
    js_sys,
    wasm_bindgen::{prelude::Closure, JsCast},
    Element, IntersectionObserver, IntersectionObserverEntry, IntersectionObserverInit,
};
use yew::prelude::*;

type HandlerParams = (
    NodeRef,
    Rc<Option<IntersectionObserverInit>>,
    Callback<IntersectionObserverEntry>,
);

#[hook]
pub fn use_intersection_observer_lazy() -> (
    Rc<RefCell<Option<IntersectionObserver>>>,
    Callback<HandlerParams>,
) {
    let intersection_observer = use_mut_ref(|| None::<IntersectionObserver>);

    let create_intersection_observer = use_callback(
        intersection_observer.clone(),
        |(element_ref, options, handler): HandlerParams, intersection_observer| {
            let callback = Closure::wrap(Box::new(
                move |entries: js_sys::Array, _: IntersectionObserver| {
                    for entry in entries.iter() {
                        if let Some(entry) = entry.dyn_ref::<IntersectionObserverEntry>() {
                            handler.emit(entry.clone());
                        }
                    }
                },
            )
                as Box<dyn FnMut(js_sys::Array, IntersectionObserver)>);

            let observer = if let Some(opts) = options.as_ref() {
                IntersectionObserver::new_with_options(callback.as_ref().unchecked_ref(), opts)
            } else {
                IntersectionObserver::new(callback.as_ref().unchecked_ref())
            };

            match observer {
                Ok(ref observer) => {
                    if let Some(element) = element_ref.cast::<Element>() {
                        observer.observe(&element);
                        intersection_observer.replace(Some(observer.clone()));
                    } else {
                        log::error!("Failed to cast element to Element");
                    }
                }
                Err(err) => {
                    log::error!("Failed to create IntersectionObserver {err:?}");
                }
            }

            callback.forget();
        },
    );

    {
        let intersection_observer = intersection_observer.clone();

        use_effect_with((), move |()| {
            move || {
                if let Some(ref observer) = *intersection_observer.borrow() {
                    observer.disconnect();
                }
            }
        });
    }

    (intersection_observer, create_intersection_observer)
}

#[hook]
pub fn use_intersection_observer(
    element_ref: &NodeRef,
    options: Rc<Option<IntersectionObserverInit>>,
    handler: Callback<IntersectionObserverEntry>,
) -> Rc<RefCell<Option<IntersectionObserver>>> {
    let (intersection_observer, create_intersection_observer) = use_intersection_observer_lazy();

    {
        let element = element_ref.clone();

        use_effect_with((), move |()| {
            create_intersection_observer.emit((element.clone(), options.clone(), handler.clone()));
        });
    }

    intersection_observer
}