Skip to content

Commit be9a680

Browse files
ArgoZhangArgoZhang
authored
feat(Mask): add AppendToBody parameter (#7834)
* feat(MaskOption): add AppendToBody parameter * feat: 更新脚本 * chore: bump version 10.5.1-beta03 * doc: 更新格式 * feat: 增加销毁逻辑 * chore: bump version 10.5.1-beta04 * refactor: 代码格式化 * fix: 修复关闭时全屏遮罩问题 * refactor: 使用样式 * refactor: 提高代码可读性 * refactor: 扩展方法增加 AppendToBody 参数 * test: 更新单元测试 * chore: bump version 10.5.1-beta05
1 parent be6a36a commit be9a680

File tree

9 files changed

+122
-67
lines changed

9 files changed

+122
-67
lines changed

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

Lines changed: 1 addition & 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

‎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.5.1-beta02</Version>
4+
<Version>10.5.1-beta05</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/Mask/Mask.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@namespace BootstrapBlazor.Components
1+
@namespace BootstrapBlazor.Components
22
@inherits BootstrapModuleComponentBase
33
@attribute [BootstrapModuleAutoLoader(AutoInvokeInit = false, AutoInvokeDispose = false)]
44

‎src/BootstrapBlazor/Components/Mask/Mask.razor.cs‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ public partial class Mask
2222
.Build();
2323

2424
private MaskOption? _options;
25+
private bool _show = false;
2526

2627
/// <summary>
2728
/// <inheritdoc/>
@@ -45,22 +46,46 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
4546
{
4647
await InvokeVoidAsync("update", Id, new
4748
{
48-
Show = _options != null,
49+
Show = _show,
4950
_options?.ContainerId,
50-
_options?.Selector
51+
_options?.Selector,
52+
_options?.AppendToBody
5153
});
5254
}
5355
}
5456

5557
private Task Show(MaskOption? option)
5658
{
57-
_options = option;
59+
if (option == null)
60+
{
61+
// 服务关闭遮罩调用
62+
_options?.ChildContent = null;
63+
_show = false;
64+
}
65+
else
66+
{
67+
// 服务打开遮罩调用
68+
_options = option;
69+
_show = true;
70+
}
5871
StateHasChanged();
5972
return Task.CompletedTask;
6073
}
6174

62-
private Task CloseAsync()
75+
private Task CloseAsync() => Show(null);
76+
77+
/// <summary>
78+
/// <inheritdoc/>
79+
/// </summary>
80+
/// <param name="disposing"></param>
81+
/// <returns></returns>
82+
protected override async ValueTask DisposeAsync(bool disposing)
6383
{
64-
return Show(null);
84+
await base.DisposeAsync(disposing);
85+
86+
if (disposing)
87+
{
88+
MaskService.UnRegister(this);
89+
}
6590
}
6691
}

