TransferList Support Complex Types and Splitter Bar Style (#148)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor

@@ -4,7 +4,7 @@
 @using MudExtensions.Enums
 
 <MudStack Class="@Class" Style="@Style" Row="!Vertical" Spacing="Spacing">
-    <MudListExtended @ref="_startList" Class="@StartClassname" Style="@StartStylename" OnDoubleClick="DoubleClick" T="T" ItemCollection="@StartCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color">
+    <MudListExtended @ref="_startList" Class="@StartClassname" Style="@StartStylename" OnDoubleClick="DoubleClick" T="T" ItemCollection="@StartCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color" ToStringFunc="ToStringFunc">
         <SelectAllTemplate>
             @if (SelectAllType == SelectAllType.SelectAllItem)
             {
@@ -24,7 +24,7 @@
             <MudIconButton Icon="@(Vertical ? Icons.Material.Filled.KeyboardDoubleArrowUp : Icons.Material.Filled.KeyboardDoubleArrowLeft)" Disabled="Disabled" Color="@Color" Variant="@ButtonVariant" OnClick="@(() => TransferAll(false))" />
         }
     </div>
-    <MudListExtended @ref="_endList" Class="@EndClassname" Style="@EndStylename" OnDoubleClick="DoubleClick" T="T" ItemCollection="@EndCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color">
+    <MudListExtended @ref="_endList" Class="@EndClassname" Style="@EndStylename" OnDoubleClick="DoubleClick" T="T" ItemCollection="@EndCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color" ToStringFunc="ToStringFunc">
         <SelectAllTemplate>
             @if (SelectAllType == SelectAllType.SelectAllItem)
             {

CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor.cs

@@ -54,6 +54,10 @@ public partial class MudTransferList<T> : MudComponentBase
         [Parameter]
         public EventCallback<ICollection<T>> EndCollectionChanged { get; set; }
 
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.ListBehavior)]
+        public Func<T, string> ToStringFunc { get; set; }
+
         /// <summary>
         /// Fires before transfer process start. Useful to backup items or prevent transfer.
         /// </summary>

CodeBeam.MudBlazor.Extensions/Styles/Components/_splitter.scss

@@ -53,7 +53,7 @@
 }
 
 .mud-splitter-thumb-disabled ::-webkit-slider-thumb {
-    cursor: not-allowed !important;
+    cursor: default !important;
 }
 
 .mud-splitter-thumb ::-moz-range-thumb {
@@ -70,5 +70,5 @@
 }
 
 .mud-splitter-thumb-disabled ::-moz-range-thumb {
-    cursor: not-allowed !important;
+    cursor: default !important;
 }

CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.css

@@ -217,7 +217,7 @@
   cursor: ew-resize !important; }
 
 .mud-splitter-thumb-disabled ::-webkit-slider-thumb {
-  cursor: not-allowed !important; }
+  cursor: default !important; }
 
 .mud-splitter-thumb ::-moz-range-thumb {
   visibility: visible !important;
@@ -232,7 +232,7 @@
   cursor: ew-resize !important; }
 
 .mud-splitter-thumb-disabled ::-moz-range-thumb {
-  cursor: not-allowed !important; }
+  cursor: default !important; }
 
 .mud-stepper-header {
   min-height: 62px;

CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.min.css

@@ -6,7 +6,11 @@
         <TransferListExampleIntro />
     </ExampleCard>
 
-    <ExampleCard ExampleName="TransferListExample1" Title="Usage" Description="">
+    <ExampleCard ExampleName="TransferListExample1" Title="Usage" Description="The basics of the transferlist.">
         <TransferListExample1 />
     </ExampleCard>
+
+    <ExampleCard ExampleName="TransferListExample2" Title="Complex Types" Description="">
+        <TransferListExample2 />
+    </ExampleCard>
 </ExamplePage>

CodeBeam.MudBlazor.Extensions/wwwroot/MudExtensions.min.css

@@ -0,0 +1,40 @@
+@using MudBlazor.Extensions
+
+<MudGrid>
+    <MudItem xs="12" sm="8" Class="d-flex flex-column align-center justify-center">
+        <MudTransferList @ref="_transferList" T="ComplexTypes" @bind-StartCollection="_startCollection" @bind-EndCollection="_endCollection" Color="Color.Primary"
+            StyleListCommon="background-color: var(--mud-palette-background-grey); width: 200px" AllowDoubleClick="true" ToStringFunc="@(e => e?.Name + " " + e?.SurName)" />
+    </MudItem>
+
+    <MudItem xs="12" sm="4">
+        <MudStack Spacing="4">
+            
+        </MudStack>
+    </MudItem>
+</MudGrid>
+
+@code{
+    MudTransferList<ComplexTypes> _transferList;
+
+    ICollection<ComplexTypes> _startCollection = new List<ComplexTypes>()
+    {
+        new ComplexTypes() { Name = "Harry", SurName = "Potter" },
+        new ComplexTypes() { Name = "Hermione", SurName = "Granger" },
+        new ComplexTypes() { Name = "Ron", SurName = "Weasley" },
+        new ComplexTypes() { Name = "Neville", SurName = "Longbottom" },
+    };
+
+    ICollection<ComplexTypes> _endCollection = new List<ComplexTypes>()
+    {
+        new ComplexTypes() { Name = "Draco", SurName = "Malfoy" },
+        new ComplexTypes() { Name = "Seamus", SurName = "Finnigan" },
+        new ComplexTypes() { Name = "Sirius", SurName = "Black" },
+        new ComplexTypes() { Name = "Cho", SurName = "Chang" },
+    };
+
+    public class ComplexTypes
+    {
+        public string Name { get; set; }
+        public string SurName { get; set; }
+    }
+}