Replace SelectList

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -1,7 +1,7 @@
 @using GameIdeas.BlazorApp.Pages.Games
 @using GameIdeas.BlazorApp.Shared.Components.Account
-@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.SelectList
-@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
 @using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Resources
 
@@ -22,15 +22,15 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
+                <Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object" 
-                            ValueChanged=HandleAddTypeClickedAsync THeader="object"
+                        ValuesChanged=HandleAddTypeClicked Params=SelectParams
-                            Theme="SelectListTheme.Navigation" AlignRight=true>
+                        Theme="SelectTheme.Navigation" AlignRight=true>
                     <div class="second-button button">
                         <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                             <path d="M1 3H23L12 22" />
                         </svg>
                     </div>
-                </SelectList>
+                </Select>
             </div>
         </div>
         <div class="account-container">

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs

@@ -1,6 +1,6 @@
 using GameIdeas.BlazorApp.Shared.Components.Account;
-using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.SelectList;
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
@@ -13,23 +13,35 @@ public partial class GameHeader : ComponentBase
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
 
-    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
+    private readonly Dictionary<AddType, string> AddTypes = new() {
-        new SelectElement<AddType>(AddType.Manual, ResourcesKey.ManualAdd),
+        { AddType.Manual, ResourcesKey.ManualAdd },
-        new SelectElement<AddType> (AddType.Auto, ResourcesKey.AutoAdd)
+        { AddType.Auto, ResourcesKey.AutoAdd }
-    ];
+    };
 
     private AccountSettings? AccountSettings;
-    private SelectList<AddType, object>? SelectListAdd;
+    private Select<KeyValuePair<AddType, string>, object>? SelectListAdd;
+    private SelectParams<KeyValuePair<AddType, string>, object> SelectParams = new();
+
+    protected override void OnInitialized()
+    {
+        SelectParams = new()
+        {
+            Items = AddTypes,
+            GetItemLabel = item => item.Value,
+        };
+
+        base.OnInitialized();
+    }
 
     private void HandleIconClicked()
     {
         throw new NotImplementedException();
     }
 
-    private async Task HandleAddTypeClickedAsync(AddType value)
+    private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
     {
         SelectListAdd?.Close();
-        await AddTypeChanged.InvokeAsync(value);
+        await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
     }
 
     private void HandleAccountClicked()

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor

@@ -1,40 +0,0 @@
-@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
-@using GameIdeas.BlazorApp.Shared.Components.Select.Components
-@typeparam TItem 
-@typeparam THeader
-
-<div class="select-list">
-    <div class="select-button" @onclick=HandleButtonClicked>
-        @ChildContent
-    </div>
-
-    <div class="select-container @(AlignRight ? "align-right" : "")">
-        @if (IsContentOpen)
-        {
-            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
-                @foreach (var header in Headers)
-                {
-                    <SelectListElement TItem="THeader"
-                                       Value="header"
-                                       ValueChanged="HandleHeaderClicked"
-                                       Theme="Theme" />
-                }
-                @if (Headers.Any())
-                {
-                    <span class="line"></span>
-                }
-                @foreach (var item in Items)
-                {
-                    <SelectListElement TItem="TItem"
-                                       Value="item"
-                                       ValueChanged="HandleItemClicked"
-                                       Theme="Theme" />
-                }
-            </div>
-        }
-    </div>
-</div>
-
-<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
-                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs

@@ -1,56 +0,0 @@
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Select;
-
-public partial class SelectList<TItem, THeader> 
-{
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-    [Parameter] public TItem? Value { get; set; }
-    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
-    [Parameter] public THeader? Header { get; set; }
-    [Parameter] public EventCallback<THeader?> HeaderChanged { get; set; }
-    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
-    [Parameter] public IEnumerable<SelectElement<THeader>> Headers { get; set; } = [];
-    [Parameter] public SelectListTheme Theme { get; set; }
-    [Parameter] public bool AlignRight { get; set; }
-
-    private bool IsContentOpen = false;
-
-    public void Close() =>
-        IsContentOpen = false;
-
-    private void HandleButtonClicked() =>
-        IsContentOpen = !IsContentOpen;
-
-    private void HandleContentClosed()
-    {
-        IsContentOpen = false;
-    }
-
-    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
-    {
-        foreach (var item in Items)
-        {
-            item.IsSelected = false;
-        }
-
-        selectedValue.IsSelected = true;
-
-        Value = selectedValue.Item;
-        await ValueChanged.InvokeAsync(Value);
-    }
-
-    private async Task HandleHeaderClicked(SelectElement<THeader> selectedValue)
-    {
-        foreach (var header in Headers)
-        {
-            header.IsSelected = false;
-        }
-
-        selectedValue.IsSelected = true;
-
-        Header = selectedValue.Item;
-        await HeaderChanged.InvokeAsync(Header);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css

@@ -1,45 +0,0 @@
-.select-list {
-    position: relative;
-}
-
-.select-container {
-    margin-top: 4px;
-    position: absolute;
-    z-index: var(--index-dropdown)
-}
-
-.align-right {
-    right: 0;
-}
-
-.select-content {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--small-radius);
-    animation-name: fade-in;
-    animation-duration: 0.2s;
-}
-
-.select-button {
-    z-index: var(--index-component)
-}
-
-.line {
-    margin: 2px 6px;
-    border-bottom: 2px solid var(--input-selected);
-}
-
-
-/***** Navigation Theme *****/
-.select-content.navigation {
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-}
-
-/***** Sort Theme *****/
-.select-content.sort {
-    background: var(--dropdown-content);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-}