popper-rs 0.5.0

A crate for using Popper in Rust
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

use super::PopperProperties;
use crate::{console, prelude::*};
use std::ops::Deref;
use web_sys::Element;
use yew::{platform::spawn_local, prelude::*};

#[derive(PartialEq, Properties)]
pub(crate) struct InnerPopperProperties {
    pub base: PopperProperties,
    pub strategy: Strategy,
    pub portal: bool,
    pub portal_target: Option<Element>,
}

impl Deref for InnerPopperProperties {
    type Target = PopperProperties;

    fn deref(&self) -> &Self::Target {
        &self.base
    }
}

#[function_component(InnerPopper)]
pub(crate) fn inner_popper(props: &InnerPopperProperties) -> Html {
    let popper_ref = props.content.clone();
    let reference_ref = props.target.clone();

    let options = use_memo(
        (props.placement, props.modifiers.clone()),
        |(placement, modifiers)| Options {
            placement: *placement,
            strategy: props.strategy,
            modifiers: modifiers.clone(),
        },
    );

    let popper = use_popper(reference_ref.clone(), popper_ref.clone(), options).unwrap();

    {
        let popper = popper.instance.clone();
        use_effect(|| {
            spawn_local(async move {
                popper.update().await;
            });
        });
    }

    use_effect_with(
        (props.onstatechange.clone(), (*popper.state).clone()),
        |(callback, state)| {
            console::debug!("Forwarding state change", format!("{:?}", state));
            callback.emit(state.clone());
        },
    );

    if props.portal {
        create_portal(
            html!(
                { for props.children.iter() }
            ),
            props
                .portal_target
                .clone()
                .unwrap_or_else(|| gloo_utils::body().into()),
        )
    } else {
        html!(
            { for props.children.iter() }
        )
    }
}