From af6d3ac8c9e7b00842a9e5c2c0307df734387c62 Mon Sep 17 00:00:00 2001
From: capdiem <capdiem@live.com>
Date: Thu, 19 Sep 2024 13:30:10 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=95=20feat(Sortable):=20add=20a=20para?=
 =?UTF-8?q?meter=20for=20container=20element=20of=20type=20ElementReferenc?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Sortable/MSortable.razor.cs    |  2 +-
 .../Components/Sortable/MSortableProvider.cs  | 21 +++++++++++-----
 .../Sortable/MSortableProviderBase.cs         | 25 ++++++++++++-------
 src/Masa.Blazor/Core/Styles/StyleBuilder.cs   | 11 ++++++++
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/Masa.Blazor/Components/Sortable/MSortable.razor.cs b/src/Masa.Blazor/Components/Sortable/MSortable.razor.cs
index 8654508973..e7a75202f4 100644
--- a/src/Masa.Blazor/Components/Sortable/MSortable.razor.cs
+++ b/src/Masa.Blazor/Components/Sortable/MSortable.razor.cs
@@ -13,7 +13,7 @@ public partial class MSortable<TItem> : MSortableProviderBase<TItem>
     private static Block _block = new("m-sortable");
     private ModifierBuilder _modifierBuilder = _block.CreateModifierBuilder();
 
-    protected override string ContainerSelector => Ref.GetSelector();
+    protected override string? ContainerSelector => Ref.TryGetSelector(out var selector) ? selector : null;
 
     protected override IEnumerable<string> BuildComponentClass()
     {
diff --git a/src/Masa.Blazor/Components/Sortable/MSortableProvider.cs b/src/Masa.Blazor/Components/Sortable/MSortableProvider.cs
index 49227f1ee8..8726874b28 100644
--- a/src/Masa.Blazor/Components/Sortable/MSortableProvider.cs
+++ b/src/Masa.Blazor/Components/Sortable/MSortableProvider.cs
@@ -2,17 +2,26 @@
 
 public class MSortableProvider<TItem> : MSortableProviderBase<TItem>
 {
-    [Parameter] [EditorRequired] public string Container { get; set; } = null!;
+    [Parameter] public string? Container { get; set; }
 
-    [Parameter] public RenderFragment<SortableItemContext<TItem>>? ItemContent { get; set; }
+    [Parameter]
+    [MasaApiParameter(ReleasedOn = "v1.7.3")]
+    public ElementReference ContainerRef { get; set; }
 
-    protected override string ContainerSelector => Container;
+    [Parameter] public RenderFragment<SortableItemContext<TItem>>? ItemContent { get; set; }
 
-    protected override void OnParametersSet()
+    protected override string? ContainerSelector
     {
-        base.OnParametersSet();
+        get
+        {
+            if (Container is not null && ContainerRef.Id is not null)
+            {
+                throw new InvalidOperationException(
+                    $"{nameof(MSortableProvider<TItem>)} requires one of {nameof(Container)} or {nameof(ContainerRef)}, but both were provided.");
+            }
 
-        Container.ThrowIfNull(ComponentName);
+            return Container ?? (ContainerRef.TryGetSelector(out var selector) ? selector : null);
+        }
     }
 
     protected override void BuildRenderTree(RenderTreeBuilder builder)
diff --git a/src/Masa.Blazor/Components/Sortable/MSortableProviderBase.cs b/src/Masa.Blazor/Components/Sortable/MSortableProviderBase.cs
index c8a8e789d5..02cd4c5ad7 100644
--- a/src/Masa.Blazor/Components/Sortable/MSortableProviderBase.cs
+++ b/src/Masa.Blazor/Components/Sortable/MSortableProviderBase.cs
@@ -188,7 +188,7 @@ public bool Disabled
 
     private RenderRateLimiter? _renderRateLimiter;
 
-    protected abstract string ContainerSelector { get; }
+    protected abstract string? ContainerSelector { get; }
 
     protected override void OnInitialized()
     {
@@ -247,16 +247,23 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (firstRender)
-        {
-            if (_sortableJSInteropHandle is null)
-            {
-                return;
-            }
+        await InitAsync();
+    }
 
-            _jsObjectReference =
-                await SortableJSModule.InitAsync(ContainerSelector, GenOptions(), Order, _sortableJSInteropHandle);
+    private async Task InitAsync()
+    {
+        if (_jsObjectReference is not null)
+        {
+            return;
+        }
+        
+        if (_sortableJSInteropHandle is null || ContainerSelector is null)
+        {
+            return;
         }
+        
+        _jsObjectReference =
+            await SortableJSModule.InitAsync(ContainerSelector, GenOptions(), Order, _sortableJSInteropHandle);
     }
 
     private SortableOptions GenOptions()
diff --git a/src/Masa.Blazor/Core/Styles/StyleBuilder.cs b/src/Masa.Blazor/Core/Styles/StyleBuilder.cs
index b70985c7db..06d1ab1e56 100644
--- a/src/Masa.Blazor/Core/Styles/StyleBuilder.cs
+++ b/src/Masa.Blazor/Core/Styles/StyleBuilder.cs
@@ -56,6 +56,17 @@ public StyleBuilder AddLength(string name, double value, string unit = "px")
         return Add(value == 0 ? $"{name}: 0" : $"{name}: {value}{unit}".ToString(CultureInfo.InvariantCulture));
     }
 
+    public void Clear()
+    {
+        _stringBuilder.Clear();
+    }
+
+    public StyleBuilder Reset()
+    {
+        _stringBuilder.Clear();
+        return this;
+    }
+
     public IEnumerable<string> GenerateCssStyles()
     {
         yield return _stringBuilder.ToString();