refactor(TreeView): redesign TreeView dom structure (#4696)

ArgoZhang · web-flow · commit ac8ea57b5542 · 2024-11-19T14:47:30.000+08:00
* refactor: 更新 Checkbox 脚本

* refactor: 增加 HasChildren 检查

* chore: bump version 9.0.1-beta04

* style: 调整样式

* refactor: 统一逻辑

* test: 更新单元测试

* refactor: 更新单元测试

* test: 更新单元测试
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.1-beta03</Version>
+    <Version>9.0.1-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.js b/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.js
@@ -8,6 +8,7 @@ export function init(id, invoke, method) {
     }
 
     EventHandler.on(el, 'click', async e => {
+        e.preventDefault();
         const stopPropagation = el.getAttribute("data-bb-stop-propagation");
         if (stopPropagation === "true") {
             e.stopPropagation();
@@ -26,10 +27,9 @@ export function init(id, invoke, method) {
                 el.parentElement.classList.add('is-checked');
             }
         }
+
         const result = await invoke.invokeMethodAsync(method, val);
-        if (result === false) {
-            e.preventDefault();
-        }
+        return result;
     });
 }
 
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor b/src/BootstrapBlazor/Components/TreeView/TreeView.razor
@@ -50,37 +50,20 @@ else
         }
         else
         {
-            <ul class="tree-root scroll" tabindex="0">
-                @foreach (var item in Items)
+            <div class="tree-root scroll" tabindex="0">
+                @foreach (var item in Rows)
                 {
-                    @RenderTreeItem(item)
+                    @RenderTreeRow(item)
                 }
-            </ul>
+            </div>
         }
     </div>
 }
 
 @code {
-    private RenderFragment<TreeViewItem<TItem>> RenderTreeNode => item =>
-    @<ul class="@GetTreeClassString(item)">
-        @foreach (var node in item.Items)
-        {
-            @RenderTreeItem(node)
-        }
-    </ul>;
-
-    private RenderFragment<TreeViewItem<TItem>> RenderTreeItem => item =>
-    @<li class="@GetItemClassString(item)">
-        @RenderTreeRow(item)
-        @if (item.Items.Any())
-        {
-            @RenderTreeNode(item)
-        }
-    </li>;
-
     private RenderFragment<TreeViewItem<TItem>> RenderTreeRow => item =>
-    @<div @key="item" class="tree-content" data-bb-tree-view-index="@Rows.IndexOf(item)" @oncontextmenu="e => OnContextMenu(e, item)" @oncontextmenu:preventDefault="IsPreventDefault" @ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd" style="@GetTreeRowStyle(item)">
-        <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="TriggerNodeArrow(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
+    @<div @key="item" class="@GetContentClassString(item)" data-bb-tree-view-index="@Rows.IndexOf(item)" @oncontextmenu="e => OnContextMenu(e, item)" @oncontextmenu:preventDefault="IsPreventDefault" @ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd" style="@GetTreeRowStyle(item)">
+        <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
         <i class="@NodeLoadingClassString"></i>
         @if (ShowCheckbox)
         {
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
@@ -50,37 +50,36 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
         .AddClass("visible", item.HasChildren || item.Items.Count > 0)
         .AddClass(NodeIcon, !item.IsExpand)
         .AddClass(ExpandNodeIcon, item.IsExpand)
-        .AddClass("disabled", !CanExpandWhenDisabled && GetItemDisabledState(item))
+        .AddClass("disabled", IsDisabled || (!CanExpandWhenDisabled && item.IsDisabled))
         .Build();
 
     private string? NodeLoadingClassString => CssBuilder.Default("node-icon node-loading")
         .AddClass(LoadingIcon)
         .Build();
 
-    /// <summary>
-    /// 获得/设置 当前行样式
-    /// </summary>
-    /// <param name="item"></param>
-    /// <returns></returns>
-    private string? GetItemClassString(TreeViewItem<TItem> item) => CssBuilder.Default("tree-item")
+    private string? GetContentClassString(TreeViewItem<TItem> item) => CssBuilder.Default("tree-content")
         .AddClass("active", ActiveItem == item)
-        .AddClass("disabled", !CanExpandWhenDisabled && GetItemDisabledState(item))
-        .Build();
-
-    /// <summary>
-    /// 获得/设置 Tree 样式
-    /// </summary>
-    /// <param name="item"></param>
-    /// <returns></returns>
-    private static string? GetTreeClassString(TreeViewItem<TItem> item) => CssBuilder.Default("tree-ul")
-        .AddClass("show", item.IsExpand)
         .Build();
 
     private string? GetNodeClassString(TreeViewItem<TItem> item) => CssBuilder.Default("tree-node")
         .AddClass("disabled", GetItemDisabledState(item))
         .Build();
 
-    private bool TriggerNodeArrow(TreeViewItem<TItem> item) => (CanExpandWhenDisabled || !GetItemDisabledState(item)) && (item.HasChildren || item.Items.Count > 0);
+    private bool CanTriggerClickNode(TreeViewItem<TItem> item)
+    {
+        // 返回 false 时禁止触发 OnClick
+        if (IsDisabled)
+        {
+            return false;
+        }
+
+        if (CanExpandWhenDisabled)
+        {
+            return true;
+        }
+
+        return !item.IsDisabled;
+    }
 
     private bool TriggerNodeLabel(TreeViewItem<TItem> item) => !GetItemDisabledState(item);
 
@@ -592,7 +591,7 @@ private async Task<IEnumerable<IExpandableNode<TItem>>> GetChildrenRowAsync(Tree
     private async Task OnClick(TreeViewItem<TItem> item)
     {
         ActiveItem = item;
-        if (ClickToggleNode && TriggerNodeArrow(item))
+        if (ClickToggleNode && CanTriggerClickNode(item))
         {
             await OnToggleNodeAsync(item);
         }
@@ -874,20 +873,15 @@ private List<TreeViewItem<TItem>> GetTreeRows(List<TreeViewItem<TItem>> items)
         }
     }
 
-    private string? GetTreeRowStyle(TreeViewItem<TItem> item)
+    private static string? GetTreeRowStyle(TreeViewItem<TItem> item)
     {
-        string? style = null;
-        if (IsVirtualize)
+        var level = 0;
+        var parent = item.Parent;
+        while (parent != null)
         {
-            var level = 0;
-            var parent = item.Parent;
-            while (parent != null)
-            {
-                level++;
-                parent = parent.Parent;
-            }
-            style = $"--bb-tree-view-level: {level};";
+            level++;
+            parent = parent.Parent;
         }
-        return style;
+        return $"--bb-tree-view-level: {level};";
     }
 }
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
@@ -1,7 +1,7 @@
 .tree-view {
     --bb-tree-padding: #{$bb-tree-padding};
     --bb-tree-margin: #{$bb-tree-margin};
-    --bb-tree-ul-padding-left: #{$bb-tree-ul-padding-left};
+    --bb-tree-padding-left: #{$bb-tree-padding-left};
     --bb-tree-item-margin: #{$bb-tree-item-margin};
     --bb-tree-icon-width: #{$bb-tree-icon-width};
     --bb-tree-check-margin: #{$bb-tree-check-margin};
@@ -18,36 +18,21 @@
     .tree-search {
         margin-block-end: .5rem;
     }
-}
-
-.tree-view .tree-root {
-    padding: var(--bb-tree-padding);
-    margin: var(--bb-tree-margin);
-}
-
-.tree-view.is-fixed-search .tree-root {
-    height: calc(100% - var(--bb-tree-search-height));
-}
-
-.tree-view .tree-ul {
-    padding: 0 0 0 var(--bb-tree-ul-padding-left);
-    display: none;
-}
 
-.tree-view .tree-ul.show {
-    display: block;
-}
+    &.is-fixed-search .tree-root {
+        height: calc(100% - var(--bb-tree-search-height));
+    }
 
-.tree-view .tree-item {
-    list-style: none;
-    margin: var(--bb-tree-item-margin);
-}
+    .tree-root {
+        padding: var(--bb-tree-padding);
+        margin: var(--bb-tree-margin);
+    }
 
-.tree-view {
     .tree-content {
         position: relative;
         display: flex;
         align-items: center;
+        margin-inline-start: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0));
         cursor: pointer;
 
         .node-icon {
@@ -84,49 +69,50 @@
                 display: flex;
             }
         }
