canonrs-client 0.1.0

CanonRS client-side runtime
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

use leptos::prelude::*;
use canonrs_core::AvatarPrimitive;

#[derive(Clone, Copy, Debug)]
struct AvatarImageError(RwSignal<bool>);

#[derive(Clone, Copy, PartialEq, Debug)]
pub enum AvatarSize { Xs, Sm, Md, Lg, Xl }
impl AvatarSize {
    pub fn as_str(&self) -> &'static str {
        match self { Self::Xs=>"xs", Self::Sm=>"sm", Self::Md=>"md", Self::Lg=>"lg", Self::Xl=>"xl" }
    }
}

#[derive(Clone, Copy, PartialEq, Debug)]
pub enum AvatarShape { Circle, Square, Rounded }
impl AvatarShape {
    pub fn as_str(&self) -> &'static str {
        match self { Self::Circle=>"circle", Self::Square=>"square", Self::Rounded=>"rounded" }
    }
}

#[derive(Clone, Copy, PartialEq, Debug)]
pub enum AvatarStatus { Online, Offline, Busy, Away }
impl AvatarStatus {
    pub fn as_str(&self) -> &'static str {
        match self { Self::Online=>"online", Self::Offline=>"offline", Self::Busy=>"busy", Self::Away=>"away" }
    }
}

#[component]
pub fn Avatar(
    #[prop(optional)] children: Option<Children>,
    #[prop(default = AvatarSize::Md)] size: AvatarSize,
    #[prop(default = AvatarShape::Circle)] shape: AvatarShape,
    #[prop(optional)] status: Option<AvatarStatus>,
    #[prop(default = false)] animated: bool,
    #[prop(optional)] badge: Option<i32>,
    #[prop(default = String::new())] class: String,
) -> impl IntoView {
    let img_error = RwSignal::new(false);
    provide_context(AvatarImageError(img_error));

    view! {
        <AvatarPrimitive
            class={format!("{} avatar-size-{} avatar-shape-{}", class, size.as_str(), shape.as_str())}
        >
            {children.map(|c| c())}
            {status.map(|s| {
                let pulse = animated && s == AvatarStatus::Online;
                view! {
                    <span
                        data-avatar-status=""
                        data-status={s.as_str()}
                        data-pulse={pulse.then_some("")}
                    />
                }
            })}
            {badge.map(|b| view! {
                <span data-avatar-badge="">{b}</span>
            })}
        </AvatarPrimitive>
    }
}

#[component]
pub fn AvatarImage(
    src: String,
    alt: String,
    #[prop(default = String::new())] class: String,
    #[prop(into, optional)] id: Option<String>,
) -> impl IntoView {
    let img_error = expect_context::<AvatarImageError>().0;

    view! {
        <img
            data-avatar-image=""
            src={src}
            alt={alt}
            class={class}
            id={id.unwrap_or_default()}
            class:hidden=move || img_error.get()
            on:error=move |_| img_error.set(true)
        />
    }
}

#[component]
pub fn AvatarFallback(
    #[prop(optional)] children: Option<Children>,
    #[prop(default = String::new())] class: String,
    #[prop(into, optional)] id: Option<String>,
) -> impl IntoView {
    let img_error = use_context::<AvatarImageError>().map(|c| c.0);

    view! {
        <span
            data-avatar-fallback=""
            class={class}
            id={id.unwrap_or_default()}
            class:hidden=move || img_error.map_or(false, |sig| !sig.get())
        >
            {children.map(|c| c())}
        </span>
    }
}