🐛 fix(Breadcrumbs): updating breadcrumbs may do not work (#681)

* 🐛 fix(Breadcrumbs): updating breadcrumbs may do not work * update css
masastack · Jan 12, 2024 · a201ff7 · a201ff7
1 parent b0f68f8
commit a201ff7
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 23 deletions.
diff --git a/src/Masa.Stack.Components/Shared/Layouts/Components/Breadcrumbs.razor b/src/Masa.Stack.Components/Shared/Layouts/Components/Breadcrumbs.razor
@@ -9,7 +9,10 @@
             {
                 var item = Items[i];
                 var isLast = i == Items.Count - 1;
-                <MBreadcrumbsItem @key="@item" Href="@(isLast ? null : item.Href)">
+                <MBreadcrumbsItem @key="@item"
+                                  Href="@(isLast ? null : item.Href)"
+                                  Class="text-truncate d-inline-block"
+                                  Style="max-width: 240px;">
                     @DT(item.Text)
                 </MBreadcrumbsItem>
             }

diff --git a/src/Masa.Stack.Components/Shared/Layouts/Components/Breadcrumbs.razor.cs b/src/Masa.Stack.Components/Shared/Layouts/Components/Breadcrumbs.razor.cs
@@ -6,11 +6,14 @@ public partial class Breadcrumbs : MasaComponentBase
         public List<Nav> FlattenedNavs { get; set; } = new();
 
         private List<Nav>? _previousFlattenedNavs;
+        private string? _prevLocation;
+        private Action? _updateLastBreadcrumb;
 
         protected override void OnInitialized()
         {
             base.OnInitialized();
 
+            _prevLocation = NavigationManager.Uri;
             NavigationManager.LocationChanged += NavigationManagerOnLocationChanged;
         }
 
@@ -21,13 +24,13 @@ protected override void OnParametersSet()
             if (_previousFlattenedNavs != FlattenedNavs)
             {
                 _previousFlattenedNavs = FlattenedNavs;
-
                 UpdateItems();
             }
         }
 
         private void NavigationManagerOnLocationChanged(object? sender, LocationChangedEventArgs e)
         {
+            _prevLocation = e.Location;
             UpdateItems();
 
             InvokeAsync(StateHasChanged);
@@ -131,34 +134,38 @@ string GetIntersection(string left, string right)
                     Text = extra
                 });
             }
+
+            if (_updateLastBreadcrumb != null)
+            {
+                _updateLastBreadcrumb();
+                _updateLastBreadcrumb = null;
+            }
         }
 
         internal void ReplaceLastBreadcrumb(string text)
         {
-            NextTickIf(() =>
+            if (_prevLocation == NavigationManager.Uri && Items.Count > 0)
             {
-                if (!Items.Any())
-                {
-                    return;
-                }
-
                 Items.Last().Text = text;
                 StateHasChanged();
-            }, () => !Items.Any());
+            }
+            else
+            {
+                _updateLastBreadcrumb = () => Items.Last().Text = text;
+            }
         }
 
         internal void UpdateBreadcrumbs(Action<List<BreadcrumbItem>> configure)
         {
-            NextTickIf(() =>
+            if (_prevLocation == NavigationManager.Uri && Items.Count > 0)
             {
-                if (!Items.Any())
-                {
-                    return;
-                }
-
                 configure(Items);
                 StateHasChanged();
-            }, () => !Items.Any());
+            }
+            else
+            {
+                _updateLastBreadcrumb = () => configure(Items);
+            }
         }
 
         private List<BreadcrumbItem> Items { get; set; } = new();
@@ -185,7 +192,7 @@ private IList<Nav> GetParents(string parentCode)
         protected override ValueTask DisposeAsync(bool disposing)
         {
             NavigationManager.LocationChanged -= NavigationManagerOnLocationChanged;
-            
+
             return base.DisposeAsync(disposing);
         }
     }