-    }
 
-    .is-virtual {
-        .tree-content {
-            margin-inline-start: calc(var(--bb-tree-ul-padding-left) * var(--bb-tree-view-level, 0));
+        &:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            pointer-events: none;
+            margin-inline-start: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0) * -1);
         }
-    }
-}
 
-.tree-view .tree-node {
-    display: inline-flex;
-    align-items: center;
-    padding: var(--bb-tree-node-padding);
-    border-radius: var(--bs-border-radius);
-    flex: 1;
-
-    &.disabled {
-        opacity: var(--bb-tree-disabled-opacity);
-    }
+        &:not(.disabled).active:after {
+            color: var(--bb-tree-item-active-color);
+            background-color: var(--bb-tree-item-active-bg);
+        }
 
-    &:hover {
-        background-color: var(--bb-tree-item-hover-bg);
+        &:not(.disabled):hover:after {
+            background-color: var(--bb-tree-item-hover-bg);
+        }
     }
 
-    .tree-node-text {
-        white-space: nowrap;
-    }
-}
+    .tree-node {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--bb-tree-node-padding);
+        flex: 1;
 
-.tree-view .tree-node .tree-icon {
-    margin-inline-end: var(--bb-tree-icon-margin-right);
-}
+        .form-check {
+            margin: var(--bb-tree-check-margin);
+        }
 
