[dev-v5] Make FluentSortableList bindable

examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/Examples/SortableListCloneBetweenLists.razor

@@ -1,18 +1,21 @@
 <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
     <FluentGridItem xs="12" sm="6">
         <h5>List 1</h5>
-        <FluentSortableList Id="clone1" Group="cloning" Clone="true" OnUpdate="@SortListOne" OnRemove="@ListOneRemove" Items="@items1" Context="item">
-            <ItemTemplate>@item.Name</ItemTemplate>
+        <FluentSortableList Id="clone1" Group="cloning" Clone="true" @bind-Items="@items1" OnUpdate="@HandleOnUpdate" OnAdd="@HandleOnAdd" OnRemove="@HandleOnRemove">
+            <ItemTemplate>@context.Name</ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="6">
         <h5>List 2</h5>
-        <FluentSortableList Id="clone2" Group="cloning" Clone="true" OnUpdate="@SortListTwo" OnRemove="@ListTwoRemove" Items="@items2" Context="item">
-            <ItemTemplate>@item.Name</ItemTemplate>
+        <FluentSortableList Id="clone2" Group="cloning" Clone="true" @bind-Items="@items2" OnUpdate="@HandleOnUpdate" OnAdd="@HandleOnAdd" OnRemove="@HandleOnRemove">
+            <ItemTemplate>@context.Name</ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>
 </FluentGrid>
 
