Skip to content

Commit b74ab70

Browse files
Tony-ST0754ArgoZhang
Tony-ST0754
and
ArgoZhang
authored
feat(CardUpload): add ShowConfirmButton parameter (#7474)
* cardupload增加删除确认属性 cardupload增加删除确认属性 * chore: bump version 10.2.1 * refactor: 移除基类更改 * feat: 增加删除确认弹窗相关参数 * test: 更新单元测试 --------- Co-Authored-By: Tony-ST0754 <244411587+tony-st0754@users.noreply.github.com> Co-authored-by: Argo Zhang <argo@live.ca>
1 parent 7099573 commit b74ab70

File tree

8 files changed

+106
-10
lines changed

8 files changed

+106
-10
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/UploadCards.razor‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/upload-card"
1+
@page "/upload-card"
22
@inject IOptions<WebsiteOptions> WebsiteOption
33
@inject IStringLocalizer<UploadCards> Localizer
44
@inject ToastService ToastService
@@ -52,6 +52,12 @@
5252
<Switch @bind-Value="@_showDeleteButton"></Switch>
5353
</BootstrapInputGroup>
5454
</div>
55+
<div class="col-12 col-sm-6 col-xl-3">
56+
<BootstrapInputGroup>
57+
<BootstrapInputGroupLabel DisplayText="ShowDeleteConfirmButton"></BootstrapInputGroupLabel>
58+
<Switch @bind-Value="@_showDeleteConfirmButton"></Switch>
59+
</BootstrapInputGroup>
60+
</div>
5561
<div class="col-12 col-sm-6 col-xl-3">
5662
<BootstrapInputGroup>
5763
<BootstrapInputGroupLabel DisplayText="ShowZoomButton"></BootstrapInputGroupLabel>
@@ -68,7 +74,7 @@
6874
</section>
6975
<CardUpload TValue="string" IsMultiple="@_isMultiple" IsDirectory="@_isDirectory"
7076
IsDisabled="@_isDisabled" IsUploadButtonAtFirst="@_isUploadButtonAtFirst"
71-
ShowProgress="@_showProgress" ShowDeleteButton="@_showDeleteButton"
77+
ShowProgress="@_showProgress" ShowDeleteButton="@_showDeleteButton" ShowDeleteConfirmButton="@_showDeleteConfirmButton"
7278
ShowDownloadButton="@_showDownloadButton" ShowZoomButton="@_showZoomButton" OnChange="@OnCardUpload"></CardUpload>
7379
</DemoBlock>
7480

‎src/BootstrapBlazor.Server/Components/Samples/UploadCards.razor.cs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Licensed to the .NET Foundation under one or more agreements.
1+
// Licensed to the .NET Foundation under one or more agreements.
22
// The .NET Foundation licenses this file to you under the Apache 2.0 License
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -17,6 +17,7 @@ public partial class UploadCards : IDisposable
1717
private bool _showProgress = true;
1818
private bool _showZoomButton = true;
1919
private bool _showDeleteButton = true;
20+
private bool _showDeleteConfirmButton = true;
2021
private bool _showDownloadButton = true;
2122

2223
private List<UploadFile> DefaultFormatFileList { get; } =

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>10.2.1-beta05</Version>
4+
<Version>10.2.1</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/Upload/CardUpload.razor‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,27 @@
6767
</div>
6868
@if (ShowDeleteButton)
6969
{
70-
<button type="button" class="btn btn-sm btn-outline-danger"
71-
disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
72-
@onclick="() => OnCardFileDelete(item)">
73-
<i class="@RemoveIcon"></i>
74-
</button>
70+
@if (ShowDeleteConfirmButton)
71+
{
72+
<PopConfirmButton Placement="Placement.Top" class="btn btn-sm btn-outline-danger"
73+
ConfirmIcon="@DeleteConfirmButtonIcon"
74+
ConfirmButtonColor="DeleteConfirmButtonColor"
75+
ConfirmButtonText="@DeleteConfirmButtonText"
76+
CloseButtonText="@DeleteCloseButtonText"
77+
Content="@DeleteConfirmContent"
78+
Icon="@RemoveIcon"
79+
IsAsync="true"
80+
OnConfirm="@(async ()=> await OnCardFileDelete(item))" />
81+
}
82+
else
83+
{
84+
<button type="button" class="btn btn-sm btn-outline-danger"
85+
disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
86+
@onclick="() => OnCardFileDelete(item)">
87+
<i class="@RemoveIcon"></i>
88+
</button>
89+
}
90+
7591
}
7692
</div>
7793
@if (GetShowProgress(item))
@@ -99,6 +115,6 @@
99115
@code {
100116
RenderFragment RenderAdd =>
101117
@<div id="@AddId" class="@CardItemClass">
102-
<i class="@AddIcon"></i>
118+
<i class="@AddIcon"></i>
103119
</div>;
104120
}

‎src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
55

6+
using Microsoft.Extensions.Localization;
7+
68
namespace BootstrapBlazor.Components;
79

810
/// <summary>
@@ -135,6 +137,44 @@ public partial class CardUpload<TValue>
135137
[Parameter]
136138
public List<string>? AllowExtensions { get; set; }
137139

140+
/// <summary>
141+
/// 获得/设置 删除前是否显示确认对话框，依赖 <see cref="FileListUploadBase{TValue}.ShowDeleteButton"/> 属性为 true 时有效
142+
/// </summary>
143+
[Parameter]
144+
public bool ShowDeleteConfirmButton { get; set; }
145+
146+
/// <summary>
147+
/// 获得/设置 删除确认弹窗中确认按钮颜色 默认 <see cref="Color.Danger"/>
148+
/// </summary>
149+
[Parameter]
150+
public Color DeleteConfirmButtonColor { get; set; } = Color.Danger;
151+
152+
/// <summary>
153+
/// 获得/设置 删除确认弹窗中确认按钮图标 默认 null 未设置
154+
/// </summary>
155+
[Parameter]
156+
public string? DeleteConfirmButtonIcon { get; set; }
157+
158+
/// <summary>
159+
/// 获得/设置 删除确认弹窗中确认文本内容 默认 null 未设置 使用资源文件中内置文字
160+
/// </summary>
161+
[Parameter]
162+
public string? DeleteConfirmContent { get; set; }
163+
/// <summary>
164+
/// 获得/设置 删除确认弹窗中确认按钮显示文字 默认 null 未设置
165+
/// </summary>
166+
[Parameter]
167+
public string? DeleteConfirmButtonText { get; set; }
168+
169+
/// <summary>
170+
/// 获得/设置 删除确认弹窗中取消按钮显示文字 默认 null 未设置
171+
/// </summary>
172+
[Parameter]
173+
public string? DeleteCloseButtonText { get; set; }
174+
175+
[Inject, NotNull]
176+
private IStringLocalizer<CardUpload<TValue>>? Localizer { get; set; }
177+
138178
/// <summary>
139179
/// <inheritdoc/>
140180
/// </summary>
@@ -146,6 +186,8 @@ protected override void OnParametersSet()
146186
StatusIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadStatusIcon);
147187
ZoomIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadZoomIcon);
148188
RemoveIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadRemoveIcon);
189+
190+
DeleteConfirmContent ??= Localizer["DeleteConfirmContent"];
149191
}
150192

