HxModal cleanup (+ removed CascadingParameter as the value added is l…

…ow + PERF)
havit · Oct 6, 2021 · a8e8f5e · a8e8f5e
1 parent fc4438e
commit a8e8f5e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 53 deletions.
diff --git a/...nts.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Scrollable.razor b/...nts.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Scrollable.razor
@@ -8,7 +8,7 @@
 		<p>This content should appear at the bottom after you scroll.</p>
 	</BodyTemplate>
 	<FooterTemplate>
-		<HxButton OnClick="() => myModal.ShowAsync()" Color="ThemeColor.Primary">Launch demo modal - default scrolling</HxButton>
+		<HxButton OnClick="() => myModal.HideAsync()" Color="ThemeColor.Primary">Close</HxButton>
 	</FooterTemplate>
 </HxModal>
 

diff --git a/...nents.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Documentation.razor b/...nents.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Documentation.razor
@@ -2,12 +2,17 @@
 
 <ComponentApiDoc Type="typeof(HxModal)">
 
-	<HxAlert Color="ThemeColor.Warning">
-		Modals cannot be nested - you cannot have a modal inside another modal.
+	<HxAlert Color="ThemeColor.Warning" CssClass="d-flex">
+		<div class="col-auto me-3">
+			<HxIcon Icon="BootstrapIcon.ExclamationTriangle" CssClass="fs-5" />
+		</div>
+		<div class="col">
+			Bootstrap only supports one modal window at a time. Nested modals aren’t supported are believed to be poor user experiences.
+		</div>
 	</HxAlert>
 
 	<h3>Usage</h3>
-	<Demo Type="typeof(HxModal_Demo)" />
+	<Demo Type="typeof(HxModal_Demo)" Tabs="false" />
 
 	<h3>Static backdrop</h3>
 	<p>When backdrop is <b>not</b> set to static, the modal will close when clicking outside it. Click the button below to try it.</p>

diff --git a/...r.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/...r.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor b/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor
@@ -2,19 +2,18 @@
 
 @if (opened)
 {
-	<CascadingValue Name="@HxModalInParentModalCascadingValueName" Value="true" IsFixed="true">
-		<div @ref="modalElement" class="@CssClassHelper.Combine("hx-modal","modal fade", CssClass)" tabindex="-1">
-			<div class="@CssClassHelper.Combine("modal-dialog", GetModalSizeCssClass(), GetModalFullscreenCssClass(), GetModalScrollableCssClass(), GetModalCenteredCssClass())">
-				<div class="modal-content">
-					@if (!String.IsNullOrEmpty(Title) || (HeaderTemplate != null) || ShowCloseButtonEffective)
-					{
+	<div @ref="modalElement" class="@CssClassHelper.Combine("hx-modal","modal fade", CssClass)" tabindex="-1">
+		<div class="@CssClassHelper.Combine("modal-dialog", GetModalSizeCssClass(), GetModalFullscreenCssClass(), GetModalScrollableCssClass(), GetModalCenteredCssClass())">
+			<div class="modal-content">
+				@if (!String.IsNullOrEmpty(Title) || (HeaderTemplate != null) || ShowCloseButtonEffective)
+				{
 					<div class="@CssClassHelper.Combine("modal-header", HeaderCssClass)">
 						@if (!String.IsNullOrEmpty(Title))
 						{
 							<h5 class="modal-title">@Title</h5>
 						}
 						@if (HeaderTemplate != null)
-						{ 
+						{
 							@HeaderTemplate
 						}
 						@if (ShowCloseButtonEffective)
@@ -29,22 +28,21 @@
 							}
 						}
 					</div>
-					}
-					@if (BodyTemplate != null)
-					{
-						<div class="@CssClassHelper.Combine("modal-body", BodyCssClass)">
-							@BodyTemplate
-						</div>
-					}
-					@if (FooterTemplate != null)
-					{
-						<div class="@CssClassHelper.Combine("modal-footer", FooterCssClass)">
-							@FooterTemplate
-						</div>
-					}
-				</div>
+				}
+				@if (BodyTemplate != null)
+				{
+					<div class="@CssClassHelper.Combine("modal-body", BodyCssClass)">
+						@BodyTemplate
+					</div>
+				}
+				@if (FooterTemplate != null)
+				{
+					<div class="@CssClassHelper.Combine("modal-footer", FooterCssClass)">
+						@FooterTemplate
+					</div>
+				}
 			</div>
-
 		</div>
-	</CascadingValue>
+
+	</div>
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs
@@ -15,8 +15,6 @@ namespace Havit.Blazor.Components.Web.Bootstrap
 	/// </summary>
 	public partial class HxModal : IAsyncDisposable
 	{
-		internal const string HxModalInParentModalCascadingValueName = nameof(HxModalInParentModalCascadingValueName);
-
 		/// <summary>
 		/// Application-wide defaults for the <see cref="HxGrid{TItem}"/>.
 		/// </summary>
@@ -82,12 +80,13 @@ public partial class HxModal : IAsyncDisposable
 		[Parameter] public bool? Scrollable { get; set; }
 
 		/// <summary>
-		/// Allows vertical centering of the modal. Default is <c>false</c> (horizontal only).
+		/// Allows vertical centering of the modal.<br/>
+		/// Default is <c>false</c> (horizontal only).
 		/// </summary>
 		[Parameter] public bool? Centered { get; set; }
 
 		/// <summary>
-		/// Modal CSS class. Added to root div (.modal).
+		/// Modal CSS class. Added to root <c>div</c> (<c>.modal</c>).
 		/// </summary>
 		[Parameter] public string CssClass { get; set; }
 
@@ -111,8 +110,6 @@ public partial class HxModal : IAsyncDisposable
 		/// </summary>
 		[Parameter] public EventCallback OnClosed { get; set; }
 
-		[CascadingParameter(Name = HxModalInParentModalCascadingValueName)] protected bool InParentModal { get; set; } // default(bool) = false, receives True from parent HxModal
-
 
 		[Inject] protected IJSRuntime JSRuntime { get; set; }
 
@@ -138,15 +135,6 @@ public HxModal()
 		/// </summary>
 		public Task ShowAsync()
 		{
-			Contract.Requires(!opened);
-
-			// We prevent only showing nested modal.
-			// The component can be present in *.razor file, but it cannot be shown (opened).
-			if (InParentModal)
-			{
-				throw new InvalidOperationException("Modals cannot be nested.");
-			}
-
 			opened = true; // mark modal as opened
 			shouldOpenModal = true; // mak modal to be shown in OnAfterRender			
 
@@ -160,7 +148,6 @@ public Task ShowAsync()
 		/// </summary>
 		public async Task HideAsync()
 		{
-			Contract.Requires(opened);
 			await jsModule.InvokeVoidAsync("hide", modalElement);
 		}
 
@@ -172,7 +159,6 @@ public async Task HandleModalHidden()
 			StateHasChanged(); // ensures rerender to remove dialog from HTML
 		}
 
-		/// <inheritdoc />
 		protected override async Task OnAfterRenderAsync(bool firstRender)
 		{
 			await base.OnAfterRenderAsync(firstRender);
@@ -189,7 +175,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 			}
 		}
 
-		/// <inheritdoc />
 		public async ValueTask DisposeAsync()
 		{
 			if (opened)