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

…obile change events (#2068) * ♻ refactor(Breakpoint): differentiate the window size, breakpoint and mobile change events * ♻ refactor: update the code that used deprecated methods
masastack · Jul 26, 2024 · f8f18fd · f8f18fd
1 parent 29dcc6e
commit f8f18fd
Show file tree

Hide file tree

Showing 19 changed files with 115 additions and 147 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.Blazor.Docs/Examples/features/breakpoints/Name.razor b/docs/Masa.Blazor.Docs/Examples/features/breakpoints/Name.razor
@@ -11,7 +11,7 @@
     {
         base.OnInitialized();
 
-        MasaBlazor.Breakpoint.OnUpdate += BreakpointOnOnUpdate;
+        MasaBlazor.BreakpointChanged += BreakpointOnOnUpdate;
     }
 
     private void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
@@ -37,7 +37,7 @@
 
     public void Dispose()
     {
-        MasaBlazor.Breakpoint.OnUpdate -= BreakpointOnOnUpdate;
+        MasaBlazor.BreakpointChanged -= BreakpointOnOnUpdate;
     }
 
 }
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/features/breakpoints/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/features/breakpoints/en-US.md
@@ -64,9 +64,6 @@ public class Breakpoint
 
     // Scrollbar
     public double ScrollBarWidth { get; set; }
-
-    // Call if resize
-    public event Func<Task> OnUpdate;
 }
 ```
 

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/features/breakpoints/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/features/breakpoints/zh-CN.md
@@ -64,9 +64,6 @@ public class Breakpoint
 
     // 滚动条宽度
     public double ScrollBarWidth { get; set; }
-
-    // 大小发生变化时触发的事件
-    public event Func<Task> OnUpdate;
 }
 ```
 

diff --git a/docs/Masa.Docs.Shared/Pages/AnnualService.razor b/docs/Masa.Docs.Shared/Pages/AnnualService.razor
@@ -83,7 +83,7 @@
     {
         base.OnInitialized();
 
-        MasaBlazor.Breakpoint.OnUpdate += BreakpointOnOnUpdate;
+        MasaBlazor.BreakpointChanged += BreakpointOnOnUpdate;
     }
 
     private void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
@@ -193,7 +193,7 @@
 
     public void Dispose()
     {
-        MasaBlazor.Breakpoint.OnUpdate -= BreakpointOnOnUpdate;
+        MasaBlazor.BreakpointChanged -= BreakpointOnOnUpdate;
     }
 
 }
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/DataTable/MDataTable.razor.cs b/src/Masa.Blazor/Components/DataTable/MDataTable.razor.cs
@@ -1,6 +1,6 @@
 namespace Masa.Blazor;
 
-public partial class MDataTable<TItem> : MDataIterator<TItem>, IMobile
+public partial class MDataTable<TItem> : MDataIterator<TItem>
 {
     [Inject]
     public MasaBlazor MasaBlazor { get; set; } = null!;
@@ -78,6 +78,7 @@ public partial class MDataTable<TItem> : MDataIterator<TItem>, IMobile
     public bool ShowSelect { get; set; }
 
     [Parameter]
+    [MasaApiParameter(ReleasedOn = "v1.4.0")]
     public bool FixedSelect { get; set; }
 
     [Parameter]
@@ -128,8 +129,6 @@ public DataTableResizeMode ResizeMode
         set => SetValue(value);
     }
 
-    protected MobileProvider? MobileProvider { get; set; }
-
     public IEnumerable<DataTableHeader<TItem>> ComputedHeaders
     {
         get
@@ -194,9 +193,34 @@ public IEnumerable<DataTableHeader<TItem>> ComputedHeaders
 
     private bool HasEllipsis => Headers.Any(u => u.HasEllipsis);
 
-    public bool IsMobile => MobileProvider?.IsMobile ?? false;
+    private bool IsMobile { get; set; }
+
+    private void CalculateIsMobile()
+    {
+        var (width, mobile, name, mobileBreakpoint) = MasaBlazor.Breakpoint;
+
+        if (width == 0)
+        {
+            IsMobile = false;
+            return;
+        }
 
-    public Dictionary<string, object> ColspanAttrs => new()
+        if (mobileBreakpoint.Equals(MobileBreakpoint))
+        {
+            IsMobile = mobile;
+            return;
+        }
+
+        if (MobileBreakpoint.IsT1)
+        {
+            IsMobile = width < MobileBreakpoint.AsT1;
+            return;
+        }
+
+        IsMobile = name == MobileBreakpoint.AsT0;
+    }
+
+    public Dictionary<string, object?> ColspanAttrs => new()
     {
         { "colspan", IsMobile ? null : (HeadersLength > 0 ? HeadersLength : ComputedHeaders.Count()) }
     };
@@ -223,8 +247,8 @@ protected override void OnInitialized()
         CustomFilter = CustomFilterWithColumns;
         ItemValues = Headers.Select(header => new ItemValue<TItem>(header.Value));
 
-        MobileProvider = new MobileProvider(this);
-        MasaBlazor.Breakpoint.OnUpdate += BreakpointOnOnUpdate;
+        CalculateIsMobile();
+        MasaBlazor.WindowSizeChanged += MasaBlazorWindowSizeChanged;
         MasaBlazor.RTLChanged += MasaBlazorOnRTLChanged;
     }
 
