feat(blazorui): add Focused class/style to BitCircularTimePicker #8351 (

#8353)
bitfoundation · Aug 19, 2024 · 86e782f · 86e782f
1 parent 2a2899b
commit 86e782f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/...Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs b/...Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs
@@ -9,10 +9,10 @@ public partial class BitCircularTimePicker : BitInputBase<TimeSpan?>, IAsyncDisp
     private int? _hour;
     private int? _minute;
     private bool _disposed;
+    private bool _hasFocus;
     private string? _labelId;
     private string? _inputId;
     private bool _isPointerDown;
-    private string? _focusClass;
     private bool _showHourView = true;
     private ElementReference _clockRef;
     private string _calloutId = string.Empty;
@@ -246,12 +246,14 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => Standalone ? "bit-ctp-sta" : string.Empty);
 
-        ClassBuilder.Register(() => _focusClass);
+        ClassBuilder.Register(() => _hasFocus ? $"bit-ctp-foc {Classes?.Focused}" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
+
+        StyleBuilder.Register(() => _hasFocus ? Styles?.Focused : string.Empty);
     }
 
     protected override void OnInitialized()
@@ -292,26 +294,29 @@ private async Task HandleOnFocusIn()
     {
         if (IsEnabled is false) return;
 
-        _focusClass = "bit-ctp-foc";
+        _hasFocus = true;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
         await OnFocusIn.InvokeAsync();
     }
 
     private async Task HandleOnFocusOut()
     {
         if (IsEnabled is false) return;
 
-        _focusClass = null;
+        _hasFocus = false;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
         await OnFocusOut.InvokeAsync();
     }
 
     private async Task HandleOnFocus()
     {
         if (IsEnabled is false) return;
 
-        _focusClass = "bit-ctp-foc";
+        _hasFocus = true;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
         await OnFocus.InvokeAsync();
     }
 

diff --git a/...lazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePickerClassStyles.cs b/...lazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePickerClassStyles.cs
@@ -7,6 +7,11 @@ public class BitCircularTimePickerClassStyles
     /// </summary>
     public string? Root { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the focused state of the BitCircularTimePicker.
+    /// </summary>
+    public string? Focused { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the label of the BitCircularTimePicker.
     /// </summary>

diff --git a/...Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.cs b/...Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.cs
@@ -350,6 +350,13 @@ public partial class BitCircularTimePickerDemo
                     Description = "Custom CSS classes/styles for the root element of the BitCircularTimePicker."
                 },
                 new()
+                {
+                    Name = "Focused",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the focused state of the BitCircularTimePicker."
+                },
+                new()
                 {
                     Name = "Label",
                     Type = "string?",