♻ refactor(Breakpoint): differentiate the window size, breakpoint and…

… mobile change events
masastack · Jul 25, 2024 · ed4aade · ed4aade
1 parent 29dcc6e
commit ed4aade
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 68 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/features/breakpoints/Dialog.razor b/docs/Masa.Blazor.Docs/Examples/features/breakpoints/Dialog.razor
@@ -25,22 +25,17 @@
     {
         base.OnInitialized();
 
-        MasaBlazor.Breakpoint.OnUpdate += BreakpointOnOnUpdate;
+        MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged;
     }
 
-    private void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
+    private void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e)
     {
-        if (!e.MobileChanged)
-        {
-            return;
-        }
-
         InvokeAsync(StateHasChanged);
     }
 
     public void Dispose()
     {
-        MasaBlazor.Breakpoint.OnUpdate -= BreakpointOnOnUpdate;
+        MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged;
     }
 
 }
diff --git a/docs/Masa.Docs.Shared/Pages/Home.razor.cs b/docs/Masa.Docs.Shared/Pages/Home.razor.cs
@@ -12,28 +12,17 @@ public partial class Home : ComponentBase
     [SupplyParameterFromQuery(Name = "v")]
     [Parameter] public string? Version { get; set; }
 
-    private bool _prevXs;
-
     protected override void OnInitialized()
     {
         base.OnInitialized();
 
         MasaBlazor.BreakpointChanged += MasaBlazorOnBreakpointChanged;
     }
 
-    protected override void OnAfterRender(bool firstRender)
-    {
-        if (firstRender)
-        {
-            _prevXs = MasaBlazor.Breakpoint.Xs;
-        }
-    }
-
     private void MasaBlazorOnBreakpointChanged(object? sender, BreakpointChangedEventArgs e)
     {
-        if (_prevXs != MasaBlazor.Breakpoint.Xs)
+        if (e.Breakpoint == Breakpoints.Xs)
         {
-            _prevXs = MasaBlazor.Breakpoint.Xs;
             InvokeAsync(StateHasChanged);
         }
     }

diff --git a/src/Masa.Blazor/Components/AppBar/MAppBarTitle.razor.cs b/src/Masa.Blazor/Components/AppBar/MAppBarTitle.razor.cs
@@ -25,18 +25,17 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
-        MasaBlazor.BreakpointChanged += MasaBlazorOnBreakpointChanged;
+        MasaBlazor.WindowSizeChanged += MasaBlazorOnBreakpointChanged;
     }
 
-    private async void MasaBlazorOnBreakpointChanged(object? sender, BreakpointChangedEventArgs e)
+    private async void MasaBlazorOnBreakpointChanged(object? sender, WindowSizeChangedEventArgs e)
     {
-        if (Math.Abs(_windowsWidth - MasaBlazor.Breakpoint.Width) > 0.01)
-        {
-            _windowsWidth = MasaBlazor.Breakpoint.Width;
+        if (!(Math.Abs(_windowsWidth - MasaBlazor.Breakpoint.Width) > 0.01)) return;
 
-            await UpdateDimensions();
-            await InvokeAsync(StateHasChanged);
-        }
+        _windowsWidth = MasaBlazor.Breakpoint.Width;
+
+        await UpdateDimensions();
+        await InvokeAsync(StateHasChanged);
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -89,7 +88,7 @@ private async Task UpdateDimensions()
 
     protected override ValueTask DisposeAsyncCore()
     {
-        MasaBlazor.BreakpointChanged -= MasaBlazorOnBreakpointChanged;
+        MasaBlazor.WindowSizeChanged -= MasaBlazorOnBreakpointChanged;
         return base.DisposeAsyncCore();
     }
 }
diff --git a/src/Masa.Blazor/Components/SlideGroup/MSlideGroup.razor.cs b/src/Masa.Blazor/Components/SlideGroup/MSlideGroup.razor.cs
@@ -56,15 +56,13 @@ protected override void OnInitialized()
         {
             base.OnInitialized();
 
-            MasaBlazor.Breakpoint.OnUpdate += BreakpointOnOnUpdate;
+            MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged;
             IsMobile = MasaBlazor.Breakpoint.Mobile;
         }
 
