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

use crate::RatingInjection;

use super::{rating_item::RatingItem, RatingColor, RatingSize};
use leptos::{context::Provider, prelude::*, reactive::wrappers::write::SignalSetter};
use thaw_utils::{class_list, mount_style};

#[component]
pub fn RatingDisplay(
    #[prop(optional, into)] class: MaybeProp<String>,
    /// The value of the rating.
    #[prop(optional, into)]
    value: Signal<f32>,
    /// The max value of the rating. This controls the number of rating items displayed.
    /// Must be a whole number greater than 1.
    #[prop(default = 5.into(), into)]
    max: Signal<u8>,
    /// Sets the size of the Rating items.
    #[prop(default = RatingSize::Medium.into(), into)]
    size: Signal<RatingSize>,
    /// Rating color.
    #[prop(optional, into)]
    color: Signal<RatingColor>,
) -> impl IntoView {
    mount_style("rating", include_str!("../rating/rating.css"));

    view! {
        <div
            role="img"
            class=class_list![
                "thaw-rating-display",
                move || format!("thaw-rating-display--{}", size.get().as_str()),
                class
            ]
        >
            <Provider value=RatingInjection {
                value: (value, SignalSetter::default()).into(),
                hovered_value: RwSignal::new(None::<f32>),
                name: Memo::new(move |_| String::new()),
                step: 0.5.into(),
                size,
                color,
                interactive: false,
            }>
                {move || {
                    let mut max = max.get();
                    if max < 2 {
                        max = 2;
                    }
                    (0..max)
                        .into_iter()
                        .map(|i| {
                            view! { <RatingItem value=i + 1 /> }
                        })
                        .collect_view()
                }}
            </Provider>
            <span aria-hidden="true" class="thaw-rating-display__value-text">
                {move || value.get()}
            </span>
        </div>
    }
}