Add OrientationLock parameter to BitSwipeTrap (#9662)

src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor

@@ -21,7 +21,8 @@
                   Throttle="10"
                   OnMove="HandleOnSwipeMove"
                   OnEnd="HandleOnSwipeEnd"
-                  OnTrigger="HandleOnSwipeTrigger">
+                  OnTrigger="HandleOnSwipeTrigger"
+                  LockOrientation="BitSwipeOrientation.Horizontal">
         <div style="@Styles?.Container" class="bit-npn-cnt @Classes?.Container">
             @if (Header is not null)
             {

src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs

@@ -194,22 +194,12 @@ private void SearchNavItems(string? searchText)
         _filteredNavItems = [.. mainItems, .. subItems];
     }
 
-    private decimal _oldDiffY = 0;
     private void HandleOnSwipeMove(BitSwipeTrapEventArgs args)
     {
         if (IsOpen is false) return;
 
-        if (Math.Abs(args.DiffX) > Math.Abs(args.DiffY))
-        {
-            diffXPanel = args.DiffX;
-            StateHasChanged();
-        }
-        else
-        {
-            var diff = args.DiffY - _oldDiffY;
-            _js.BitExtrasScrollBy(RootElement, 0, diff > 0 ? -20 : 20);
-            _oldDiffY = args.DiffY;
-        }
+        diffXPanel = args.DiffX;
+        StateHasChanged();
 
     }
     private void HandleOnSwipeEnd(BitSwipeTrapEventArgs args)

src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeOrientation.cs

@@ -0,0 +1,22 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The lock orientation of the swipe trap component.
+/// </summary>
+public enum BitSwipeOrientation
+{
+    /// <summary>
+    /// Not orientation lock for swipe trap.
+    /// </summary>
+    None,
+
+    /// <summary>
+    /// Horizontal orientation lock of trapping the swipe action.
+    /// </summary>
+    Horizontal,
+
+    /// <summary>
+    /// Vertical orientation lock of trapping the swipe action.
+    /// </summary>
+    Vertical
+}

src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs

@@ -20,6 +20,11 @@ public partial class BitSwipeTrap : BitComponentBase, IAsyncDisposable
     /// </summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Specifies the lock direction in which the swipe trap allows to trap the swipe actions.
+    /// </summary>
+    [Parameter] public BitSwipeOrientation? LockOrientation { get; set; }
+
     /// <summary>
     /// The event callback for when the swipe action starts on the container of the swipe trap.
     /// </summary>
@@ -96,7 +101,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             var dotnetObj = DotNetObjectReference.Create(this);
-            await _js.BitSwipeTrapSetup(UniqueId, RootElement, Trigger ?? 0.25m, Threshold ?? 0, Throttle ?? 0, dotnetObj);
+            await _js.BitSwipeTrapSetup(
+                UniqueId, 
+                RootElement, 
+                Trigger ?? 0.25m, 
+                Threshold ?? 0, 
+                Throttle ?? 0, 
+                LockOrientation ?? BitSwipeOrientation.None, 
+                dotnetObj);
         }
 
         await base.OnAfterRenderAsync(firstRender);

src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.ts

@@ -8,13 +8,15 @@
             trigger: number,
             threshold: number,
             throttle: number,
+            lockOrientation: BitSwipeOrientation,
             dotnetObj: DotNetObject) {
             const bcr = element.getBoundingClientRect();
 
             let diffX = 0;
             let diffY = 0;
             let startX = -1;
             let startY = -1;
+            let orientation = BitSwipeOrientation.None;
             const isTouchDevice = Utils.isTouchDevice();
             const throttledMove = Utils.throttle((sx: number, sy: number, dx: number, dy: number) => dotnetObj.invokeMethodAsync('OnMove', sx, sy, dx, dy), throttle);
 
@@ -34,9 +36,33 @@
                 diffX = getX(e) - startX;
                 diffY = getY(e) - startY;
 
-                if ((Math.abs(diffX) > threshold || Math.abs(diffY) > threshold) && e.cancelable) {
-                    e.preventDefault();
-                    e.stopPropagation();
+                if (e.cancelable) {
+                    if (orientation === BitSwipeOrientation.None) {
+                        if (diffX !== 0 && diffY === 0) {
+                            orientation = BitSwipeOrientation.Horizontal;
+                        }
+
+                        if (diffX === 0 && diffY !== 0) {
+                            orientation = BitSwipeOrientation.Vertical;
+                        }
+                    }
+
+                    if (lockOrientation === BitSwipeOrientation.Horizontal) {
+                        if (orientation === BitSwipeOrientation.Horizontal && Math.abs(diffX) > threshold) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }
+                    else if (lockOrientation === BitSwipeOrientation.Vertical) {
+                        if (orientation === BitSwipeOrientation.Vertical && Math.abs(diffY) > threshold) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }
+                    else if ((Math.abs(diffX) > threshold || Math.abs(diffY) > threshold)) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
                 }
 
                 throttledMove(startX, startY, diffX, diffY);
@@ -59,6 +85,7 @@
                 } finally {
                     await dotnetObj.invokeMethodAsync('OnEnd', sX, sY, diffX, diffY);
                     diffX = diffY = 0;
+                    orientation = BitSwipeOrientation.None;
                 }
             };
 
