feat(ResizeNotification): remove ResizeNotification service (#4550)

* chore: 更新 scss 链接

* refactor: 移除服务

* refactor: 移除 ResizeNotification 组件

* refactor: 增加系列化标签

* refactor: 更新 Responsive 组件

* test: 更新单元测试

* test: 更新单元测试

* refactor: 更新代码

* test: 更新单元测试

* test: 更新单元测试

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor

@@ -9,7 +9,6 @@
 <ToastContainer @ref="ToastContainer"></ToastContainer>
 <DrawerContainer></DrawerContainer>
 
-<ResizeNotification></ResizeNotification>
 <ConnectionHub></ConnectionHub>
 <Mask></Mask>
 

src/BootstrapBlazor/Components/ResizeNotification/ResizeNotification.razor.scss

@@ -6,14 +6,18 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 网页尺寸变化通知组件
+/// 响应监听 组件
 /// </summary>
 [BootstrapModuleAutoLoader(ModuleName = "responsive", JSObjectReference = true)]
-public class ResizeNotification : BootstrapModuleComponentBase
+public class Responsive : BootstrapModuleComponentBase
 {
-    [Inject]
-    [NotNull]
-    private ResizeNotificationService? ResizeService { get; set; }
+    /// <summary>
+    /// 获得/设置 浏览器断点阈值改变时触发 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<BreakPoint, Task>? OnBreakPointChanged { get; set; }
+
+    private BreakPoint _breakPoint = BreakPoint.None;
 
     /// <summary>
     /// <inheritdoc/>
@@ -24,16 +28,16 @@ public class ResizeNotification : BootstrapModuleComponentBase
     /// <summary>
     /// JSInvoke 回调方法
     /// </summary>
-    /// <param name="pointString"></param>
+    /// <param name="breakPoint"></param>
     /// <returns></returns>
     [JSInvokable]
-    public Task OnResize(string pointString)
+    public async Task OnResize(BreakPoint breakPoint)
     {
-        var point = BreakPoint.ExtraExtraLarge;
-        if (Enum.TryParse<BreakPoint>(pointString, true, out var p))
+        if (OnBreakPointChanged != null && breakPoint != _breakPoint)
         {
-            point = p;
+            _breakPoint = breakPoint;
+
+            await OnBreakPointChanged(breakPoint);
         }
-        return ResizeService.InvokeAsync(point);
     }
 }

src/BootstrapBlazor/Components/ResizeNotification/ResizeNotificationService.cs

@@ -1148,11 +1148,11 @@ private async Task ProcessFirstRender()
     /// <returns></returns>
     protected override async Task InvokeInitAsync()
     {
-        ScreenSize = BreakPoint.ExtraExtraLarge;
-        var pointString = await InvokeAsync<string?>("getResponsive");
-        if (Enum.TryParse<BreakPoint>(pointString, true, out var p))
+        ScreenSize = BreakPoint.None;
+        var breakPoint = await InvokeAsync<BreakPoint>("getResponsive");
+        if (breakPoint != BreakPoint.None)
         {
-            ScreenSize = p;
+            ScreenSize = breakPoint;
         }
     }
 

src/BootstrapBlazor/Components/ResizeNotification/Responsive.cs

@@ -3,14 +3,12 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-using System.Text.Json.Serialization;
-
 namespace BootstrapBlazor.Components;
 
 /// <summary>
 /// BreakPoint 枚举
 /// </summary>
-[JsonConverter(typeof(JsonStringEnumConverter))]
+[JsonEnumConverter(true)]
 public enum BreakPoint
 {
     /// <summary>

src/BootstrapBlazor/Components/ResizeNotification/ResizeNotification.cs renamed to src/BootstrapBlazor/Components/Responsive/Responsive.cs

@@ -86,7 +86,6 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
         services.AddScoped<AjaxService>();
         services.AddScoped(typeof(DragDropService<>));
         services.AddScoped<ClipboardService>();
-        services.AddScoped<ResizeNotificationService>();
         services.AddScoped<NotificationService>();
         services.AddScoped<EyeDropperService>();
         services.AddScoped<WebSpeechService>();

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -72,7 +72,6 @@
 @import "../../Components/Rate/Rate.razor.scss";
 @import "../../Components/Reconnector/ReconnectorContent.razor.scss";
 @import "../../Components/Repeater/Repeater.razor.scss";
-@import "../../Components/ResizeNotification/ResizeNotification.razor.scss";
 @import "../../Components/RibbonTab/RibbonTab.razor.scss";
 @import "../../Components/Row/Row.razor.scss";
 @import "../../Components/Scroll/Scroll.razor.scss";

src/BootstrapBlazor/Enums/BreakPoint.cs

@@ -85,6 +85,47 @@ a, a:hover, a:focus {
     animation: clip .3s ease-in;
 }
 
+body:before {
+    content: "extraExtraSmall";
+    display: none;
+}
+
+@media (min-width:375px) {
+    body:before {
+        content: "extraSmall";
+    }
+}
+
+@media (min-width:576px) {
+    body:before {
+        content: "small";
+    }
+}
+
+@media (min-width:768px) {
+    body:before {
+        content: "medium";
+    }
+}
+
+@media (min-width:992px) {
+    body:before {
+        content: "large";
+    }
+}
+
+@media (min-width:1200px) {
+    body:before {
+        content: "extraLarge";
+    }
+}
+
+@media (min-width:1400px) {
+    body:before {
+        content: "extraExtraLarge";
+    }
+}
+
 @keyframes clip {
     from {
         clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));