feat(blazorui): add new SearchButton feature to BitSearchBox #6356 (#…

…6383)
bitfoundation · Dec 25, 2023 · a1cb638 · a1cb638
1 parent 2cc9415
commit a1cb638
Show file tree

Hide file tree

Showing 6 changed files with 267 additions and 100 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor
@@ -5,9 +5,9 @@
      id="@_Id"
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value">
-    <div class="bit-srb-cnt @Classes?.Container" style="@Styles?.Container">
-        <div style="@Styles?.SearchIconContainer" class="bit-srb-ict @Classes?.SearchIconContainer" aria-hidden="true">
-            <i style="@Styles?.SearchIcon" class="bit-icon bit-icon--@IconName @Classes?.SearchIcon" aria-hidden="true" />
+    <div class="bit-srb-cnt @Classes?.InputContainer" style="@Styles?.InputContainer">
+        <div style="@Styles?.IconWrapper" class="bit-srb-iwp @Classes?.IconWrapper" aria-hidden="true">
+            <i style="@Styles?.Icon" class="bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
         </div>
         <input @ref="_inputRef" @attributes="InputHtmlAttributes" @onkeydown="@((k) => HandleOnKeyDown(k))" @onfocusin="HandleInputFocusIn" @onfocusout="HandleInputFocusOut" @oninput="@HandleOnChange"
                id="@_inputId"
@@ -22,21 +22,27 @@
                disabled="@(IsEnabled is false)" />
         @if (CurrentValue.HasValue())
         {
-            <div style="@Styles?.ClearButtonContainer" class="bit-srb-cbc @Classes?.ClearButtonContainer">
-                <button @onclick="HandleOnClear"
-                        style="@Styles?.ClearButton"
-                        class="bit-srb-cbt @Classes?.ClearButton"
-                        type="button"
-                        aria-hidden="true"
-                        aria-label="Clear text"
-                        disabled="@(CurrentValue.HasNoValue())">
-                    <span style="@Styles?.ClearButtonIconContainer" class="@Classes?.ClearButtonIconContainer">
-                        <i style="@Styles?.ClearButtonIcon" class="bit-icon bit-icon--Cancel @Classes?.ClearButtonIcon" aria-hidden="true" />
-                    </span>
-                </button>
-            </div>
+            <button @onclick="HandleOnClearButtonClick"
+                    style="@Styles?.ClearButton"
+                    class="bit-srb-cbt @Classes?.ClearButton"
+                    type="button"
+                    aria-hidden="true"
+                    aria-label="Clear text"
+                    disabled="@(CurrentValue.HasNoValue())">
+                <i style="@Styles?.ClearButtonIcon" class="bit-icon bit-icon--Cancel @Classes?.ClearButtonIcon" aria-hidden="true" />
+            </button>
         }
     </div>
+    @if (ShowSearchButton)
+    {
+        <button @onclick="HandleOnSearchButtonClick"
+                style="@Styles?.SearchButton"
+                class="bit-srb-sbn @Classes?.SearchButton"
+                aria-hidden="true"
+                aria-label="Search text">
+            <i style="@Styles?.SearchButtonIcon" class="bit-icon bit-icon--@SearchButtonIconName @Classes?.SearchButtonIcon" aria-hidden="true" />
+        </button>
+    }
 
     @if ((SuggestItems?.Any() ?? false) || SuggestItemProvider is not null)
     {

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
@@ -9,6 +9,7 @@ public partial class BitSearchBox
     private bool isUnderlined;
     private bool inputHasFocus;
     private bool fixedIcon;
+    private bool showSearchButton;
 
     private string _inputId = string.Empty;
     private string _calloutId = string.Empty;
@@ -19,7 +20,7 @@ public partial class BitSearchBox
     private List<string> _searchItems = [];
     private int _selectedIndex = -1;
 
-    private bool InputHasFocus
+    private bool _inputHasFocus
     {
         get => inputHasFocus;
         set
@@ -167,6 +168,26 @@ public bool IsUnderlined
     /// </summary>
     [Parameter] public int MinSuggestTriggerChars { get; set; } = 3;
 
+    /// <summary>
+    /// Custom icon name for the search button.
+    /// </summary>
+    [Parameter] public string SearchButtonIconName { get; set; } = "ChromeBackMirrored";
+
+    /// <summary>
+    /// Whether to show the search button.
+    /// </summary>
+    [Parameter]
+    public bool ShowSearchButton
+    {
+        get => showSearchButton;
+        set
+        {
+            if (showSearchButton == value) return;
+
+            showSearchButton = value;
+            ClassBuilder.Reset();
+        }
+    }
 
     protected override string RootElementClass => "bit-srb";
 
@@ -180,7 +201,9 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => IsUnderlined ? $"{RootElementClass}-und" : string.Empty);
 
-        ClassBuilder.Register(() => InputHasFocus ? $"{RootElementClass}-{(FixedIcon ? "fic-" : string.Empty)}foc" : string.Empty);
+        ClassBuilder.Register(() => _inputHasFocus ? $"{RootElementClass}-{(FixedIcon ? "fic-" : string.Empty)}foc" : string.Empty);
+
+        ClassBuilder.Register(() => ShowSearchButton ? $"{RootElementClass}-ssb" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
@@ -208,12 +231,23 @@ protected override Task OnInitializedAsync()
 
     private void HandleOnValueChanged(object? sender, EventArgs args) => ClassBuilder.Reset();
 
-    private void HandleInputFocusIn() => InputHasFocus = true;
+    private void HandleInputFocusIn() => _inputHasFocus = true;
 
-    private void HandleInputFocusOut() => InputHasFocus = false;
+    private void HandleInputFocusOut() => _inputHasFocus = false;
 
-    private async Task HandleOnClear()
+    private async Task HandleOnSearchButtonClick()
     {
+        if (IsEnabled is false) return;
+
+        await OnSearch.InvokeAsync(CurrentValue);
+
+        await CloseCallout();
+    }
+
+    private async Task HandleOnClearButtonClick()
+    {
+        if (IsEnabled is false) return;
+
         await HandleOnChange(new() { Value = string.Empty });
 
         await _inputRef.FocusAsync();