🆕 feat(Tabs): re-render slider when a tab is removed(unregister) (#605)

* ♻ refactor(Tabs): add support for custom the default item value in sub classes

* ⚰ refactor: remove unnecessary code

* 🆕 feat(Tabs): Add CallSliderAfterRender public method

Author: capdiem

src/Component/BlazorComponent/Components/ItemGroup/BRoutableGroupItem.razor.cs

@@ -82,14 +82,11 @@ private async Task<bool> UpdateActiveForRoutable()
         if (matched && ItemGroup is not null && !isActive)
         {
             await ItemGroup.ToggleAsync(Value);
-            await OnActiveUpdatedForRoutable();
         }
 
         return isActive != matched;
     }
 
-    protected virtual Task OnActiveUpdatedForRoutable() => Task.CompletedTask;
-
     protected override ValueTask DisposeAsyncCore()
     {
         NavigationManager.LocationChanged -= OnLocationChanged;

src/Component/BlazorComponent/Components/ItemGroup/ItemGroupBase.cs

@@ -72,9 +72,14 @@ private void RefreshItemsState()
             Items.ForEach(item => item.RefreshState());
         }
 
-        public virtual void Register(IGroupable item)
+        protected virtual StringNumber InitDefaultItemValue()
         {
-            item.Value ??= _registeredItemsIndex++;
+            return _registeredItemsIndex++;
+        }
+
+        internal virtual void Register(IGroupable item)
+        {
+            item.Value ??= InitDefaultItemValue();
 
             Items.Add(item);
 
@@ -109,7 +114,11 @@ public virtual void Register(IGroupable item)
         public virtual void Unregister(IGroupable item)
         {
             Items.Remove(item);
-            _registeredItemsIndex--;
+
+            if (_registeredItemsIndex > 0)
+            {
+                _registeredItemsIndex--;
+            }
         }
 
         private async Task UpdateMandatoryAsync(bool last = false)

src/Component/BlazorComponent/Components/Tabs/BTab.razor.cs

@@ -13,13 +13,6 @@ public BTab() : base(GroupType.SlideGroup)
 
         protected override bool IsRoutable => Href != null && HasRoutableAncestor;
 
-        protected override async Task OnActiveUpdatedForRoutable()
-        {
-            if (Tabs == null) return;
-
-            await Tabs.CallSlider();
-        }
-
         protected override bool AfterHandleEventShouldRender() => false;
 
         private async Task HandleOnClick(MouseEventArgs args)

src/Component/BlazorComponent/Components/Tabs/BTabs.razor.cs

@@ -70,6 +70,8 @@ public EventCallback<StringNumber> ValueChanged
 
         private StringNumber? _prevValue;
         private int _registeredTabItemsIndex;
+        private bool _callSliderOnAfterRender;
+        private CancellationTokenSource? _callSliderCts;
 
         private List<ITabItem> TabItems { get; set; } = new();
 
@@ -98,20 +100,25 @@ public bool IsDark
         }
 
         List<ITabItem> ITabs.TabItems => TabItems;
-
+        
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             await base.OnAfterRenderAsync(firstRender);
 
             if (firstRender)
             {
                 await ResizeJSModule.ObserverAsync(Ref, OnResize);
-
-                await CallSlider();
+                _callSliderOnAfterRender = true;
             }
             else if (_prevValue != Value)
             {
                 _prevValue = Value;
+                _callSliderOnAfterRender = true;
+            }
+
+            if (_callSliderOnAfterRender)
+            {
+                _callSliderOnAfterRender = false;
                 await CallSlider();
             }
         }
@@ -134,28 +141,45 @@ public void UnregisterTabItem(ITabItem tabItem)
             TabItems.Remove(tabItem);
         }
 
+        /// <summary>
+        /// Re-render slider immediately. For the case of deleting tabs,
+        /// it is recommended to use <see cref="CallSliderAfterRender"/>.
+        /// </summary>
+        [MasaApiPublicMethod]
         public async Task CallSlider()
         {
             if (HideSlider) return;
 
-            var item = Instance?.Items?.FirstOrDefault(item => item.Value == Instance.Value);
-            if (item?.Ref.Context == null)
-            {
-                Slider = (0, 0, 0, 0, 0);
-            }
-            else
+            _callSliderCts?.Cancel();
+            _callSliderCts = new();
+
+            try
             {
-                var el = await JsInvokeAsync<Web.Element>(JsInteropConstants.GetDomInfo, item.Ref);
-                var height = !Vertical ? SliderSize.TryGetNumber().number : el.ScrollHeight;
-                var left = Vertical ? 0 : el.OffsetLeft;
-                var right = Vertical ? 0 : el.OffsetLeft + el.OffsetWidth;
-                var top = el.OffsetTop;
+                await Task.Delay(16, _callSliderCts.Token);
+
+                var item = Instance?.Items?.FirstOrDefault(item => item.Value == Instance.Value);
+                if (item?.Ref.Context == null)
+                {
+                    Slider = (0, 0, 0, 0, 0);
+                }
+                else
+                {
+                    var el = await JsInvokeAsync<Web.Element>(JsInteropConstants.GetDomInfo, item.Ref);
+                    var height = !Vertical ? SliderSize.TryGetNumber().number : el.ScrollHeight;
+                    var left = Vertical ? 0 : el.OffsetLeft;
+                    var right = Vertical ? 0 : el.OffsetLeft + el.OffsetWidth;
+                    var top = el.OffsetTop;
                 var width = Vertical ? SliderSize.TryGetNumber().number : el.ClientWidth; // REVIEW: el.ScrollWidth was used in Vuetify2
 
-                Slider = (height, left, right, top, width);
-            }
+                    Slider = (height, left, right, top, width);
+                }
 
-            StateHasChanged();
+                StateHasChanged();
+            }
+            catch (TaskCanceledException)
+            {
+                // ignored
+            }
         }
 
         private async Task OnResize()
@@ -168,6 +192,15 @@ private async Task OnResize()
             await CallSlider();
         }
 
+        /// <summary>
+        /// Re-render slider in <see cref="OnAfterRenderAsync"/>
+        /// </summary>
+        [MasaApiPublicMethod]
+        public void CallSliderAfterRender()
+        {
+            _callSliderOnAfterRender = true;
+        }
+
         protected override async ValueTask DisposeAsyncCore()
         {
             await ResizeJSModule.UnobserveAsync(Ref);

src/Component/BlazorComponent/Components/Window/BWindow.razor.cs

@@ -68,7 +68,7 @@ protected override void RegisterWatchers(PropertyWatcher watcher)
                 true);
         }
 
-        public override void Register(IGroupable item)
+        internal override void Register(IGroupable item)
         {
             base.Register(item);