-.tree-view .form-check {
-    margin: var(--bb-tree-check-margin);
-}
+        .tree-icon {
+            width: var(--bb-tree-icon-width);
+            text-align: center;
+            margin-inline-end: var(--bb-tree-icon-margin-right);
+        }
 
-.tree-view .tree-icon {
-    width: var(--bb-tree-icon-width);
-    text-align: center;
-}
+        .tree-node-text {
+            white-space: nowrap;
+        }
 
-.tree-view .tree-item:not(.disabled).active > .tree-content > .tree-node {
-    color: var(--bb-tree-item-active-color);
-    background-color: var(--bb-tree-item-active-bg);
+        &.disabled {
+            opacity: var(--bb-tree-disabled-opacity);
+        }
+    }
 }
diff --git a/src/BootstrapBlazor/Misc/ExpandableNodeCache.cs b/src/BootstrapBlazor/Misc/ExpandableNodeCache.cs
@@ -54,7 +54,7 @@ public virtual async Task ToggleNodeAsync(TNode node, Func<TNode, Task<IEnumerab
             CollapsedNodeCache.Remove(node.Value);
 
             // 无子项时通过回调方法延时加载
-            if (!node.Items.Any())
+            if (node.HasChildren && !node.Items.Any())
             {
                 var items = await callback(node);
                 node.Items = items.ToList();
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -665,7 +665,7 @@ $bb-transfer-filter-margin: .5rem;
 // TreeView
 $bb-tree-padding: 0;
 $bb-tree-margin: 0;
-$bb-tree-ul-padding-left: 20px;
+$bb-tree-padding-left: 20px;
 $bb-tree-item-margin: 1px 0;
 $bb-tree-icon-width: 22px;
 $bb-tree-check-margin: 0 4px;
diff --git a/test/UnitTest/Components/SelectTreeTest.cs b/test/UnitTest/Components/SelectTreeTest.cs
@@ -109,7 +109,7 @@ public void PlaceHolder_Ok()
     }
 
     [Fact]
-    public void ItemChanged_Ok()
+    public async Task ItemChanged_Ok()
     {
         var changed = 0;
         var cut = Context.RenderComponent<SelectTree<string>>(builder =>
@@ -123,13 +123,14 @@ public void ItemChanged_Ok()
         });
         Assert.Equal(1, changed);
 
-        // 选择第一个候选项
-        var node = cut.Find(".tree-node");
-        cut.InvokeAsync(() => node.Click());
-        Assert.NotEqual(2, changed);
+        // 展开第一个候选项
+        var icon = cut.Find(".node-icon");
+        await cut.InvokeAsync(() => icon.Click());
+        Assert.Equal(1, changed);
 
-        node = cut.FindAll(".tree-node").Skip(1).Take(1).First();
-        cut.InvokeAsync(() => node.Click());
+        // 点击第二个节点
+        var nodes = cut.FindAll(".tree-node");
+        await cut.InvokeAsync(() => nodes[1].Click());
         Assert.Equal(2, changed);
     }
 
diff --git a/test/UnitTest/Components/TreeViewTest.cs b/test/UnitTest/Components/TreeViewTest.cs

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ export function init(id, invoke, method) {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`EventHandler.on(el, 'click', async e => {`
	`11`	`+ e.preventDefault();`
`11`	`12`	`const stopPropagation = el.getAttribute("data-bb-stop-propagation");`
`12`	`13`	`if (stopPropagation === "true") {`
`13`	`14`	`e.stopPropagation();`
`@@ -26,10 +27,9 @@ export function init(id, invoke, method) {`
`26`	`27`	`el.parentElement.classList.add('is-checked');`
`27`	`28`	`}`
`28`	`29`	`}`
	`30`	`+`
`29`	`31`	`const result = await invoke.invokeMethodAsync(method, val);`
`30`		`- if (result === false) {`
`31`		`- e.preventDefault();`
`32`		`- }`
	`32`	`+ return result;`
`33`	`33`	`});`
`34`	`34`	`}`
`35`	`35`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ public virtual async Task ToggleNodeAsync(TNode node, Func<TNode, Task<IEnumerab`
`54`	`54`	`CollapsedNodeCache.Remove(node.Value);`
`55`	`55`
`56`	`56`	`// 无子项时通过回调方法延时加载`
`57`		`- if (!node.Items.Any())`
	`57`	`+ if (node.HasChildren && !node.Items.Any())`
`58`	`58`	`{`
`59`	`59`	`var items = await callback(node);`
`60`	`60`	`node.Items = items.ToList();`