feat(TreeView): support toggle node by ArrowLeft/Right (#4351)

* feat: 增加左右按键支持

* test: 增加单元测试

* refactor: 更改参数名称

* refactor: 更新参数名称

* feat: 支持空格

* doc: 更新注释

* doc: 更新示例本地化

* test: 移除不需要的单元测试

* chore: bump version 8.9.4-beta03

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor

@@ -194,7 +194,7 @@
            Introduction="@Localizer["TreeViewEnableKeyboardArrowUpDownIntro"]"
            Name="Normal">
     <section ignore>@_selectedValue</section>
-    <TreeView TItem="TreeFoo" Items="@KeyboardItems" OnTreeItemClick="@OnTreeItemKeyboardClick" EnableKeyboardArrowUpDown="true" />
+    <TreeView TItem="TreeFoo" Items="@KeyboardItems" OnTreeItemClick="@OnTreeItemKeyboardClick" EnableKeyboard="true" />
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()"></AttributeTable>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -709,7 +709,7 @@
     "TreeViewMaxSelectedCountIntro": "Control the maximum number of selectable items by setting the <code>MaxSelectedCount</code> property, and handle the logic through the <code>OnMaxSelectedCountExceed</code> callback",
     "TreeViewMaxSelectedCountDesc": "When more than 2 nodes are selected, a <code>Toast</code> prompt bar will pop up",
     "TreeViewEnableKeyboardArrowUpDownTitle": "Keyboard",
-    "TreeViewEnableKeyboardArrowUpDownIntro": "Support keyboard up and down arrow operations by setting <code>EnableKeyboardArrowUpDown=\"true\"</code>"
+    "TreeViewEnableKeyboardArrowUpDownIntro": "Support keyboard up and down arrow operations by setting <code>EnableKeyboardArrowUpDown=\"true\"</code>. <kbd>ArrowLeft</kbd> collapse the node, <kbd>ArrowRight</kbd> expand the node, <kbd>ArrowUp</kbd> move the node up, <kbd>ArrowDown</kbd> move the node down, <kbd>Space</kbd> select the node,"
   },
   "BootstrapBlazor.Server.Components.Samples.Trees": {
     "TreeIntro": "<p>Obsolete，The <a href=\"treeviews\" alt=\"treeview\">TreeView</a> provides more functions",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -709,7 +709,7 @@
     "TreeViewMaxSelectedCountIntro": "通过设置 <code>MaxSelectedCount</code> 属性控制最大可选数量，通过 <code>OnMaxSelectedCountExceed</code> 回调处理逻辑",
     "TreeViewMaxSelectedCountDesc": "选中节点超过 2 个时，弹出 <code>Toast</code> 提示栏",
     "TreeViewEnableKeyboardArrowUpDownTitle": "键盘支持",
-    "TreeViewEnableKeyboardArrowUpDownIntro": "通过设置 <code>EnableKeyboardArrowUpDown=\"true\"</code> 支持键盘上下箭头操作"
+    "TreeViewEnableKeyboardArrowUpDownIntro": "通过设置 <code>EnableKeyboardArrowUpDown=\"true\"</code> 支持键盘上下箭头操作。<kbd>左箭头</kbd> 收起节点，<kbd>右箭头</kbd> 展开节点，<kbd>上箭头</kbd> 向上移动节点，<kbd>下箭头</kbd> 向下移动节点，<kbd>空格</kbd> 选中节点"
   },
   "BootstrapBlazor.Server.Components.Samples.Trees": {
     "TreeIntro": "<p>本组件已弃用，请使用新组件 <a href=\"treeviews\" alt=\"treeview\">TreeView</a> 提供更多功能",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.9.4-beta02</Version>
+    <Version>8.9.4-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/TreeView/TreeView.razor

@@ -18,7 +18,7 @@
 }
 else
 {
-    <div @attributes="AdditionalAttributes" id="@Id" tabindex="0" class="@ClassString" data-bb-keyboard-arrow-up-down="@EnableKeyboardArrowUpDownString">
+    <div @attributes="AdditionalAttributes" id="@Id" tabindex="0" class="@ClassString" data-bb-keyboard="@EnableKeyboardString">
         @if (ShowSearch)
         {
             @if (SearchTemplate == null)

src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs

@@ -246,10 +246,15 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     public string? ExpandNodeIcon { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否开启键盘上下键操作 默认 false
+    /// 获得/设置 是否开启键盘上下左右按键操作 默认 false
+    /// <para>ArrowLeft 收起节点</para>
+    /// <para>ArrowRight 展开节点</para>
+    /// <para>ArrowUp 向上移动节点</para>
+    /// <para>ArrowDown 向下移动节点</para>
+    /// <para>Space 选中当前节点</para>
     /// </summary>
     [Parameter]
-    public bool EnableKeyboardArrowUpDown { get; set; }
+    public bool EnableKeyboard { get; set; }
 
     /// <summary>
     /// 获得/设置 是否键盘上下键操作当前选中节点与视窗关系配置 默认 null 使用 { behavior: "smooth", block: "center", inline: "nearest" }
@@ -295,7 +300,7 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
 
     private string? _searchText;
 
-    private string? EnableKeyboardArrowUpDownString => EnableKeyboardArrowUpDown ? "true" : null;
+    private string? EnableKeyboardString => EnableKeyboard ? "true" : null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -396,8 +401,15 @@ public async ValueTask TriggerKeyDown(string key)
         // 如果兄弟节点没有时，找到父亲节点
         if (ActiveItem != null)
         {
-            _keyboardArrowUpDownTrigger = true;
-            await ActiveTreeViewItem(key, ActiveItem);
+            if (key == "ArrowUp" || key == "ArrowDown")
+            {
+                _keyboardArrowUpDownTrigger = true;
+                await ActiveTreeViewItem(key, ActiveItem);
+            }
+            else if (key == "ArrowLeft" || key == "ArrowRight")
+            {
+                await OnToggleNodeAsync(ActiveItem, true);
+            }
         }
     }
 

src/BootstrapBlazor/Components/TreeView/TreeView.razor.js

@@ -30,14 +30,23 @@ export function init(id, invoke, method) {
     })
 
     EventHandler.on(el, 'keydown', '.tree-root', e => {
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
-            const v = el.getAttribute('data-bb-keyboard-arrow-up-down');
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            const v = el.getAttribute('data-bb-keyboard');
             if (v === "true") {
                 e.preventDefault();
 
                 invoke.invokeMethodAsync(method, e.key);
             }
         }
+        else if (e.keyCode === 32) {
+            const v = el.getAttribute('data-bb-keyboard');
+            if (v === "true") {
+                const checkbox = el.querySelector(".active > .tree-content > .form-check > .form-check-input");
+                if (checkbox) {
+                    checkbox.click();
+                }
+            }
+        }
     });
 }
 

