Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SimpleSelect - working example, waiting for css fix for not closing the select box upon clicking inside it

Browse Source
This commit is contained in:
markosteger 2023-02-15 13:04:44 +01:00
parent ca4aab4002
commit 45380821ad
2 changed files with 71 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/Connected.Components/Components/SimpleSelect.razor
View File

@ -6,20 +6,53 @@
@if (Items is not null) @if (Items is not null)
{ {
<div class="@InputFieldClassList"> <div class="@InputFieldClassList">
@if (EnableSearch)
{ <select type="textarea" style="height:0px;" @attributes=@InputAttributes>
<TextInput Placeholder="Enter search.." </select>
@bind-Value="@SearchText" /> @if (IsLabel)
}
<select @onchange="@ChangeValueAsync">
@foreach (ValueType item in Items)
{ {
@if (item is not null) <label class="label-animated">@Label</label>
{
<option value="@item">@item.ToString()</option>
}
} }
</select>
</div> <span class="highlight"></span>
<span class="bar">
</span>
<span class="input-glyph-wraper">
@if (Clearable)
{
<span class="input-glyph button">
<i class='bx bx-x-circle'></i>
</span>
}
<span class="input-glyph">
<i class='bx bx-caret-down'></i>
</span>
@if (IsError)
{
<span class="input-glyph error">
<i class='bx bx-error-circle'></i>
</span>
}
</span>
<div class="drop-down">
<div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
@if (EnableSearch)
{
<input type="text"
placeholder="Enter search string..."
class="dropdown-item"
@bind-value="@SearchText"
/>
}
@foreach (ValueType item in Items)
{
@if (item is not null)
{
<div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
}
}
</div>
</div>
</div>
} }

26
src/Connected.Components/Components/SimpleSelect.razor.cs
View File

@ -1,7 +1,5 @@
using Connected.Models; using Connected.Models;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
namespace Connected.Components; namespace Connected.Components;
public partial class SimpleSelect<ValueType> : InputBase public partial class SimpleSelect<ValueType> : InputBase
@ -31,6 +29,29 @@ public partial class SimpleSelect<ValueType> : InputBase
} }
} }
private string DropDownClass { get; set; } = "drop-down";
bool DropDownClicked = false;
public void DropDownClassToggle()
{
DropDownClicked = !DropDownClicked;
if (DropDownClicked)
{
DropDownClass = "";
} else
{
DropDownClass = "drop-down";
}
StateHasChanged();
}
private async Task SetSelectedItem(ValueType item)
{
//DropDownClassToggle();
await ValueChanged.InvokeAsync(item);
}
private async Task FilterItems() private async Task FilterItems()
{ {
if (string.IsNullOrEmpty(_searchText)) if (string.IsNullOrEmpty(_searchText))
@ -61,6 +82,7 @@ public partial class SimpleSelect<ValueType> : InputBase
if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true); if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
} }
OriginalItems = Items; OriginalItems = Items;
if (_searchText.Length>0) await FilterItems();
await base.OnInitializedAsync(); await base.OnInitializedAsync();
} }
} }