From 0404959bf1066e0ec17916c2e86b4208c0883e1c Mon Sep 17 00:00:00 2001 From: Peace Date: Fri, 19 Jul 2024 17:16:10 +0900 Subject: [PATCH] dialog --- .../Components/Layout/NavMenu.razor | 1 + .../Pages/Components/CompoDialog.razor | 156 ++++++++++++++++++ .../Dialogs/SimpleCustimizedDialog.razor | 41 +++++ .../Components/Dialogs/SimpleDiaolg.razor | 43 +++++ .../Components/Dialogs/SimpleEditDialog.razor | 58 +++++++ 5 files changed, 299 insertions(+) create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoDialog.razor create mode 100644 BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleCustimizedDialog.razor create mode 100644 BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleDiaolg.razor create mode 100644 BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleEditDialog.razor diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor index 0ce8986..75189cc 100644 --- a/BlazorFluentUI/Components/Layout/NavMenu.razor +++ b/BlazorFluentUI/Components/Layout/NavMenu.razor @@ -58,6 +58,7 @@ Card DataGrid + Dialog diff --git a/BlazorFluentUI/Components/Pages/Components/CompoDialog.razor b/BlazorFluentUI/Components/Pages/Components/CompoDialog.razor new file mode 100644 index 0000000..1dd1231 --- /dev/null +++ b/BlazorFluentUI/Components/Pages/Components/CompoDialog.razor @@ -0,0 +1,156 @@ +@page "/compodialog" + +@using BlazorFluentUI.Components.Pages.Components.Dialogs +@using System.ComponentModel.DataAnnotations + +@inject EmployeeService EmployeeService; +@inject IDialogService DialogService; + +@rendermode RenderMode.InteractiveServer + +

Dialog

+ +
+ The FluentDialog wraps a web component dialog. +
+ +

DialogService

+
+ The DialogService is a service which is used to show different type of dialogs. + It is registered as a scpoed service, so it can be injected into pages/components that use it. +
+ + +

DialogService with IDialogReference

+ +
+

+ When Modal is checked, the dialog can be dissmissed by clicking outside of the dialog. + When unchecked, the dialog can be dissmissed only by the Esc key. + The dialog can always be closed by using the Close dialog (X) button. +

+

+ When Trap focus is checked, only the elements within the dialog will receive focus (by using tab key). + When unchecked, focus will also move outside of the dialog. +

+
+
+ Modal + Trap Focus +
+
+ Open Dialog +
+

Message: @message

+ + +

Customized Dialog

+ + Open Dialog +

Message: @customizedMessage

+ + +

Editable Dialog

+ + Open Dialog +

Message: @editMessage

