Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Wizard] Add GoToStepAsync method #2383

Merged
merged 1 commit into from
Jul 15, 2024
Merged

[Wizard] Add GoToStepAsync method #2383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9469,6 +9469,7 @@
This configuration overrides the whole rendering of the bottom-right section of the Wizard,
including the built-in buttons and thus provides a full control over it.
Custom Wizard buttons do not trigger the component OnChange and OnFinish events.
The OnChange event can be triggered using the <see cref="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.GoToStepAsync(System.Int32,System.Boolean)"/> method from your code.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.Steps">
Expand Down Expand Up @@ -9503,6 +9504,14 @@
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.OnFinishHandlerAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
<summary />
</member>
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.GoToStepAsync(System.Int32,System.Boolean)">
<summary>
Navigate to the specified step, with or without validate the current EditContexts.
</summary>
<param name="step">Index number of the step to display</param>
<param name="validateEditContexts">Validate the EditContext. Default is false.</param>
<returns></returns>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentWizardStep.ClassValue">
<summary />
</member>
Expand Down
25 changes: 16 additions & 9 deletions examples/Demo/Shared/Pages/Wizard/Examples/WizardCustomized.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@
}
</style>

<FluentWizard Id="customized-wizard"
<FluentWizard @ref="@MyWizard"
Id="customized-wizard"
@bind-Value="@Value"
StepTitleHiddenWhen="@GridItemHidden.XsAndDown"
Height="300px">
<Steps>
<FluentWizardStep>
<FluentWizardStep OnChange="@OnStepChange">
<StepTemplate>
<div active="@context.Active">
Intro
Expand All @@ -29,7 +30,7 @@
ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
</ChildContent>
</FluentWizardStep>
<FluentWizardStep>
<FluentWizardStep OnChange="@OnStepChange">
<StepTemplate>
<div active="@context.Active">
Get Started
Expand All @@ -40,7 +41,7 @@
Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
</ChildContent>
</FluentWizardStep>
<FluentWizardStep>
<FluentWizardStep OnChange="@OnStepChange">
<StepTemplate>
<div active="@context.Active">
Set budget
Expand All @@ -52,7 +53,7 @@
turpis, eget molestie ipsum.
</ChildContent>
</FluentWizardStep>
<FluentWizardStep>
<FluentWizardStep OnChange="@OnStepChange">
<StepTemplate>
<div active="@context.Active">
Summary
Expand All @@ -74,16 +75,16 @@
<div>
@if (index > 0)
{
<FluentButton OnClick="@(() => Value = 0)">Go to first page</FluentButton>
<FluentButton OnClick="@(() => Value -= 1)">Previous</FluentButton>
<FluentButton OnClick="@(() => MyWizard.GoToStepAsync(0))">Go to first page</FluentButton>
<FluentButton OnClick="@(() => MyWizard.GoToStepAsync(Value - 1))">Previous</FluentButton>
}
</div>
<FluentSpacer />
<div>
@if (index != lastStepIndex)
{
<FluentButton OnClick="@(() => Value += 1)" Appearance="Appearance.Accent">Next</FluentButton>
<FluentButton OnClick="@(() => Value = lastStepIndex)" Appearance="Appearance.Accent">Go to last page</FluentButton>
<FluentButton OnClick="@(() => MyWizard.GoToStepAsync(Value + 1))" Appearance="Appearance.Accent">Next</FluentButton>
<FluentButton OnClick="@(() => MyWizard.GoToStepAsync(lastStepIndex))" Appearance="Appearance.Accent">Go to last page</FluentButton>
}
</div>
}
Expand All @@ -92,5 +93,11 @@

@code
{
FluentWizard MyWizard = default!;
int Value = 0;

void OnStepChange(FluentWizardStepChangeEventArgs e)
{
DemoLogger.WriteLine($"Go to step {e.TargetLabel} (#{e.TargetIndex})");
}
}
15 changes: 14 additions & 1 deletion src/Core/Components/Wizard/FluentWizard.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ public int Value
/// This configuration overrides the whole rendering of the bottom-right section of the Wizard,
/// including the built-in buttons and thus provides a full control over it.
/// Custom Wizard buttons do not trigger the component OnChange and OnFinish events.
/// The OnChange event can be triggered using the <see cref="GoToStepAsync(int, bool)"/> method from your code.
/// </summary>
[Parameter]
public RenderFragment<int>? ButtonTemplate { get; set; }
Expand Down Expand Up @@ -248,7 +249,19 @@ protected virtual async Task OnFinishHandlerAsync(MouseEventArgs e)
}
}

internal async Task GoToStepAsync(int targetIndex, bool validateEditContexts)
/// <summary>
/// Navigate to the specified step, with or without validate the current EditContexts.
/// </summary>
/// <param name="step">Index number of the step to display</param>
/// <param name="validateEditContexts">Validate the EditContext. Default is false.</param>
/// <returns></returns>
public Task GoToStepAsync(int step, bool validateEditContexts = false)
{
Value = step;
return ValidateAndGoToStepAsync(step, validateEditContexts);
}

internal async Task ValidateAndGoToStepAsync(int targetIndex, bool validateEditContexts)
{
var stepChangeArgs = await OnStepChangeHandlerAsync(targetIndex, validateEditContexts);
var isCanceled = stepChangeArgs?.IsCancelled ?? false;
Expand Down
2 changes: 1 addition & 1 deletion src/Core/Components/Wizard/FluentWizardStep.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ private async Task OnClickHandlerAsync()
return;
}

await FluentWizard.GoToStepAsync(Index, validateEditContexts: Index > FluentWizard.Value);
await FluentWizard.ValidateAndGoToStepAsync(Index, validateEditContexts: Index > FluentWizard.Value);
}

private bool IsStepClickable
Expand Down
Loading