zirv-ui 0.2.1

Component library for Yew
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

use std::marker::PhantomData;

use yew::{
    classes, function_component, html, use_effect_with, use_reducer_eq, Callback, Children,
    ContextProvider, Html, Properties,
};

use super::manager::{Action, ToastManager, ToastsList};
use super::utils::{Notifiable, NotifiableComponentFactory};

#[derive(Properties, PartialEq, Clone)]
pub struct ToastProviderProps<
    T: Notifiable + PartialEq,
    F: NotifiableComponentFactory<T> + PartialEq + Clone,
> {
    pub children: Children,
    pub component_creator: F,
    #[prop_or_default]
    pub _toast: PhantomData<T>,
}

#[function_component(ToastProvider)]
pub fn toast_provider<
    T: Notifiable + PartialEq + Clone,
    F: NotifiableComponentFactory<T> + PartialEq + Clone,
>(
    props: &ToastProviderProps<T, F>,
) -> Html {
    let toasts = use_reducer_eq(ToastsList::<T>::default);

    let manager = ToastManager {
        sender: Some(toasts.dispatcher()),
    };

    use_effect_with(
        (!toasts.is_empty(), toasts.dispatcher()),
        |(is_active, sender)| {
            use gloo::timers::callback::Interval;

            let sender = sender.clone();
            let is_active = *is_active;

            let interval = Interval::new(ToastsList::<T>::TIME_TICK_MILLIS as u32, move || {
                if is_active {
                    sender.dispatch(Action::Tick);
                }
            });

            move || drop(interval)
        },
    );

    let children = props.children.clone();
    let dispatcher = toasts.dispatcher();

    let toast_creator = &props.component_creator;

    html! {
        <ContextProvider<ToastManager<T>> context={manager}>
            {children}
            <div class={classes!("toasts", "toasts-provider-bottom-right")}>
                {for toasts.toasts.iter().map(|t| {
                    let toast = t.clone();
                    let id = toast.id();

                    let onclick = {
                        let dispatcher = dispatcher.clone();
                        Callback::from(move |_| {
                            dispatcher.dispatch(Action::Close(id));
                        })
                    };

                    let onenter = {
                        let dispatcher = dispatcher.clone();
                        Callback::from(move |_| {
                            dispatcher.dispatch(Action::Pause(id));
                        })
                    };

                    let onleave = {
                        let dispatcher = dispatcher.clone();
                        Callback::from(move |_| {
                            dispatcher.dispatch(Action::Continue(id));
                        })
                    };

                    toast_creator.component(toast, onclick, onenter, onleave)
                })}
            </div>
        </ContextProvider<ToastManager<T>>>
    }
}