Skip to content

feat(Tab): add OnBeforeShowContextMenu parameter #5737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Mar 28, 2025
Merged

feat(Tab): add OnBeforeShowContextMenu parameter #5737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
00db538
refactor: 移动 Tab 右键菜单逻辑到内部
ArgoZhang Mar 28, 2025
041ae59
doc: 更新示例
ArgoZhang Mar 28, 2025
67373bd
refactor: 精简代码
ArgoZhang Mar 28, 2025
fbbd427
refactor: 代码格式化
ArgoZhang Mar 28, 2025
ed77ae3
test: 更新单元测试
ArgoZhang Mar 28, 2025
fe5dcd5
refactor: 重构代码
ArgoZhang Mar 28, 2025
bfd0dce
refactor: 整理代码顺序
ArgoZhang Mar 28, 2025
87b836c
feat: 禁用标签页允许弹出右键菜单
ArgoZhang Mar 28, 2025
de864bf
feat: 增加 OnBeforeShowContextMenu 回调方法
ArgoZhang Mar 28, 2025
128ea9f
doc: 更新示例
ArgoZhang Mar 28, 2025
a6862df
doc: 更新说明文字
ArgoZhang Mar 28, 2025
6544bed
test: 更新单元测试
ArgoZhang Mar 28, 2025
d17442e
test: 更新单元测试
ArgoZhang Mar 28, 2025
d783b50
test: 更新单元测试
ArgoZhang Mar 28, 2025
b56d7c7
refactor: 重构代码
ArgoZhang Mar 28, 2025
5cc9cf5
test: 更新单元测试
ArgoZhang Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 23 additions & 28 deletions src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ private void Navigation()
<button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Left)">Left</button>
</div>
</p>
<Tab Placement="@BindPlacement" Height="200">
<Tab Placement="@_bindPlacement" Height="200">
<TabItem Text="@Localizer["TabItem1Text"]">
<div>@Localizer["TabItem1Content"]</div>
</TabItem>
Expand All @@ -211,7 +211,7 @@ private void Navigation()
</TabItem>
</Tab>
<Divider Text="@Localizer["DividerText"]"></Divider>
<Tab Placement="@BindPlacement" IsCard="true" Height="200">
<Tab Placement="@_bindPlacement" IsCard="true" Height="200">
<TabItem Text="@Localizer["TabItem1Text"]">
<div>@Localizer["TabItem1Content"]</div>
</TabItem>
Expand All @@ -232,7 +232,7 @@ private void Navigation()
</TabItem>
</Tab>
<Divider Text="@Localizer["DividerText"]"></Divider>
<Tab Placement="@BindPlacement" IsBorderCard="true" Height="200">
<Tab Placement="@_bindPlacement" IsBorderCard="true" Height="200">
<TabItem Text="@Localizer["TabItem1Text"]">
<div>@Localizer["TabItem1Content"]</div>
</TabItem>
Expand Down Expand Up @@ -339,7 +339,7 @@ private void Navigation()
</button>
</section>

<Tab ShowExtendButtons="ShowButtons" ShowClose="true" @ref="TabSetApp" class="mt-3">
<Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSetApp" class="mt-3">
<TabItem Text="@Localizer["TabItem1Text"]" Closable="false">
<div>@Localizer["TabItem1Content"]</div>
</TabItem>
Expand Down Expand Up @@ -497,30 +497,25 @@ private void Navigation()
</DemoBlock>

