feat(ContextMenuDivider): add ContextMenuDivider component (#5379)

* feat: 增加 IContextMenuItem 接口用于规范化右键菜单组件

* refactor: ContextMenuItem 集成 IContextMenuItem 接口

* feat: 增加 ContextMenuDivider 组件

* refactor: 增加只读关键字消除提示信息

* refactor: 更改参数类型为接口

* refactor: 根据接口更新逻辑

* feat: 增加其他组件兼容逻辑

* refactor: 移除其他组件支持逻辑

* test: 增加单元测试

* chore: bump version 9.3.1-beta19

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.3.1-beta18</Version>
+    <Version>9.3.1-beta19</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor

@@ -7,14 +7,22 @@
         @ChildContent
     </CascadingValue>
     <RenderTemplate>
-        @foreach (var item in _contextMenuItems)
+        @foreach (var context in _contextMenuItems)
         {
-            var disabled = GetItemTriggerClick(item);
-            <DynamicElement @key="item" TagName="div" class="@GetItemClassString(disabled)"
-                            TriggerClick="!disabled" OnClick="() => OnClickItem(item)">
-                <i class="@GetItemIconString(item)"></i>
-                <span>@item.Text</span>
-            </DynamicElement>
+            if (context is ContextMenuDivider)
+            {
+                <Divider></Divider>
+                continue;
+            }
+            else if (context is ContextMenuItem item)
+            {
+                var disabled = GetItemTriggerClick(item);
+                <DynamicElement @key="item" TagName="div" class="@GetItemClassString(disabled)"
+                                TriggerClick="!disabled" OnClick="() => OnClickItem(item)">
+                    <i class="@GetItemIconString(item)"></i>
+                    <span>@item.Text</span>
+                </DynamicElement>
+            }
         }
     </RenderTemplate>
 </div>

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor.cs

@@ -41,7 +41,7 @@ public partial class ContextMenu
 
     private string ZoneId => ContextMenuZone.Id;
 
-    private List<ContextMenuItem> _contextMenuItems = [];
+    private readonly List<IContextMenuItem> _contextMenuItems = [];
 
     private static string? GetItemClassString(bool disabled) => CssBuilder.Default("dropdown-item")
         .AddClass("disabled", disabled)
@@ -112,11 +112,11 @@ private async Task OnClickItem(ContextMenuItem item)
     /// 增加 ContextMenuItem 方法
     /// </summary>
     /// <param name="item"></param>
-    internal void AddItem(ContextMenuItem item) => _contextMenuItems.Add(item);
+    internal void AddItem(IContextMenuItem item) => _contextMenuItems.Add(item);
 
     /// <summary>
     /// 移除 ContextMenuItem 方法
     /// </summary>
     /// <param name="item"></param>
-    internal void RemoveItem(ContextMenuItem item) => _contextMenuItems.Remove(item);
+    internal void RemoveItem(IContextMenuItem item) => _contextMenuItems.Remove(item);
 }

src/BootstrapBlazor/Components/ContextMenu/ContextMenuDivider.cs

@@ -0,0 +1,61 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// ContextMenuDivider 组件
+/// </summary>
+public class ContextMenuDivider : Divider, IContextMenuItem, IDisposable
+{
+    [CascadingParameter]
+    [NotNull]
+    private ContextMenu? ContextMenu { get; set; }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        ContextMenu.AddItem(this);
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="builder"></param>
+    protected override void BuildRenderTree(RenderTreeBuilder builder) { }
+
+    private bool disposedValue;
+
+    /// <summary>
+    /// 释放资源方法
+    /// </summary>
+    /// <param name="disposing"></param>
+    protected virtual void Dispose(bool disposing)
+    {
+        if (!disposedValue)
+        {
+            if (disposing)
+            {
+                ContextMenu.RemoveItem(this);
+            }
+            disposedValue = true;
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(disposing: true);
+        GC.SuppressFinalize(this);
+    }
+}

src/BootstrapBlazor/Components/ContextMenu/ContextMenuItem.cs

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// ContextMenuItem 类
 /// </summary>
-public class ContextMenuItem : ComponentBase, IDisposable
+public class ContextMenuItem : ComponentBase, IContextMenuItem, IDisposable
 {
     /// <summary>
     /// 获得/设置 显示文本

src/BootstrapBlazor/Components/ContextMenu/IContextMenuItem.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// IContextMenuItem 接口
+/// </summary>
+public interface IContextMenuItem
+{
+
+}

test/UnitTest/Components/ContextMenuTest.cs

@@ -247,4 +247,31 @@ private static void TriggerTouchStart(IElement row)
             ]
         });
     }
+
+    [Fact]
+    public void ContextMenuDivider_Ok()
+    {
+        var cut = Context.RenderComponent<ContextMenuZone>(pb =>
+        {
+            pb.AddChildContent<ContextMenu>(pb =>
+            {
+                pb.AddChildContent<ContextMenuItem>(builder =>
+                {
+                    builder.Add(a => a.Text, "Item1");
+                });
+                pb.AddChildContent<ContextMenuDivider>();
+                pb.AddChildContent<ContextMenuItem>(builder =>
+                {
+                    builder.Add(a => a.Text, "Item2");
+                });
+            });
+        });
+
+        var menu = cut.Find(".dropdown-menu");
+        var children = menu.Children;
+        Assert.Equal(3, children.Length);
+        Assert.Equal("dropdown-item", children[0].ClassName);
+        Assert.Equal("divider", children[1].ClassName);
+        Assert.Equal("dropdown-item", children[2].ClassName);
+    }
 }