-        private async void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
+        private async void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e)
         {
-            if (!e.MobileChanged) return;
-
-            IsMobile = MasaBlazor.Breakpoint.Mobile;
+            IsMobile = e.Mobile;
             await InvokeStateHasChangedAsync();
         }
 
@@ -385,7 +383,7 @@ protected async Task OnResize()
 
         protected override async ValueTask DisposeAsyncCore()
         {
-            MasaBlazor.Breakpoint.OnUpdate -= BreakpointOnOnUpdate;
+            MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged;
             await ResizeJSModule.UnobserveAsync(Ref);
         }
     }

diff --git a/src/Masa.Blazor/Mixins/Menuable/MMenuable.cs b/src/Masa.Blazor/Mixins/Menuable/MMenuable.cs
@@ -304,10 +304,10 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
-        MasaBlazor.BreakpointChanged += MasaBlazorOnBreakpointChanged;
+        MasaBlazor.WindowSizeChanged += MasaBlazorOnWindowSizeChanged;
     }
 
-    private async void MasaBlazorOnBreakpointChanged(object? sender, BreakpointChangedEventArgs e)
+    private async void MasaBlazorOnWindowSizeChanged(object? sender, WindowSizeChangedEventArgs e)
     {
         if (!IsActive)
         {
@@ -427,7 +427,7 @@ protected virtual Task DeactivateAsync()
 
     protected override async ValueTask DisposeAsyncCore()
     {
-        MasaBlazor.BreakpointChanged -= MasaBlazorOnBreakpointChanged;
+        MasaBlazor.WindowSizeChanged -= MasaBlazorOnWindowSizeChanged;
 
         if (ContentElement.Context is not null)
         {

diff --git a/src/Masa.Blazor/Services/Breakpoint/Breakpoint.cs b/src/Masa.Blazor/Services/Breakpoint/Breakpoint.cs
@@ -13,8 +13,6 @@ public class BreakpointOptions
 
 public class Breakpoint
 {
-    private bool _prevMobile;
-
     public Breakpoint()
     {
     }
@@ -81,7 +79,7 @@ public double GetMobileBreakpointValue()
             Breakpoints.Xs => Thresholds.Xs,
             Breakpoints.Sm => Thresholds.Sm,
             Breakpoints.Md => Thresholds.Md,
-            _              => Thresholds.Lg,
+            _ => Thresholds.Lg,
         };
     }
 
@@ -90,9 +88,9 @@ public double GetMobileBreakpointValue()
     public double ScrollBarWidth { get; internal set; }
 
     [Obsolete("Use MasaBlazor.BreakpointChanged instead")]
-    public event EventHandler<BreakpointChangedEventArgs> OnUpdate;
+    public event EventHandler<BreakpointChangedEventArgs>? OnUpdate;
 
-    internal Action<BreakpointChangedEventArgs> OnChanged;
+    internal Action<WindowSizeChangedEventArgs>? OnWindowResize;
 
     public void Deconstruct(
         out double width,
@@ -110,19 +108,14 @@ public async Task InitAsync(IJSRuntime jsRuntime)
     {
         JSRuntime = jsRuntime;
 
-        await UpdateAsync();
+        await ResizeAsync();
 
         _ = JSRuntime.AddHtmlElementEventListener("window", "resize", ResizeAsync,
             new EventListenerOptions { Passive = true },
             new EventListenerExtras(debounce: 200));
     }
 
     private async Task ResizeAsync()
-    {
-        await UpdateAsync();
-    }
-
-    public async Task UpdateAsync()
     {
         var height = await GetClientSizeAsync("Height");
         var width = await GetClientSizeAsync("Width");
@@ -153,6 +146,9 @@ public async Task UpdateAsync()
         LgAndUp = !(xs || sm || md) && (lg || xl);
         XlOnly = xl;
 
+        var prevBreakpoint = Name;
+        var prevMobile = Mobile;
+
         if (xs)
         {
             Name = Breakpoints.Xs;
@@ -186,19 +182,18 @@ public async Task UpdateAsync()
             Mobile = current <= max;
         }
 
-        var eventArgs = new BreakpointChangedEventArgs();
+        var breakpointChanged = prevBreakpoint != Name;
+        var mobileChanged = prevMobile != Mobile;
+        var eventArgs = new WindowSizeChangedEventArgs(Name, breakpointChanged, Mobile, mobileChanged);
 
         Initialized = true;
 
-        if (_prevMobile != Mobile)
+        if (breakpointChanged)
         {
-            _prevMobile = Mobile;
-            eventArgs.MobileChanged = true;
+            OnUpdate?.Invoke(this, eventArgs);
         }
 
-        OnUpdate?.Invoke(this, eventArgs);
-
-        OnChanged?.Invoke(eventArgs);
+        OnWindowResize?.Invoke(eventArgs);
     }
 
     private async Task<double> GetClientSizeAsync(string sizeName)
@@ -218,4 +213,4 @@ private async Task<double> GetClientSizeAsync(string sizeName)
         var jsonElement = await JSRuntime.InvokeAsync<JsonElement>(JsInteropConstants.GetProp, selector, name);
         return jsonElement.ValueKind == JsonValueKind.Number ? jsonElement.GetDouble() : null;
     }
-}
+}
diff --git a/src/Masa.Blazor/Services/Breakpoint/BreakpointChangedEventArgs.cs b/src/Masa.Blazor/Services/Breakpoint/BreakpointChangedEventArgs.cs
@@ -1,9 +1,9 @@
 namespace Masa.Blazor;
 
-public class BreakpointChangedEventArgs : MobileChangedEventArgs
+public class BreakpointChangedEventArgs(Breakpoints breakpoint, bool breakpointChanged, bool mobile, bool mobileChanged)
+    : MobileChangedEventArgs(mobile, mobileChanged)
 {
-    /// <summary>
-    /// Indicates whether the value of Mobile property has changed. First time is always false.
-    /// </summary>
-    public bool MobileChanged { get; set; }
-}
+    public Breakpoints Breakpoint { get; } = breakpoint;
+
+    internal bool BreakpointChanged { get; } = breakpointChanged;
+}
diff --git a/src/Masa.Blazor/Services/Breakpoint/MobileChangedEventArgs.cs b/src/Masa.Blazor/Services/Breakpoint/MobileChangedEventArgs.cs
@@ -1,5 +1,11 @@
 namespace Masa.Blazor;
 
