impulse_thaw/rating/rating_display/
mod.rs

1use crate::RatingInjection;
2
3use super::{rating_item::RatingItem, RatingColor, RatingSize};
4use leptos::{context::Provider, prelude::*, reactive::wrappers::write::SignalSetter};
5use thaw_utils::{class_list, mount_style};
6
7#[component]
8pub fn RatingDisplay(
9    #[prop(optional, into)] class: MaybeProp<String>,
10    /// The value of the rating.
11    #[prop(optional, into)]
12    value: Signal<f32>,
13    /// The max value of the rating. This controls the number of rating items displayed.
14    /// Must be a whole number greater than 1.
15    #[prop(default = 5.into(), into)]
16    max: Signal<u8>,
17    /// Sets the size of the Rating items.
18    #[prop(default = RatingSize::Medium.into(), into)]
19    size: Signal<RatingSize>,
20    /// Rating color.
21    #[prop(optional, into)]
22    color: Signal<RatingColor>,
23) -> impl IntoView {
24    mount_style("rating", include_str!("../rating/rating.css"));
25
26    view! {
27        <div
28            role="img"
29            class=class_list![
30                "thaw-rating-display",
31                move || format!("thaw-rating-display--{}", size.get().as_str()),
32                class
33            ]
34        >
35            <Provider value=RatingInjection {
36                value: (value, SignalSetter::default()).into(),
37                hovered_value: RwSignal::new(None::<f32>),
38                name: Memo::new(move |_| String::new()),
39                step: 0.5.into(),
40                size,
41                color,
42                interactive: false,
43            }>
44                {move || {
45                    let mut max = max.get();
46                    if max < 2 {
47                        max = 2;
48                    }
49                    (0..max)
50                        .into_iter()
51                        .map(|i| {
52                            view! { <RatingItem value=i + 1 /> }
53                        })
54                        .collect_view()
55                }}
56            </Provider>
57            <span aria-hidden="true" class="thaw-rating-display__value-text">
58                {move || value.get()}
59            </span>
60        </div>
61    }
62}