151193
/// <summary>

‎src/BootstrapBlazor/Locales/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,5 +402,8 @@
402402
},
403403
"BootstrapBlazor.Components.LoadMore": {
404404
"NoMoreText": "No More Data"
405+
},
406+
"BootstrapBlazor.Components.CardUpload": {
407+
"DeleteConfirmContent": "Are you sure you want to delete the current data?"
405408
}
406409
}

‎src/BootstrapBlazor/Locales/zh.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,5 +402,8 @@
402402
},
403403
"BootstrapBlazor.Components.LoadMore": {
404404
"NoMoreText": "没有更多数据了"
405+
},
406+
"BootstrapBlazor.Components.CardUpload": {
407+
"DeleteConfirmContent": "确定删除当前数据吗？"
405408
}
406409
}

‎test/UnitTest/Components/UploadCardTest.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,31 @@ public void ActionButtonTemplate_Ok()
321321
cut.Contains("action-button-test");
322322
}
323323

324+
[Fact]
325+
public async Task ShowConfirmButton_Ok()
326+
{
327+
var cut = Context.Render<CardUpload<string>>(pb =>
328+
{
329+
pb.Add(a => a.DefaultFileList,
330+
[
331+
new() { FileName = "test.png" }
332+
]);
333+
pb.Add(a => a.ShowDeleteButton, true);
334+
pb.Add(a => a.ShowDeleteConfirmButton, true);
335+
pb.Add(a => a.DeleteConfirmButtonColor, Color.Danger);
336+
pb.Add(a => a.DeleteConfirmButtonIcon, "icon-delete");
337+
pb.Add(a => a.DeleteConfirmContent, "content-delete");
338+
pb.Add(a => a.DeleteConfirmButtonText, "confirm");
339+
pb.Add(a => a.DeleteCloseButtonText, "cancel");
340+
});
341+
342+
var button = cut.FindComponent<PopConfirmButton>();
343+
Assert.NotNull(button);
344+
Assert.NotNull(button.Instance.OnConfirm);
345+
346+
await cut.InvokeAsync(button.Instance.OnConfirm);
347+
}
348+
324349
private class MockBrowserFile(string name = "UploadTestFile", string contentType = "text", TimeSpan? delay = null) : IBrowserFile
325350
{
326351
public string Name { get; } = name;

0 commit comments

Comments
 (0)