test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-29 18:48:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(module: menu): add submenu collapse montion (#3395)

Browse Source 
* feat(module: menu): add submenu collapse montion

* add Animation parameter
This commit is contained in:
James Yeung 2023-12-24 23:58:16 +08:00 committed by GitHub
parent 977467909c
commit b5bd1893a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 114 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/menu/Menu.razor.cs
View File

@ -122,6 +122,9 @@ namespace AntDesign
[Parameter]
public bool ShowCollapsedTooltip { get; set; } = true;
[Parameter]
public bool Animation { get; set; }
internal MenuMode InternalMode { get; private set; }

2
components/menu/SubMenu.razor
View File

@ -22,7 +22,7 @@
</span>
<i class="@(prefixCls)-arrow"></i>
</div>
<ul direction="ltr" class="@SubMenuMapper.Class" role="menu" aria-expanded="@IsOpen">
<ul direction="ltr" class="@SubMenuMapper.Class" style="@_warpperStyle" @ref="@_warpperRef" role="menu" aria-expanded="@IsOpen">
<CascadingValue Value="this" IsFixed="@true">
@ChildContent
</CascadingValue>

111
components/menu/SubMenu.razor.cs
View File

@ -2,6 +2,7 @@
using System.Linq;
using System.Threading.Tasks;
using AntDesign.Internal;
using AntDesign.JsInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
@ -78,6 +79,21 @@ namespace AntDesign
internal bool _overlayVisible;
private PlacementType? _placement;
private ElementReference _warpperRef;
private decimal _warpperHight;
private string _warpperStyle;
private bool _isActive = false;
private bool _isInactive = true;
private bool _isHidden = true;
private bool _isCollapseEnterPrepare;
private bool _isCollapseEnterStart;
private bool _isCollapseEnterActive;
private bool _isCollapseLeavePrepare;
private bool _isCollapseLeaveStart;
private bool _isCollapseLeaveActive;
private void SetClass()
{
string prefixCls = $"{RootMenu.PrefixCls}-submenu";
@ -97,8 +113,14 @@ namespace AntDesign
.Get(() => $"{RootMenu?.PrefixCls}-{RootMenu?.Theme}")
.Get(() => $"{RootMenu?.PrefixCls}-{(RootMenu?.InternalMode == MenuMode.Horizontal ? MenuMode.Vertical : RootMenu?.InternalMode)}")
//.If($"{RootMenu.PrefixCls}-submenu-popup", () => RootMenu.InternalMode != MenuMode.Inline)
.If($"{RootMenu?.PrefixCls}-hidden", () => RootMenu?.InternalMode == MenuMode.Inline && !IsOpen)
.If($"{RootMenu?.PrefixCls}-hidden", () => RootMenu?.InternalMode == MenuMode.Inline && !IsOpen && _isHidden)
.If($"{RootMenu?.PrefixCls}-rtl", () => RTL)
.If("ant-motion-collapse-enter ant-motion-collapse-enter-prepare ant-motion-collapse", () => _isCollapseEnterPrepare)
.If("ant-motion-collapse-enter ant-motion-collapse-enter-start ant-motion-collapse", () => _isCollapseEnterStart)
.If("ant-motion-collapse-enter ant-motion-collapse-enter-active ant-motion-collapse", () => _isCollapseEnterActive)
.If("ant-motion-collapse-leave ant-motion-collapse-leave-prepare ant-motion-collapse", () => _isCollapseLeavePrepare)
.If("ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse", () => _isCollapseLeaveStart)
.If("ant-motion-collapse-leave ant-motion-collapse-leave-active ant-motion-collapse", () => _isCollapseLeaveActive)
;
if (RootMenu?.InternalMode != MenuMode.Inline && _overlayTrigger != null)
@ -182,6 +204,11 @@ namespace AntDesign
public void Close()
{
IsOpen = false;
if (RootMenu.Animation)
{
HandleCollapse();
}
}
public void Open()
@ -192,6 +219,12 @@ namespace AntDesign
}
IsOpen = true;
if (RootMenu.Animation)
{
HandleExpand();
}
Parent?.Open();
}
@ -224,5 +257,81 @@ namespace AntDesign
Parent?.Deselect();
_isSelected = false;
}
private async Task UpdateHeight()
{
var rect = await JsInvokeAsync<HtmlElement>(JSInteropConstants.GetDomInfo, _warpperRef);
_warpperHight = rect.ScrollHeight;
}
private void HandleExpand()
{
_isActive = true;
_isInactive = false;
_isHidden = false;
_isCollapseEnterPrepare = true;
CallAfterRender(async () =>
{
await UpdateHeight();
_isCollapseEnterPrepare = false;
_isCollapseEnterStart = true;
_warpperStyle = "height: 0px; opacity: 0;";
CallAfterRender(async () =>
{
_isCollapseEnterStart = false;
_isCollapseEnterActive = true;
StateHasChanged();
await Task.Delay(100);
_warpperStyle = $"height: {_warpperHight}px; opacity: 1;";
StateHasChanged();
await Task.Delay(450);
_isCollapseEnterActive = false;
_warpperStyle = "";
StateHasChanged();
});
StateHasChanged();
});
}
private void HandleCollapse()
{
_isActive = false;
_isInactive = true;
_isCollapseLeavePrepare = true;
CallAfterRender(async () =>
{
_isCollapseLeavePrepare = false;
_isCollapseLeaveStart = true;
_warpperStyle = $"height: {_warpperHight}px;";
CallAfterRender(async () =>
{
await Task.Delay(100);
_isCollapseLeaveStart = false;
_isCollapseLeaveActive = true;
_warpperStyle = "height: 0px; opacity: 0;";//still active
StateHasChanged();
await Task.Delay(450);
_isHidden = true; // still height 0
_warpperStyle = "";
_isCollapseLeaveActive = false;
StateHasChanged();
});
StateHasChanged();
await Task.Yield();
});
StateHasChanged();
}
}
}