Made SearchBar component independent of it's environment.

Also added additional attribute capability.
This commit is contained in:
Harrison Deng 2021-05-31 19:08:22 -05:00
parent 7d4be012cd
commit 9e3de4b6dc
2 changed files with 17 additions and 5 deletions

View File

@ -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>

View File

@ -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;