TransferList DoubleClick (#132)

Author: mckaragoz

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor

@@ -49,7 +49,7 @@
                 }
                 else
                 {
-                    <MudListItemExtended Value="@item" Text="@(ToStringFunc == null ? item.ToString() : ToStringFunc(item))" />
+                    <MudListItemExtended Value="@item" @ondblclick="@(() => OnDoubleClickHandler(new MouseEventArgs(), item))" Text="@(ToStringFunc == null ? item.ToString() : ToStringFunc(item))" />
                 }
             </MudVirtualize>
         }

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

@@ -324,6 +324,11 @@ public bool MultiSelection
         /// </summary>
         [Parameter] public EventCallback<FocusEventArgs> OnFocusOut { get; set; }
 
+        /// <summary>
+        /// Fired on the OnDoubleClick event.
+        /// </summary>
+        [Parameter] public EventCallback<ListItemClickEventArgs<T>> OnDoubleClick { get; set; }
+
         #endregion
 
 
@@ -1335,6 +1340,17 @@ public async Task ForceUpdate()
             UpdateSelectedStyles();
         }
 
+        protected async Task OnDoubleClickHandler(MouseEventArgs args, T itemValue)
+        {   
+            await OnDoubleClick.InvokeAsync(new ListItemClickEventArgs<T>() { MouseEventArgs = args, ItemValue = itemValue});
+        }
+
         #endregion
     }
+
+    public class ListItemClickEventArgs<T>
+    {
+        public MouseEventArgs MouseEventArgs { get; set; }
+        public T ItemValue { get; set; }
+    }
 }

CodeBeam.MudExtensions/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" 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">
         <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" 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">
         <SelectAllTemplate>
             @if (SelectAllType == SelectAllType.SelectAllItem)
             {

CodeBeam.MudExtensions/Components/TransferList/MudTransferList.razor.cs

@@ -78,6 +78,12 @@ public partial class MudTransferList<T> : MudComponentBase
         [Parameter]
         public bool Disabled { get; set; }
 
+        /// <summary>
+        /// If true, double click transfers the item. Doesn't have any effect on multitransfer is true.
+        /// </summary>
+        [Parameter]
+        public bool AllowDoubleClick { get; set; }
+
         /// <summary>
         /// Allows the transfer multiple items at once.
         /// </summary>
@@ -295,5 +301,23 @@ protected void OrderItems()
             EndCollection = OrderFunc.Invoke(EndCollection);
         }
 
+        protected async Task DoubleClick(ListItemClickEventArgs<T> args)
+        {
+            if (AllowDoubleClick == false)
+            {
+                return;
+            }
+
+            if (StartCollection != null && StartCollection.Contains(args.ItemValue))
+            {
+                await Transfer(true);
+            }
+            else if (EndCollection != null && EndCollection.Contains(args.ItemValue))
+            {
+                await Transfer(false);
+            }
+
+        }
+
     }
 }

ComponentViewer.Docs/Pages/Examples/TransferListExample1.razor

@@ -4,7 +4,8 @@
     <MudItem xs="12" sm="8" Class="d-flex flex-column align-center justify-center">
         <MudTransferList @ref="_transferList" T="string" @bind-StartCollection="_startCollection" @bind-EndCollection="_endCollection" Vertical="_vertical" Color="_color"
             StyleListCommon="background-color: var(--mud-palette-background-grey); width: 200px" MultiSelection="_multiSelection" MaxItems="_maxItems" SelectAllType="_selectAllType"
-                         PreventTransfer="@(new Func<bool, bool>(CheckTransfer))" OrderFunc="@(_orderOnTransfer == false ? null : new Func<ICollection<string>, ICollection<string>>(OrderMethod))" ButtonVariant="_buttonVariant" />
+            PreventTransfer="@(new Func<bool, bool>(CheckTransfer))" OrderFunc="@(_orderOnTransfer == false ? null : new Func<ICollection<string>, ICollection<string>>(OrderMethod))" ButtonVariant="_buttonVariant"
+            AllowDoubleClick="_allowDoubleClick" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -15,6 +16,7 @@
             <MudSwitchM3 @bind-Checked="_multiSelection" Label="MultiSelection" Color="Color.Primary" />
             <MudSwitchM3 @bind-Checked="_preventTurkeyTransfer" Label="Prevent Transfer If Turkey Selected" Color="Color.Primary" />
             <MudSwitchM3 @bind-Checked="_orderOnTransfer" Label="Order on Transfer" Color="Color.Primary" />
+            <MudSwitchM3 @bind-Checked="_allowDoubleClick" Label="Allow Double Click" Color="Color.Primary" />
             <MudNumericField @bind-Value="_maxItems" Clearable="true" Label="MaxItems" Variant="Variant.Outlined" Margin="Margin.Dense" />
             <MudSelectExtended @bind-Value="_selectAllType" ItemCollection="@(Enum.GetValues<SelectAllType>())" Label="SelectAll Type" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
             <MudSelectExtended @bind-Value="_color" ItemCollection="@(Enum.GetValues<Color>())" Label="Color" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
@@ -32,6 +34,7 @@
     bool _multiSelection;
     bool _preventTurkeyTransfer;
     bool _orderOnTransfer;
+    bool _allowDoubleClick;
     int? _maxItems;
     SelectAllType _selectAllType = SelectAllType.Buttons;
     Color _color = Color.Primary;

ComponentViewer.Docs/Pages/Examples/TransferListExampleIntro.razor

@@ -4,4 +4,5 @@
     <MudAlert Class="mud-width-full" Severity="Severity.Info"><b>Knowledge:</b> SelectAll Item only show on MultiSelection.</MudAlert>
     <MudAlert Class="mud-width-full" Severity="Severity.Warning"><b>Limitation:</b> Null items should not use to transfer in MultiSelection.</MudAlert>
     <MudAlert Class="mud-width-full" Severity="Severity.Warning"><b>Limitation:</b> Constant collections like arrays can not be use in MudTransferList.</MudAlert>
+    <MudAlert Class="mud-width-full" Severity="Severity.Warning"><b>Limitation:</b> DoubleClick works only single transfer (not with multitransfer) and does not work with double touch for now.</MudAlert>
 </MudGrid>