From 9e3de4b6dcc733bba103a8202899d90c931b57ad Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Mon, 31 May 2021 19:08:22 -0500
Subject: [PATCH] Made SearchBar component independent of it's environment.

Also added additional attribute capability.
---
 src/MultiShop/Client/Pages/Search.razor     |  2 +-
 src/MultiShop/Client/Shared/SearchBar.razor | 20 ++++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/MultiShop/Client/Pages/Search.razor b/src/MultiShop/Client/Pages/Search.razor
index 9aba2a9..fdd68b6 100644
--- a/src/MultiShop/Client/Pages/Search.razor
+++ b/src/MultiShop/Client/Pages/Search.razor
@@ -4,7 +4,7 @@
 @using MultiShop.Client.Listing
 
 <div class="my-2">
-    <div class="input-group my-2">
+    <div class="my-2">
         <SearchBar SearchPlaceholder="What are you looking for?" OnSearchRequested="@PerformSearch" @ref="searchBar">
             <Append>
                 <ToggleableButton class="btn btn-outline-secondary" title="Configure" OnToggleCallback="@((t) => {status.SearchConfiguring = t; StateHasChanged();})"><span class="oi oi-cog align-text-top"></span></ToggleableButton>
diff --git a/src/MultiShop/Client/Shared/SearchBar.razor b/src/MultiShop/Client/Shared/SearchBar.razor
index aa21f8c..807ccac 100644
--- a/src/MultiShop/Client/Shared/SearchBar.razor
+++ b/src/MultiShop/Client/Shared/SearchBar.razor
@@ -1,10 +1,19 @@
-<input type="text" class="form-control" placeholder=@SearchPlaceholder aria-label=@SearchPlaceholder id="search-input" @bind="Query" @onkeyup="@(async (a) => {if (a.Code == "Enter" || a.Code == "NumpadEnter") await Search();})" disabled="@Searching">
-<div class="input-group-append">
-    @Append
-    <button class="btn btn-outline-primary" type="button" @onclick="@(async () => await Search())" disabled="@Searching">Search</button>
+@using System.Text.Json
+@using Microsoft.Extensions.Logging
+@inject ILogger<SearchBar> Logger
+
+<div @attributes="AdditionalAttributes" class=@groupClassCss>
+    <input type="text" class="form-control" placeholder=@SearchPlaceholder aria-label=@SearchPlaceholder id="search-input" @bind="Query" @onkeyup="@(async (a) => {if (a.Code == "Enter" || a.Code == "NumpadEnter") await Search();})" disabled="@Searching">
+    <div class="input-group-append">
+        @Append
+        <button class="btn btn-outline-primary" type="button" @onclick="@(async () => await Search())" disabled="@Searching">Search</button>
+    </div>
 </div>
 
 @code {
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object> AdditionalAttributes { get; set; }
+
     [Parameter]
     public RenderFragment Append { get; set; }
 
@@ -17,6 +26,9 @@
     public EventCallback<string> OnSearchRequested { get; set; }
 
     public bool Searching { get; set; }
+
+    private string groupClassCss => "input-group " + (AdditionalAttributes != null && AdditionalAttributes.ContainsKey("class") ? AdditionalAttributes["class"] as string : null);
+
     public async Task Search()
     {
         Searching = true;