Add filter

Author: Colin Mackay

src/Stravaig.Icons.Example/Stravaig.Icons.Example.csproj

@@ -24,6 +24,7 @@
             <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
         </PackageReference>
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2"/>
+        <PackageReference Include="Humanizer.Core" Version="2.14.1" />
     </ItemGroup>
 
     <ItemGroup>

src/Stravaig.Icons.Example/ViewModels/PhosphorIconDemoViewModel.cs

@@ -1,11 +1,13 @@
 using Avalonia.Controls;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
+using Humanizer;
 using Stravaig.Avalonia.Controls.Icons;
 using System;
 using System.Collections.Generic;
 using System.Diagnostics;
 using System.Linq;
+using System.Text.RegularExpressions;
 
 namespace Stravaig.Icons.Example.ViewModels;
 
@@ -29,6 +31,12 @@ public partial class PhosphorIconDemoViewModel : ViewModelBase
     [ObservableProperty]
     private string _rgbColour;
 
+    [ObservableProperty]
+    private string? _filter;
+
+    [ObservableProperty]
+    private int _filterCount;
+
     public PhosphorIconDemoViewModel()
     {
         // In design mode, expand the tree by default so that is open in the designer.
@@ -38,9 +46,10 @@ public PhosphorIconDemoViewModel()
         _iconSize = 24;
         _colour = new HsvColor(Color.FromRgb(0xFF, 0x00, 0x00));
         _rgbColour = _colour.ToRgb().ToString();
+        _filterCount = Icons.Count;
     }
 
-    public List<KeyValuePair<PhosphorIconName, string>> Icons { get; } = Enum.GetValues<PhosphorIconName>().Select(n => new KeyValuePair<PhosphorIconName, string>(n, n.ToString())).ToList();
+    public List<IconViewModel> Icons { get; } = Enum.GetValues<PhosphorIconName>().Select(n => new IconViewModel(n)).ToList();
 
     public List<KeyValuePair<PhosphorIconType, string>> IconTypes { get; } = Enum.GetValues<PhosphorIconType>().Select(t => new KeyValuePair<PhosphorIconType, string>(t, t.ToString())).ToList();
 
@@ -49,11 +58,68 @@ partial void OnColourChanged(HsvColor value)
         RgbColour = value.ToRgb().ToString();
     }
 
+    partial void OnFilterChanged(string? value)
+    {
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            // No filter, everything visible.
+            foreach (var icon in Icons.Where(i => !i.IsVisible))
+                icon.IsVisible = true;
+
+            FilterCount = Icons.Count;
+            return;
+        }
+
+        value = new string(value.Where(c => char.IsLetterOrDigit(c) || c == '-').ToArray());
+
+        var regExValue = $"^.*{value.Kebaberize().Replace("-", ".*")}.*$";
+
+        var regEx = new Regex(regExValue, RegexOptions.IgnoreCase | RegexOptions.CultureInvariant);
+        var newCount = FilterCount;
+        foreach (var icon in Icons)
+        {
+            if (regEx.IsMatch(icon.Value))
+            {
+                if (!icon.IsVisible)
+                {
+                    icon.IsVisible = true;
+                    newCount++;
+                }
+            }
+            else
+            {
+                if (icon.IsVisible)
+                {
+                    icon.IsVisible = false;
+                    newCount--;
+                }
+            }
+        }
+
+        FilterCount = newCount;
+    }
+
     partial void OnSelectedIconTypeIndexChanged(int? value)
     {
         if (value.HasValue)
             SelectedIconType = IconTypes[value.Value].Key;
         Trace.WriteLine($"Selected Icon Type Index Changed to {value}. Type is now {SelectedIconType}.");
     }
 
+    public partial class IconViewModel : ViewModelBase
+    {
+        [ObservableProperty]
+        private bool _isVisible;
+
+        public IconViewModel(PhosphorIconName key)
+        {
+            Key = key;
+            Value = key.ToString().Kebaberize();
+            IsVisible = true;
+        }
+
+        public PhosphorIconName Key { get; }
+
+        public string Value { get; }
+    }
 }

src/Stravaig.Icons.Example/Views/PhosphorIconDemoView.axaml

@@ -24,7 +24,9 @@
                 <TextBlock Classes="H1" Text="Phosphor Icons"/>
             </Expander.Header>
             <StackPanel Orientation="Vertical">
-                <StackPanel Orientation="Horizontal">
+                <StackPanel
+                    Margin="5"
+                    Orientation="Horizontal">
                     <TextBlock
                         Margin="5"
                         VerticalAlignment="Center"
@@ -50,7 +52,9 @@
                     </ComboBox>
                 </StackPanel>
 
-                <StackPanel Orientation="Horizontal">
+                <StackPanel
+                    Margin="5"
+                    Orientation="Horizontal">
                     <TextBlock
                         Margin="5"
                         Classes="H2"
@@ -80,9 +84,29 @@
                         Text="{Binding RgbColour}"/>
                 </StackPanel>
 
-                <StackPanel Orientation="Horizontal">
-                    <TextBlock Classes="H2" Margin="5" Text="Filter:"/>
-
+                <StackPanel
+                    Margin="5"
+                    Orientation="Horizontal">
+                    <TextBlock
+                        VerticalAlignment="Center"
+                        Classes="H2"
+                        Margin="5"
+                        Text="Filter:"/>
+                    <TextBox
+                        VerticalAlignment="Center"
+                        MinWidth="256"
+                        Text="{Binding Filter}"/>
+                    <TextBlock
+                        Margin="5"
+                        VerticalAlignment="Center">
+                        <TextBlock.Text>
+                            <MultiBinding
+                                StringFormat="Showing {0} of {1} icons.">
+                                <Binding Path="FilterCount"/>
+                                <Binding Path="Icons.Count"/>
+                            </MultiBinding>
+                        </TextBlock.Text>
+                    </TextBlock>
                 </StackPanel>
 
                 <ItemsControl Name="IconsItemsControl" ItemsSource="{Binding Icons}">
@@ -94,6 +118,7 @@
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
                             <Border
+                                IsVisible="{Binding IsVisible}"
                                 Margin="5"
                                 CornerRadius="5"
                                 BorderBrush="Gray"