ant-design-blazor/components/menu/SubMenu.razor
Andrzej Bakun c099874086 fix(module: menu): Overlay bug fix & menu renering optimization (#1949)
* fix(module:overlay): submenu causing crash

* fix(module:overlay): submenu causing crash

* fix(module:menu): show missing chevron

mark top menu as selected on init
do not render non-active overlay submenus

* tests: common js mock extracted

nullable enabled for test project

* tests: menu

* fix(module:menu): incorrect behavior in layout
2021-09-16 22:46:45 +08:00

98 lines
4.2 KiB
C#

@namespace AntDesign
@inherits AntDomComponentBase
@using AntDesign.Internal
@{
string prefixCls = $"{RootMenu.PrefixCls}-submenu";
}
@if (RootMenu.InternalMode == MenuMode.Inline)
{
<li class="@ClassMapper.Class" role="menuitem" @key="Key" style="position:relative;@Style" @ref="Ref">
<div class="@(prefixCls)-title" style="padding-left: @(PaddingLeft)px; " role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
@if (TitleTemplate != null)
{
@TitleTemplate
}
else if (Title != null)
{
<span>@Title</span>
}
<i class="@(prefixCls)-arrow"></i>
</div>
<ul direction="ltr" class="@SubMenuMapper.Class" role="menu" aria-expanded="@IsOpen">
<CascadingValue Value="this" IsFixed="@true">
@ChildContent
</CascadingValue>
</ul>
</li>
}
else if (RootMenu.InlineCollapsed || RootMenu.InternalMode == MenuMode.Horizontal || Level == 0)
{
if (Placement == null)
{
Placement = (RootMenu.Mode == MenuMode.Horizontal && Parent == null) ? AntDesign.Placement.BottomLeft : AntDesign.Placement.RightTop;
}
<CascadingValue Value="this" Name="SubMenu" IsFixed>
<CascadingValue Value="@prefixCls" Name="PrefixCls" IsFixed>
<SubMenuTrigger @ref="_overlayTrigger"
TriggerClass="@ClassMapper.Class"
Visible="IsOpen"
ComplexAutoCloseAndVisible="true"
BoundaryAdjustMode="@TriggerBoundaryAdjustMode.None"
Disabled="Disabled"
Placement="Placement.Value"
OnVisibleChange="OnOverlayVisibleChange"
OnOverlayHiding="OnOverlayHiding"
Trigger="new Trigger[] { RootMenu?.TriggerSubMenuAction ?? AntDesign.Trigger.Hover }"
PlacementCls="@($"{prefixCls}-popup {RootMenu.PrefixCls} {RootMenu.PrefixCls}-{RootMenu.Theme} {prefixCls}-placement-{_placement.Name}")"
OverlayEnterCls="@($"{prefixCls}-{RootMenu.Theme} ")"
OverlayLeaveCls="@($"{prefixCls}-{RootMenu.Theme} ")"
OverlayHiddenCls="@($"{prefixCls}-hidden")">
<ChildContent>
<div class="@(prefixCls)-title" role="button">
@if (TitleTemplate != null)
{
@TitleTemplate
}
else if (Title != null)
{
<span>@Title</span>
}
@GetArrow()
</div>
</ChildContent>
<Overlay>
<ul direction="ltr" class="@(SubMenuMapper.Class)" style="@_popupMinWidthStyle" role="menu">
<CascadingValue Value="this" IsFixed="@true">
@ChildContent
</CascadingValue>
</ul>
</Overlay>
</SubMenuTrigger>
</CascadingValue>
</CascadingValue>
}
@code
{
private RenderFragment GetArrow()
{
string prefixCls = $"{RootMenu.PrefixCls}-submenu";
if (RootMenu.PrefixCls.Contains("dropdown"))
{
return @<span class="@(prefixCls)-arrow">
<span role="img" aria-label="right" class="anticon anticon-right @(prefixCls)-arrow-icon">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
</svg>
</span>
</span>;
}
else if (Parent is AntDesign.SubMenu || RootMenu.Mode == MenuMode.Vertical)
{
return @<i class="@(prefixCls)-arrow"></i>;
}
return default;
}
}