Stepper Fix ProgressValue does not Update When Step Add/Remove (#391)

mckaragoz · web-flow · commit bb9056822bcf · 2024-05-03T12:32:13.000+03:00
* Stepper Fix ProgressValue does not Update When Step Add/Remove

* Change Example Names

* Fix Error and Warning
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Stepper/StepperPage.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Stepper/StepperPage.razor
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample2.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample2.razor
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/StepperExtendedPage.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/StepperExtendedPage.razor
@@ -0,0 +1,12 @@
+﻿@page "/mudstepperextended"
+@namespace MudExtensions.Docs.Pages
+
+<ExamplePage Title="MudStepperExtended">
+    <ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample1" Title="Playground" Description="Place MudSteps in the MudStepper.">
+        <StepperExtendedExample1 />
+    </ExampleCard>
+
+    <ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample2" Title="Order" Description="You can set each step's order dynamically.">
+        <StepperExtendedExample2 />
+    </ExampleCard>
+</ExamplePage>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Index.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Index.razor
@@ -228,6 +228,7 @@
     {
         new("MudListExtended", "The extended MudList component."),
         new("MudSelectExtended", "The extended MudSelect component."),
+        new("MudStepperExtended", "A wizard-like steps to control the flow with rich options."),
         new("MudTextFieldExtended", "The extended MudTextField component."),
     };
 
@@ -254,7 +255,6 @@
         new("MudSignaturePad", "A signature pad."),
         new("MudSpeedDial", "Stacked buttons in a menu content."),
         new("MudSplitter", "A resizeable content splitter."),
-        new("MudStepper", "A wizard-like steps to control the flow with rich options."),
         new("MudSwitchM3", "Material 3 switch component that has all MudBlazor features."),
         new("MudTeleport", "Teleport the content to the specified parent and not follow the DOM hierarchy."),
         new("MudTextM3", "Material 3 typography"),
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Shared/MainLayout.razor b/CodeBeam.MudBlazor.Extensions.Docs/Shared/MainLayout.razor
@@ -60,7 +60,7 @@
             <MudNavLink Href="/mudsignaturepad">SignaturePad</MudNavLink>
             <MudNavLink Href="/mudspeeddial">SpeedDial</MudNavLink>
             <MudNavLink Href="/mudsplitter">Splitter</MudNavLink>
-            <MudNavLink Href="/mudstepper">Stepper</MudNavLink>
+            <MudNavLink Href="/mudstepperextended">StepperExtended</MudNavLink>
             <MudNavLink Href="/mudswitchm3">SwitchM3</MudNavLink>
             <MudNavLink Href="/mudteleport">Teleport</MudNavLink>
             <MudNavLink Href="/mudtextfieldextended">TextFieldExtended</MudNavLink>
diff --git a/CodeBeam.MudBlazor.Extensions.UnitTests/Components/RenderTests.cs b/CodeBeam.MudBlazor.Extensions.UnitTests/Components/RenderTests.cs
@@ -51,7 +51,7 @@ public void SplitterPageRenderTest()
         [Test]
         public void StepperPageRenderTest()
         {
-            var comp = Context.RenderComponent<StepperPage>();
+            var comp = Context.RenderComponent<StepperExtendedPage>();
             comp.Markup.Should().NotBeNullOrEmpty();
         }
 
diff --git a/CodeBeam.MudBlazor.Extensions/Components/SpeedDial/MudSpeedDial.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/SpeedDial/MudSpeedDial.razor.cs
@@ -4,6 +4,9 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
     public partial class MudSpeedDial : MudComponentBase
     {
         Guid _animationGuid = Guid.NewGuid();
diff --git a/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs
@@ -152,11 +152,18 @@ internal int ActiveIndex
             set
             {
                 _activeIndex = value;
-                ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));
+                UpdateProgressValue();
             }
         }
 
         internal double ProgressValue;
+        /// <summary>
+        /// 
+        /// </summary>
+        protected void UpdateProgressValue()
+        {
+            ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));
+        }
 
         /// <summary>
         /// Provides CSS classes for the step content.
