feat(Tab): add Refresh method (#5699)

* style: 更新样式

* refactor: 增加 Refresh 方法

* doc: 增加右键菜单刷新示例

* refactor: 重构代码

* test: 更新单元测试

* chore: bump version 9.5.0-beta13

Author: ArgoZhang

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

@@ -501,6 +501,7 @@ private void Navigation()
         <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" @ref="_tab">
             <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
                 <div>@Localizer["TabItem1Content"]</div>
+                <Counter></Counter>
             </TabItem>
             <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
                 <div>@Localizer["TabItem2Content"]</div>
@@ -513,6 +514,8 @@ private void Navigation()
             </TabItem>
         </Tab>
         <ContextMenu>
+            <ContextMenuItem Icon="fa-solid fa-rotate-right" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
+            <ContextMenuDivider></ContextMenuDivider>
             <ContextMenuItem Icon="fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
             <ContextMenuItem Icon="fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
             <ContextMenuItem Icon="fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>

src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs

@@ -174,6 +174,15 @@ private Task OnSetTitle(string text)
     [NotNull]
     private Tab? _tab = null;
 
+    private Task OnRefrsh(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            _tab.Refresh(tabItem);
+        }
+        return Task.CompletedTask;
+    }
+
     private async Task OnClose(ContextMenuItem item, object? context)
     {
         if (context is TabItem tabItem)

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

@@ -2133,6 +2133,7 @@
     "AttributeFullscreenToolbarButtonIcon": "Toolbar full screen button icon",
     "TabsToolbarDesc": "After clicking the button, the counter value increases, and clicking the <b>Refresh</b> button on the toolbar will reset the counter.",
     "AttributeOnToolbarRefreshCallback": "Click the toolbar refresh button callback method",
+    "ContextRefresh": "Refresh",
     "ContextClose": "Close",
     "ContextCloseOther": "Close Other Tabs",
     "ContextCloseAll": "Close All Tabs",

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

@@ -2133,6 +2133,7 @@
     "AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标",
     "TabsToolbarDesc": "点击按钮计数器数值增加后，点击工具栏的 <b>刷新</b> 按钮计数器清零",
     "AttributeOnToolbarRefreshCallback": "点击工具栏刷新按钮回调方法",
+    "ContextRefresh": "刷新",
     "ContextClose": "关闭",
     "ContextCloseOther": "关闭其他",
     "ContextCloseAll": "关闭全部",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.0-beta12</Version>
+    <Version>9.5.0-beta13</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor.scss

@@ -8,4 +8,8 @@
         min-height: var(--bb-cm-icon-min-height);
         display: inline-block;
     }
+
+    .divider {
+        margin: 0.5rem 0;
+    }
 }

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -950,6 +950,19 @@ private async Task OnRefreshAsync()
     {
         // refresh the active tab item
         var item = TabItems.FirstOrDefault(i => i.IsActive);
+
+        if (item is not null)
+        {
+            await Refresh(item);
+        }
+    }
+
+    /// <summary>
+    /// Refresh the tab item method
+    /// </summary>
+    /// <param name="item"></param>
+    public async Task Refresh(TabItem item)
+    {
         item.Refresh(_cache);
 
         if (OnToolbarRefreshCallback != null)

src/BootstrapBlazor/Extensions/TabItemExtensions.cs

@@ -24,9 +24,9 @@ public static RenderFragment RenderContent(this TabItem item, ConcurrentDictiona
         builder.CloseComponent();
     };
 
-    public static void Refresh(this TabItem? item, ConcurrentDictionary<TabItem, TabItemContent> cache)
+    public static void Refresh(this TabItem item, ConcurrentDictionary<TabItem, TabItemContent> cache)
     {
-        if (item is not null && cache.TryGetValue(item, out var content))
+        if (cache.TryGetValue(item, out var content))
         {
             content.Render();
         }

test/UnitTest/Components/TabTest.cs

@@ -7,7 +7,6 @@
 using Bunit.TestDoubles;
 using Microsoft.AspNetCore.Components.Rendering;
 using System.Reflection;
-using System.Threading.Tasks;
 using UnitTest.Misc;
 
 namespace UnitTest.Components;
@@ -1100,6 +1099,11 @@ public async Task ShowToolbar_Ok()
         await cut.InvokeAsync(() => button.Click());
         Assert.True(clicked);
 
+        clicked = false;
+        var item = cut.FindComponent<TabItem>();
+        await cut.InvokeAsync(() => tab.Instance.Refresh(item.Instance));
+        Assert.True(clicked);
+
         tab.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.ShowRefreshToolbarButton, false);
@@ -1111,13 +1115,6 @@ public async Task ShowToolbar_Ok()
             pb.Add(a => a.ShowFullscreenToolbarButton, false);
         });
         cut.DoesNotContain("tabs-nav-toolbar-fs");
-
-        // 利用反射提高代码覆盖率
-        var type = Type.GetType("BootstrapBlazor.Components.TabItemExtensions, BootstrapBlazor");
-        Assert.NotNull(type);
-        var mi = type.GetMethod("Refresh", BindingFlags.Static | BindingFlags.Public);
-        Assert.NotNull(mi);
-        mi.Invoke(null, [null, null]);
     }
 
     class DisableTabItemButton : ComponentBase