MudListExtended & MudSelectExtended: SearchBox (#105)

* Initialize

* Finalize

* Last Changes

* Add ClassSearchBox

Author: mckaragoz

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor

@@ -11,9 +11,20 @@
             <MudListItemExtended T="T" IsFunctional="true" Icon="@SelectAllCheckBoxIcon" IconColor="@Color" Text="@SelectAllText" OverrideMultiSelectionComponent="MultiSelectionComponent.None" OnClick="@(() => SelectAllItems(_allSelected))" OnClickHandlerPreventDefault="true" Dense="@Dense" Class="mb-2" />
             <MudDivider />
         }
+        
         @if (ItemCollection != null)
         {
-            <MudVirtualize IsEnabled="@Virtualize" Items="ItemCollection" Context="item" OverscanCount="@OverscanCount">
+            @if (SearchBox == true)
+            {
+                <MudListSubheaderExtended T="T" Style="position: sticky; top: -12px; background-color: var(--mud-palette-background); z-index: 10">
+                    <div @onkeydown:stopPropagation>
+                        <MudTextField @bind-Value="@_searchString" Class="@ClassSearchBox" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                              Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" IconColor="Color" />
+                    </div>
+
+                </MudListSubheaderExtended>
+            }
+            <MudVirtualize IsEnabled="@Virtualize" Items="GetSearchedItems()" Context="item" OverscanCount="@OverscanCount">
                 @if (MudSelectExtended != null)
                 {
                     <MudSelectItemExtended Value="@item" Text="@(MudSelectExtended.ToStringFunc == null ? item.ToString() : MudSelectExtended.ToStringFunc(item))" />
@@ -22,8 +33,6 @@
                 {
                     <MudListItemExtended Value="@item" Text="@item.ToString()" />
                 }
-                @*Upper commented block will replace after Experimental Select*@
-                @*<MudListItemExtended Value="@item" Text="@item.ToString()" />*@
             </MudVirtualize>
         }
         else

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Data;
 using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
@@ -9,6 +10,7 @@
 using MudBlazor.Utilities;
 using MudExtensions.Enums;
 using MudExtensions.Services;
+using static MudBlazor.CategoryTypes;
 
 namespace MudExtensions
 {
@@ -26,6 +28,7 @@ public partial class MudListExtended<T> : MudComponentBase, IDisposable
         private List<MudListExtended<T>> _childLists = new();
         internal MudListItemExtended<T> _lastActivatedItem;
         internal bool? _allSelected = false;
+        private string _searchString;
 
         protected string Classname =>
         new CssBuilder("mud-list-extended")
@@ -111,6 +114,20 @@ public IEqualityComparer<T> Comparer
         [Category(CategoryTypes.List.Behavior)]
         public ICollection<T> ItemCollection { get; set; } = null;
 
+        /// <summary>
+        /// If true, shows a searchbox for filtering items. Only works with ItemCollection approach.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBox { get; set; }
+
+        /// <summary>
+        /// SearchBox's CSS classes, seperated by space.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public string ClassSearchBox { get; set; }
+
         /// <summary>
         /// Allows virtualization. Only work if ItemCollection parameter is not null.
         /// </summary>
@@ -663,6 +680,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 }
                 _firstRendered = true;
             }
+
             _centralCommanderResultRendered = true;
         }
 
@@ -846,7 +864,7 @@ protected internal void SetSelectedValue(MudListItemExtended<T> item, bool force
             _lastActivatedItem = item;
         }
 
-        protected internal void UpdateSelectedStyles(bool deselectFirst = true)
+        protected internal void UpdateSelectedStyles(bool deselectFirst = true, bool update = true)
         {
             var items = CollectAllMudListItems(true);
             if (deselectFirst)
@@ -868,7 +886,10 @@ protected internal void UpdateSelectedStyles(bool deselectFirst = true)
                 items.Where(x => SelectedValues.Contains(x.Value, Comparer == null ? null : Comparer)).ToList().ForEach(x => x.SetSelected(true));
             }
 
-            StateHasChanged();
+            if (update == true)
+            {
+                StateHasChanged();
+            }
         }
 
         protected bool IsSelectable()
@@ -1214,7 +1235,7 @@ public async Task ActiveLastItem()
         #endregion
 
 