<DemoBlock Title="@Localizer["TabsContextMenuTitle"]" Introduction="@Localizer["TabsContextMenuIntro"]" Name="ContextMenu">
<ContextMenuZone>
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" @ref="_tab">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
<div>@Localizer["TabItem1Content"]</div>
<Counter></Counter>
</TabItem>
<TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
<div>@Localizer["TabItem2Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
<div>@Localizer["TabItem3Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
<div>@Localizer["TabItem4Content"]</div>
</TabItem>
</Tab>
<ContextMenu>
<ContextMenuItem Icon="fa-fw fa-solid fa-rotate-right" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="fa-fw fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="fa-fw fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="fa-fw fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
</ContextMenu>
</ContextMenuZone>
<section ignore>
<p>@((MarkupString)Localizer["TabsContextMenuDesc"].Value)</p>
</section>
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowContextMenu="true"
OnBeforeShowContextMenu="OnBeforeShowContextMenu">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user" IsDisabled="true">
<div>@Localizer["TabItem1Content"]</div>
<Counter></Counter>
</TabItem>
<TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
<div>@Localizer["TabItem2Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
<div>@Localizer["TabItem3Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
<div>@Localizer["TabItem4Content"]</div>
</TabItem>
</Tab>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />
Expand Down
84 changes: 22 additions & 62 deletions src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ public sealed partial class Tabs
[NotNull]
private Tab? TabSet { get; set; }

private Placement BindPlacement = Placement.Top;
private Placement _bindPlacement = Placement.Top;

private bool RemoveEnabled => (TabSet?.Items.Count() ?? 4) < 4;

Expand All @@ -39,13 +39,13 @@ public sealed partial class Tabs

private void SetPlacement(Placement placement)
{
BindPlacement = placement;
_bindPlacement = placement;
}

private Task AddTab(Tab tabset)
private Task AddTab(Tab tab)
{
var text = $"Tab {tabset.Items.Count() + 1}";
tabset.AddTab(new Dictionary<string, object?>
var text = $"Tab {tab.Items.Count() + 1}";
tab.AddTab(new Dictionary<string, object?>
{
[nameof(TabItem.Text)] = text,
[nameof(TabItem.IsActive)] = true,
Expand All @@ -59,44 +59,39 @@ private Task AddTab(Tab tabset)
return Task.CompletedTask;
}

private static Task Active(Tab tabset)
private static Task Active(Tab tab)
{
tabset.ActiveTab(0);
tab.ActiveTab(0);
return Task.CompletedTask;
}

private static async Task RemoveTab(Tab tabset)
private static async Task RemoveTab(Tab tab)
{
if (tabset.Items.Count() > 4)
if (tab.Items.Count() > 4)
{
var item = tabset.Items.Last();
await tabset.RemoveTab(item);
var item = tab.Items.Last();
await tab.RemoveTab(item);
}
}

private void OnToggleDisable()
{
Disabled = !Disabled;

DisableText = Disabled ? "Enable" : "Disable";
}

/// <summary>
/// OnAfterRenderAsync
/// <inheritdoc/>
/// </summary>
/// <param name="firstRender"></param>
/// <returns></returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
var menuItem = TabMenu?.Items.FirstOrDefault();
if (menuItem != null)
var menuItem = TabMenu.Items.FirstOrDefault();
if (menuItem != null && TabMenu.OnClick is not null)
{
await InvokeAsync(() =>
{
var _ = TabMenu?.OnClick?.Invoke(menuItem);
});
TabMenu.OnClick(menuItem);
}
}
}
Expand All @@ -116,18 +111,19 @@ private Task OnClickMenuItem(MenuItem item)
return Task.CompletedTask;
}

private async Task<bool> OnBeforeShowContextMenu(TabItem item)
{
await Task.Yield();
return item.IsDisabled == false;
}

private void AddTabItem(string text) => TabSetMenu.AddTab(new Dictionary<string, object?>
{
[nameof(TabItem.Text)] = text,
[nameof(TabItem.IsActive)] = true,
[nameof(TabItem.ChildContent)] = text == Localizer["BackText1"] ? BootstrapDynamicComponent.CreateComponent<Counter>().Render() : BootstrapDynamicComponent.CreateComponent<FetchData>().Render()
});

private void OnClick()
{
ShowButtons = !ShowButtons;
}

private async Task RemoveTab()
{
if (TabSetApp.Items.Count() > 4)
Expand Down Expand Up @@ -171,42 +167,6 @@ private Task OnSetTitle(string text)
return Task.CompletedTask;
}

[NotNull]
private Tab? _tab = null;

private Task OnRefrsh(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
_tab.Refresh(tabItem);
}
return Task.CompletedTask;
}

private async Task OnClose(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
await _tab.RemoveTab(tabItem);
}
}

private Task OnCloseOther(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
_tab.ActiveTab(tabItem);
}
_tab.CloseOtherTabs();
return Task.CompletedTask;
}

private Task OnCloseAll(ContextMenuItem item, object? context)
{
_tab.CloseAllTabs();
return Task.CompletedTask;
}

/// <summary>
/// 获得属性方法
/// </summary>
Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Server/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2138,7 +2138,8 @@
"ContextCloseOther": "Close Other Tabs",
"ContextCloseAll": "Close All Tabs",
"TabsContextMenuTitle": "TabItem Context Menu",
"TabsContextMenuIntro": "Use the built-in <code>ContextMenuZone</code> component to pop up a custom context menu when you right-click a tab item"
"TabsContextMenuIntro": "Use the built-in <code>ContextMenuZone</code> component to pop up a custom context menu when you right-click a tab item",
"TabsContextMenuDesc": "The disabled tab can be set by setting the <code>OnBeforeShowContextMenu</code> callback method to control whether the right-click menu is displayed according to the return value. If it is not set, the right-click menu is also displayed for the disabled tab"
},
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
"Info": "Reset the title of this <code>TabItem</code> by click the button",
Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Server/Locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2138,7 +2138,8 @@
"ContextCloseOther": "关闭其他",
"ContextCloseAll": "关闭全部",
"TabsContextMenuTitle": "右键菜单",
"TabsContextMenuIntro": "通过内置 <code>ContextMenuZone</code> 组件，点击标签页右键时弹窗自定义右键菜单"
"TabsContextMenuIntro": "通过内置 <code>ContextMenuZone</code> 组件，点击标签页右键时弹窗自定义右键菜单",
"TabsContextMenuDesc": "被禁用的标签页可以通过设置 <code>OnBeforeShowContextMenu</code> 回调方法根据返回值控制右键菜单是否显示，未设置时禁用标签页也显示右键菜单"
},
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
"Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",
Expand Down
31 changes: 6 additions & 25 deletions src/BootstrapBlazor/Components/Layout/Layout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,31 +116,7 @@
@<main class="layout-main">
@if (UseTabSet)
{
@if (ShowTabContextMenu)
{
<ContextMenuZone>
@RenderTab
<ContextMenu>
@if (BeforeTabContextMenuTemplate != null)
{
@BeforeTabContextMenuTemplate(_tab)
}
<ContextMenuItem Icon="@TabContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="@TabContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="@TabContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="@TabContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
@if (TabContextMenuTemplate != null)
{
@TabContextMenuTemplate(_tab)
}
</ContextMenu>
</ContextMenuZone>
}
else
{
@RenderTab
}
@RenderTab
}
else
{
Expand All @@ -153,6 +129,11 @@
ShowExtendButtons="ShowTabExtendButtons" ShowClose="ShowTabItemClose" AllowDrag="AllowDragTab"
DefaultUrl="@TabDefaultUrl" ExcludeUrls="@ExcludeUrls" IsOnlyRenderActiveTab="IsOnlyRenderActiveTab"
TabStyle="TabStyle" ShowToolbar="@ShowToolbar" ToolbarTemplate="@ToolbarTemplate"
ShowContextMenu="ShowTabContextMenu"
BeforeContextMenuTemplate="@BeforeTabContextMenuTemplate" ContextMenuTemplate="@TabContextMenuTemplate"
ContextMenuRefreshIcon="@TabContextMenuRefreshIcon" ContextMenuCloseIcon="@TabContextMenuCloseIcon"
ContextMenuCloseOtherIcon="@TabContextMenuCloseOtherIcon" ContextMenuCloseAllIcon="@TabContextMenuCloseAllIcon"
OnBeforeShowContextMenu="@OnBeforeShowContextMenu"
ShowRefreshToolbarButton="ShowRefreshToolbarButton" ShowFullscreenToolbarButton="ShowFullscreenToolbarButton"
RefreshToolbarButtonIcon="@RefreshToolbarButtonIcon" FullscreenToolbarButtonIcon="@FullscreenToolbarButtonIcon"
RefreshToolbarTooltipText="@RefreshToolbarTooltipText" FullscreenToolbarTooltipText="@FullscreenToolbarTooltipText"
Expand Down
42 changes: 6 additions & 36 deletions src/BootstrapBlazor/Components/Layout/Layout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,12 @@ public partial class Layout : IHandlerException
[Parameter]
public string? TabContextMenuCloseAllIcon { get; set; }

/// <summary>
/// Gets or sets before popup context menu callback. Default is null.
/// </summary>
[Parameter]
public Func<TabItem, Task<bool>>? OnBeforeShowContextMenu { get; set; }

[Inject]
[NotNull]
private NavigationManager? Navigation { get; set; }
Expand Down Expand Up @@ -509,10 +515,6 @@ protected override void OnParametersSet()

TooltipText ??= Localizer[nameof(TooltipText)];
MenuBarIcon ??= IconTheme.GetIconByKey(ComponentIcons.LayoutMenuBarIcon);
TabContextMenuRefreshIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuRefreshIcon);
TabContextMenuCloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseIcon);
TabContextMenuCloseOtherIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseOtherIcon);
TabContextMenuCloseAllIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseAllIcon);
}

/// <summary>
Expand Down Expand Up @@ -627,38 +629,6 @@ public virtual Task HandlerException(Exception ex, RenderFragment<Exception> err

private string? GetTargetString() => IsFixedTabHeader ? ".tabs-body" : null;

private async Task OnRefrsh(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
await _tab.Refresh(tabItem);
}
}

private async Task OnClose(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
await _tab.RemoveTab(tabItem);
}
}

private Task OnCloseOther(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
_tab.ActiveTab(tabItem);
}
_tab.CloseOtherTabs();
return Task.CompletedTask;
}

private Task OnCloseAll(ContextMenuItem item, object? context)
{
_tab.CloseAllTabs();
return Task.CompletedTask;
}

/// <summary>
/// <inheritdoc/>
/// </summary>
Expand Down
Loading