Skip to main content

orbital_base_components/overlay/inline/spinner/
base.rs

1use leptos::prelude::*;
2
3#[derive(Clone, Copy, Default, PartialEq, Eq)]
4pub enum SpinnerSize {
5    ExtraTiny,
6    Tiny,
7    ExtraSmall,
8    Small,
9    #[default]
10    Medium,
11    Large,
12    ExtraLarge,
13    Huge,
14}
15
16impl SpinnerSize {
17    pub fn as_str(&self) -> &'static str {
18        match self {
19            Self::ExtraTiny => "extra-tiny",
20            Self::Tiny => "tiny",
21            Self::ExtraSmall => "extra-small",
22            Self::Small => "small",
23            Self::Medium => "medium",
24            Self::Large => "large",
25            Self::ExtraLarge => "extra-large",
26            Self::Huge => "huge",
27        }
28    }
29}
30
31#[component]
32pub fn BaseSpinner(
33    #[prop(optional, into)] class: MaybeProp<String>,
34    #[prop(optional, into)] label: MaybeProp<String>,
35    #[prop(optional, into)] size: Signal<SpinnerSize>,
36    #[prop(optional)] children: Option<Children>,
37) -> impl IntoView {
38    let id = StoredValue::new(uuid::Uuid::new_v4().to_string());
39    let spinner_label = label;
40    let children_flag = children.is_some();
41    let labelledby = move || {
42        spinner_label.with(|label| {
43            if label.is_some() || children_flag {
44                Some(id.get_value())
45            } else {
46                None
47            }
48        })
49    };
50
51    view! {
52        <div
53            class=move || {
54                let mut parts = vec![
55                    "orbital-spinner".to_string(),
56                    format!("orbital-spinner--{}", size.get().as_str()),
57                ];
58                if let Some(extra) = class.get() {
59                    if !extra.is_empty() {
60                        parts.push(extra);
61                    }
62                }
63                parts.join(" ")
64            }
65            role="progressbar"
66            aria-labelledby=labelledby
67        >
68            <span class="orbital-spinner__spinner" aria-hidden="true">
69                <span class="orbital-spinner__spinner-tail"></span>
70            </span>
71            {label.get().map(|text| view! {
72                <span class="orbital-spinner__label" id=id.get_value()>{text}</span>
73            })}
74            {children.map(|children| view! {
75                <span class="orbital-spinner__label" id=id.get_value()>{children()}</span>
76            })}
77        </div>
78    }
79}