diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index d1570ff922..98e1f1bd2f 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -3716,6 +3716,14 @@ This method is only called when using the . + + + Function that is called and awaited before the dialog is closed. + + + This is a suitable callback to use when you need to validate the data in the dialog before it closes. + + Parameters for a dialog. diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor new file mode 100644 index 0000000000..9dafc240fa --- /dev/null +++ b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor @@ -0,0 +1,6 @@ +@inject IDialogService DialogService +@inject IMessageService MessageService + + + Open panel (>>) + diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs new file mode 100644 index 0000000000..2da3622973 --- /dev/null +++ b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs @@ -0,0 +1,60 @@ +// ------------------------------------------------------------------------ +// MIT License - Copyright (c) Microsoft Corporation. All rights reserved. +// ------------------------------------------------------------------------ + +using FluentUI.Demo.Shared.SampleData; +using Microsoft.FluentUI.AspNetCore.Components; + +namespace FluentUI.Demo.Shared.Pages.Panel.Examples; +public partial class DialogPanelWithValidation +{ + private IDialogReference? _dialog; + + private readonly SimplePerson simplePerson = new() + { + Firstname = "Steve", + Lastname = "Roth", + Age = 42, + }; + + private async Task OpenPanelRightAsync() + { + DemoLogger.WriteLine($"Open right panel"); + + MessageService.Clear(); + + _dialog = await DialogService.ShowPanelAsync(simplePerson, new DialogParameters() + { + Content = simplePerson, + Alignment = HorizontalAlignment.Right, + Title = $"Hello {simplePerson.Firstname}", + PrimaryAction = "Yes", + SecondaryAction = "No", + PreventDismissOnOverlayClick = true, + ValidateDialogAsync = async () => + { + var result = simplePerson.Firstname.Length > 0 && simplePerson.Lastname.Length > 0; + + if (!result) + { + DemoLogger.WriteLine("Panel cannot be closed because of validation errors."); + + MessageService.ShowMessageBar(options => + { + options.Intent = MessageIntent.Error; + options.Title = "Validation error"; + options.Body = "First name and last name cannot be empty"; + options.Timestamp = DateTime.Now; + options.Section = App.MESSAGES_DIALOG; + }); + } + + await Task.Delay(100); + + return result; + } + }); + + DialogResult result = await _dialog.Result; + } +} diff --git a/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor b/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor index 0e7fc67e50..122f73fd06 100644 --- a/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor +++ b/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor @@ -1,5 +1,7 @@ @implements IDialogContentComponent + +

Hello @Content.Firstname

Your lastname is @Content.Lastname and you are @Content.Age years young

@@ -12,4 +14,4 @@ @code { [Parameter] public SimplePerson Content { get; set; } = default!; -} \ No newline at end of file +} diff --git a/examples/Demo/Shared/Pages/Panel/PanelPage.razor b/examples/Demo/Shared/Pages/Panel/PanelPage.razor index faf759c461..c721627a72 100644 --- a/examples/Demo/Shared/Pages/Panel/PanelPage.razor +++ b/examples/Demo/Shared/Pages/Panel/PanelPage.razor @@ -52,6 +52,14 @@ + + + The panel that is anchored to the right side of the screen can be dismissed by clicking the dismiss button (at the top), + 'No' button (at the bottom) or 'Yes' button (at the bottom).
+ Before the panel is closed, it will validate the data and, if not ok, will prevent the dialog from closing using the 'Yes' button. + + +

Documentation

diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs index 2efbed4b19..f4caa3cd03 100644 --- a/src/Core/Components/Dialog/FluentDialog.razor.cs +++ b/src/Core/Components/Dialog/FluentDialog.razor.cs @@ -241,6 +241,16 @@ public async Task CloseAsync(DialogResult dialogResult) { await Instance.Parameters.OnDialogClosing.InvokeAsync(Instance); } + + if (Instance.Parameters.ValidateDialogAsync != null && !dialogResult.Cancelled) + { + var isValid = await Instance.Parameters.ValidateDialogAsync(); + + if (!isValid) + { + return; + } + } } DialogContext?.DialogContainer.DismissInstance(Id!, dialogResult); if (Instance is not null) diff --git a/src/Core/Components/Dialog/Parameters/DialogParameters.cs b/src/Core/Components/Dialog/Parameters/DialogParameters.cs index 166e0d4615..78aee66286 100644 --- a/src/Core/Components/Dialog/Parameters/DialogParameters.cs +++ b/src/Core/Components/Dialog/Parameters/DialogParameters.cs @@ -167,6 +167,14 @@ public virtual HorizontalAlignment Alignment /// This method is only called when using the . /// public EventCallback OnDialogOpened { get; set; } = default!; + + /// + /// Function that is called and awaited before the dialog is closed. + /// + /// + /// This is a suitable callback to use when you need to validate the data in the dialog before it closes. + /// + public Func> ValidateDialogAsync { get; set; } = default!; } ///