+<p>List 1: @string.Join(", ", items1.Select(i => i.Name))</p>
+<p>List 2: @string.Join(", ", items2.Select(i => i.Name))</p>
+
 @code {
     class Item
     {
@@ -22,88 +25,22 @@
         public bool Disabled { get; set; } = false;
     }
 
-    List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
-
-    List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
-
-    void ListOneRemove(FluentSortableListEventArgs args)
-    {
-        if (args is null)
-        {
-            return;
-        }
-
-        // get the item at the old index in list 1
-        var item = items1[args.OldIndex];
-
-        var clone = item;
+    IEnumerable<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" });
 
-        // add it to the new index in list 2
-        items2.Insert(args.NewIndex, clone);
-    }
+    IEnumerable<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" });
 
-    void ListTwoRemove(FluentSortableListEventArgs args)
+    void HandleOnUpdate(FluentSortableListEventArgs args)
     {
-        if (args is null)
-        {
-            return;
-        }
-
-        // get the item at the old index in list 2
-        var item = items2[args.OldIndex];
-
-        // make a copy
-        var clone = item;
-
-        // add it to the new index in list 1
-        items1.Insert(args.NewIndex, clone);
+        Console.WriteLine($"Item moved in list '{args.FromListId}' from index {args.OldIndex} to index {args.NewIndex}");
     }
 
-    void SortListOne(FluentSortableListEventArgs args)
+    void HandleOnAdd(FluentSortableListEventArgs args)
     {
-        if (args is null || args.OldIndex == args.NewIndex)
-        {
-            return;
-        }
-
-        var oldIndex = args.OldIndex;
-        var newIndex = args.NewIndex;
-
-        var items = this.items1;
-        var itemToMove = items[oldIndex];
-        items.RemoveAt(oldIndex);
-
-        if (newIndex < items.Count)
-        {
-            items.Insert(newIndex, itemToMove);
-        }
-        else
-        {
-            items.Add(itemToMove);
-        }
+        Console.WriteLine($"Item added to list '{args.ToListId}' from list '{args.FromListId}' at index {args.NewIndex}");
     }
 
-    void SortListTwo(FluentSortableListEventArgs args)
+    void HandleOnRemove(FluentSortableListEventArgs args)
     {
-        if (args is null || args.OldIndex == args.NewIndex)
-        {
-            return;
-        }
-
-        var oldIndex = args.OldIndex;
-        var newIndex = args.NewIndex;
-
-        var items = this.items2;
-        var itemToMove = items[oldIndex];
-        items.RemoveAt(oldIndex);
-
-        if (newIndex < items.Count)
-        {
-            items.Insert(newIndex, itemToMove);
-        }
-        else
-        {
-            items.Add(itemToMove);
-        }
+        Console.WriteLine($"Item removed from list '{args.FromListId}' to list '{args.ToListId}' at index {args.OldIndex}");
     }
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/Examples/SortableListDefault.razor

@@ -1,45 +1,26 @@
-<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
+@using FluentUI.Demo.SampleData
+<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
     <FluentGridItem xs="12" sm="6">
-        <FluentSortableList Items="items" OnUpdate="@SortList">
-            <ItemTemplate>@context.Name</ItemTemplate>
+        <FluentSortableList @bind-Items="items" OnUpdate="@HandleOnUpdate">
+            <ItemTemplate>@context.FirstName @context.LastName</ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>
+	<FluentGridItem xs="12" sm="6">
+		<p>Bound List:</p>
+		@foreach (var item in items)
+		{
+			<div>@item</div>
+		}
+	</FluentGridItem>
 </FluentGrid>
 
-@code {
-
-    class Item
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-
-        public bool Disabled { get; set; } = false;
-    }
 
-    List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+@code {
 
+    IEnumerable<People.Person> items = People.GeneratePersons(10);
 
-    void SortList(FluentSortableListEventArgs args)
+    void HandleOnUpdate(FluentSortableListEventArgs args)
     {
-        if (args is null || args.OldIndex == args.NewIndex)
-        {
-            return;
-        }
-
-        var oldIndex = args.OldIndex;
-        var newIndex = args.NewIndex;
-
-        var items = this.items;
-        var itemToMove = items[oldIndex];
-        items.RemoveAt(oldIndex);
-
-        if (newIndex < items.Count)
-        {
-            items.Insert(newIndex, itemToMove);
-        }
-        else
-        {
-            items.Add(itemToMove);
-        }
+        Console.WriteLine($"Item moved in list '{args.FromListId}' from index {args.OldIndex} to index {args.NewIndex}");
     }
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/Examples/SortableListDisabledSorting.razor

@@ -1,74 +1,46 @@
-@page "/sortablelist-disabled-sorting/debug"
-<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
-    <FluentGridItem xs="12" sm="6">
-        <h5>List 1</h5>
-        <FluentSortableList Id="disabledOne" Group="disabledSorting" Drop="false" Sort="false" Items="items1" Context="item" OnRemove="ListOneRemove">
-            <ItemTemplate>@item.Name</ItemTemplate>
-        </FluentSortableList>
-    </FluentGridItem>
-    <FluentGridItem xs="12" sm="6">
-        <h5>List 2</h5>
-        <FluentSortableList Id="disabledTwo" Group="disabledSorting" Items="items2" Context="item" OnUpdate="SortList">
-            <ItemTemplate>@item.Name</ItemTemplate>
-        </FluentSortableList>
-    </FluentGridItem>
+<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
+	<FluentGridItem xs="12" sm="6">
+		<h5>List 1</h5>
+		<FluentSortableList Id="disabledOne" Group="disabledSorting" Drop="false" Sort="false" @bind-Items="items1" OnUpdate="@HandleOnUpdate" OnAdd="@HandleOnAdd" OnRemove="@HandleOnRemove">
+			<ItemTemplate>@context.Name</ItemTemplate>
+		</FluentSortableList>
+	</FluentGridItem>
+	<FluentGridItem xs="12" sm="6">
+		<h5>List 2</h5>
+		<FluentSortableList Id="disabledTwo" Group="disabledSorting" @bind-Items="items2" OnUpdate="@HandleOnUpdate" OnAdd="@HandleOnAdd" OnRemove="@HandleOnRemove">
+			<ItemTemplate>@context.Name</ItemTemplate>
+		</FluentSortableList>
+	</FluentGridItem>
 </FluentGrid>
 
-@code {
-    class Item
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-
-        public bool Disabled { get; set; } = false;
-    }
-
-    List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
-
-    List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+<p>List 1: @string.Join(", ", items1.Select(i => i.Name))</p>
+<p>List 2: @string.Join(", ", items2.Select(i => i.Name))</p>
 
-    void ListOneRemove(FluentSortableListEventArgs args)
-    {
-		if (args is null)
-		{
-			return;
-		}
-
-		// get the item at the old index in list 1
-		var item = items1[args.OldIndex];
-
-		// add it to the new index in list 2
-		items2.Insert(args.NewIndex, item);
-
-		// remove the item from the old index in list 1
-		items1.Remove(items1[args.OldIndex]);
+@code {
+	class Item
+	{
+		public int Id { get; set; }
+		public string Name { get; set; } = "";
 
-		Console.WriteLine($"Moved item '{item.Name}' from list '{args.FromListId}' to list '{args.ToListId}'");
-    }
+		public bool Disabled { get; set; } = false;
+	}
 
-    void SortList(FluentSortableListEventArgs args)
-    {
-        if (args is null || args.OldIndex == args.NewIndex)
-        {
-            return;
-        }
+	IEnumerable<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" });
 
-        var oldIndex = args.OldIndex;
-        var newIndex = args.NewIndex;
+	IEnumerable<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" });
 
-        var items = this.items2;
-        var itemToMove = items[oldIndex];
-        items.RemoveAt(oldIndex);
+	void HandleOnUpdate(FluentSortableListEventArgs args)
+	{
+		Console.WriteLine($"Item moved in list '{args.FromListId}' from index {args.OldIndex} to index {args.NewIndex}");
+	}
 
-        if (newIndex < items2.Count)
-        {
-            items.Insert(newIndex, itemToMove);
-        }
-        else
-        {
-            items.Add(itemToMove);
-        }
+	void HandleOnAdd(FluentSortableListEventArgs args)
+	{
+		Console.WriteLine($"Item added to list '{args.ToListId}' from list '{args.FromListId}' at index {args.NewIndex}");
+	}
 
-        StateHasChanged();
-    }
+	void HandleOnRemove(FluentSortableListEventArgs args)
+	{
+		Console.WriteLine($"Item removed from list '{args.FromListId}' to list '{args.ToListId}' at index {args.OldIndex}");
+	}
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/Examples/SortableListDragHandles.razor

@@ -1,16 +1,18 @@
 <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
     <FluentGridItem xs="12" sm="6">
-        <FluentSortableList Id="dragHandles" Handle="true" Items="items" OnUpdate="@SortList" Context="item">
+        <FluentSortableList Id="dragHandles" Handle="true" @bind-Items="items" OnUpdate="@HandleOnUpdate">
             <ItemTemplate>
                 <div class="sortable-grab">
                     <FluentIcon Value="@(new Icons.Regular.Size20.ArrowSort())" />
                 </div>
-                <div class="sortable-item-content" style="flex-grow: 1;">@item.Name</div>
+                <div class="sortable-item-content" style="flex-grow: 1;">@context.Name</div>
             </ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>
 </FluentGrid>
 
+<p>Items: @string.Join(", ", items.Select(i => i.Name))</p>
+
 @code {
     class Item
     {
@@ -19,29 +21,10 @@
 
         public bool Disabled { get; set; } = false;
     }
-    List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+    IEnumerable<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" });
 
-    void SortList(FluentSortableListEventArgs args)
+    void HandleOnUpdate(FluentSortableListEventArgs args)
     {
-        if (args is null || args.OldIndex == args.NewIndex)
-        {
-            return;
-        }
-
-        var oldIndex = args.OldIndex;
-        var newIndex = args.NewIndex;
-
-        var items = this.items;
-        var itemToMove = items[oldIndex];
-        items.RemoveAt(oldIndex);
-
-        if (newIndex < items.Count)
-        {
-            items.Insert(newIndex, itemToMove);
-        }
-        else
-        {
-            items.Add(itemToMove);
-        }
+        Console.WriteLine($"Item moved in list '{args.FromListId}' from index {args.OldIndex} to index {args.NewIndex}");
     }
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/Examples/SortableListFallback.razor

@@ -1,11 +1,13 @@
 <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
     <FluentGridItem xs="12" sm="6">
-        <FluentSortableList Fallback="true" Items="items" OnUpdate="@SortList">
+        <FluentSortableList Fallback="true" @bind-Items="items" OnUpdate="@HandleOnUpdate">
             <ItemTemplate>@context.Name</ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>
 </FluentGrid>
 
+<p>Items: @string.Join(", ", items.Select(i => i.Name))</p>
+
 @code {
 
     class Item
@@ -16,32 +18,10 @@
         public bool Disabled { get; set; } = false;
     }
 
-    List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
-
+    IEnumerable<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" });
 
-    void SortList(FluentSortableListEventArgs args)
+    void HandleOnUpdate(FluentSortableListEventArgs args)
     {
-        if (args is null || args.OldIndex == args.NewIndex)
-        {
-            return;
-        }
-
-        var oldIndex = args.OldIndex;
-        var newIndex = args.NewIndex;
-
-        var items = this.items;
-        var itemToMove = items[oldIndex];
-        items.RemoveAt(oldIndex);
-
-        if (newIndex < items.Count)
-        {
-            items.Insert(newIndex, itemToMove);
-        }
-        else
-        {
-            items.Add(itemToMove);
-        }
-
-        StateHasChanged();
+        Console.WriteLine($"Item moved in list '{args.FromListId}' from index {args.OldIndex} to index {args.NewIndex}");
     }
 }