using Connected.Extensions; using Connected.Utilities; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; namespace Connected.Components; public partial class RatingItem : UIComponent { /// /// Space separated class names /// protected string ClassName => new CssBuilder("") .AddClass($"mud-rating-item") .AddClass($"mud-ripple mud-ripple-icon", !DisableRipple) .AddClass($"yellow-text.text-darken-3", Color == ThemeColor.Default) .AddClass($"mud-{Color.ToDescriptionString()}-text", Color != ThemeColor.Default) .AddClass($"mud-rating-item-active", IsActive) .AddClass($"mud-disabled", Disabled) .AddClass($"mud-readonly", ReadOnly) .AddClass(Class) .Build(); [CascadingParameter] private Rating Rating { get; set; } /// /// This rating item value; /// [Parameter] public int ItemValue { get; set; } internal string ItemIcon { get; set; } internal bool IsActive { get; set; } private bool IsChecked => ItemValue == Rating?.SelectedValue; /// /// The Size of the icon. /// [Parameter] public Size Size { get; set; } = Size.Medium; /// /// The color of the component. It supports the theme colors. /// [Parameter] public ThemeColor Color { get; set; } = ThemeColor.Default; /// /// If true, disables ripple effect. /// [Parameter] public bool DisableRipple { get; set; } /// /// If true, the controls will be disabled. /// [Parameter] public bool Disabled { get; set; } /// /// If true, the item will be readonly. /// [Parameter] public bool ReadOnly { get; set; } /// /// Fires when element clicked. /// [Parameter] public EventCallback ItemClicked { get; set; } /// /// Fires when element hovered. /// [Parameter] public EventCallback ItemHovered { get; set; } protected override void OnParametersSet() { base.OnParametersSet(); ItemIcon = SelectIcon(); } internal string SelectIcon() { if (Rating == null) return null; if (Rating.HoveredValue.HasValue && Rating.HoveredValue.Value >= ItemValue) { // full icon when @RatingItem hovered return Rating.FullIcon; } else if (Rating.SelectedValue >= ItemValue) { if (Rating.HoveredValue.HasValue && Rating.HoveredValue.Value < ItemValue) { // empty icon when equal or higher RatingItem value clicked, but less value hovered return Rating.EmptyIcon; } else { // full icon when equal or higher RatingItem value clicked return Rating.FullIcon; } } else { // empty icon when this or higher RatingItem is not clicked and not hovered return Rating.EmptyIcon; } } // rating item lose hover internal Task HandleMouseOut(MouseEventArgs e) { if (Disabled || Rating == null) return Task.CompletedTask; IsActive = false; return ItemHovered.InvokeAsync(null); } internal void HandleMouseOver(MouseEventArgs e) { if (Disabled) return; IsActive = true; ItemHovered.InvokeAsync(ItemValue); } private void HandleClick(MouseEventArgs e) { if (Disabled) return; IsActive = false; if (Rating?.SelectedValue == ItemValue) { ItemClicked.InvokeAsync(0); } else { ItemClicked.InvokeAsync(ItemValue); } } }