Wheel Multiple Value Change On Touch (#181)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/Wheel/MudWheel.razor

@@ -9,7 +9,7 @@
     {
         <MudText Align="Align.Center" Color="@Color">@Label</MudText>
     }
-    <MudSwipeArea Class="@InnerClassname" Style="@GetStylename()" Sensitivity="@Sensitivity" OnSwipe="@(async(d) => await HandleOnSwipe(d))" @onwheel="HandleOnWheel" PreventDefault="true">
+    <MudSwipeArea Class="@InnerClassname" Style="@GetStylename()" Sensitivity="@Sensitivity" OnSwipeEnd="HandleOnSwipe" @onwheel="HandleOnWheel" PreventDefault="true">
 
         @if (true)
         {

CodeBeam.MudBlazor.Extensions/Components/Wheel/MudWheel.razor.cs

@@ -60,10 +60,10 @@ public partial class MudWheel<T> : MudBaseInput<T>
         public int WheelLevel { get; set; } = 2;
 
         /// <summary>
-        /// The minimum swipe delta to change wheel value on touch devices. Default is 30.
+        /// The minimum swipe delta to change wheel value on touch devices. Default is 40.
         /// </summary>
         [Parameter]
-        public int Sensitivity { get; set; } = 30;
+        public int Sensitivity { get; set; } = 40;
 
         [Parameter]
         public string InnerClass { get; set; }
@@ -143,18 +143,18 @@ protected async Task HandleOnWheel(WheelEventArgs args)
             await Task.Delay(300);
         }
 
-        protected async Task HandleOnSwipe(SwipeDirection direction)
+        protected async Task HandleOnSwipe(SwipeEventArgs args)
         {
             if (Disabled || ReadOnly)
             {
                 return;
             }
             int index = GetIndex();
-            if ((direction == SwipeDirection.TopToBottom && index == 0) || (direction == SwipeDirection.BottomToTop && index == ItemCollection.Count - 1))
+            if ((args.SwipeDirection == SwipeDirection.TopToBottom && index == 0) || (args.SwipeDirection == SwipeDirection.BottomToTop && index == ItemCollection.Count - 1))
             {
                 return;
             }
-            if (direction == SwipeDirection.BottomToTop)
+            if (args.SwipeDirection == SwipeDirection.BottomToTop)
             {
                 _animateValue = GetAnimateValue();
             }
@@ -163,19 +163,34 @@ protected async Task HandleOnSwipe(SwipeDirection direction)
                 _animateValue = - GetAnimateValue();
             }
 
-
-            await _animate.Refresh();
-            if (direction == SwipeDirection.TopToBottom)
-            {
-                T val = ItemCollection[index - 1];
-                await SetValueAsync(val);
-            }
-            else if (direction == SwipeDirection.BottomToTop)
+            int changedCount = (Math.Abs((int)args.SwipeDelta) / (Sensitivity == 0 ? 1 : Sensitivity));
+            for (int i = 0; i < changedCount; i++)
             {
-                T val = ItemCollection[index + 1];
-                await SetValueAsync(val);
+                await _animate.Refresh();
+                StateHasChanged();
+                if (args.SwipeDirection == SwipeDirection.TopToBottom)
+                {
+                    if (index - 1 < 0)
+                    {
+                        break;
+                    }
+                    T val = ItemCollection[index - 1];
+                    index--;
+                    await SetValueAsync(val);
+                    StateHasChanged();
+                }
+                else if (args.SwipeDirection == SwipeDirection.BottomToTop)
+                {
+                    if (ItemCollection.Count <= index + 1)
+                    {
+                        break;
+                    }
+                    T val = ItemCollection[index + 1];
+                    index++;
+                    await SetValueAsync(val);
+                    StateHasChanged();
+                }
             }
-
         }
 
         public async Task ChangeWheel(int changeCount)

ComponentViewer.Wasm/wwwroot/index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>ComponentViewer.Wasm</title>
     <base href="/" />
-    <link href="css/app.css" rel="stylesheet" />
     <link href="app.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap" rel="stylesheet">