feat(PopConfirmButton): add CloseButtonIcon/ConfirmButtonIcon paramet…

…er (#5455) * refactor: 精简代码 * refactor: 移除 dismiss 处理方法 * chore: 更新图标 * feat: 增加弹窗内按钮图标参数 * chore: 增加按钮图标参数 * test: 增加单元测试 * test: 更新单元测试 * chore: bump version 9.4.0 * chore: bump version 9.4.0
dotnetcore · Feb 27, 2025 · 441532b · 441532b
1 parent c174ff7
commit 441532b
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 60 deletions.
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.3.1-beta39</Version>
+    <Version>9.4.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/Button/PopConfirmButton.razor b/src/BootstrapBlazor/Components/Button/PopConfirmButton.razor
@@ -33,8 +33,8 @@ else
             @ChildContent
         </CascadingValue>
         <PopConfirmButtonContent Title="@Title" Content="@Content" Icon="@ConfirmIcon"
-                                 CloseButtonColor="@CloseButtonColor" CloseButtonText="@CloseButtonText"
-                                 ConfirmButtonColor="@ConfirmButtonColor" ConfirmButtonText="@ConfirmButtonText"
+                                 CloseButtonColor="@CloseButtonColor" CloseButtonText="@CloseButtonText" CloseButtonIcon="@CloseButtonIcon"
+                                 ConfirmButtonColor="@ConfirmButtonColor" ConfirmButtonText="@ConfirmButtonText" ConfirmButtonIcon="@ConfirmButtonIcon"
                                  ShowCloseButton="@ShowCloseButton" OnClose="@OnClose"
                                  ShowConfirmButton="@ShowConfirmButton" OnConfirm="@OnClickConfirm" ChildContent="@BodyTemplate" />
     </DynamicElement>;

diff --git a/src/BootstrapBlazor/Components/Button/PopConfirmButtonBase.cs b/src/BootstrapBlazor/Components/Button/PopConfirmButtonBase.cs
@@ -105,6 +105,12 @@ public abstract class PopConfirmButtonBase : ButtonBase
     [NotNull]
     public string? CloseButtonText { get; set; }
 
+    /// <summary>
+    /// 获得/设置 关闭按钮显示图标
+    /// </summary>
+    [Parameter]
+    public string? CloseButtonIcon { get; set; }
+
     /// <summary>
     /// 获得/设置 确认按钮显示文字 默认为 确定
     /// </summary>
@@ -118,6 +124,12 @@ public abstract class PopConfirmButtonBase : ButtonBase
     [Parameter]
     public Color ConfirmButtonColor { get; set; } = Color.Primary;
 
+    /// <summary>
+    /// 获得/设置 确认按钮显示图标
+    /// </summary>
+    [Parameter]
+    public string? ConfirmButtonIcon { get; set; }
+
     /// <summary>
     /// 获得/设置 确认框图标
     /// </summary>

diff --git a/src/BootstrapBlazor/Components/Button/PopConfirmButtonContent.razor b/src/BootstrapBlazor/Components/Button/PopConfirmButtonContent.razor
@@ -27,15 +27,17 @@
             <div class="popover-confirm-buttons">
                 @if (ShowCloseButton)
                 {
-                    <div class="@CloseButtonClass" @onclick="@OnCloseClick">
+                    <button class="@CloseButtonClass" @onclick="@OnCloseClick">
+                        <i class="@CloseButtonIcon"></i>
                         <span>@CloseButtonText</span>
-                    </div>
+                    </button>
                 }
                 @if (ShowConfirmButton)
                 {
-                    <div class="@ConfirmButtonClass" @onclick="@OnConfirmClick">
+                    <button class="@ConfirmButtonClass" @onclick="@OnConfirmClick">
+                        <i class="@ConfirmButtonIcon"></i>
                         <span>@ConfirmButtonText</span>
-                    </div>
+                    </button>
                 }
             </div>
         }

diff --git a/src/BootstrapBlazor/Components/Button/PopConfirmButtonContent.razor.cs b/src/BootstrapBlazor/Components/Button/PopConfirmButtonContent.razor.cs
@@ -59,6 +59,12 @@ public partial class PopConfirmButtonContent
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// 获得/设置 关闭按钮显示图标
+    /// </summary>
+    [Parameter]
+    public string? CloseButtonIcon { get; set; }
+
     /// <summary>
     /// 获得/设置 关闭按钮显示文字
     /// </summary>
@@ -71,6 +77,12 @@ public partial class PopConfirmButtonContent
     [Parameter]
     public Color CloseButtonColor { get; set; } = Color.Secondary;
 
+    /// <summary>
+    /// 获得/设置 确认按钮显示图标
+    /// </summary>
+    [Parameter]
+    public string? ConfirmButtonIcon { get; set; }
+
     /// <summary>
     /// 获得/设置 确认按钮显示文字
     /// </summary>