@@ -349,6 +356,7 @@ internal void AddStep(MudStepExtended step)
                 ReorderSteps();
             }
 
+            UpdateProgressValue();
             StateHasChanged();
         }
 
@@ -364,6 +372,7 @@ internal void RemoveStep(MudStepExtended step)
         {
             Steps.Remove(step);
             _allSteps.Remove(step);
+            UpdateProgressValue();
             StateHasChanged();
         }
 
@@ -633,10 +642,11 @@ public void SetStepStatus(int index, StepStatus status)
         }
 
         /// <summary>
-        /// 
+        /// Update all component and render again.
         /// </summary>
         public void ForceRender()
         {
+            UpdateProgressValue();
             StateHasChanged();
         }
 
diff --git a/CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor.cs
@@ -7,6 +7,10 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public partial class MudTextFieldExtended<T> : MudDebouncedInputExtended<T>
     {
         /// <summary>
diff --git a/CodeBeam.MudBlazor.Extensions/Components/Toggle/MudToggle.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/Toggle/MudToggle.razor.cs
@@ -5,6 +5,9 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
     public partial class MudToggle : MudComponentBase
     {
         /// <summary>
diff --git a/CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor.cs
@@ -4,6 +4,10 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public partial class MudTransferList<T> : MudComponentBase
     {
         MudListExtended<T> _startList = new();
@@ -65,6 +69,9 @@ public partial class MudTransferList<T> : MudComponentBase
         [Parameter]
         public EventCallback<ICollection<T?>?> EndCollectionChanged { get; set; }
 
+        /// <summary>
+        /// 
+        /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListBehavior)]
         public Func<T?, string?>? ToStringFunc { get; set; }
@@ -357,6 +364,10 @@ protected internal async Task TransferAll(bool startToEnd = true)
             }
         }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
         public ICollection<T?>? GetStartListSelectedValues()
         {
             if (_startList == null)
@@ -408,6 +419,11 @@ protected void OrderItems()
             EndCollection = OrderFunc.Invoke(EndCollection);
         }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="args"></param>
+        /// <returns></returns>
         protected async Task DoubleClick(ListItemClickEventArgs<T> args)
         {
             if (AllowDoubleClick == false)
diff --git a/CodeBeam.MudBlazor.Extensions/Components/Wheel/MudWheel.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/Wheel/MudWheel.razor.cs
@@ -12,7 +12,9 @@ namespace MudExtensions
     /// <typeparam name="T"></typeparam>
     public partial class MudWheel<T> : MudBaseInput<T>
     {
-
+        /// <summary>
+        /// 
+        /// </summary>
         [Inject] public IScrollManager ScrollManager { get; set; }
 
         /// <summary>
diff --git a/CodeBeam.MudBlazor.Extensions/Utilities/MudCssManager.cs b/CodeBeam.MudBlazor.Extensions/Utilities/MudCssManager.cs
@@ -1,5 +1,4 @@
 ﻿using Microsoft.JSInterop;
-using MudBlazor.Extensions;
 using System.ComponentModel;
 
 namespace MudExtensions.Utilities
@@ -11,6 +10,10 @@ public class MudCssManager
     {
         private IJSRuntime JSRuntime;
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="jsRuntime"></param>
         public MudCssManager(IJSRuntime jsRuntime)
         {
             JSRuntime = jsRuntime;
@@ -34,7 +37,7 @@ public async Task SetCss(string? className, CssProp cssProp, string? value)
                 className = "." + className;
             }
 
-            object[] parameters = new object[] { className, cssProp.ToDescriptionString(), value };
+            object?[] parameters = new object?[] { className, cssProp.ToDescriptionString(), value };
             await JSRuntime.InvokeVoidAsync("setcss", parameters);
         }
 
@@ -56,7 +59,7 @@ public async Task SetCss(string? className, string? cssPropName, string? value)
                 className = "." + className;
             }
 
-            object[] parameters = new object[] { className, cssPropName, value };
+            object?[] parameters = new object?[] { className, cssPropName, value };
             await JSRuntime.InvokeVoidAsync("setcss", parameters);
         }
 
