thaw 0.4.8

An easy to use leptos 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

mod loading_bar_provider;

pub use loading_bar_provider::*;

use crate::ConfigInjection;
use leptos::{html, prelude::*};
use std::sync::Arc;
use thaw_utils::{mount_style, ComponentRef};

#[derive(Clone)]
pub(crate) struct LoadingBarRef {
    start: Arc<dyn Fn() + Send + Sync + 'static>,
    finish: Arc<dyn Fn() + Send + Sync + 'static>,
    error: Arc<dyn Fn() + Send + Sync + 'static>,
}

impl LoadingBarRef {
    #[inline]
    pub fn start(&self) {
        (self.start)();
    }
    #[inline]
    pub fn finish(&self) {
        (self.finish)();
    }
    #[inline]
    pub fn error(&self) {
        (self.error)();
    }
}

#[component]
fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
    mount_style("loading-bar", include_str!("./loading-bar.css"));
    let config_provider = ConfigInjection::expect_context();
    let container_ref = NodeRef::<html::Div>::new();
    let loading_bar_ref = NodeRef::<html::Div>::new();

    let start = Arc::new(move || {
        let Some(container_el) = container_ref.get_untracked() else {
            return;
        };
        let Some(loading_bar_el) = loading_bar_ref.get_untracked() else {
            return;
        };
        let _ = container_el.set_attribute("style", "");
        loading_bar_el.style(("background-color", "var(--colorStatusSuccessForeground1)"));
        loading_bar_el.style(("transition", "none"));
        loading_bar_el.style(("max-width", "0"));
        let _ = loading_bar_el.offset_width();
        loading_bar_el.style(("transition", "max-width 4s linear"));
        loading_bar_el.style(("max-width", "80%"));
    });
    let on_transitionend = move |_| {
        let Some(container_el) = container_ref.get_untracked() else {
            return;
        };
        let Some(loading_bar_el) = loading_bar_ref.get_untracked() else {
            return;
        };
        if let Ok(max_width) = Dom::style(&loading_bar_el).get_property_value("max-width") {
            if max_width == "100%" {
                let _ = container_el.set_attribute("style", "display: none");
            }
        }
    };
    let finish = Arc::new(move || {
        let Some(loading_bar_el) = loading_bar_ref.get_untracked() else {
            return;
        };
        loading_bar_el.style(("background-color", "var(--colorStatusSuccessForeground1)"));
        loading_bar_el.style(("transition", "max-width 0.5s linear"));
        loading_bar_el.style(("max-width", "100%"));
    });
    let error = Arc::new(move || {
        let Some(container_el) = container_ref.get_untracked() else {
            return;
        };
        let Some(loading_bar_el) = loading_bar_ref.get_untracked() else {
            return;
        };
        if container_el.get_attribute("style") != Some(String::new()) {
            let _ = container_el.set_attribute("style", "");
            loading_bar_el.style(("transition", "none"));
            loading_bar_el.style(("max-width", "0"));
            let _ = loading_bar_el.offset_width();
        }
        loading_bar_el.style(("background-color", "var(--colorStatusDangerForeground1)"));
        loading_bar_el.style(("transition", "max-width 0.5s linear"));
        loading_bar_el.style(("max-width", "100%"));
    });

    comp_ref.load(LoadingBarRef {
        start,
        finish,
        error,
    });
    view! {
        <div
            class="thaw-config-provider thaw-loading-bar-container"
            data-thaw-id=config_provider.id()
            style="display: none"
            node_ref=container_ref
        >
            <div
                class="thaw-loading-bar"
                node_ref=loading_bar_ref
                on:transitionend=on_transitionend
            ></div>
        </div>
    }
}