Skip to content

Commit 9c968f1

Browse files
gvreddy04gvreddy04
authored
Tabs: Removing a Tab makes the nearest one show #1029 (#1033)
1 parent f749ad0 commit 9c968f1

6 files changed

Lines changed: 209 additions & 93 deletions

File tree

‎BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -69,28 +69,28 @@
6969
</p>
7070
<table class="table">
7171
<thead>
72-
<tr>
73-
<th scope="col">Event Name</th>
74-
<th scope="col">Description</th>
75-
</tr>
72+
<tr>
73+
<th scope="col">Event Name</th>
74+
<th scope="col">Description</th>
75+
</tr>
7676
</thead>
7777
<tbody class="table-group-divider">
78-
<tr>
79-
<th scope="row"><code>OnHiding</code></th>
80-
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).</td>
81-
</tr>
82-
<tr>
83-
<th scope="row"><code>OnHidden</code></th>
84-
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden).</td>
85-
</tr>
86-
<tr>
87-
<th scope="row"><code>OnShowing</code></th>
88-
<td>This event fires on tab show, but before the new tab has been shown.</td>
89-
</tr>
90-
<tr>
91-
<th scope="row"><code>OnShown</code></th>
92-
<td>This event fires on tab show after a tab has been shown.</td>
93-
</tr>
78+
<tr>
79+
<th scope="row"><code>OnHiding</code></th>
80+
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).</td>
81+
</tr>
82+
<tr>
83+
<th scope="row"><code>OnHidden</code></th>
84+
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden).</td>
85+
</tr>
86+
<tr>
87+
<th scope="row"><code>OnShowing</code></th>
88+
<td>This event fires on tab show, but before the new tab has been shown.</td>
89+
</tr>
90+
<tr>
91+
<th scope="row"><code>OnShown</code></th>
92+
<td>This event fires on tab show after a tab has been shown.</td>
93+
</tr>
9494
</tbody>
9595
</table>
9696
<Callout Color="CalloutColor.Info">
@@ -123,6 +123,13 @@
123123
<Demo Type="typeof(Tabs_Demo_14_Remove_Dynamic_Tabs)" />
124124
</Section>
125125

126+
<Section Size="HeadingSize.H2" Name="Remove inactive tab" PageUrl="@pageUrl" Link="remove-inactive-tab">
127+
<div>
128+
In the following example, we are removing the inactive tab by name. The focus will not be lost with this active tab.
129+
</div>
130+
<Demo Type="typeof(Tabs_Demo_15_Remove_Inactive_Tab_by_Name)" />
131+
</Section>
132+
126133
@code {
127134
private const string pageUrl = RouteConstants.Demos_Tabs_Documentation;
128135
private const string pageTitle = "Blazor Tabs";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/Tabs_Demo_15_Remove_Inactive_Tab_by_Name.razor‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div class="d-flex flex-column">
2+
<Card>
3+
<CardBody>
4+
<Tabs @ref="tabsRef">
5+
@foreach (var customer in customers)
6+
{
7+
<Tab @key="@customer?.GetHashCode()"
8+
Title="@customer.CustomerName"
9+
Name="@($"{customer.CustomerId}")">
10+
<Content>
11+
<div class="p-1">
12+
<div class="mt-3">
13+
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
14+
</div>
15+
</div>
16+
</Content>
17+
</Tab>
18+
}
19+
</Tabs>
20+
</CardBody>
21+
</Card>
22+
</div>
23+
<div>
24+
<Button Color="ButtonColor.Success" Class="my-3" Size="ButtonSize.ExtraSmall" @onclick="RemoveCustomerVikram">x Remove Vikram Reddy Tab</Button>
25+
</div>
26+
27+
@code {
28+
Tabs tabsRef = default!;
29+
30+
int count = 1;
31+
private List<Customer> customers = default!;
32+
33+
protected override void OnInitialized()
34+
{
35+
customers = new() {
36+
new(1, "Marvin Klein"),
37+
new(2, "Vikram Reddy"),
38+
new(3, "Bandita PA"),
39+
new(4, "Dan H"),
40+
new(5, "Joe JJ"),
41+
new(6, "Rose KK")
42+
};
43+
count = customers.Count;
44+
}
45+
46+
private void RemoveCustomerVikram()
47+
{
48+
var customer = customers.FirstOrDefault(c => c.CustomerName == "Vikram Reddy");
49+
if (customer != null)
50+
{
51+
customers.Remove(customer);
52+
tabsRef.RemoveTabByName(customer.CustomerId.ToString());
53+
}
54+
}
55+
}

‎blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,26 @@ public abstract class BlazorBootstrapComponentBase : ComponentBase, IDisposable,
88

99
private bool isDisposed;
1010

11+
internal Queue<Func<Task>> queuedTasks = new();
12+
1113
#endregion
1214

1315
#region Methods
1416

1517
/// <inheritdoc />
1618
protected override async Task OnAfterRenderAsync(bool firstRender)
1719
{
18-
IsRenderComplete = true;
20+
// process queued tasks
21+
while (queuedTasks.TryDequeue(out var taskToExecute))
22+
await taskToExecute.Invoke();
1923

20-
await base.OnAfterRenderAsync(firstRender);
24+
IsRenderComplete = true;
2125
}
2226

2327
/// <inheritdoc />
2428
protected override void OnInitialized()
2529
{
2630
Id ??= IdUtility.GetNextId();
27-
28-
base.OnInitialized();
2931
}
3032

3133
public static string BuildClassNames(params (string? cssClass, bool when)[] cssClassList)

‎blazorbootstrap/Components/Grid/Grid.razor.cs‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ public partial class Grid<TItem> : BlazorBootstrapComponentBase
3535

3636
private int pageSize;
3737

38-
private Queue<Func<Task>> queuedTasks = new();
39-
4038
private bool requestInProgress = false;
4139

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

5856
await base.OnAfterRenderAsync(firstRender);
59-
60-
// process queued tasks
61-
while (true)
62-
{
63-
if (queuedTasks.Count == 0)
64-
break;
65-
66-
var taskToExecute = queuedTasks.Dequeue();
67-
68-
if (taskToExecute is not null)
69-
await taskToExecute.Invoke();
70-
}
7157
}
7258

7359
protected override void OnInitialized()

0 commit comments

Comments
 (0)