@@ -99,7 +102,7 @@ public async Task SetCss(string? className, string? cssPropName, string? value)
                 className = "." + className;
             }
 
-            object[] parameters = new object[] { className, cssPropName };
+            object?[] parameters = new object?[] { className, cssPropName };
             var result = await JSRuntime.InvokeAsync<string?>("getcss", parameters);
             return result;
         }

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ public void SplitterPageRenderTest()`
`51`	`51`	`[Test]`
`52`	`52`	`public void StepperPageRenderTest()`
`53`	`53`	`{`
`54`		`- var comp = Context.RenderComponent<StepperPage>();`
	`54`	`+ var comp = Context.RenderComponent<StepperExtendedPage>();`
`55`	`55`	`comp.Markup.Should().NotBeNullOrEmpty();`
`56`	`56`	`}`
`57`	`57`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,9 @@`
`4`	`4`
`5`	`5`	`namespace MudExtensions`
`6`	`6`	`{`
	`7`	`+ /// <summary>`
	`8`	`+ ///`
	`9`	`+ /// </summary>`
`7`	`10`	`public partial class MudSpeedDial : MudComponentBase`
`8`	`11`	`{`
`9`	`12`	`Guid _animationGuid = Guid.NewGuid();`
Original file line number	Diff line number	Diff line change
`@@ -152,11 +152,18 @@ internal int ActiveIndex`
`152`	`152`	`set`
`153`	`153`	`{`
`154`	`154`	`_activeIndex = value;`
`155`		`- ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));`
	`155`	`+ UpdateProgressValue();`
`156`	`156`	`}`
`157`	`157`	`}`
`158`	`158`
`159`	`159`	`internal double ProgressValue;`
	`160`	`+ /// <summary>`
	`161`	`+ ///`
	`162`	`+ /// </summary>`
	`163`	`+ protected void UpdateProgressValue()`
	`164`	`+ {`
	`165`	`+ ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));`
	`166`	`+ }`
`160`	`167`
`161`	`168`	`/// <summary>`
`162`	`169`	`/// Provides CSS classes for the step content.`
`@@ -349,6 +356,7 @@ internal void AddStep(MudStepExtended step)`
`349`	`356`	`ReorderSteps();`
`350`	`357`	`}`
`351`	`358`
	`359`	`+ UpdateProgressValue();`
`352`	`360`	`StateHasChanged();`
`353`	`361`	`}`
`354`	`362`
`@@ -364,6 +372,7 @@ internal void RemoveStep(MudStepExtended step)`
`364`	`372`	`{`
`365`	`373`	`Steps.Remove(step);`
`366`	`374`	`_allSteps.Remove(step);`
	`375`	`+ UpdateProgressValue();`
`367`	`376`	`StateHasChanged();`
`368`	`377`	`}`
`369`	`378`
`@@ -633,10 +642,11 @@ public void SetStepStatus(int index, StepStatus status)`
`633`	`642`	`}`
`634`	`643`
`635`	`644`	`/// <summary>`
`636`		`- ///`
	`645`	`+ /// Update all component and render again.`
`637`	`646`	`/// </summary>`
`638`	`647`	`public void ForceRender()`
`639`	`648`	`{`
	`649`	`+ UpdateProgressValue();`
`640`	`650`	`StateHasChanged();`
`641`	`651`	`}`
`642`	`652`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,10 @@`
`7`	`7`
`8`	`8`	`namespace MudExtensions`
`9`	`9`	`{`
	`10`	`+ /// <summary>`
	`11`	`+ ///`
	`12`	`+ /// </summary>`
	`13`	`+ /// <typeparam name="T"></typeparam>`
`10`	`14`	`public partial class MudTextFieldExtended<T> : MudDebouncedInputExtended<T>`
`11`	`15`	`{`
`12`	`16`	`/// <summary>`