Add OrientaionLock to BitSwipes (#9699)#9701
Conversation
WalkthroughThe changes introduce a comprehensive enhancement to the swipe functionality across multiple Blazor UI components. The primary modification involves adding an Changes
Assessment against linked issues
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs (1)
171-175: LGTM! Consider extracting the orientation logic.The orientation locking based on panel position is well-implemented. However, consider extracting the orientation determination logic into a separate method for better readability and reusability.
+ private BitSwipeOrientation GetOrientationLock(BitPanelPosition position) + { + return position == BitPanelPosition.Start || position == BitPanelPosition.End + ? BitSwipeOrientation.Horizontal + : BitSwipeOrientation.Vertical; + } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var dotnetObj = DotNetObjectReference.Create(this); var position = Position ?? BitPanelPosition.End; - var orientationLock = position == BitPanelPosition.Start || position == BitPanelPosition.End - ? BitSwipeOrientation.Horizontal - : BitSwipeOrientation.Vertical; + var orientationLock = GetOrientationLock(position); await _js.BitSwipesSetup(_containerId, SwipeTrigger ?? 0.25m, position, Dir == BitDir.Rtl, orientationLock, dotnetObj, false); }src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.ts (1)
Line range hint
49-78: Consider adjusting the threshold value for better touch sensitivity.The threshold value of 5 pixels for swipe detection might be too low for some touch devices, potentially causing unintended swipe triggers.
Consider increasing the threshold:
- const thresX = absX > 5; - const thresY = absY > 5; + const SWIPE_THRESHOLD = 10; // pixels + const thresX = absX > SWIPE_THRESHOLD; + const thresY = absY > SWIPE_THRESHOLD;src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs (1)
7-15: LGTM! Consider adding XML documentation.The method signature is well-structured with the new
orientationLockparameter. Consider adding XML documentation to describe the purpose and usage of each parameter, especially the neworientationLockparameter.internal static ValueTask BitSwipesSetup<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] T>( this IJSRuntime js, string id, decimal trigger, BitPanelPosition position, bool isRtl, BitSwipeOrientation orientationLock, DotNetObjectReference<T>? dotnetObj, bool isResponsive = true) where T : class + /// <summary> + /// Sets up swipe functionality for a UI component. + /// </summary> + /// <param name="js">The JavaScript runtime instance.</param> + /// <param name="id">The ID of the element to set up swipes for.</param> + /// <param name="trigger">The trigger threshold for swipe detection.</param> + /// <param name="position">The panel position.</param> + /// <param name="isRtl">Whether the component is in RTL mode.</param> + /// <param name="orientationLock">The orientation to lock swipes to.</param> + /// <param name="dotnetObj">The .NET object reference for callbacks.</param> + /// <param name="isResponsive">Whether the component is responsive.</param>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.ts(1 hunks)src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts(7 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor(15 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs(15 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor(6 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs(6 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs
- src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (14)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs (1)
858-858: LGTM! Horizontal swipe orientation aligns with dropdown's responsive behavior.The horizontal swipe orientation is appropriate for the dropdown's side panel behavior in responsive mode.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs (2)
536-536: LGTM! Vertical swipe orientation suits the date picker's UI.The vertical swipe orientation aligns well with the date picker's dropdown panel behavior.
Line range hint
351-351: Excellent consistency in swipe orientation implementation across components!The implementation demonstrates a well-thought-out pattern:
- Horizontal swipes for components that slide sideways (dropdowns)
- Vertical swipes for components that use dropdown panels (pickers)
This consistency in UX behavior will help users develop muscle memory for interactions across the UI.
Also applies to: 313-314, 858-858, 536-536
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs (1)
599-599: LGTM! Appropriate orientation choice.The vertical orientation lock is a suitable choice for a date range picker component, as it prevents horizontal swipes from interfering with the calendar navigation.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor (2)
17-17: LGTM! Improved responsive design.The change from fixed
width:300pxtomax-width:300pxenhances the responsive behavior of panels, allowing them to adapt to smaller screen sizes while maintaining their maximum width constraint.Also applies to: 34-34, 48-48, 62-62, 178-178, 189-189
Line range hint
1-199: Verify alignment with PR objectives.The changes in this file focus on responsive design improvements by modifying panel widths. However, the PR title and objectives mention adding OrientationLock to BitSwipes, but no such changes are visible in this file.
Run the following script to check for any swipe-related changes:
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor (2)
17-17: LGTM! Consistent responsive design improvements.The changes from fixed
width:300pxtomax-width:300pxare consistently applied across all panel instances, improving the responsive behavior of the ProPanel component.Also applies to: 31-31, 52-52, 67-67, 82-82, 108-108, 117-117, 126-126, 135-135, 144-144, 236-236, 251-251, 270-270, 296-296, 308-308
Line range hint
1-317: Verify PR scope and implementation.While the responsive design improvements are valuable, they appear unrelated to the PR's stated objective of adding OrientationLock to BitSwipes. Let's verify if the swipe-related changes are present in other files.
Run the following script to locate the swipe-related implementation:
src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs (1)
156-156: LGTM! Horizontal swipe orientation is appropriate for dropdown menus.The addition of
BitSwipeOrientation.Horizontalaligns with the natural interaction pattern for dropdown menus, where users expect horizontal swipe gestures.src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts (3)
49-61: Well-implemented orientation detection logic.The implementation uses appropriate thresholds to determine the swipe direction and locks it for the duration of the gesture, preventing unintended direction changes mid-swipe.
63-77: Robust orientation locking implementation.The orientation locking logic effectively:
- Cancels movements perpendicular to the locked orientation
- Maintains the primary movement direction
- Handles both horizontal and vertical orientations consistently
236-240: Well-defined orientation enum.The
BitSwipeOrientationenum provides clear states for handling swipe directions.src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs (1)
351-351: LGTM! Vertical swipe orientation is appropriate for top-sliding panels.The addition of
BitSwipeOrientation.Verticalaligns with the component's behavior of sliding from the top in responsive mode.src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs (1)
313-314: LGTM! Vertical swipe orientation is appropriate for this picker.The addition of
BitSwipeOrientation.Verticalaligns with the component's behavior of sliding from the top. The setup is properly sequenced with the pointer event registrations.
2 participants
closes #9699
Summary by CodeRabbit
Release Notes
New Features
Improvements
Technical Enhancements