From 91517237c3e5379e21e58f1def05f47448005f51 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Tue, 9 Jul 2024 16:31:42 +0900
Subject: [PATCH] rating

---
 .../Components/Layout/NavMenu.razor           |   1 +
 .../Pages/FormInputs/FormInputRating.razor    | 139 ++++++++++++++++++
 BlazorFluentUI/wwwroot/app-cutom.css          |  12 ++
 3 files changed, 152 insertions(+)
 create mode 100644 BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 5501058..935c1be 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -32,6 +32,7 @@
                 </FluentNavGroup>
                 <FluentNavLink Href="forminputnumberfield" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">NumberField</FluentNavLink>
                 <FluentNavLink Href="forminputradio" Icon="@(new Icons.Regular.Size20.RadioButton())" IconColor="Color.Accent">Radio</FluentNavLink>
+                <FluentNavLink Href="forminputrating" Icon="@(new Icons.Regular.Size20.Star())" IconColor="Color.Accent">Rating</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor
new file mode 100644
index 0000000..1ff5147
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor
@@ -0,0 +1,139 @@
+@page "/forminputrating"
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Rating</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentRating</code> component allows users to provide a rating for a particular item.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Accessiblilty</FluentLabel>
+<FluentLabel Typo="Typography.Body">
+    You can use the arrow keys to 
+    increase (<span class="fluent-border-s1-r5">➡️</span>/<span class="fluent-border-s1-r5">⬆️</span>)
+    or 
+    decrease (<span class="fluent-border-s1-r5">⬅️</span>/<span class="fluent-border-s1-r5">⬇️</span>)
+    the value
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentStack VerticalAlignment="VerticalAlignment.Center">
+        <FluentRating Max="5"
+                      @bind-Value="SelectedValue"
+                      OnHoverValueChanged="@(v => HoverValue = v)" />
+        <FluentLabel>@LabelText</FluentLabel>
+    </FluentStack>
+    <FluentButton Appearance="Appearance.Lightweight"
+                  OnClick="@(e => SelectedValue = 0)">Clear Rating</FluentButton>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Customization</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack VerticalAlignment="VerticalAlignment.Center">
+        <FluentRating Max="@_maxValue"
+                      @bind-Value="_value"
+                      IconFilled="@_iconFilled"
+                      IconOutline="@_iconOutline"
+                      ReadOnly="@_readOnly"
+                      IconColor="@_iconColor"
+                      Disabled="@_disabled"
+                      AllowReset="@_allowReset" />
+        <FluentLabel>Value: @_value</FluentLabel>
+    </FluentStack>
+
+    <FluentDivider class="m-2" Role="DividerRole.Separator" />
+
+    <FluentStack HorizontalGap="100">
+        <FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+            <FluentSelect Class="fluent-fixed-w100" 
+                          Label="ReadOnly" 
+                          @bind-SelectedOption="_readOnly"
+                          Items="@(new[] { true, false})"/>
+
+            <FluentSelect Class="fluent-fixed-w100"
+                          Label="AllowReset"
+                          @bind-SelectedOption="_allowReset"
+                          Items="@(new[] { true, false})" />
+
+            <FluentSelect Class="fluent-fixed-w100"
+                          Label="Disabled"
+                          @bind-SelectedOption="_disabled"
+                          Items="@(new[] { true, false})" />
+        </FluentStack>
+        <FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+            <FluentNumberField Class="fluent-fixed-w100"
+                               TValue="int"
+                               Label="Max Value"
+                               Min="1"
+                               Max="20"
+                               @bind-Value="_maxValue"/>
+
+            <FluentSelect Class="fluent-fixed-w100"
+                          Label="Color"
+                          @bind-SelectedOption="_iconColor"
+                          Items="@(Enum.GetValues<Color>().Where(v => v != Color.Custom))" 
+                          OptionValue="@(v => v.ToAttributeValue())"/>
+
+            <FluentSelect Class="fluent-fixed-w100"
+                          TOption="string"
+                          Label="Icons"
+                          SelectedOptionChanged="@SetIcon"
+                          Items="@IconsName" />
+        </FluentStack>
+    </FluentStack>
+</FluentCard>
+
+@code {
+    int SelectedValue = 0;
+    int? HoverValue = null;
+
+    private string LabelText => (HoverValue ?? SelectedValue) switch
+    {
+        1 => "Very bad",
+        2 => "Bad",
+        3 => "Sufficient",
+        4 => "Good",
+        5 => "Awesome!",
+        _ => "Rate our product!"
+    };
+
+    readonly List<string> IconsName = ["Heart", "Star", "Alert", "PersonCircle"];
+    readonly Icon[] IconsFilled = new Icon[]
+    {
+        new Icons.Filled.Size20.Heart(),
+        new Icons.Filled.Size20.Star(),
+        new Icons.Filled.Size20.Alert(),
+        new Icons.Filled.Size20.PersonCircle(),
+    };
+    readonly Icon[] IconsOutline = new Icon[]
+    {
+        new Icons.Regular.Size20.Heart(),
+        new Icons.Regular.Size20.Star(),
+        new Icons.Regular.Size20.Alert(),
+        new Icons.Regular.Size20.PersonCircle(),
+    };
+
+    bool _readOnly = false;
+    bool _disabled = false;
+    bool _allowReset = false;
+    int _maxValue = 10;
+    int _value = 2;
+    Color _iconColor = Color.Error;
+
+    Icon _iconFilled = new Icons.Filled.Size20.Star();
+    Icon _iconOutline = new Icons.Regular.Size20.Star();
+
+
+    void SetIcon(string? name)
+    {
+        var index = name is null ? 0 : IconsName.IndexOf(name);
+
+        _iconFilled = IconsFilled[index];
+        _iconOutline = IconsOutline[index];
+    }
+
+    protected override void OnParametersSet() => SetIcon(null);
+}
diff --git a/BlazorFluentUI/wwwroot/app-cutom.css b/BlazorFluentUI/wwwroot/app-cutom.css
index 9bee22b..b50eb57 100644
--- a/BlazorFluentUI/wwwroot/app-cutom.css
+++ b/BlazorFluentUI/wwwroot/app-cutom.css
@@ -16,8 +16,20 @@
 	border-width: 1px
 }
 
+.fluent-border-s1-r5 {
+	border-radius: 5px;
+	border-style: solid;
+	border-color: var(--accent-fill-rest);
+	border-width: 1px
+}
+
 .fluent-border-d1 {
 	border-style: dashed;
 	border-color: var(--accent-fill-rest);
 	border-width: 1px
+}
+
+.fluent-fixed-w100 {
+	max-width: 100px;
+	min-width: 100px;
 }
\ No newline at end of file