@@ -87,7 +99,6 @@ public partial class PopConfirmButtonContent
     /// 获得/设置 确认框图标
     /// </summary>
     [Parameter]
-    [NotNull]
     public string? Icon { get; set; }
 
     /// <summary>
@@ -114,6 +125,8 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         Icon ??= IconTheme.GetIconByKey(ComponentIcons.PopConfirmButtonConfirmIcon);
+        CloseButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.PopConfirmButtonContentCloseButtonIcon);
+        ConfirmButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.PopConfirmButtonContentConfirmButtonIcon);
     }
 
     /// <summary>

diff --git a/src/BootstrapBlazor/Enums/ComponentIcons.cs b/src/BootstrapBlazor/Enums/ComponentIcons.cs
@@ -410,6 +410,16 @@ public enum ComponentIcons
     /// </summary>
     PopConfirmButtonConfirmIcon,
 
+    /// <summary>
+    /// PopConfirmButton 组件弹窗中 CloseButtonIcon 图标
+    /// </summary>
+    PopConfirmButtonContentCloseButtonIcon,
+
+    /// <summary>
+    /// PopConfirmButton 组件弹窗中 ConfirmButtonIcon 图标
+    /// </summary>
+    PopConfirmButtonContentConfirmButtonIcon,
+
     /// <summary>
     /// Rate 组件 StarIcon 图标
     /// </summary>

diff --git a/src/BootstrapBlazor/Icons/BootstrapIcons.cs b/src/BootstrapBlazor/Icons/BootstrapIcons.cs
@@ -97,7 +97,9 @@ internal static class BootstrapIcons
         { ComponentIcons.PaginationPrevEllipsisPageIcon, "bi bi-three-dots" },
         { ComponentIcons.PaginationNextEllipsisPageIcon, "bi bi-three-dots" },
 
-        { ComponentIcons.PopConfirmButtonConfirmIcon, "bi bi-exclamation-circle" },
+        { ComponentIcons.PopConfirmButtonConfirmIcon, "bi bi-exclamation-circle-fill" },
+        { ComponentIcons.PopConfirmButtonContentCloseButtonIcon, "bi bi-x" },
+        { ComponentIcons.PopConfirmButtonContentConfirmButtonIcon, "bi bi-check" },
 
         { ComponentIcons.RateStarIcon, "bi bi-star-fill" },
         { ComponentIcons.RateUnStarIcon, "bi bi-star" },

diff --git a/src/BootstrapBlazor/Icons/FontAwesomeIcons.cs b/src/BootstrapBlazor/Icons/FontAwesomeIcons.cs
@@ -96,6 +96,8 @@ internal static class FontAwesomeIcons
         { ComponentIcons.PaginationNextEllipsisPageIcon, "fa-solid fa-ellipsis" },
 
         { ComponentIcons.PopConfirmButtonConfirmIcon, "fa-solid fa-circle-exclamation" },
+        { ComponentIcons.PopConfirmButtonContentCloseButtonIcon, "fa-solid fa-xmark" },
+        { ComponentIcons.PopConfirmButtonContentConfirmButtonIcon, "fa-solid fa-check" },
 
         { ComponentIcons.RateStarIcon, "fa-solid fa-star" },
         { ComponentIcons.RateUnStarIcon, "fa-regular fa-star" },

diff --git a/src/BootstrapBlazor/Icons/MaterialDesignIcons.cs b/src/BootstrapBlazor/Icons/MaterialDesignIcons.cs
@@ -97,7 +97,9 @@ internal static class MaterialDesignIcons
         { ComponentIcons.PaginationPrevEllipsisPageIcon, "mdi mdi-dots-horizontal" },
         { ComponentIcons.PaginationNextEllipsisPageIcon, "mdi mdi-dots-horizontal" },
 
-        { ComponentIcons.PopConfirmButtonConfirmIcon, "mdi mdi-exclamation" },
+        { ComponentIcons.PopConfirmButtonConfirmIcon, "mdi mdi-alert-circle" },
+        { ComponentIcons.PopConfirmButtonContentCloseButtonIcon, "mdi mdi-close" },
+        { ComponentIcons.PopConfirmButtonContentConfirmButtonIcon, "mdi mdi-check" },
 
         { ComponentIcons.RateStarIcon, "mdi mdi-star" },
         { ComponentIcons.RateUnStarIcon, "mdi mdi-star-outline" },

diff --git a/test/UnitTest/Components/PopConfirmButtonTest.cs b/test/UnitTest/Components/PopConfirmButtonTest.cs
@@ -22,9 +22,14 @@ public async Task Show_Ok()
                 pb.Add(a => a.ConfirmButtonColor, Color.Danger);
                 pb.Add(a => a.Icon, "fa-solid fa-font-awesome");
                 pb.Add(a => a.Text, "Test_Text");
+                pb.Add(a => a.CloseButtonIcon, "fa-solid fa-xmark");
+                pb.Add(a => a.ConfirmButtonIcon, "fa-solid fa-check");
             });
         });
 