@@ -277,10 +301,10 @@ private string GetText(string value)
         return Headers.FirstOrDefault(h => h.Value == value)?.Text ?? value;
     }
 
-    private async void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
+    private void MasaBlazorWindowSizeChanged(object? sender, WindowSizeChangedEventArgs e)
     {
-        MobileProvider = new MobileProvider(this);
-        await InvokeStateHasChangedAsync();
+        CalculateIsMobile();
+        InvokeAsync(StateHasChanged);
     }
 
     public Task HandleOnRowClickAsync(MouseEventArgs args, TItem item)
@@ -362,7 +386,7 @@ public void RemoveGroup()
 
     protected override ValueTask DisposeAsyncCore()
     {
-        MasaBlazor.Breakpoint.OnUpdate -= BreakpointOnOnUpdate;
+        MasaBlazor.WindowSizeChanged -= MasaBlazorWindowSizeChanged;
         MasaBlazor.RTLChanged -= MasaBlazorOnRTLChanged;
 
         return base.DisposeAsyncCore();

diff --git a/src/Masa.Blazor/Components/Descriptions/MDescriptions.razor.cs b/src/Masa.Blazor/Components/Descriptions/MDescriptions.razor.cs
@@ -189,15 +189,15 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
-        MasaBlazor.Breakpoint.OnUpdate += BreakpointOnOnUpdate;
+        MasaBlazor.BreakpointChanged += BreakpointOnOnUpdate;
     }
 
 
     protected override void OnAfterRender(bool firstRender)
     {
         base.OnAfterRender(firstRender);
 
-        // DescriptionItem may be update after render, so we need to render twice
+        // DescriptionItem may be updated after render, so we need to render twice
         if (_renderTwice)
         {
             _renderTwice = false;
@@ -209,9 +209,9 @@ protected override void OnAfterRender(bool firstRender)
         }
     }
 
-    private async void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
+    private void BreakpointOnOnUpdate(object? sender, BreakpointChangedEventArgs e)
     {
-        await InvokeStateHasChangedAsync();
+        InvokeAsync(StateHasChanged);
     }
 
     private bool IndependentTheme => (IsDirtyParameter(nameof(Dark)) && Dark) || (IsDirtyParameter(nameof(Light)) && Light);
@@ -277,7 +277,7 @@ internal async Task Unregister(IDescriptionsItem descriptionsItem)
 
     protected override ValueTask DisposeAsyncCore()
     {
-        MasaBlazor.Breakpoint.OnUpdate -= BreakpointOnOnUpdate;
+        MasaBlazor.BreakpointChanged -= BreakpointOnOnUpdate;
 
         return base.DisposeAsyncCore();
     }

diff --git a/src/Masa.Blazor/Components/NavigationDrawer/MNavigationDrawer.razor.cs b/src/Masa.Blazor/Components/NavigationDrawer/MNavigationDrawer.razor.cs
@@ -342,7 +342,7 @@ protected override void OnInitialized()
 
         _prevPermanent = Permanent;
 
-        MasaBlazor.Breakpoint.OnUpdate += OnBreakpointOnUpdate;
+        MasaBlazor.BreakpointChanged += OnBreakpointOnUpdate;
 
         if (Value == null && ValueChanged.HasDelegate)
         {
@@ -592,7 +592,7 @@ public async Task HandleOnClickAsync(MouseEventArgs e)
     protected override async ValueTask DisposeAsyncCore()
     {
         RemoveApplication();
-        MasaBlazor!.Breakpoint.OnUpdate -= OnBreakpointOnUpdate;
+        MasaBlazor!.BreakpointChanged -= OnBreakpointOnUpdate;
         MasaBlazor.Application.PropertyChanged -= ApplicationPropertyChanged;
         NavigationManager!.LocationChanged -= OnLocationChanged;
         await OutsideClickJsModule.UnbindAndDisposeAsync();

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/Mixins/Mobile/IMobile.cs b/src/Masa.Blazor/Mixins/Mobile/IMobile.cs