feat(Mask): add OnCloseAsync cascade parameter (#6609)

* Mask增加OnCloseAsync回调

* doc: 支持多语言

* test: 增加单元测试

* Revert "test: 增加单元测试"

This reverts commit 1716203.

* test: 更新单元测试

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: j4587698

src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor

@@ -0,0 +1,8 @@
+<div class="mask-dialog-demo row">
+    <div class="col-12">
+        <h3>MaskDemo</h3>
+    </div>
+    <div class="col-12">
+        <DialogCloseButton></DialogCloseButton>
+    </div>
+</div>

src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor.css

@@ -0,0 +1,5 @@
+.mask-dialog-demo {
+    background-color: var(--bs-body-bg);
+    border-radius: var(--bs-border-radius);
+    padding: 1rem;
+}

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

@@ -27,3 +27,7 @@
     <Mask @ref="CustomMask1"></Mask>
     <Mask @ref="CustomMask2"></Mask>
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["MaskCloseTitle"]" Introduction="@Localizer["MaskCloseIntro"]">
+    <Button Text="Show" OnClick="ShowCloseMask"></Button>
+</DemoBlock>

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

@@ -56,4 +56,12 @@ await MaskService.Show(new MaskOption()
         await MaskService.Close(CustomMask1);
         await MaskService.Close(CustomMask2);
     }
+
+    private async Task ShowCloseMask()
+    {
+        await MaskService.Show(new MaskOption()
+        {
+            ChildContent = BootstrapDynamicComponent.CreateComponent<MaskDemo>().Render()
+        });
+    }
 }

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

@@ -453,7 +453,9 @@
     "MaskContainerIntro": "Specify the mask position by setting the <code>MaskOption</code> parameter <code>ContainerId</code>",
     "MultipleMaskContainerTitle": "Multiple Mask",
     "MultipleMaskContainerIntro": "By customizing the <code>Mask</code> component, you can mask multiple parts of a web page.",
-    "MultipleMaskContainerDesc": "Set the <code>Mask</code> component in the component. When calling the <code>Show</code> instance method of <code>MaskService</code>, specify the <code>Mask</code> instance as the second parameter."
+    "MultipleMaskContainerDesc": "Set the <code>Mask</code> component in the component. When calling the <code>Show</code> instance method of <code>MaskService</code>, specify the <code>Mask</code> instance as the second parameter.",
+    "MaskCloseTitle": "Close By Code",
+    "MaskCloseIntro": "Close the popup by using the <code>DialogCloseButton</code> component or cascade parameters"
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message prompt",

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

@@ -453,7 +453,10 @@
     "MaskContainerIntro": "通过设置 <code>MaskOption</code> 参数 <code>ContainerId</code> 指定遮罩出现位置",
     "MultipleMaskContainerTitle": "多遮罩",
     "MultipleMaskContainerIntro": "通过自定义设置 <code>Mask</code> 组件可实现网页内多个局部进行遮罩操作",
-    "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可"
+    "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可",
+    "MaskCloseTitle": "代码关闭弹窗",
+    "MaskCloseIntro": "通过使用 <code>DialogCloseButton</code> 组件或者级联参数关闭弹窗"
+
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message 消息提示",

src/BootstrapBlazor/Components/Mask/Mask.razor

@@ -9,7 +9,9 @@
         @if (_options is { ChildContent: not null })
         {
             <div class="bb-mask-content">
-                @_options.ChildContent
+                <CascadingValue Value="CloseAsync" IsFixed="true">
+                    @_options.ChildContent
+                </CascadingValue>
             </div>
         }
     </div>

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

@@ -58,4 +58,9 @@ private Task Show(MaskOption? option)
         StateHasChanged();
         return Task.CompletedTask;
     }
+
+    private Task CloseAsync()
+    {
+        return Show(null);
+    }
 }

test/UnitTest/Services/MaskServiceTest.cs

@@ -92,6 +92,10 @@ public async Task Show_Component()
         });
         var button = cut.Find("button");
         await cut.InvokeAsync(() => button.Click());
+
+        var com = cut.FindComponent<MockComponent>();
+        var result = await cut.InvokeAsync(com.Instance.Test);
+        Assert.True(result);
     }
 
     [Fact]
@@ -114,6 +118,17 @@ public async Task Show_Type()
 
     class MockComponent : ComponentBase
     {
+        [CascadingParameter]
+        private Func<Task>? OnCloseAsync { get; set; }
+
+        public async Task<bool> Test()
+        {
+            if (OnCloseAsync != null)
+            {
+                await OnCloseAsync();
+            }
 
+            return OnCloseAsync != null;
+        }
     }
 }