mirror of
https://github.com/dotnetcore/BootstrapBlazor.git
synced 2025-12-20 02:16:40 +08:00
feat(Message): support OnDismiss event callback (#2902)
* doc: 更新文档注释 * refactor: 使用主构造函数 * feat: 更新 OnDismiss 触发逻辑 * refactor: 移除可为空标记 * refactor: 更新示例 * test: 更新单元测试 * test: 更新单元测试 * chore: bump version 8.2.2
This commit is contained in:
@@ -40,6 +40,11 @@ public sealed partial class Messages
|
||||
Content = "This is a reminder message",
|
||||
Icon = "fa-solid fa-circle-info",
|
||||
ShowDismiss = true,
|
||||
IsAutoHide = false,
|
||||
OnDismiss = () =>
|
||||
{
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
|
||||
<PropertyGroup>
|
||||
<Version>8.2.2-beta02</Version>
|
||||
<Version>8.2.2</Version>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<span>@item.Content</span>
|
||||
@if (item.ShowDismiss)
|
||||
{
|
||||
<button type="button" class="btn-close" aria-label="Close" @onclick="() => OnDismiss(item)"></button>
|
||||
<button type="button" class="btn-close" aria-label="close"></button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -33,7 +33,7 @@
|
||||
<span>@item.Content</span>
|
||||
@if (item.ShowDismiss)
|
||||
{
|
||||
<button type="button" class="btn-close" aria-label="Close" @onclick="() => OnDismiss(item)"></button>
|
||||
<button type="button" class="btn-close" aria-label="close"></button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -65,7 +65,7 @@ public partial class Message
|
||||
.AddClass("alert-bar", option.ShowBar)
|
||||
.Build();
|
||||
|
||||
private string? GetItemId(MessageOption option) => $"{Id}_{option.GetHashCode()}";
|
||||
private string GetItemId(MessageOption option) => $"{Id}_{option.GetHashCode()}";
|
||||
|
||||
private string? _msgId;
|
||||
|
||||
@@ -103,7 +103,7 @@ public partial class Message
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 清除 Message 方法
|
||||
/// 清除 Message 方法 由 JSInvoke 触发
|
||||
/// </summary>
|
||||
[JSInvokable]
|
||||
public Task Clear()
|
||||
@@ -113,9 +113,15 @@ public partial class Message
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private static async Task OnDismiss(MessageOption option)
|
||||
/// <summary>
|
||||
/// OnDismiss 回调方法 由 JSInvoke 触发
|
||||
/// </summary>
|
||||
/// <param name="id"></param>
|
||||
[JSInvokable]
|
||||
public async Task Dismiss(string id)
|
||||
{
|
||||
if (option.OnDismiss != null)
|
||||
var option = _messages.Find(i => GetItemId(i) == id);
|
||||
if (option is { OnDismiss: not null })
|
||||
{
|
||||
await option.OnDismiss();
|
||||
}
|
||||
|
||||
@@ -58,6 +58,12 @@ export function show(id, msgId) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// trigger on-dismiss event callback
|
||||
const alert = e.delegateTarget.closest('.alert');
|
||||
if(alert) {
|
||||
const alertId = alert.getAttribute('id');
|
||||
msg.invoke.invokeMethodAsync('Dismiss', alertId);
|
||||
}
|
||||
close();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -7,18 +7,10 @@ namespace BootstrapBlazor.Components;
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
public class MessageService : BootstrapServiceBase<MessageOption>
|
||||
/// <param name="option"></param>
|
||||
public class MessageService(IOptionsMonitor<BootstrapBlazorOptions> option) : BootstrapServiceBase<MessageOption>
|
||||
{
|
||||
private BootstrapBlazorOptions Options { get; }
|
||||
|
||||
/// <summary>
|
||||
/// 构造方法
|
||||
/// </summary>
|
||||
/// <param name="option"></param>
|
||||
public MessageService(IOptionsMonitor<BootstrapBlazorOptions> option)
|
||||
{
|
||||
Options = option.CurrentValue;
|
||||
}
|
||||
private BootstrapBlazorOptions Options { get; } = option.CurrentValue;
|
||||
|
||||
/// <summary>
|
||||
/// Show 方法
|
||||
|
||||
@@ -696,7 +696,7 @@ public partial class Table<TItem>
|
||||
public FullScreenSize EditDialogFullScreenSize { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 编辑框是否显示最大化按钮 默认 true 不显示
|
||||
/// 获得/设置 编辑框是否显示最大化按钮 默认 true 显示
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool EditDialogShowMaximizeButton { get; set; } = true;
|
||||
|
||||
@@ -10,7 +10,7 @@ namespace UnitTest.Components;
|
||||
public class MessageTest : MessageTestBase
|
||||
{
|
||||
[Fact]
|
||||
public void Message_Ok()
|
||||
public async Task Message_Ok()
|
||||
{
|
||||
var dismiss = false;
|
||||
var service = Context.Services.GetRequiredService<MessageService>();
|
||||
@@ -43,7 +43,7 @@ public class MessageTest : MessageTestBase
|
||||
});
|
||||
Assert.NotNull(cut.Instance.MessageContainer);
|
||||
|
||||
cut.InvokeAsync(() =>
|
||||
await cut.InvokeAsync(() =>
|
||||
{
|
||||
var btn = cut.Find("button");
|
||||
btn.Click();
|
||||
@@ -51,18 +51,15 @@ public class MessageTest : MessageTestBase
|
||||
Assert.Contains("data-bb-autohide", cut.Markup);
|
||||
Assert.Contains("data-bb-delay=\"4000\"", cut.Markup);
|
||||
|
||||
cut.InvokeAsync(() =>
|
||||
{
|
||||
var btnClose = cut.Find(".btn-close");
|
||||
btnClose.Click();
|
||||
});
|
||||
var alert = cut.Find(".alert");
|
||||
Assert.NotNull(alert);
|
||||
Assert.NotNull(alert.Id);
|
||||
|
||||
var message = cut.FindComponent<Message>();
|
||||
await message.Instance.Dismiss(alert.Id);
|
||||
Assert.True(dismiss);
|
||||
|
||||
cut.InvokeAsync(() =>
|
||||
{
|
||||
var message = cut.FindComponent<Message>();
|
||||
message.Instance.Clear();
|
||||
});
|
||||
await cut.InvokeAsync(() => message.Instance.Clear());
|
||||
}
|
||||
|
||||
[Fact]
|
||||
@@ -78,33 +75,27 @@ public class MessageTest : MessageTestBase
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void Placement_Ok()
|
||||
public async Task Placement_Ok()
|
||||
{
|
||||
var dismiss = false;
|
||||
var service = Context.Services.GetRequiredService<MessageService>();
|
||||
var cut = Context.RenderComponent<Message>(pb =>
|
||||
{
|
||||
pb.Add(a => a.Placement, Placement.Bottom);
|
||||
});
|
||||
cut.InvokeAsync(() => service.Show(new MessageOption()
|
||||
await cut.InvokeAsync(() => service.Show(new MessageOption()
|
||||
{
|
||||
Content = "Test Content",
|
||||
IsAutoHide = false,
|
||||
ShowDismiss = true,
|
||||
Icon = "fa-solid fa-font-awesome",
|
||||
OnDismiss = () =>
|
||||
{
|
||||
dismiss = true;
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
Icon = "fa-solid fa-font-awesome"
|
||||
}, cut.Instance));
|
||||
Assert.DoesNotContain("data-bb-autohide", cut.Markup);
|
||||
|
||||
cut.InvokeAsync(() =>
|
||||
{
|
||||
var btnClose = cut.Find(".btn-close");
|
||||
btnClose.Click();
|
||||
});
|
||||
Assert.True(dismiss);
|
||||
var alert = cut.Find(".alert");
|
||||
Assert.NotNull(alert);
|
||||
Assert.NotNull(alert.Id);
|
||||
|
||||
await cut.Instance.Dismiss(alert.Id);
|
||||
await cut.Instance.Dismiss("test_id");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user