‎src/BootstrapBlazor/Components/Mask/Mask.razor.js‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
1-
export function update(id, options) {
1+
export function update(id, options) {
22
const mask = document.getElementById(id);
33
if (mask) {
4-
const { show } = options;
4+
const { show, appendToBody } = options;
55
const el = document.querySelector(`[data-bb-mask="${id}"]`);
66
const container = getContainerBySelector(options);
77
if (container) {
88
const position = container.style.getPropertyValue('position');
99
if (position === '' || position === 'static') {
1010
container.style.setProperty('position', 'relative');
1111
}
12-
if (show) {
13-
el.style.setProperty('--bb-mask-position', 'absolute');
14-
container.appendChild(el);
15-
}
12+
reset(el, mask, container, show);
1613
}
17-
else {
18-
document.body.appendChild(el);
14+
else if (appendToBody === true) {
15+
reset(el, mask, document.body, show);
1916
}
17+
}
18+
}
2019

21-
if (show) {
22-
el.classList.add('show');
23-
}
24-
else {
25-
el.classList.remove('show');
26-
el.style.removeProperty('--bb-mask-position');
27-
mask.appendChild(el);
28-
}
20+
const reset = (el, mask, container, status) => {
21+
if (status) {
22+
container.appendChild(el);
23+
el.classList.add('show');
24+
}
25+
else {
26+
el.classList.remove('show');
27+
mask.appendChild(el);
2928
}
3029
}
3130

‎src/BootstrapBlazor/Components/Mask/Mask.razor.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
@use "../../wwwroot/scss/variables" as *;
1+
@use "../../wwwroot/scss/variables" as *;
22

33
.bb-mask {
44
--bb-mask-zindex: #{$bb-mask-zindex};
55
--bb-mask-bg: #{$bb-mask-bg};
66
--bb-mask-opacity: #{$bb-mask-opacity};
7-
--bb-mask-position: fixed;
8-
position: var(--bb-mask-position);
7+
position: absolute;
98
top: 0;
109
right: 0;
1110
bottom: 0;

‎src/BootstrapBlazor/Components/Mask/MaskOption.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,11 @@ public class MaskOption
4646
/// <para lang="en">Gets or sets Mask Parent Container Selector. Default null</para>
4747
/// </summary>
4848
public string? Selector { get; set; }
49+
50+
/// <summary>
51+
/// <para lang="zh">获得/设置 是否将遮罩追加到 body 元素 默认 true</para>
52+
/// <para lang="en">Gets or sets whether to append the mask to the body element. Default true</para>
53+
/// <para>v<vesion>10.5.1</vesion></para>
54+
/// </summary>
55+
public bool AppendToBody { get; set; } = true;
4956
}

‎src/BootstrapBlazor/Extensions/MaskServiceExtensions.cs‎

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,46 +11,50 @@ namespace BootstrapBlazor.Components;
1111
/// </summary>
1212
public static class MaskServiceExtensions
1313
{
14-
15-
/// <summary>
16-
/// <para lang="zh">Show 扩展方法</para>
17-
/// <para lang="en">Show extension method</para>
18-
/// </summary>
19-
/// <param name="maskService"></param>
20-
/// <param name="parameters"></param>
21-
/// <param name="containerId"></param>
22-
/// <param name="backgroundColor"></param>
23-
/// <param name="opacity"></param>
24-
/// <param name="zIndex"></param>
25-
/// <param name="mask"></param>
26-
public static Task Show<TComponent>(this MaskService maskService, IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, Mask? mask = null) where TComponent : ComponentBase => maskService.Show(new MaskOption()
14+
extension(MaskService maskService)
2715
{
28-
BackgroundColor = backgroundColor,
29-
Opacity = opacity,
30-
ZIndex = zIndex,
31-
ContainerId = containerId,
32-
ChildContent = BootstrapDynamicComponent.CreateComponent<TComponent>(parameters).Render()
33-
}, mask);
16+
/// <summary>
17+
/// <para lang="zh">Show 扩展方法</para>
18+
/// <para lang="en">Show extension method</para>
19+
/// </summary>
20+
/// <param name="parameters"></param>
21+
/// <param name="containerId"></param>
22+
/// <param name="backgroundColor"></param>
23+
/// <param name="opacity"></param>
24+
/// <param name="zIndex"></param>
25+
/// <param name="appendToBody"></param>
26+
/// <param name="mask"></param>
27+
public Task Show<TComponent>(IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, bool appendToBody = true, Mask? mask = null) where TComponent : ComponentBase => maskService.Show(new MaskOption()
28+
{
29+
BackgroundColor = backgroundColor,
30+
Opacity = opacity,
31+
ZIndex = zIndex,
32+
ContainerId = containerId,
33+
ChildContent = BootstrapDynamicComponent.CreateComponent<TComponent>(parameters).Render(),
34+
AppendToBody = appendToBody
35+
}, mask);
3436

3537

36-
/// <summary>
37-
/// <para lang="zh">Show 扩展方法</para>
38-
/// <para lang="en">Show extension method</para>
39-
/// </summary>
40-
/// <param name="maskService"></param>
41-
/// <param name="type"></param>
42-
/// <param name="parameters"></param>
43-
/// <param name="containerId"></param>
44-
/// <param name="backgroundColor"></param>
45-
/// <param name="opacity"></param>
46-
/// <param name="zIndex"></param>
47-
/// <param name="mask"></param>
48-
public static Task Show(this MaskService maskService, Type type, IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, Mask? mask = null) => maskService.Show(new MaskOption()
49-
{
50-
BackgroundColor = backgroundColor,
51-
Opacity = opacity,
52-
ZIndex = zIndex,
53-
ContainerId = containerId,
54-
ChildContent = BootstrapDynamicComponent.CreateComponent(type, parameters).Render()
55-
}, mask);
38+
/// <summary>
39+
/// <para lang="zh">Show 扩展方法</para>
40+
/// <para lang="en">Show extension method</para>
41+
/// </summary>
42+
/// <param name="type"></param>
43+
/// <param name="parameters"></param>
44+
/// <param name="containerId"></param>
45+
/// <param name="backgroundColor"></param>
46+
/// <param name="opacity"></param>
47+
/// <param name="zIndex"></param>
48+
/// <param name="appendToBody"></param>
49+
/// <param name="mask"></param>
50+
public Task Show(Type type, IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, bool appendToBody = true, Mask? mask = null) => maskService.Show(new MaskOption()
51+
{
52+
BackgroundColor = backgroundColor,
53+
Opacity = opacity,
54+
ZIndex = zIndex,
55+
ContainerId = containerId,
56+
ChildContent = BootstrapDynamicComponent.CreateComponent(type, parameters).Render(),
57+
AppendToBody = appendToBody
58+
}, mask);
59+
}
5660
}

‎test/UnitTest/Services/MaskServiceTest.cs‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ await maskService.Show(new MaskOption()
2525
BackgroundColor = "#000",
2626
Opacity = 0.5f,
2727
ZIndex = 1050,
28-
ChildContent = builder => builder.AddContent(0, "test-mask-content")
28+
ChildContent = builder => builder.AddContent(0, "test-mask-content"),
29+
AppendToBody = true
2930
});
3031
});
3132
});
@@ -116,6 +117,26 @@ public async Task Show_Type()
116117
await cut.InvokeAsync(() => button.Click());
117118
}
118119

120+
[Fact]
121+
public async Task Show_Ok()
122+
{
123+
var maskService = Context.Services.GetRequiredService<MaskService>();
124+
var cut = Context.Render<BootstrapBlazorRoot>(pb =>
125+
{
126+
pb.AddChildContent<Button>(pb =>
127+
{
128+
pb.Add(a => a.OnClickWithoutRender, async () =>
129+
{
130+
await maskService.Show((MaskOption)null!);
131+
});
132+
});
133+
});
134+
var button = cut.Find("button");
135+
await cut.InvokeAsync(() => button.Click());
136+
137+
// 遮罩参数 MaskOption 强制为 null 不报错
138+
}
139+
119140
class MockComponent : ComponentBase
120141
{
121142
[CascadingParameter]

0 commit comments

Comments
 (0)