Skip to content

Commit 46de517

Browse files
StevenRasmussenStevenRasmussen
authored
[Wizard] Add the ability to invoke OnFinish (#3648)
1 parent 397d376 commit 46de517

7 files changed

+427
-72
lines changed

‎examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10565,6 +10565,13 @@
1056510565
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.OnFinishHandlerAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
1056610566
<summary />
1056710567
</member>
10568+
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.FinishAsync(System.Boolean)">
10569+
<summary>
10570+
Optionally validate and invoke the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.OnFinish"/> handler.
10571+
</summary>
10572+
<param name="validateEditContexts">Validate the EditContext. Default is false.</param>
10573+
<returns></returns>
10574+
</member>
1056810575
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.GoToStepAsync(System.Int32,System.Boolean)">
1056910576
<summary>
1057010577
Navigate to the specified step, with or without validate the current EditContexts.

‎examples/Demo/Shared/Pages/Wizard/Examples/WizardCustomized.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
Id="customized-wizard"
1616
@bind-Value="@Value"
1717
StepTitleHiddenWhen="@GridItemHidden.XsAndDown"
18+
OnFinish="OnFinish"
1819
Height="300px">
1920
<Steps>
2021
<FluentWizardStep OnChange="@OnStepChange">
@@ -86,6 +87,10 @@
8687
<FluentButton OnClick="@(() => MyWizard.GoToStepAsync(Value + 1))" Appearance="Appearance.Accent">Next</FluentButton>
8788
<FluentButton OnClick="@(() => MyWizard.GoToStepAsync(lastStepIndex))" Appearance="Appearance.Accent">Go to last page</FluentButton>
8889
}
90+
else
91+
{
92+
<FluentButton OnClick="@(() => MyWizard.FinishAsync())" Appearance="Appearance.Accent">Finish</FluentButton>
93+
}
8994
</div>
9095
}
9196
</ButtonTemplate>
@@ -100,4 +105,10 @@
100105
{
101106
DemoLogger.WriteLine($"Go to step {e.TargetLabel} (#{e.TargetIndex})");
102107
}
108+
109+
async Task OnFinish()
110+
{
111+
DemoLogger.WriteLine($"Customized wizard finish clicked.");
112+
await DialogService.ShowInfoAsync("The wizard has finished.", "Finished Clicked");
113+
}
103114
}