test/UnitTest/Components/TreeViewTest.cs

@@ -901,7 +901,7 @@ public async Task KeyBoard_Ok()
         var activeItemText = "1010";
         var cut = Context.RenderComponent<TreeView<TreeFoo>>(pb =>
         {
-            pb.Add(a => a.EnableKeyboardArrowUpDown, true);
+            pb.Add(a => a.EnableKeyboard, true);
             pb.Add(a => a.Items, items);
             pb.Add(a => a.OnTreeItemClick, new Func<TreeViewItem<TreeFoo>, Task>(treeViewItem =>
             {
@@ -942,6 +942,29 @@ public async Task KeyBoard_Ok()
         Assert.Equal("1010", activeItemText);
     }
 
+    [Fact]
+    public async Task ToggleExpand_Ok()
+    {
+        List<TreeFoo> data =
+        [
+            new() { Text = "1010", Id = "1010" },
+            new() { Text = "1010-01", Id = "1010-01", ParentId = "1010" },
+        ];
+
+        var items = TreeFoo.CascadingTree(data);
+        items[0].IsActive = true;
+        var cut = Context.RenderComponent<TreeView<TreeFoo>>(pb =>
+        {
+            pb.Add(a => a.EnableKeyboard, true);
+            pb.Add(a => a.Items, items);
+        });
+        await cut.InvokeAsync(() => cut.Instance.TriggerKeyDown("ArrowRight"));
+        cut.Contains("node-icon visible fa-solid fa-caret-right fa-rotate-90");
+
+        await cut.InvokeAsync(() => cut.Instance.TriggerKeyDown("ArrowLeft"));
+        cut.Contains("node-icon visible fa-solid fa-caret-right");
+    }
+
     class MockTree<TItem> : TreeView<TItem> where TItem : class
     {
         public bool TestComparerItem(TItem? a, TItem? b) => base.Equals(a, b);