-public class MobileChangedEventArgs : EventArgs
+public class MobileChangedEventArgs(bool mobile, bool mobileChanged) : EventArgs
 {
-}
+    public bool Mobile { get; } = mobile;
+
+    /// <summary>
+    /// Indicates whether the value of Mobile property has changed. First time is always false.
+    /// </summary>
+    internal bool MobileChanged { get; } = mobileChanged;
+}
diff --git a/src/Masa.Blazor/Services/Breakpoint/WindowSizeChangedEventArgs.cs b/src/Masa.Blazor/Services/Breakpoint/WindowSizeChangedEventArgs.cs
@@ -0,0 +1,6 @@
+namespace Masa.Blazor;
+
+public class WindowSizeChangedEventArgs(Breakpoints breakpoint, bool breakpointChanged, bool mobile, bool mobileChanged)
+    : BreakpointChangedEventArgs(breakpoint, breakpointChanged, mobile, mobileChanged)
+{
+}
diff --git a/src/Masa.Blazor/Services/MasaBlazor.cs b/src/Masa.Blazor/Services/MasaBlazor.cs
@@ -15,16 +15,20 @@ public MasaBlazor(
         {
             RTL = rtl;
             Breakpoint = breakpoint;
-            Breakpoint.OnChanged = e =>
+            Breakpoint.OnWindowResize = e =>
             {
-                BreakpointChanged?.Invoke(this, e);
+                WindowSizeChanged?.Invoke(this, e);
+
+                if (e.BreakpointChanged)
+                {
+                    BreakpointChanged?.Invoke(this, e);
+                }
 
                 if (e.MobileChanged)
                 {
                     MobileChanged?.Invoke(this, e);
                 }
             };
-
             Application = application;
             Theme = theme;
             Icons = icons;
@@ -67,6 +71,11 @@ public bool RTL
 
         public event Action<Theme>? OnThemeChange;
 
+        /// <summary>
+        /// An event that fires when the window size has changed.
+        /// </summary>
+        public event EventHandler<WindowSizeChangedEventArgs>? WindowSizeChanged; 
+
         /// <summary>
         /// An event that fires when the breakpoint has changed.
         /// </summary>