‎src/Core/Components/Wizard/FluentWizard.razor.cs‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -234,13 +234,26 @@ protected virtual async Task<FluentWizardStepChangeEventArgs> OnStepChangeHandle
234234
/// <summary />
235235
protected virtual async Task OnFinishHandlerAsync(MouseEventArgs e)
236236
{
237-
// Validate any form edit contexts
238-
var allEditContextsAreValid = _steps[Value].ValidateEditContexts();
239-
if (!allEditContextsAreValid)
237+
await this.FinishAsync(true);
238+
}
239+
240+
/// <summary>
241+
/// Optionally validate and invoke the <see cref="OnFinish"/> handler.
242+
/// </summary>
243+
/// <param name="validateEditContexts">Validate the EditContext. Default is false.</param>
244+
/// <returns></returns>
245+
public async Task FinishAsync(bool validateEditContexts = false)
246+
{
247+
if (validateEditContexts)
240248
{
241-
// Invoke the 'OnInvalidSubmit' handlers for the edit forms.
242-
await _steps[Value].InvokeOnInValidSubmitForEditFormsAsync();
243-
return;
249+
// Validate any form edit contexts
250+
var allEditContextsAreValid = _steps[Value].ValidateEditContexts();
251+
if (!allEditContextsAreValid)
252+
{
253+
// Invoke the 'OnInvalidSubmit' handlers for the edit forms.
254+
await _steps[Value].InvokeOnInValidSubmitForEditFormsAsync();
255+
return;
256+
}
244257
}
245258

246259
// Invoke the 'OnValidSubmit' handlers for the edit forms.

‎tests/Core/Wizard/FluentWizardTests.FluentWizard_CustomizedButtonTemplate_EditForm_EditContextIsInValid_OnFinish.verified.razor.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
3+
<ol b-l81u9o5gjc="">
4+
<li status="previous" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
5+
<div class="fluent-wizard-icon" b-a5o5s1yurv="">
6+
<svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
7+
<path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5c.3.3.77.3 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"></path>
8+
</svg>
9+
</div>
10+
<div hidden-when="xs" b-a5o5s1yurv="">
11+
<p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
12+
<p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
13+
</div>
14+
</li>
15+
<li status="current" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
16+
<div class="fluent-wizard-icon" b-a5o5s1yurv="">
17+
<svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
18+
<path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
19+
</svg>
20+
</div>
21+
<div hidden-when="xs" b-a5o5s1yurv="">
22+
<p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
23+
<p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
24+
</div>
25+
</li>
26+
</ol>
27+
<div class="fluent-wizard-content" b-l81u9o5gjc="">
28+
<div style="display: none;" b-l81u9o5gjc="">
29+
<form blazor:onsubmit="8">
30+
<fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="5" appearance="outline" blazor:onchange="10" blazor:oninput="11" blazor:elementreference=""></fluent-number-field>
31+
</form>
32+
</div>
33+
<div style="" b-l81u9o5gjc="">
34+
<form blazor:onsubmit="9">
35+
<div>
36+
<ul class="validation-errors">
37+
<li class="validation-message">The field NumberBetween1and10 must be between 1 and 10.</li>
38+
</ul>
39+
</div>
40+
<fluent-number-field class="invalid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="12" blazor:oninput="13" aria-invalid="true" blazor:elementreference=""></fluent-number-field>
41+
</form>
42+
</div>
43+
</div>
44+
<div class="fluent-wizard-buttons" b-l81u9o5gjc="">
45+
<fluent-button type="button" appearance="accent" blazor:onclick="14" b-x1200685t0="" blazor:elementreference="">Finish</fluent-button>
46+
</div>
47+
</div>

‎tests/Core/Wizard/FluentWizardTests.FluentWizard_CustomizedButtonTemplate_EditForm_EditContextIsInValid_OnNext.verified.razor.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
3+
<ol b-l81u9o5gjc="">
4+
<li status="current" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
5+
<div class="fluent-wizard-icon" b-a5o5s1yurv="">
6+
<svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
7+
<path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
8+
</svg>
9+
</div>
10+
<div hidden-when="xs" b-a5o5s1yurv="">
11+
<p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
12+
<p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
13+
</div>
14+
</li>
15+
<li status="next" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
16+
<div class="fluent-wizard-icon" b-a5o5s1yurv="">
17+
<svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
18+
<path d="M12 3.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
19+
</svg>
20+
</div>
21+
<div hidden-when="xs" b-a5o5s1yurv="">
22+
<p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
23+
<p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
24+
</div>
25+
</li>
26+
</ol>
27+
<div class="fluent-wizard-content" b-l81u9o5gjc="">
28+
<div style="" b-l81u9o5gjc="">
29+
<form blazor:onsubmit="8">
30+
<div>
31+
<ul class="validation-errors">
32+
<li class="validation-message">The field NumberBetween1and10 must be between 1 and 10.</li>
33+
</ul>
34+
</div>
35+
<fluent-number-field class="invalid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="10" blazor:oninput="11" aria-invalid="true" blazor:elementreference=""></fluent-number-field>
36+
</form>
37+
</div>
38+
<div style="display: none;" b-l81u9o5gjc="">
39+
<form blazor:onsubmit="9">
40+
<fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="12" blazor:oninput="13" blazor:elementreference="xxx"></fluent-number-field>
41+
</form>
42+
</div>
43+
</div>
44+
<div class="fluent-wizard-buttons" b-l81u9o5gjc="">
45+
<fluent-button type="button" appearance="accent" blazor:onclick="3" b-x1200685t0="" blazor:elementreference="">Next</fluent-button>
46+
</div>
47+
</div>

‎tests/Core/Wizard/FluentWizardTests.FluentWizard_CustomizedButtonTemplate_EditForm_EditContextIsValid.verified.razor.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
3+
<ol b-l81u9o5gjc="">
4+
<li status="previous" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
5+
<div class="fluent-wizard-icon" b-a5o5s1yurv="">
6+
<svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
7+
<path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5c.3.3.77.3 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"></path>
8+
</svg>
9+
</div>
10+
<div hidden-when="xs" b-a5o5s1yurv="">
11+
<p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
12+
<p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
13+
</div>
14+
</li>
15+
<li status="current" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
16+
<div class="fluent-wizard-icon" b-a5o5s1yurv="">
17+
<svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
18+
<path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
19+
</svg>
20+
</div>
21+
<div hidden-when="xs" b-a5o5s1yurv="">
22+
<p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
23+
<p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
24+
</div>
25+
</li>
26+
</ol>
27+
<div class="fluent-wizard-content" b-l81u9o5gjc="">
28+
<div style="display: none;" b-l81u9o5gjc="">
29+
<form blazor:onsubmit="8">
30+
<fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="5" appearance="outline" blazor:onchange="10" blazor:oninput="11" blazor:elementreference=""></fluent-number-field>
31+
</form>
32+
</div>
33+
<div style="" b-l81u9o5gjc="">
34+
<form blazor:onsubmit="9">
35+
<fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="7" appearance="outline" blazor:onchange="12" blazor:oninput="13" blazor:elementreference=""></fluent-number-field>
36+
</form>
37+
</div>
38+
</div>
39+
<div class="fluent-wizard-buttons" b-l81u9o5gjc="">
40+
<fluent-button type="button" appearance="accent" blazor:onclick="14" b-x1200685t0="" blazor:elementreference="xxx">Finish</fluent-button>
41+
</div>
42+
</div>

0 commit comments

Comments
 (0)