-        #region Others (Clear, Scroll)
+        #region Others (Clear, Scroll, Search)
 
         /// <summary>
         /// Clears value(s) and item(s) and deactive all items.
@@ -1239,6 +1260,16 @@ public void Clear()
         protected internal ValueTask ScrollToMiddleAsync(MudListItemExtended<T> item)
             => ScrollManagerExtended.ScrollToMiddleAsync(_elementId, item.ItemId);
 
+        protected ICollection<T> GetSearchedItems()
+        {
+            if (SearchBox == false || ItemCollection == null || _searchString == null)
+            {
+                return ItemCollection;
+            }
+
+            return ItemCollection.Where(x => Converter.Set(x).Contains(_searchString, StringComparison.CurrentCultureIgnoreCase)).ToList();
+        }
+
         #endregion
     }
 }

CodeBeam.MudExtensions/Components/ListExtended/MudListItemExtended.razor.cs

@@ -24,11 +24,12 @@ public partial class MudListItemExtended<T> : MudComponentBase, IDisposable
           .AddClass("mud-list-item-dense-extended", Dense == true || MudListExtended?.Dense == true)
           .AddClass("mud-list-item-gutters-extended", !DisableGutters && !(MudListExtended?.DisableGutters == true))
           .AddClass("mud-list-item-clickable-extended", MudListExtended?.Clickable)
-          .AddClass("mud-ripple", MudListExtended?.Clickable == true && !DisableRipple && !Disabled)
+          .AddClass("mud-ripple", MudListExtended?.Clickable == true && !DisableRipple && !Disabled && !IsFunctional)
           .AddClass($"mud-selected-item mud-{MudListExtended?.Color.ToDescriptionString()}-text mud-{MudListExtended?.Color.ToDescriptionString()}-hover", _selected && !Disabled && NestedList == null && !MudListExtended.DisableSelectedItemStyle)
           .AddClass("mud-list-item-hilight-extended", _active && !Disabled && NestedList == null && IsFunctional == false)
           .AddClass("mud-list-item-disabled-extended", Disabled)
           .AddClass("mud-list-item-nested-background-extended", MudListExtended != null && MudListExtended.SecondaryBackgroundForNestedItemHeader && NestedList != null)
+          .AddClass("mud-list-item-functional", IsFunctional)
           .AddClass(Class)
         .Build();
 

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor

@@ -100,7 +100,7 @@
                                  Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
                                  MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllText="@SelectAllText"
                                  CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
-                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate">
+                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox">
                             @ChildContent
 						</MudListExtended>
 					</CascadingValue>

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -296,6 +296,13 @@ public bool Dense
         [Category(CategoryTypes.FormComponent.Behavior)]
         public bool Clearable { get; set; } = false;
 
+        /// <summary>
+        /// If true, shows a searchbox for filtering items. Only works with ItemCollection approach.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBox { get; set; }
+
         /// <summary>
         /// If true, prevent scrolling while dropdown is open.
         /// </summary>

CodeBeam.MudExtensions/Styles/Components/_listextended.scss

@@ -56,7 +56,7 @@ $mud-palette-colors: primary, secondary, tertiary, info, success, warning, error
     -webkit-tap-highlight-color: transparent;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-    &:hover {
+    &:hover:not(.mud-list-item-functional) {
         background-color: var(--mud-palette-action-default-hover);
     }
 }

CodeBeam.MudExtensions/Styles/MudExtensions.css

@@ -537,7 +537,7 @@
   -webkit-appearance: none;
   -webkit-tap-highlight-color: transparent;
   transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
-  .mud-list-item-clickable-extended:hover {
+  .mud-list-item-clickable-extended:hover:not(.mud-list-item-functional) {
     background-color: var(--mud-palette-action-default-hover); }
 
 .mud-list-item-gutters-extended {

CodeBeam.MudExtensions/Styles/MudExtensions.min.css

@@ -10,7 +10,7 @@
         <ListExtendedExample1 />
     </ExampleCard>
 
-    <ExampleCard ExampleName="ListExtendedExample2" Title="ItemCollection" Description="Extended list can also populate with ItemCollection parameter.">
+    <ExampleCard ExampleName="ListExtendedExample2" Title="ItemCollection and SearchBox" Description="Extended list can also populate with ItemCollection parameter.">
         <ListExtendedExample2 />
     </ExampleCard>