♻ refactor: Automatically update Masonry layout (#727)

* feat: Global navigation waterfall layout * style：Remove duplicate styles * ♻ refactor: Automatically update Masonry layout * style: Remove Comment
masastack · Aug 13, 2024 · 4092306 · 4092306
1 parent 975d7d4
commit 4092306
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor.cs b/src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor.cs
@@ -24,22 +24,31 @@ public partial class ExpansionMenuWrapper : MasaComponentBase
 
     private string CssSelectorForScroll => string.IsNullOrWhiteSpace(CssForScroll) ? string.Empty : "." + CssForScroll;
 
+    private bool _shouldUpdateMasonry;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
+        if (_shouldUpdateMasonry)
         {
-            if (Value is not null)
-            {
-                await MasonryInitAsync();
-            }
+            _shouldUpdateMasonry = false;
+            await InitMasonryAsync();
         }
     }
 
-    protected virtual async Task MasonryInitAsync()
+    protected override async Task OnParametersSetAsync()
+    {
+        _shouldUpdateMasonry = true;
+        await base.OnParametersSetAsync();
+    }
+
+    protected virtual async Task InitMasonryAsync()
     {
-        foreach (var category in Value.Children)
+        if (Value is not null)
         {
-            await JsRuntime.InvokeVoidAsync("MasaStackComponents.masonryInit", $".{idPrefix}_{category.Id}", ".app", 24);
+            foreach (var category in Value.Children)
+            {
+                await JsRuntime.InvokeVoidAsync("MasaStackComponents.initOrUpdateMasonry", $".{idPrefix}_{category.Id}", ".app", 24);
+            }
         }
     }
 

diff --git a/src/Masa.Stack.Components/wwwroot/js/components.js b/src/Masa.Stack.Components/wwwroot/js/components.js
@@ -138,15 +138,23 @@ window.MasaStackComponents.getTimezoneOffset = function() {
     return new Date().getTimezoneOffset();
 }
 
-window.MasaStackComponents.masonryInit = (selector, itemSelector, gutter) => {
-    const elem = document.querySelector(selector);
-    new Masonry(elem, {
-        itemSelector: itemSelector,
-        columnWidth: itemSelector,
-        gutter: gutter,
-        percentPosition: true
-    });
-}
+let masonryInstances = {};
+
+window.MasaStackComponents.initOrUpdateMasonry = (selector, itemSelector, gutter) => {
+    var elem = document.querySelector(selector);
+    if (!elem) return;
+
+    if (masonryInstances[selector]) {
+        masonryInstances[selector].layout();
+    } else {
+        masonryInstances[selector] = new Masonry(elem, {
+            itemSelector: itemSelector,
+            columnWidth: itemSelector,
+            percentPosition: true,
+            gutter: gutter
+        });
+    }
+};
 
 function debounce(fn, wait) {
     let timer = null;

diff --git a/tests/MasaWasmApp/MasaWasmApp.csproj b/tests/MasaWasmApp/MasaWasmApp.csproj
@@ -1,16 +1,16 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net6.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Masa.Blazor" Version="1.0.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.3" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="7.0.13" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.3" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(MicrosoftPackageVersion)" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(MicrosoftPackageVersion)" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="$(MicrosoftPackageVersion)" PrivateAssets="all" />
   </ItemGroup>
 
 </Project>