ydeng/props
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made SearchBar component independent of it's environment.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/MultiShop/Client/Pages/Search.razor
View File

@ -4,7 +4,7 @@
@using MultiShop.Client.Listing @using MultiShop.Client.Listing
<div class="my-2"> <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"> <SearchBar SearchPlaceholder="What are you looking for?" OnSearchRequested="@PerformSearch" @ref="searchBar">
<Append> <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> <ToggleableButton class="btn btn-outline-secondary" title="Configure" OnToggleCallback="@((t) => {status.SearchConfiguring = t; StateHasChanged();})"><span class="oi oi-cog align-text-top"></span></ToggleableButton>

16
src/MultiShop/Client/Shared/SearchBar.razor
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"> @using System.Text.Json
<div class="input-group-append"> @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 @Append
<button class="btn btn-outline-primary" type="button" @onclick="@(async () => await Search())" disabled="@Searching">Search</button> <button class="btn btn-outline-primary" type="button" @onclick="@(async () => await Search())" disabled="@Searching">Search</button>
</div>
</div> </div>
@code { @code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object> AdditionalAttributes { get; set; }
[Parameter] [Parameter]
public RenderFragment Append { get; set; } public RenderFragment Append { get; set; }
@ -17,6 +26,9 @@
public EventCallback<string> OnSearchRequested { get; set; } public EventCallback<string> OnSearchRequested { get; set; }
public bool Searching { 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() public async Task Search()
{ {
Searching = true; Searching = true;