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

fix(module: tabs): animated cause display incorrectly (#3177)

Browse Source 
* fix(module: tabs): animated cause display incorrectly

* fix test

* fix test
This commit is contained in:
James Yeung 2023-04-09 16:23:26 +08:00 committed by GitHub
parent 5285bf97b2
commit 1b3625e1bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/tabs/TabPane.razor
View File

@ -55,11 +55,11 @@ else if (IsPane)
{
<div @key="Key"
tabindex="@(_isActive ? "0" : "-1")"
class="ant-tabs-tabpane @(_isActive ? "ant-tabs-tabpane-active" : "")"
class="@_tabPaneClassMapper.Class"
id="@($"rc-tabs-{Id}-panel-{Key}")"
role="tabpanel" aria-hidden="@(_isActive ? "false" : "true")"
aria-labelledby="@($"rc-tabs-{Id}-panel-{Key}")"
style="@(_isActive ? "" : Parent.Animated? "visibility: hidden; height: 0px; overflow-y: hidden;":"display: none;")">
>
@if (_isActive || _hasRendered || ForceRender)
{
_hasRendered = true;

9
components/tabs/TabPane.razor.cs
View File

@ -60,7 +60,10 @@ namespace AntDesign
internal ElementReference TabRef => _tabRef;
private ClassMapper _tabPaneClassMapper = new();
private const string PrefixCls = "ant-tabs-tab";
private const string TabPanePrefixCls = "ant-tabs-tabpane";
private ElementReference _tabRef;
private bool _isActive;
@ -95,6 +98,12 @@ namespace AntDesign
.If($"{PrefixCls}-active", () => _isActive)
.If($"{PrefixCls}-with-remove", () => Closable)
.If($"{PrefixCls}-disabled", () => Disabled);
_tabPaneClassMapper
.Add(TabPanePrefixCls)
.If($"{TabPanePrefixCls}-active", () => _isActive)
.If($"{TabPanePrefixCls}-hidden", () => !_isActive)
;
}
internal void SetKey(string key)

2
components/tabs/Tabs.razor
View File

@ -67,7 +67,7 @@
@if (Card == null)
{
<div class="ant-tabs-content-holder ">
<div class="@_contentClassMapper.Class" style="@_contentAnimatedStyle">
<div class="@_contentClassMapper.Class">
<CascadingValue Value="true" Name="IsPane" IsFixed="true">
@ChildContent
</CascadingValue>

4
components/tabs/Tabs.razor.cs
View File

@ -183,8 +183,6 @@ namespace AntDesign
private bool _shouldRender;
private bool _afterFirstRender;
private string _contentAnimatedStyle;
private readonly ClassMapper _inkClassMapper = new ClassMapper();
private readonly ClassMapper _contentClassMapper = new ClassMapper();
private readonly ClassMapper _tabsNavWarpPingClassMapper = new ClassMapper();
@ -425,8 +423,6 @@ namespace AntDesign
_activeKey = _activePane.Key;
}
_contentAnimatedStyle = Animated && tabIndex > 0 ? $"margin-left: -{tabIndex * 100}%" : "";
Card?.SetBody(_activePane.ChildContent);
_needUpdateScrollListPosition = true;

2
tests/AntDesign.TestKit/AntDesignTestBase.cs
View File

@ -24,7 +24,7 @@ namespace AntDesign.Tests
JSInterop.SetupVoid(JSInteropConstants.OverlayComponentHelper.DeleteOverlayFromContainer, _ => true);
JSInterop.Mode = JSRuntimeMode.Strict;
CultureInfo.DefaultThreadCurrentUICulture = CultureInfo.GetCultureInfo("en-US");
LocaleProvider.SetLocale("en-US");
}
public new void Dispose()

13
tests/AntDesign.Tests/tabs/TabsTests.razor
View File

@ -80,19 +80,20 @@
public async Task Render_tab_pane_with_aniamted()
{
var activeKey = "tab1";
var cut = Context.Render(
var cut = Context.Render<Tabs>(
@<Tabs Animated @bind-ActiveKey="activeKey">
<TabPane Key="tab1" Tab="Tab 1"></TabPane>
<TabPane Key="tab2" Tab="Tab 2"></TabPane>
</Tabs>
</Tabs>
);
var paneElements = cut.FindAll(".ant-tabs-tabpane");
paneElements[0].ClassList.Should().Contain("ant-tabs-tabpane-active");
cut.FindAll(".ant-tabs-tabpane")[0].ClassList.Should().Contain("ant-tabs-tabpane-active");
cut.FindAll(".ant-tabs-tabpane")[1].ClassList.Should().Contain("ant-tabs-tabpane-hidden");
cut.FindAll("div.ant-tabs-tab")[1].Click();
activeKey.Should().Be("tab2");
paneElements[1].OuterHtml.Should().Contain("visibility: hidden; height: 0px; overflow-y: hidden;");
cut.FindAll(".ant-tabs-tabpane")[0].ClassList.Should().Contain("ant-tabs-tabpane-hidden");
cut.FindAll(".ant-tabs-tabpane")[1].ClassList.Should().Contain("ant-tabs-tabpane-active");
}
[Fact]