+ + +@code { + readonly int SIZE = 10; + + bool modal = true; + bool trapFocus = true; + List? employees; + protected override async Task OnInitializedAsync() + { + employees = await EmployeeService.GetEmployeeDataAsync(SIZE); + } + + string message; + private async Task OpenDialogAsync() + { + int index = Random.Shared.Next(0, SIZE); + Employee employee = employees[index]; + + DialogParameters parameters = new DialogParameters + { + Title = $"Hello {employee.FirstName}", + PrimaryAction = "Yes", + PrimaryActionEnabled = false, + SecondaryAction = "No", + Width = "500px", + TrapFocus = trapFocus, + Modal = modal, + PreventScroll = true + + }; + + IDialogReference dialog = await DialogService.ShowDialogAsync(employee, parameters); + DialogResult? result = await dialog.Result; + if (result.Data is not null) + { + Employee? tmp = result.Data as Employee; + if (tmp is not null) + message = $"[Dialog closed] FirstName: {tmp.FirstName}, LastName: {tmp.LastName}, BirthDate: {tmp.BirthDate}"; + } + else + { + message = $"[Dialog closed] Canceled: {result.Cancelled}"; + } + } + + public record NameAndAge + { + public int Id { get; set; } + + [MinLength(3)] + [MaxLength(20)] + public string? Name { get; set; } + + [Range(1, 150)] + public int Age { get; set; } + } + + NameAndAge customizedData = new NameAndAge { Id = 1, Name = "Taylor", Age = 25 }; + string? customizedMessage; + async Task OpenCustomizedDialogAsync() + { + var data = customizedData with { Id = 1 }; + var dialog = await DialogService.ShowDialogAsync(data, new DialogParameters + { + Height = "240px", + Title = $"Updating the {data.Name}'s data", + PreventDismissOnOverlayClick = true, + PreventScroll = true + }); + + var result = await dialog.Result; + if (!result.Cancelled && result.Data != null) + { + customizedData = result.Data as NameAndAge; + customizedMessage = $"Name: {customizedData.Name}, Age: {customizedData.Age}"; + } + } + + NameAndAge editData = new NameAndAge { Id = 1, Name = "Taylor", Age = 25 }; + string? editMessage; + async Task OpenEditDialogAsync() + { + var data = editData with { Id = 0 }; + var dialog = await DialogService.ShowDialogAsync(data, new DialogParameters + { + Height = "400px", + Title = $"Updating the {data.Name}'s data", + PreventDismissOnOverlayClick = true, + PreventScroll = true + }); + + var result = await dialog.Result; + if (!result.Cancelled && result.Data != null) + { + editData = result.Data as NameAndAge; + editMessage = $"Name: {editData.Name}, Age: {editData.Age}"; + } + } +} diff --git a/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleCustimizedDialog.razor b/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleCustimizedDialog.razor new file mode 100644 index 0000000..0258dbc --- /dev/null +++ b/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleCustimizedDialog.razor @@ -0,0 +1,41 @@ +@implements IDialogContentComponent + +@* Header *@ + + + + + @Dialog.Instance.Parameters.Title + + + + +@* Body *@ + + Name: + Age: + + +@* Footer *@ + + Save + Cancel + + +@code { + [Parameter] + public CompoDialog.NameAndAge Content { get; set; } = default!; + + [CascadingParameter] + public FluentDialog Dialog { get; set; } = default!; + + private async Task SaveAsync() + { + await Dialog.CloseAsync(Content); + } + + private async Task CancelAsync() + { + await Dialog.CancelAsync(); + } +} diff --git a/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleDiaolg.razor b/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleDiaolg.razor new file mode 100644 index 0000000..f3a238a --- /dev/null +++ b/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleDiaolg.razor @@ -0,0 +1,43 @@ +@implements IDialogContentComponent + + + +

@($"{Content.FirstName}, {Content.LastName}") is @(Content.Job).

+ +First name: +Last name: +Birth date: + +@if (Dialog != null) +{ + + This section is visible only when component is hosted inside a Dialog. + Enable Dialog Primary Action. + Disable Dialog Primary Action. + +} + +@code { + [Parameter] + public Employee Content { get; set; } = default!; + + DateTime? BirthDate + { + get + { + return Content.BirthDate as DateTime?; + } + set + { + Content.BirthDate = value == null ? DateTime.Now : value.Value; + } + } + + [CascadingParameter] + public FluentDialog? Dialog { get; set; } + + void ToggleDialogPrimaryActionButton(bool enable) + { + Dialog!.TogglePrimaryActionButton(enable); + } +} diff --git a/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleEditDialog.razor b/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleEditDialog.razor new file mode 100644 index 0000000..58e02ff --- /dev/null +++ b/BlazorFluentUI/Components/Pages/Components/Dialogs/SimpleEditDialog.razor @@ -0,0 +1,58 @@ +@implements IDialogContentComponent + +@* Header *@ + + + + + @Dialog.Instance.Parameters.Title + + + + +@* Body *@ + + + + + Name must be between 3 and 20 characters long, + and your age between 1 and 150. + + + +
+ +
+ + + +@* Footer *@ + + Save + Cancel + + +@code { + EditContext editContext = default!; + + [Parameter] + public CompoDialog.NameAndAge Content { get; set; } = default!; + + [CascadingParameter] + public FluentDialog Dialog { get; set; } = default!; + + protected override void OnInitialized() + { + editContext = new EditContext(Content); + } + + private async Task SaveAsync() + { + await Dialog.CloseAsync(Content); + } + + private async Task CancelAsync() + { + await Dialog.CancelAsync(); + } +}