Skip to content

Commit 0b1c076

Browse files
mckaragozmckaragoz
authored
MudStepper (#13)
* Initialize * Completed Parameter * StepStatus * Disable animation, header text view * Fix several bugs * Class and Style * API & Docs * Little cleanup
1 parent ca7a838 commit 0b1c076

File tree

20 files changed

+884
-28
lines changed

20 files changed

+884
-28
lines changed

‎CodeBeam.MudExtensions/Components/Stepper/MudStep.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
<div class="@Classname" style="@Style">
5+
@ChildContent
6+
</div>

‎CodeBeam.MudExtensions/Components/Stepper/MudStep.razor.cs‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
using Microsoft.AspNetCore.Components;
2+
using MudBlazor;
3+
using MudBlazor.Utilities;
4+
using MudExtensions.Enums;
5+
using System;
6+
using System.Collections.Generic;
7+
using System.Linq;
8+
using System.Text;
9+
using System.Threading.Tasks;
10+
11+
namespace MudExtensions
12+
{
13+
public partial class MudStep : MudComponentBase, IDisposable
14+
{
15+
16+
protected string Classname => new CssBuilder()
17+
.AddClass("d-none", ((MudStepper.ActiveIndex < MudStepper.Steps.Count && MudStepper.Steps[MudStepper.ActiveIndex] != this) || (MudStepper.ShowResultStep() && IsResultStep == false)) || (IsResultStep && MudStepper.ShowResultStep() == false))
18+
.AddClass(Class)
19+
.Build();
20+
21+
[CascadingParameter]
22+
protected MudStepper MudStepper { get; set; }
23+
24+
/// <summary>
25+
/// Step text to show on header.
26+
/// </summary>
27+
[Parameter]
28+
public string Title { get; set; }
29+
30+
StepStatus _status = StepStatus.Continued;
31+
/// <summary>
32+
/// The step status flag to show step is continued, skipped or completed. Do not set it directly unless you know what you do exactly.
33+
/// </summary>
34+
[Parameter]
35+
public StepStatus Status
36+
{
37+
get => _status;
38+
set
39+
{
40+
if (_status == value)
41+
{
42+
return;
43+
}
44+
_status = value;
45+
StatusChanged.InvokeAsync(_status).AndForget();
46+
}
47+
}
48+
49+
/// <summary>
50+
/// If true the step is skippable.
51+
/// </summary>
52+
[Parameter]
53+
public bool Optional { get; set; }
54+
55+
/// <summary>
56+
/// If true, the step show when the stepper is completed. There should be only one result step.
57+
/// </summary>
58+
[Parameter]
59+
public bool IsResultStep { get; set; }
60+
61+
[Parameter]
62+
public RenderFragment ChildContent { get; set; }
63+
64+
/// <summary>
65+
/// Fires when step status changed.
66+
/// </summary>
67+
[Parameter]
68+
public EventCallback<StepStatus> StatusChanged { get; set; }
69+
70+
protected override void OnInitialized()
71+
{
72+
base.OnInitialized();
73+
74+
MudStepper.AddStep(this);
75+
}
76+
77+
protected internal void SetStatus(StepStatus status)
78+
{
79+
Status = status;
80+
}
81+
82+
public void Dispose()
83+
{
84+
try
85+
{
86+
MudStepper?.RemoveStep(this);
87+
}
88+
catch (Exception) { }
89+
}
90+
91+
}
92+
}

‎CodeBeam.MudExtensions/Components/Stepper/MudStepper.razor‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
@using MudExtensions.Enums
4+
5+
<CascadingValue Value="this" IsFixed="true">
6+
<MudStack Class="@Class" Style="@Style"> @*Row="Vertical"*@
7+
<MudStack Row="true" AlignItems="@(HeaderTextView == HeaderTextView.NewLine ? AlignItems.Start : AlignItems.Center)"> @*Row="!Vertical"*@
8+
@foreach (MudStep step in _steps)
9+
{
10+
if (step.IsResultStep)
11+
{
12+
continue;
13+
}
14+
bool active = IsStepActive(step);
15+
<div @onclick="@(Linear ? null : () => SetActiveIndex(step))" Class="@HeaderClassname">
16+
<MudAvatar Class="@((active || step.Status != StepStatus.Continued) ? $"mud-theme-{Color.ToDescriptionString()}" : null)" Variant="@Variant" Size="Size.Small">
17+
@if (step.Status == Enums.StepStatus.Completed)
18+
{
19+
<MudIcon Icon="@Icons.Filled.Done" Size="Size.Small" />
20+
}
21+
else if (step.Status == StepStatus.Skipped)
22+
{
23+
<MudIcon Icon="@Icons.Filled.Remove" Size="Size.Small" />
24+
}
25+
else
26+
{
27+
@(Steps.IndexOf(step) + 1)
28+
}
29+
</MudAvatar>
30+
@if (HeaderTextView == HeaderTextView.All || HeaderTextView == HeaderTextView.NewLine || (HeaderTextView == HeaderTextView.OnlyActiveText && active))
31+
{
32+
<div>
33+
<MudText Align="Align.Center" Color="@(active ? Color : Color.Default)" Style="@(active ? "font-weight: 900" : null)">@step.Title</MudText>
34+
@if (step.Optional == true)
35+
{
36+
<MudText Align="@(HeaderTextView == HeaderTextView.NewLine ? Align.Center : Align.Start)" Typo="Typo.subtitle2" Color="@(active ? Color : Color.Default)" Style="@(active ? "font-weight: 500" : null)">@LocalizedStrings.Optional</MudText>
37+
}
38+
</div>
39+
}
40+
</div>
41+
42+
if (_steps.Count - 1 != _steps.IndexOf(step))
43+
{
44+
<span class="@GetDashClassname(step)"></span>
45+
}
46+
}
47+
</MudStack>
48+
<MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
49+
<div class="@ContentClassname" style="@ContentStyle">
50+
@ChildContent
51+
</div>
52+
53+
<div class="d-flex gap-4">
54+
@if (ActionContent != null)
55+
{
56+
@ActionContent
57+
}
58+
else
59+
{
60+
bool showResultStep = ShowResultStep();
61+
if (ActiveIndex != 0)
62+
{
63+
if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued || showResultStep)
64+
{
65+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Filled.ChevronLeft" OnClick="@(() => SetActiveIndex(-1))" />
66+
}
67+
else
68+
{
69+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SetActiveIndex(-1))">@LocalizedStrings.Previous</MudButton>
70+
}
71+
}
72+
73+
<MudSpacer />
74+
75+
if (showResultStep == false)
76+
{
77+
if ((ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued) || (ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
78+
{
79+
<MudButton Color="@Color" Variant="@Variant" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
80+
}
81+
else if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Optional == true)
82+
{
83+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
84+
}
85+
}
86+
if (showResultStep == false && !(ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
87+
{
88+
if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued)
89+
{
90+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))" />
91+
}
92+
else
93+
{
94+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
95+
}
96+
}
97+
}
98+
</div>
99+
</MudStack>
100+
</MudStack>
101+
</CascadingValue>
102+
103+
@if (DisableAnimation == false)
104+
{
105+
<MudAnimate @ref="_animate" Selector="@($".mud-stepper-ani-{_animateGuid.ToString()}")" AnimationType="Enums.AnimationType.Fade" Value="1" Duration="0.5" />
106+
}
107+

0 commit comments

Comments
 (0)