@@ -67,6 +94,7 @@
                 dotnetObj.invokeMethodAsync('OnEnd', startX, startY, diffX, diffY);
                 startX = startY = -1;
                 diffX = diffY = 0;
+                orientation = BitSwipeOrientation.None;
             }
 
             if (isTouchDevice) {
@@ -130,4 +158,11 @@
             this.dotnetObj.dispose();
         }
     }
+
+    enum BitSwipeOrientation {
+        None,
+        Horizontal,
+        Vertical
+    }
+
 }

src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrapJsRuntimeExtensions.cs

@@ -8,9 +8,10 @@ internal static ValueTask BitSwipeTrapSetup(this IJSRuntime js,
                                                      decimal trigger,
                                                      decimal threshold,
                                                      int throttle,
+                                                     BitSwipeOrientation lockOrientation,
                                                      DotNetObjectReference<BitSwipeTrap>? dotnetObjectReference)
     {
-        return js.InvokeVoid("BitBlazorUI.SwipeTrap.setup", id, element, trigger, threshold, throttle, dotnetObjectReference);
+        return js.InvokeVoid("BitBlazorUI.SwipeTrap.setup", id, element, trigger, threshold, throttle, lockOrientation, dotnetObjectReference);
     }
 
     internal static ValueTask BitSwipeTrapDispose(this IJSRuntime jsRuntime, string id)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor

@@ -98,49 +98,45 @@
                 <br />
                 <div class="mobile-frame">
                     <div class="screen">
-                        <BitLayout Classes="@(new() { MainContent = "panel-adv-container" })">
-                            <Header>
-                                <BitCard FullWidth>
-                                    <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
-                                        <BitImage Src="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" Width="50" />
-                                        <BitText Typography="BitTypography.H4" Color="BitColor.Info">
-                                            bit BlazorUI
-                                        </BitText>
-                                    </BitStack>
-                                </BitCard>
-                            </Header>
-                            <Main>
+                        <div class="layout">
+                            <div class="header">
+                                <BitImage Src="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" Width="50" />
+                                <BitText Typography="BitTypography.H4" Color="BitColor.Info">
+                                    bit BlazorUI
+                                </BitText>
+                            </div>
+                            <div class="main">
                                 <BitSwipeTrap Style="width:100%;height:100%"
                                               OnMove="HandleOnMovePanelAdvanced"
                                               OnEnd="HandleOnEndPanelAdvanced"
                                               OnTrigger="HandleOnTriggerPanelAdvanced">
-                                    <BitStack HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
+                                    <div class="main-text">
                                         <BitText Style="user-select:none"
                                                  Typography="BitTypography.H4"
                                                  Color="BitColor.SecondaryBackground">
                                             Swipe left or right
                                         </BitText>
-                                    </BitStack>
+                                    </div>
 
-                                    <div class="panel-adv left" style="@GetLeftPanelAdvancedStyle()">
-                                        <div class="panel-adv-trap">
+                                    <div class="panel left" style="@GetLeftPanelAdvancedStyle()">
+                                        <div class="panel-trap">
                                             <h3>Left Menu</h3>
                                             <div>Item1</div>
                                             <div>Item2</div>
                                             <div>Item3</div>
                                         </div>
                                     </div>
-                                    <div class="panel-adv right" style="@GetRightPanelAdvancedStyle()">
-                                        <div class="panel-adv-trap">
+                                    <div class="panel right" style="@GetRightPanelAdvancedStyle()">
+                                        <div class="panel-trap">
                                             <h3>Right Menu</h3>
                                             <div>Item1</div>
                                             <div>Item2</div>
                                             <div>Item3</div>
                                         </div>
                                     </div>
                                 </BitSwipeTrap>
-                            </Main>
-                        </BitLayout>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </ExamplePreview>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.cs

@@ -12,6 +12,15 @@ public partial class BitSwipeTrapDemo
             Description = "The content of the swipe trap."
         },
         new()
+        {
+            Name = "LockOrientation",
+            Type = "BitSwipeOrientation?",
+            DefaultValue = "null",
+            Description = "Specifies the lock direction in which the swipe trap allows to trap the swipe actions.",
+            LinkType = LinkType.Link,
+            Href = "#swipe-orientation",
+        },
+        new()
         {
             Name = "OnStart",
             Type = "EventCallback<BitSwipeTrapEventArgs>",
@@ -146,6 +155,33 @@ public partial class BitSwipeTrapDemo
 
     private readonly List<ComponentSubEnum> componentSubEnums =
     [
+        new()
+        {
+            Id = "swipe-orientation",
+            Name = "BitSwipeOrientation",
+            Description = "The lock orientation of the swipe trap component.",
+            Items =
+            [
+                new()
+                {
+                    Name = "None",
+                    Value = "0",
+                    Description = "Not orientation lock for swipe trap."
+                },
+                new()
+                {
+                    Name = "Horizontal",
+                    Value = "1",
+                    Description = "Horizontal orientation lock of trapping the swipe action."
+                },
+                new()
+                {
+                    Name = "Vertical",
+                    Value = "2",
+                    Description = "Vertical orientation lock of trapping the swipe action."
+                },
+            ]
+        },
         new()
         {
             Id = "swipe-direction-enum",