Stepper: PreventStepChangeAsync

CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor

@@ -53,6 +53,11 @@
 
 
         </MudStack>
+        @if (Loading)
+        {
+            <MudProgressLinear Indeterminate="true" Color="@Color" />
+        }
+        @StaticContent
         <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
             <div class="@ContentClassname" style="@ContentStyle">
                 @ChildContent

CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor.cs

@@ -103,6 +103,18 @@ protected string GetDashClassname(MudStep step)
         [Parameter]
         public bool MobileView { get; set; }
 
+        /// <summary>
+        /// If true, a linear loading indicator shows under the header.
+        /// </summary>
+        [Parameter]
+        public bool Loading { get; set; }
+
+        /// <summary>
+        /// A static content that always show with all steps.
+        /// </summary>
+        [Parameter]
+        public RenderFragment StaticContent { get; set; }
+
         /// <summary>
         /// If true, action buttons have icons instead of text to gain more space.
         /// </summary>
@@ -156,9 +168,13 @@ protected string GetDashClassname(MudStep step)
         [Parameter]
         public EventCallback<int> ActiveStepChanged { get; set; }
 
+        [Obsolete("Use PreventStepChangeAsync instead.")]
         [Parameter]
         public Func<StepChangeDirection, bool> PreventStepChange { get; set; }
 
+        [Parameter]
+        public Func<StepChangeDirection, Task<bool>> PreventStepChangeAsync { get; set; }
+
         List<MudStep> _steps = new();
         List<MudStep> _allSteps = new();
         public List<MudStep> Steps
@@ -219,6 +235,16 @@ public async Task SetActiveIndex(int count, bool firstCompleted = false, bool sk
                 return;
             }
 
+            if (PreventStepChangeAsync != null)
+            {
+                var result = await PreventStepChangeAsync.Invoke(stepChangeDirection);
+                if (result == true)
+                {
+                    return;
+                }
+            }
+
+
             int backupActiveIndex = ActiveIndex;
             if (_animate != null)
             {
@@ -297,6 +323,15 @@ public async Task CompleteStep(int index, bool moveToNextStep = true)
                 {
                     return;
                 }
+
+                if (PreventStepChangeAsync != null)
+                {
+                    var result = await PreventStepChangeAsync.Invoke(stepChangeDirection);
+                    if (result == true)
+                    {
+                        return;
+                    }
+                }
             }
 
             Steps[index].SetStatus(StepStatus.Completed);
@@ -320,6 +355,15 @@ public async Task SkipStep(int index, bool moveToNextStep = true)
                 {
                     return;
                 }
+
+                if (PreventStepChangeAsync != null)
+                {
+                    var result = await PreventStepChangeAsync.Invoke(stepChangeDirection);
+                    if (result == true)
+                    {
+                        return;
+                    }
+                }
             }
 
             Steps[index].SetStatus(StepStatus.Skipped);

ComponentViewer.Docs/Pages/Examples/StepperExample1.razor

@@ -8,8 +8,17 @@
         <MudStepper @ref="_stepper" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant" 
                     DisableAnimation="_disableAnimation" DisablePreviousButton="_disablePreviousButton" DisableNextButton="_disableNextButton" 
                     DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderTextView="_headerTextView"
-                    PreventStepChange="new Func<StepChangeDirection, bool>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
-                    MobileView="_mobileView" IconActionButtons="_iconActionButtons">
+                    PreventStepChangeAsync="new Func<StepChangeDirection, Task<bool>>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
+                    MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading">
+            <StaticContent>
+                @if (_showStaticContent)
+                {
+                    <MudStack Row="true" AlignItems="AlignItems.Center">
+                        <MudAvatar Color="_color">ST</MudAvatar>
+                        <MudText>This is a static content which shows with each step.</MudText>
+                    </MudStack>
+                }
+            </StaticContent>
             <ChildContent>
                 <MudStep Title="Customer Info" StatusChanged="StatusChanged">
                     <MudForm @ref="_form">
@@ -71,6 +80,7 @@
             <MudSwitchM3 @bind-Checked="_addResultStep" Color="Color.Primary" Label="Has Result Step" />
             <MudSwitchM3 @bind-Checked="_checkValidationBeforeComplete" Color="Color.Primary" Label="Check Validation Before Complete Step" />
             <MudSwitchM3 @bind-Checked="_customLocalization" Color="Color.Primary" Label="Custom Localization (German)" />
+            <MudSwitchM3 @bind-Checked="_showStaticContent" Color="Color.Primary" Label="Show Some Static Content" />
             <MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
                 @foreach (Variant item in Enum.GetValues<Variant>())
                 {
@@ -113,8 +123,10 @@
     bool _customLocalization = false;
     Color _color = Color.Primary;
     int _activeIndex = 0;
+    bool _loading;
+    bool _showStaticContent = false;
 
-    private bool CheckChange(StepChangeDirection direction)
+    private async Task<bool> CheckChange(StepChangeDirection direction)
     {
         if (_checkValidationBeforeComplete == true)
         {
@@ -125,12 +137,22 @@
             }
             if (_stepper.GetActiveIndex() == 0)
             {
-                _form.Validate();
+                _loading = true;
+                StateHasChanged();
+                await Task.Delay(1000);
+                await _form.Validate();
+                _loading = false;
+                StateHasChanged();
                 return !_form.IsValid;
             }
             else if (_stepper.GetActiveIndex() == 2)
             {
-                _form2.Validate();
+                _loading = true;
+                StateHasChanged();
+                await Task.Delay(1000);
+                await _form2.Validate();
+                _loading = false;
+                StateHasChanged();
                 return !_form2.IsValid;
             }
             else