fix(TPopup): 修复闪动显示的问题 (#254)

Author: teacher-zhou

doc/TDesign.Docs.ServerSide/TDesign.xml

@@ -2,32 +2,7 @@
 @using Test=TDesign.Docs.Shared.Pages.Components.Data.TablePage
 @layout EmptyLayout
 
-<TTable TItem="Test.User" Data="DataSource<Test.User>.Parse(Test.Mock)" Pagination RowSelection>
-    <TTableExpandColumn Header="asd" Field="@nameof(Test.User.Id)">
-        名字： @context?.Name
-    </TTableExpandColumn>
-    <TTableFieldColumn Field="@nameof(Test.User.Id)" Header="编号" />
-    <TTableFieldColumn Field="@nameof(Test.User.Name)"  />
-    <TTableFieldColumn Field="@nameof(Test.User.Age)" Header="年龄" />
-    <TTableFieldColumn Header="性别">
-    @if (context is not null)
-    {
-        if (context.Gender)
-        {
-            <TTag Theme="Theme.Primary">男</TTag>
-        }
-        else
-        {
-            <TTag Theme="Theme.Danger">女</TTag>
-        }
-    }
-    </TTableFieldColumn>
-</TTable>
 
-
-@*<TTable TItem="Test.User" Data="DataSource<Test.User>.Parse(Test.Mock)" Pagination RowSelection>
-    <TTableCheckboxColumn Field="@nameof(Test.User.Id)"  Header="选择"/>
-    <TTableFieldColumn Field="@nameof(Test.User.Id)" Header="编号"/>
-    <TTableFieldColumn Field="@nameof(Test.User.Name)" Header="姓名" />
-    <TTableFieldColumn Field="@nameof(Test.User.Age)" Header="年龄" />
-</TTable>*@
+<TPopup Content="Hello" Placement="PopupPlacement.Right">
+    <TButton>Submit</TButton>
+</TPopup>

doc/TDesign.Docs.Shared/Pages/TestPage.razor

@@ -7,15 +7,17 @@ namespace TDesign;
 /// </summary>
 public class Popper : IAsyncDisposable
 {
+    private readonly IJSObjectReference _tdesignJsObj;
     private readonly IJSObjectReference? _popper;
     private readonly PopperOptions? _options;
 
 
     /// <summary>
     /// Initializes a new instance of the <see cref="Popper"/> class.
     /// </summary>
-    internal Popper(IJSObjectReference popper, PopperOptions options)
+    internal Popper(IJSObjectReference tdesignJsObj, IJSObjectReference popper, PopperOptions options)
     {
+        _tdesignJsObj = tdesignJsObj;
         this._popper = popper;
         this._options = options;
     }
@@ -49,9 +51,9 @@ public ValueTask ForceUpdateAsync()
     /// <summary>
     /// 销毁实例。
     /// </summary>
-    public ValueTask DestroyAsync()
+    public ValueTask HideAsync(ElementReference? popupElement)
     {
-        return _popper!.InvokeVoidAsync("destroy");
+        return _tdesignJsObj!.InvokeVoidAsync("popup.hide", _popper,popupElement, _options);
     }
 
     /// <inheritdoc/>
@@ -60,7 +62,6 @@ public async ValueTask DisposeAsync()
         if ( _popper is not null )
         {
             await _popper.DisposeAsync();
-            await DisposeAsync();
         }
     }
 }

doc/TDesign.Docs.WebAssembly/wwwroot/TDesign.xml

@@ -15,9 +15,9 @@ public static class PopperExtensions
     /// <param name="options">Popup的配置。</param>
     public static async ValueTask<Popper> InvokePopupAsync(this IJSRuntime js, ElementReference selectorRef, ElementReference popupRef, PopperOptions options)
     {
-        var jsObject = await js.ImportScriptAsync();
-        var popperObject = await jsObject.InvokeAsync<IJSObjectReference>("popup.create", selectorRef, popupRef, options, DotNetObjectReference.Create(options));
+        var tdesignJsObj = await js.ImportTDesignScriptAsync();
+        var popperObject = await tdesignJsObj.InvokeAsync<IJSObjectReference>("popup.show", selectorRef, popupRef, options, DotNetObjectReference.Create(options));
 
-        return new (popperObject, options);
+        return new (tdesignJsObj,popperObject, options);
     }
 }

src/TDesign/Components/Popup/Popper.cs

@@ -15,18 +15,17 @@ public class PopperOptions
     [JsonPropertyName("placement")]
     public PopupPlacement Placement { get; set; } = PopupPlacement.Auto;
 
-    ///// <summary>
-    ///// 获取或设置修饰符集合。
-    ///// </summary>
-    //[JsonPropertyName("modifiers")]
-    //public PopperModifier[]? Modifiers { get; set; }
-
     /// <summary>
     /// 获取或设置要使用的定位策略。
     /// </summary>
     [JsonConverter(typeof(EnumDescriptionConverter<PopperStrategy>))]
     [JsonPropertyName("strategy")]
     public PopperStrategy Strategy { get; set; } = PopperStrategy.Absolute;
+    /// <summary>
+    /// 获取或设置显示或隐藏弹出层的延迟时间，单位毫秒。默认 400 毫秒。
+    /// </summary>
+    [JsonPropertyName("timeout")]
+    public int Timeout { get; set; } = 400;
 
     [JsonIgnore]
     public Action<PopperState>? OnFirstUpdate { get; set; }
@@ -35,21 +34,14 @@ public class PopperOptions
     public void InvokeOnFirstUpdate(PopperState state) => OnFirstUpdate?.Invoke(state);
 }
 
-/// <summary>
-/// Popup 修饰者。
-/// </summary>
-public class PopperModifier
-{
-    public string Name { get; init; }
-    public bool Enabled { get; set; }
-    public object? Options { get; set; }
-}
-
 /// <summary>
 /// Popup 状态。
 /// </summary>
 public class PopperState
 {
+    /// <summary>
+    /// 弹出层的位置。
+    /// </summary>
     [JsonConverter(typeof(EnumDescriptionConverter<PopupPlacement>))]
     [JsonPropertyName("placement")]
     public PopupPlacement Placement { get; set; }