diff --git a/src/Masa.Stack.Components/Shared/Layouts/SLayout.razor b/src/Masa.Stack.Components/Shared/Layouts/SLayout.razor
@@ -28,7 +28,7 @@
                             </MButton>
                         </ActivatorContent>
                     </GlobalNavigation>
-                    <Breadcrumbs FlattenedNavs="FlattenedAllNavs" @ref="_breadcrumbs"></Breadcrumbs>
+                    <Breadcrumbs FlattenedNavs="FlattenedAllNavs" @ref="BreadcrumbsComp"></Breadcrumbs>
                     <MSpacer />
                     <Languages OnChange="() => { }" />
                     <MSheet Class="d-flex align-center justify-space-between rounded-6 pa-1 mr-n4" Width="100">

diff --git a/src/Masa.Stack.Components/Shared/Layouts/SLayout.razor.cs b/src/Masa.Stack.Components/Shared/Layouts/SLayout.razor.cs
@@ -58,7 +58,23 @@ public partial class SLayout
     [Parameter]
     public bool IsShowEnvironmentSwitch { get; set; } = false;
 
-    private Breadcrumbs _breadcrumbs = null!;
+    private Breadcrumbs? _breadcrumbsComp;
+    private Action? _breadcrumbSetCallback;
+
+    private Breadcrumbs? BreadcrumbsComp
+    {
+        get => _breadcrumbsComp;
+        set
+        {
+            _breadcrumbsComp = value;
+            if (value is null)
+            {
+                return;
+            }
+
+            _breadcrumbSetCallback?.Invoke();
+        }
+    }
 
     [Parameter]
     public string? AppId { get; set; }
@@ -195,7 +211,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// </example>
     public void ReplaceLastBreadcrumb(string text)
     {
-        _breadcrumbs.ReplaceLastBreadcrumb(text);
+        if (BreadcrumbsComp is null)
+        {
+            _breadcrumbSetCallback = () => BreadcrumbsComp!.ReplaceLastBreadcrumb(text);
+        }
+        else
+        {
+            BreadcrumbsComp.ReplaceLastBreadcrumb(text);
+        }
     }
 
     /// <summary>
@@ -210,7 +233,14 @@ public void ReplaceLastBreadcrumb(string text)
     /// </example>
     public void UpdateBreadcrumbs(Action<List<BreadcrumbItem>> configure)
     {
-        _breadcrumbs.UpdateBreadcrumbs(configure);
+        if (BreadcrumbsComp is null)
+        {
+            _breadcrumbSetCallback = () => BreadcrumbsComp!.UpdateBreadcrumbs(configure);
+        }
+        else
+        {
+            BreadcrumbsComp.UpdateBreadcrumbs(configure);
+        }
     }
 
     private bool IsMenusUri(List<Nav> navs, string uri)
@@ -324,5 +354,4 @@ public void Dispose()
     {
         NavigationManager.LocationChanged -= HandleLocationChanged;
     }
-
 }
diff --git a/src/Masa.Stack.Components/wwwroot/css/app.css b/src/Masa.Stack.Components/wwwroot/css/app.css
@@ -1,6 +1,10 @@
 @import url(standard.css);
 @import url(pure-components.css);
 
+h1:focus {
+    outline: none;
+}
+
 body, .masa-stack-components {
     background-color: #F0F3FA !important;
 }
@@ -720,10 +724,15 @@ body, .masa-stack-components {
         margin-left: 0em !important;
     }
 
-.masa-stack-components .m-dialog:not(.m-dialog--fullscreen) {
+.masa-stack-components .m-dialog:not(.m-dialog--fullscreen):not(.m-dialog--drawer) {
     border-radius: 20px !important;
 }
 
+.masa-stack-components .m-dialog--drawer {
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+}
+
 .masa-main .m-card {
     box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%) !important;
     border-radius: 20px !important;
@@ -990,6 +999,10 @@ body, .masa-stack-components {
     border-radius: 4px;
 }
 
+.m-btn:not(.m-btn--round) {
+    border-radius: 8px;
+}
+
 @media (min-width: 1264px) {
     .masa-app-bar:not(.app--sized) {
         left: 300px !important;