+        cut.Contains("fa-solid fa-xmark");
+        cut.Contains("fa-solid fa-check");
+
         // Show
         var button = cut.Find("div");
         await cut.InvokeAsync(() =>
@@ -33,7 +38,7 @@ await cut.InvokeAsync(() =>
         });
 
         // Close
-        var buttons = cut.FindAll(".popover-confirm-buttons div");
+        var buttons = cut.FindAll(".popover-confirm-buttons button");
         await cut.InvokeAsync(() =>
         {
             buttons[0].Click();
@@ -45,7 +50,7 @@ await cut.InvokeAsync(() =>
         {
             button.Click();
         });
-        buttons = cut.FindAll(".popover-confirm-buttons div");
+        buttons = cut.FindAll(".popover-confirm-buttons button");
         await cut.InvokeAsync(() =>
         {
             buttons[1].Click();
@@ -97,7 +102,7 @@ await cut.InvokeAsync(() =>
         });
 
         // Close
-        buttons = cut.FindAll(".popover-confirm-buttons div");
+        buttons = cut.FindAll(".popover-confirm-buttons button");
         await cut.InvokeAsync(() =>
         {
             buttons[0].Click();
@@ -111,7 +116,7 @@ await cut.InvokeAsync(() =>
         {
             button.Click();
         });
-        buttons = cut.FindAll(".popover-confirm-buttons div");
+        buttons = cut.FindAll(".popover-confirm-buttons button");
         await cut.InvokeAsync(() =>
         {
             buttons[1].Click();
@@ -132,7 +137,7 @@ await cut.InvokeAsync(() =>
         });
 
         // Confirm
-        buttons = cut.FindAll(".popover-confirm-buttons div");
+        buttons = cut.FindAll(".popover-confirm-buttons button");
         await cut.InvokeAsync(() =>
         {
             buttons[1].Click();
@@ -158,7 +163,7 @@ await cut.InvokeAsync(() =>
         });
 
         // async confirm
-        buttons = cut.FindAll(".popover-confirm-buttons div");
+        buttons = cut.FindAll(".popover-confirm-buttons button");
         _ = cut.InvokeAsync(() =>
         {
             buttons[1].Click();
@@ -178,7 +183,7 @@ await cut.InvokeAsync(() =>
         });
 
         // async confirm
-        buttons = cut.FindAll(".popover-confirm-buttons div");
+        buttons = cut.FindAll(".popover-confirm-buttons button");
         await cut.InvokeAsync(() =>
         {
             buttons[1].Click();
@@ -248,10 +253,12 @@ public void Trigger_Ok()
     }
 
     [Fact]
-    public void ConfirmIcon_Ok()
+    public void Icon_Ok()
     {
         var cut = Context.RenderComponent<PopConfirmButtonContent>();
         cut.Contains("text-info fa-solid fa-circle-exclamation");
+        cut.Contains("fa-solid fa-xmark");
+        cut.Contains("fa-solid fa-check");
     }
 
     [Fact]

diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs
@@ -5538,49 +5538,8 @@ public async Task OnAfterCancelSaveAsync_EditForm()
         await cut.InvokeAsync(() => button[0].Click());
 
         // 取消按钮
-        var cancelButton = cut.Find(".form-footer .btn-secondary");
-        await cut.InvokeAsync(() => cancelButton.Click());
-        Assert.True(afterCancelSave);
-    }
-
-    [Fact]
-    public async Task OnAfterCancelSaveAsync_InCell()
-    {
-        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
-        var items = Foo.GenerateFoo(localizer, 2);
-        var afterCancelSave = false;
-        var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
-        {
-            pb.AddChildContent<Table<Foo>>(pb =>
-            {
-                pb.Add(a => a.RenderMode, TableRenderMode.Table);
-                pb.Add(a => a.Items, items);
-                pb.Add(a => a.IsMultipleSelect, true);
-                pb.Add(a => a.ShowToolbar, true);
-                pb.Add(a => a.ShowExtendButtons, true);
-                pb.Add(a => a.EditMode, EditMode.EditForm);
-                pb.Add(a => a.OnAfterCancelSaveAsync, () =>
-                {
-                    afterCancelSave = true;
-                    return Task.CompletedTask;
-                });
-                pb.Add(a => a.TableColumns, foo => builder =>
-                {
-                    builder.OpenComponent<TableColumn<Foo, string>>(0);
-                    builder.AddAttribute(1, "Field", "Name");
-                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
-                    builder.CloseComponent();
-                });
-            });
-        });
-
-        // test edit button
-        var button = cut.FindAll("tbody tr button");
+        button = cut.FindAll("tbody tr.is-editform button");
         await cut.InvokeAsync(() => button[0].Click());
-
-        // 取消按钮
-        button = cut.FindAll("tbody tr button");
-        await cut.InvokeAsync(() => button[1].Click());
         Assert.True(afterCancelSave);
     }