#800 [HxDropdownToggleButton] allow DropdownReference changes

havit · May 6, 2024 · 372d938 · 372d938
1 parent 3b87b4d
commit 372d938
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 17 deletions.
diff --git a/BlazorAppTest/Pages/HxDropdown_UpdateReference_Test.razor b/BlazorAppTest/Pages/HxDropdown_UpdateReference_Test.razor
@@ -3,7 +3,7 @@
 <h1>HxDropdown</h1>
 
 <HxDropdown>
-	<HxDropdownToggleElement @ref="dropdownToggleComponent" DropdownReference="@_dropdownReference" />
+	<HxDropdownToggleElement @ref="dropdownToggleElementComponent" DropdownReference="@_dropdownReference" />
 	<HxDropdownContent CssClass="@(IsBold ? "bg-light" : null)">
 		<div class="row m-3" style="min-width: 100px;">
 			<div class="col">
@@ -15,24 +15,55 @@
 	</HxDropdownContent>
 </HxDropdown>
 
-<HxButton id="button1" OnClick="HandleShow1">Show 1</HxButton>
-<HxButton id="button2" OnClick="HandleShow2">Show 2</HxButton>
+<HxButton id="button1" OnClick="HandleShowElement1">Show 1</HxButton>
+<HxButton id="button2" OnClick="HandleShowElement2">Show 2</HxButton>
+
+<br />
+
+<HxDropdownButtonGroup>
+	<HxDropdownToggleButton @ref="dropdownToggleButtonComponent" Text="HxDropdownToggleButton" Color="ThemeColor.Primary" DropdownReference="@_dropdownReference" />
+	<HxDropdownContent CssClass="@(IsBold ? "bg-light" : null)">
+		<div class="row m-3" style="min-width: 100px;">
+			<div class="col">
+				<div>
+					<HxCheckbox @bind-Value="IsBold" Text="Toggle button text bold" />
+				</div>
+			</div>
+		</div>
+	</HxDropdownContent>
+</HxDropdownButtonGroup>
+
+<HxButton id="button3" OnClick="HandleShowButton3">Show 3</HxButton>
+<HxButton id="button4" OnClick="HandleShowButton4">Show 4</HxButton>
 
 
 @code {
-	private HxDropdownToggleElement dropdownToggleComponent;
+	private HxDropdownToggleElement dropdownToggleElementComponent;
+	private HxDropdownToggleButton dropdownToggleButtonComponent;
 	private bool IsBold { get; set; } = false;
 	private string _dropdownReference = "#button1";
 
-	private async Task HandleShow1()
+	private async Task HandleShowElement1()
 	{
 		_dropdownReference = "#button1";
-		await dropdownToggleComponent.ShowAsync();
+		await dropdownToggleElementComponent.ShowAsync();
 	}
 
-	private async Task HandleShow2()
+	private async Task HandleShowElement2()
 	{
 		_dropdownReference = "#button2";
-		await dropdownToggleComponent.ShowAsync();
+		await dropdownToggleElementComponent.ShowAsync();
+	}
+
+	private async Task HandleShowButton3()
+	{
+		_dropdownReference = "#button3";
+		await dropdownToggleButtonComponent.ShowAsync();
+	}
+
+	private async Task HandleShowButton4()
+	{
+		_dropdownReference = "#button4";
+		await dropdownToggleButtonComponent.ShowAsync();
 	}
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Dropdowns/HxDropdownToggleButton.cs b/Havit.Blazor.Components.Web.Bootstrap/Dropdowns/HxDropdownToggleButton.cs
@@ -1,4 +1,5 @@
-using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace Havit.Blazor.Components.Web.Bootstrap;
 
@@ -71,6 +72,8 @@ static HxDropdownToggleButton()
 
 	private DotNetObjectReference<HxDropdownToggleButton> _dotnetObjectReference;
 	private IJSObjectReference _jsModule;
+	private string _currentDropdownJsOptionsReference;
+	private Queue<Func<Task>> _onAfterRenderTasksQueue = new();
 	private bool _disposed;
 
 	public HxDropdownToggleButton()
@@ -129,34 +132,69 @@ protected override void OnParametersSet()
 	/// <inheritdoc cref="ComponentBase.OnAfterRenderAsync(bool)" />
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
-		await base.OnAfterRenderAsync(firstRender);
+		await base.OnAfterRenderAsync(firstRender); // allows HxButton.OnAfterRenderAsync
+
+		var dropdownJsOptionsReference = DropdownToggleExtensions.GetDropdownJsOptionsReference(this);
+
 		if (firstRender)
 		{
 			await EnsureJsModuleAsync();
 			if (_disposed)
 			{
 				return;
 			}
-			await _jsModule.InvokeVoidAsync("create", buttonElementReference, _dotnetObjectReference, DropdownToggleExtensions.GetDropdownJsOptionsReference(this));
+			_currentDropdownJsOptionsReference = dropdownJsOptionsReference;
+			await _jsModule.InvokeVoidAsync("create", buttonElementReference, _dotnetObjectReference, _currentDropdownJsOptionsReference);
+		}
+		else
+		{
+			if (dropdownJsOptionsReference != _currentDropdownJsOptionsReference)
+			{
+				_currentDropdownJsOptionsReference = dropdownJsOptionsReference;
+				if (_jsModule is not null)
+				{
+					await _jsModule.InvokeVoidAsync("update", buttonElementReference, dropdownJsOptionsReference);
+				}
+			}
+		}
+
+		// for show/hide/... the dropdown has to be created/updated first 
+		while (_onAfterRenderTasksQueue.TryDequeue(out var task))
+		{
+			await task();
 		}
 	}
 
 	/// <summary>
 	/// Shows the dropdown.
 	/// </summary>
-	public async Task ShowAsync()
+	public Task ShowAsync()
 	{
-		await EnsureJsModuleAsync();
-		await _jsModule.InvokeVoidAsync("show", buttonElementReference);
+		_onAfterRenderTasksQueue.Enqueue(async () =>
+		{
+			await EnsureJsModuleAsync();
+			await _jsModule.InvokeVoidAsync("show", buttonElementReference);
+		});
+
+		StateHasChanged(); // ensure re-rendering
+
+		return Task.CompletedTask;
 	}
 
 	/// <summary>
 	/// Hides the dropdown.
 	/// </summary>
-	public async Task HideAsync()
+	public Task HideAsync()
 	{
-		await EnsureJsModuleAsync();
-		await _jsModule.InvokeVoidAsync("hide", buttonElementReference);
+		_onAfterRenderTasksQueue.Enqueue(async () =>
+		{
+			await EnsureJsModuleAsync();
+			await _jsModule.InvokeVoidAsync("hide", buttonElementReference);
+		});
+
+		StateHasChanged(); // ensure re-rendering
+
+		return Task.CompletedTask;
 	}
 
 	/// <summary>