feat(Drawer): add IsKeyboard parameter (#5207)

* feat: 增加 IsKeyboard 支持 * refactor: DrawerOptions support IsKeyboard * doc: update sample code * refactor: 更改默认值为 false * doc: 增加 ESC 按键示例 * test: 更新单元测试 * chore: bump version beta06 Co-Authored-By: ice6 <[email protected]> * chore: bump version 9.3.0 --------- Co-authored-by: ice6 <[email protected]>
dotnetcore · Jan 25, 2025 · 692d46c · 692d46c
1 parent c4f78b4
commit 692d46c
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 8 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
@@ -16,7 +16,7 @@
         <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">@Localizer["Open"]</button>
     </section>
 
-    <Drawer Placement="@DrawerAlign" IsOpen="@IsOpen" AllowResize="true">
+    <Drawer Placement="@DrawerAlign" @bind-IsOpen="@IsOpen" AllowResize="true">
         <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
             <p>@Localizer["Content"]</p>
             <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">@Localizer["Close"]</button>
@@ -35,7 +35,7 @@
     </Drawer>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["NoBackdropTitle"]" Introduction="@Localizer["NoBackdropIntro"]" Name="IsOpen">
+<DemoBlock Title="@Localizer["NoBackdropTitle"]" Introduction="@Localizer["NoBackdropIntro"]" Name="ShowBackdrop">
     <section ignore>
         <button type="button" class="btn btn-primary" @onclick="@OpenNoBackdropDrawer">@Localizer["Open"]</button>
     </section>
@@ -47,6 +47,18 @@
     </Drawer>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsKeyboardTitle"]" Introduction="@Localizer["IsKeyboardIntro"]" Name="IsKeyboard">
+    <section ignore>
+        <button type="button" class="btn btn-primary" @onclick="@OpenKeyboardDrawer">@Localizer["Open"]</button>
+    </section>
+    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsKeyboardOpen" IsKeyboard="true">
+        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
+            <p>@Localizer["Content"]</p>
+            <button type="button" class="btn btn-primary" @onclick="@(e => IsKeyboardOpen = false)">@Localizer["Close"]</button>
+        </div>
+    </Drawer>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["DrawerServiceTitle"]" Introduction="@Localizer["DrawerServiceIntro"]" Name="DrawerService">
     <Button OnClickWithoutRender="@DrawerServiceShow" Text="@Localizer["Open"]"></Button>
 </DemoBlock>

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
@@ -53,6 +53,10 @@ private void OpenDrawer()
 
     private void OpenNoBackdropDrawer() => IsShowBackdropOpen = true;
 
+    private bool IsKeyboardOpen { get; set; }
+
+    private void OpenKeyboardDrawer() => IsKeyboardOpen = true;
+
     private async Task DrawerServiceShow() => await DrawerService.Show(new DrawerOption()
     {
         Placement = Placement.Right,

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -892,6 +892,8 @@
     "NoBackdropIntro": "By setting the <code>ShowBackdrop=\"false\"</code> do not show the backdrop",
     "DrawerServiceTitle": "Drawer Service",
     "DrawerServiceIntro": "Open the drawer pop-up window by calling the <code>DrawerService</code> service",
+    "IsKeyboardTitle": "ESC",
+    "IsKeyboardIntro": "By default, the component uses the <kbd>ESC</kbd> key to close the drawer popup. You can enable this function by <code>IsKeyboard=\"true\"</code>",
     "Open": "click me to open",
     "Content": "The layout, components, etc. in the drawer are fully customizable",
     "Close": "close the drawer",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -892,6 +892,8 @@
     "NoBackdropIntro": "通过设置 <code>ShowBackdrop=\"false\"</code> 不显示遮罩，这种模式下可以与抽屉下面网页元素进行交互操作",
     "DrawerServiceTitle": "调用服务打开抽屉",
     "DrawerServiceIntro": "通过调用 <code>DrawerService</code> 服务打开抽屉弹窗",
+    "IsKeyboardTitle": "ESC 按键支持",
+    "IsKeyboardIntro": "组件默认使用 <kbd>ESC</kbd> 按键关闭抽屉弹窗，可通过 <code>IsKeyboard=\"true\"</code> 开启此功能",
     "Open": "点我打开",
     "Content": "抽屉内布局、组件等完全可以自定义",
     "Close": "关闭抽屉",

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.2.9-beta05</Version>
+    <Version>9.3.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor b/src/BootstrapBlazor/Components/Drawer/Drawer.razor
@@ -1,8 +1,8 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
-<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" style="@StyleString" id="@Id">
+<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" style="@StyleString" id="@Id" data-bb-keyboard="@KeyboardString">
     @if (ShowBackdrop)
     {
         <div tabindex="-1" class="drawer-backdrop" @onclick="@OnContainerClick">

diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
@@ -119,6 +119,14 @@ public partial class Drawer
     [Parameter]
     public object? BodyContext { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否支持键盘 ESC 关闭当前弹窗 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsKeyboard { get; set; }
+
+    private string? KeyboardString => IsKeyboard ? "true" : null;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -134,6 +142,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(Close));
+
     /// <summary>
     /// 点击背景遮罩方法
     /// </summary>
@@ -153,6 +167,7 @@ public async Task OnContainerClick()
     /// 关闭抽屉方法
     /// </summary>
     /// <returns></returns>
+    [JSInvokable]
     public async Task Close()
     {
         IsOpen = false;

diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
@@ -1,5 +1,6 @@
 import Data from "../../modules/data.js"
 import Drag from "../../modules/drag.js"
+import EventHandler from "../../modules/event-handler.js"
 
 const initDrag = el => {
     let originX = 0
@@ -60,7 +61,7 @@ const initDrag = el => {
     )
 }
 
-export function init(id) {
+export function init(id, invoke, method) {
     const el = document.getElementById(id);
     if (el === null) {
         return;
@@ -73,6 +74,15 @@ export function init(id) {
     Data.set(id, dw)
 
     initDrag(el);
+
+    EventHandler.on(el, 'keyup', async e => {
+        if (e.key === 'Escape') {
+            const supportESC = el.getAttribute('data-bb-keyboard') === 'true';
+            if (supportESC) {
+                await invoke.invokeMethodAsync(method);
+            }
+        }
+    });
 }
 
 export function execute(id, open) {
@@ -125,7 +135,9 @@ export function dispose(id) {
     const dw = Data.get(id)
     Data.remove(id);
 
-    const { el, body } = dw
+    const { el, body } = dw;
+    EventHandler.off(el, 'keyup');
+
     if (el.classList.contains('show')) {
         el.classList.remove('show')
 

diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
@@ -65,6 +65,7 @@ private Dictionary<string, object> GetParameters(DrawerOption option)
         var parameters = new Dictionary<string, object>()
         {
             [nameof(Drawer.IsOpen)] = true,
+            [nameof(Drawer.IsKeyboard)] = option.IsKeyboard,
             [nameof(Drawer.IsBackdrop)] = option.IsBackdrop,
             [nameof(Drawer.ShowBackdrop)] = option.ShowBackdrop,
             [nameof(Drawer.Placement)] = option.Placement,

diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
@@ -25,6 +25,11 @@ public class DrawerOption
     /// </summary>
     public string? Height { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否支持键盘 ESC 关闭当前弹窗 默认 false
+    /// </summary>
+    public bool IsKeyboard { get; set; }
+
     /// <summary>
     /// 获得/设置 点击遮罩是否关闭抽屉 默认为 false
     /// </summary>

diff --git a/test/UnitTest/Components/DrawerTest.cs b/test/UnitTest/Components/DrawerTest.cs
@@ -161,6 +161,27 @@ public void Position_Ok()
         cut.Contains("--bb-drawer-position: absolute;");
     }
 
+    [Fact]
+    public void IsKeyboard_Ok()
+    {
+        var cut = Context.RenderComponent<Drawer>(builder =>
+        {
+            builder.Add(a => a.IsKeyboard, true);
+            builder.Add(a => a.ChildContent, s =>
+            {
+                s.OpenComponent<Button>(0);
+                s.CloseComponent();
+            });
+        });
+        cut.Contains("data-bb-keyboard=\"true\"");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsKeyboard, false);
+        });
+        cut.DoesNotContain("data-bb-keyboard=\"true\"");
+    }
+
     class MockContent : ComponentBase
     {
         [CascadingParameter(Name = "BodyContext")]

diff --git a/test/UnitTest/Services/DrawerServiceTest.cs b/test/UnitTest/Services/DrawerServiceTest.cs
@@ -23,11 +23,13 @@ public async Task Show_Ok()
             OnCloseAsync = () => Task.CompletedTask,
             Placement = Placement.Bottom,
             ShowBackdrop = true,
-            BodyContext = "test-body-context"
+            BodyContext = "test-body-context",
+            IsKeyboard = true
         };
         var service = Context.Services.GetRequiredService<DrawerService>();
         var cut = Context.RenderComponent<BootstrapBlazorRoot>();
         await service.Show(option);
+        cut.Contains("data-bb-keyboard=\"true\"");
         var button = cut.Find("button");
         await cut.InvokeAsync(() => button.Click());