Skip to content

Commit

Permalink
Tabs: Removing a Tab makes the nearest one show #1029 (#1033)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gvreddy04
gvreddy04 authored Feb 11, 2025
1 parent f749ad0 commit 9c968f1
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 93 deletions.
47 changes: 27 additions & 20 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,28 +69,28 @@
</p>
<table class="table">
<thead>
<tr>
<th scope="col">Event Name</th>
<th scope="col">Description</th>
</tr>
<tr>
<th scope="col">Event Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row"><code>OnHiding</code></th>
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).</td>
</tr>
<tr>
<th scope="row"><code>OnHidden</code></th>
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden).</td>
</tr>
<tr>
<th scope="row"><code>OnShowing</code></th>
<td>This event fires on tab show, but before the new tab has been shown.</td>
</tr>
<tr>
<th scope="row"><code>OnShown</code></th>
<td>This event fires on tab show after a tab has been shown.</td>
</tr>
<tr>
<th scope="row"><code>OnHiding</code></th>
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).</td>
</tr>
<tr>
<th scope="row"><code>OnHidden</code></th>
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden).</td>
</tr>
<tr>
<th scope="row"><code>OnShowing</code></th>
<td>This event fires on tab show, but before the new tab has been shown.</td>
</tr>
<tr>
<th scope="row"><code>OnShown</code></th>
<td>This event fires on tab show after a tab has been shown.</td>
</tr>
</tbody>
</table>
<Callout Color="CalloutColor.Info">
Expand Down Expand Up @@ -123,6 +123,13 @@
<Demo Type="typeof(Tabs_Demo_14_Remove_Dynamic_Tabs)" />
</Section>

<Section Size="HeadingSize.H2" Name="Remove inactive tab" PageUrl="@pageUrl" Link="remove-inactive-tab">
<div>
In the following example, we are removing the inactive tab by name. The focus will not be lost with this active tab.
</div>
<Demo Type="typeof(Tabs_Demo_15_Remove_Inactive_Tab_by_Name)" />
</Section>

@code {
private const string pageUrl = RouteConstants.Demos_Tabs_Documentation;
private const string pageTitle = "Blazor Tabs";
Expand Down
55 changes: 55 additions & 0 deletions ...orBootstrap.Demo.RCL/Components/Pages/Tabs/Tabs_Demo_15_Remove_Inactive_Tab_by_Name.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<div class="d-flex flex-column">
<Card>
<CardBody>
<Tabs @ref="tabsRef">
@foreach (var customer in customers)
{
<Tab @key="@customer?.GetHashCode()"
Title="@customer.CustomerName"
Name="@($"{customer.CustomerId}")">
<Content>
<div class="p-1">
<div class="mt-3">
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
</div>
</div>
</Content>
</Tab>
}
</Tabs>
</CardBody>
</Card>
</div>
<div>
<Button Color="ButtonColor.Success" Class="my-3" Size="ButtonSize.ExtraSmall" @onclick="RemoveCustomerVikram">x Remove Vikram Reddy Tab</Button>
</div>

@code {
Tabs tabsRef = default!;

int count = 1;
private List<Customer> customers = default!;

protected override void OnInitialized()
{
customers = new() {
new(1, "Marvin Klein"),
new(2, "Vikram Reddy"),
new(3, "Bandita PA"),
new(4, "Dan H"),
new(5, "Joe JJ"),
new(6, "Rose KK")
};
count = customers.Count;
}

private void RemoveCustomerVikram()
{
var customer = customers.FirstOrDefault(c => c.CustomerName == "Vikram Reddy");
if (customer != null)
{
customers.Remove(customer);
tabsRef.RemoveTabByName(customer.CustomerId.ToString());
}
}
}
10 changes: 6 additions & 4 deletions blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,26 @@ public abstract class BlazorBootstrapComponentBase : ComponentBase, IDisposable,

private bool isDisposed;

internal Queue<Func<Task>> queuedTasks = new();

#endregion

#region Methods

/// <inheritdoc />
protected override async Task OnAfterRenderAsync(bool firstRender)
{
IsRenderComplete = true;
// process queued tasks
while (queuedTasks.TryDequeue(out var taskToExecute))
await taskToExecute.Invoke();

await base.OnAfterRenderAsync(firstRender);
IsRenderComplete = true;
}

/// <inheritdoc />
protected override void OnInitialized()
{
Id ??= IdUtility.GetNextId();

base.OnInitialized();
}

public static string BuildClassNames(params (string? cssClass, bool when)[] cssClassList)
Expand Down
14 changes: 0 additions & 14 deletions blazorbootstrap/Components/Grid/Grid.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ public partial class Grid<TItem> : BlazorBootstrapComponentBase

private int pageSize;

private Queue<Func<Task>> queuedTasks = new();

private bool requestInProgress = false;

private HashSet<TItem> selectedItems = new();
Expand All @@ -56,18 +54,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
}

await base.OnAfterRenderAsync(firstRender);

// process queued tasks
while (true)
{
if (queuedTasks.Count == 0)
break;

var taskToExecute = queuedTasks.Dequeue();

if (taskToExecute is not null)
await taskToExecute.Invoke();
}
}

protected override void OnInitialized()
Expand Down
Loading

0 comments on commit 9c968f1

Please sign in to comment.