* created callback functionality (#3)

* added example page
* added example class and service
* removed logs

Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>

BlazorReorderExample/BlazorReorderExample.csproj

@@ -15,4 +15,10 @@
     <ProjectReference Include="..\BlazorReorderList\BlazorReorderList.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Pages\Callbacks.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
 </Project>

BlazorReorderExample/Pages/Callbacks.razor

@@ -0,0 +1,71 @@
+@page "/Callbacks"
+
+<PageTitle>Blazor Reorder Example</PageTitle>
+
+<h1>Callbacks</h1>
+<div>@callback: @data</div>
+
+<div class="row">
+    <div class="col-4">
+        <div class="card">
+            <Reorder Items="list1" TItem="ItemList"
+                OnStart='(i) => { callback = "OnStart"; data = i.ToString(); }'
+                OnChange='(i) => { callback = "OnChange"; data = i.ToString(); }'
+                OnFinish='(i) => { callback = "OnFinish"; data = i.ToString(); }'>
+                <div class="mb-2 mx-2">
+                    <h5>@context.title</h5>
+                    <p>@context.details</p>      
+                </div>
+            </Reorder>
+        </div>
+    </div>
+    <div class="col-4">
+        <div class="card">
+            <Reorder Items="list2" TItem="ItemList"
+                OnStart='(i) => i.domClass = "bg-danger"'
+                OnChange='(i) => i.domClass = "bg-info"'
+                OnFinish='(i) => i.domClass = "bg-success"'>
+                <div class="mb-2 mx-2">
+                    <h5>@context.title</h5>
+                    <p class="@context.domClass">@context.details</p>      
+                </div>
+            </Reorder>
+        </div>
+    </div>
+    <div class="col-4">
+        <div class="card">
+            <Reorder Items="list3" TItem="ItemList">
+                <div class="mb-2 mx-2">
+                    <h5>@context.title</h5>
+                    <p>@context.details</p>      
+                </div>
+            </Reorder>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string callback = "";
+    private string data = "";
+    
+    public List<ItemList> list1 = new()
+    {
+        new ItemList("Google", "Again looking for a bug ..."),
+        new ItemList("StackOverflow", "Could be this the solution?"),
+        new ItemList("GitHub", "Let's get awesome code"),
+        new ItemList("Twitter", "I want to rest"),
+        new ItemList("Another", "The solution must be somewhere!!!")
+    };
+    
+    public List<ItemList> list2 = new()
+    {
+        new ItemList("Facebook", "Meta"),
+        new ItemList("Instagram", "Meta"),
+        new ItemList("Whatsapp", "Meta"),
+    };
+
+    public List<ItemList> list3 = new()
+    {
+        new ItemList("Oculus", "Meta"),
+    };
+}

BlazorReorderExample/Program.cs

@@ -8,7 +8,22 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 builder.Services.AddScoped<BlazorReorderList.ReorderService<ListItem>>();
+builder.Services.AddScoped<BlazorReorderList.ReorderService<ItemList>>();
 
 await builder.Build().RunAsync();
 
 public record ListItem(string title, string url, string details);
+
+public class ItemList
+{
+    public string title { get; set; }
+    public string details { get; set; }
+    public string domClass { get; set; }
+
+    public ItemList(string a, string c)
+    {
+        title = a;
+        domClass = "";
+        details = c;
+    }
+}

BlazorReorderExample/Shared/NavMenu.razor

@@ -24,6 +24,11 @@
                 <span class="oi oi-plus" aria-hidden="true"></span> BetweenLists
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="Callbacks">
+                <span class="oi oi-plus" aria-hidden="true"></span> Callbacks
+            </NavLink>
+        </div>
     </nav>
 </div>
 

BlazorReorderList/Reorder.razor

@@ -5,12 +5,6 @@
 @inject NavigationManager nav
 @implements IDisposable
 
-@if (Debug)
-{
-    <p>@log</p>
-    <p>@log2</p>
-}
-
 @if(rs.isDragging && elemPosition.x != -1000)
 {
     <div class="dragging item" 
@@ -37,8 +31,10 @@
     [Parameter, EditorRequired] public RenderFragment<TItem> ChildContent { get; set; } = null!;
     [Parameter, EditorRequired] public List<TItem> Items { get; set; } = null!;
     [Parameter] public Func<TItem, TItem> Copy { get; set; }
+    [Parameter] public EventCallback<TItem> OnStart { get; set; }
+    [Parameter] public EventCallback<TItem> OnChange { get; set; }
+    [Parameter] public EventCallback<TItem> OnFinish { get; set; }
     [Parameter] public bool WithShadow { get; set; } = true;
-    [Parameter] public bool Debug { get; set; } = false;
 
     private bool shouldRender = true; // cancel re-rendering
     private DotNetObjectReference<Reorder<TItem>>? dotNetHelper; //js-interop 2-ways
@@ -50,8 +46,6 @@
     int elemWidth = 0;
     int newElemIndex = -1;
 
-    string log = "", log2 = "";
-
     protected override void OnInitialized()
     {
         nav.LocationChanged += HandleLocationChanged;
@@ -92,14 +86,16 @@
         clickPosition = await rs.getPoint(m);
         TItem? clone = Copy != null ? Copy(item) : default(TItem);
         rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
+        await OnStart.InvokeAsync(rs.selected);
     }
 
     [JSInvokable]
-    public void onRelease(MouseEventArgs m)
+    public async Task onRelease(MouseEventArgs m)
     {
         elemPosition = new point(-1000, 0);
         if (rs.isDragging && rs.originItems == Items)
         {
+            await OnFinish.InvokeAsync(rs.selected);
             rs.Reset();
 
             // flip
@@ -109,7 +105,6 @@
                 shouldRender = false;
                 Items.RemoveAt(rs.elemIndex);
                 Items.Insert(newElemIndex, item);
-                Log("mouseup");
             }
             shouldRender = true;
         }
@@ -124,7 +119,6 @@
         {
             shouldRender = false;
             ghostTrans = new point(pos.x - rs.elemClickPosition.x, pos.y - rs.elemClickPosition.y);
-            Log($"onMove ({elemPosition.x}, {elemPosition.y})");
 
             // check if current drag item is over another item and swap places 
             for (var b = 0; b < itemElem.Count; ++b)
@@ -145,6 +139,7 @@
                         Items.Insert(newElemIndex, rs.selected);
                         rs.elemIndex = newElemIndex;
                         if (rs.originItems != Items) rs.originItems = Items;
+                        await OnChange.InvokeAsync(rs.selected);
                         break;
                     }
                 }
@@ -165,20 +160,10 @@
     {
         var box = await rs.getClientRect(item);
         if (box.width < 0) return false;
-        Log($"\npos x: {pos.x}, y: {pos.y}\n item: left:{box.left}, width:{box.width}\nitem: top:{box.top}, height:{box.height}", true);
         var isx = (pos.x > box.left && pos.x < (box.left + box.width));
         var isy = (pos.y > box.top && pos.y < (box.top + box.height));
         var res = isx && isy;
 
         return res;
     }
-
-    void Log(string info, bool sublog = false)
-    {
-        if (Debug)
-        {
-            if (sublog) log2 = info;
-            else log = info;
-        }
-    }
 }