Skip to content

Commit

Permalink
feat(SortableList): add OnAdd parameter (#4319)
Browse files Browse the repository at this point in the history 
* doc: 更新示例

* doc: 增加示例本地化

* chore: 更新依赖包

* doc: 更新示例

* refactor: 更新示例代码

* refactor: 更新示例

* doc: 更新示例
  • Loading branch information
@ArgoZhang
ArgoZhang authored Sep 17, 2024
1 parent 5516fad commit 0605991
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 38 deletions.
3 changes: 1 addition & 2 deletions src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<PackageReference Include="BootstrapBlazor.PdfReader" Version="8.0.4" />
<PackageReference Include="BootstrapBlazor.Player" Version="8.0.0-beta05" />
<PackageReference Include="BootstrapBlazor.SignaturePad" Version="8.0.2" />
<PackageReference Include="BootstrapBlazor.Sortable" Version="8.0.5" />
<PackageReference Include="BootstrapBlazor.Sortable" Version="8.0.6" />
<PackageReference Include="BootstrapBlazor.Splitting" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.SvgEditor" Version="8.1.0" />
<PackageReference Include="BootstrapBlazor.SummerNote" Version="8.0.4" />
Expand All @@ -75,7 +75,6 @@
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\..\..\BootstrapBlazor.Extensions\src\components\BootstrapBlazor.Sortable\BootstrapBlazor.Sortable.csproj" />
<ProjectReference Include="..\BootstrapBlazor\BootstrapBlazor.csproj" />
</ItemGroup>

Expand Down
61 changes: 49 additions & 12 deletions src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
Name="Group">
<div class="row g-2">
<div class="col-12 col-sm-6">
<SortableList Option="_option2" OnUpdate="OnUpdate1" OnRemove="OnRemove1">
<SortableList Option="_option2" OnAdd="OnAdd1" OnUpdate="OnUpdate1" OnRemove="OnRemove1">
<div class="sl-list row g-2">
@foreach (var item in Items1)
{
Expand All @@ -58,7 +58,7 @@
</SortableList>
</div>
<div class="col-12 col-sm-6">
<SortableList Option="_option2" OnUpdate="OnUpdate2" OnRemove="OnRemove2">
<SortableList Option="_option2" OnAdd="OnAdd2" OnUpdate="OnUpdate2" OnRemove="OnRemove2">
<div class="sl-list row g-2">
@foreach (var item in Items2)
{
Expand All @@ -76,21 +76,21 @@
<div class="row g-2">
<div class="col-12 col-sm-6">
<SortableList Option="_option31">
<div class="sl-list">
<div class="sl-item">1</div>
<div class="sl-item">2</div>
<div class="sl-item">3</div>
<div class="sl-item">4</div>
<div class="sl-list row g-2">
@foreach (var item in ItemsCloneLeft)
{
<FooSortableListItem @key="item" Value="item"></FooSortableListItem>
}
</div>
</SortableList>
</div>
<div class="col-12 col-sm-6">
<SortableList Option="_option32">
<div class="sl-list">
<div class="sl-item">5</div>
<div class="sl-item">6</div>
<div class="sl-item">7</div>
<div class="sl-item">8</div>
<div class="sl-list row g-2">
@foreach (var item in ItemsCloneRight)
{
<FooSortableListItem @key="item" Value="item"></FooSortableListItem>
}
</div>
</SortableList>
</div>
Expand Down Expand Up @@ -230,3 +230,40 @@
</div>
</div>
</DemoBlock>

<DemoBlock Title="@Localizer["SortableListOnAddTitle"]"
Introduction="@Localizer["SortableListOnAddIntro"]"
Name="OnAdd">
<div class="row g-2">
<div class="col-12 col-sm-4">
<SortableList Id="sl01" Option="_optionAdd" OnAdd="OnAddItems1" OnUpdate="OnUpdateItems1" OnRemove="OnRemoveItems1">
<div class="sl-list row g-2">
@foreach (var item in AddItems1)
{
<FooSortableListItem @key="item" Value="item"></FooSortableListItem>
}
</div>
</SortableList>
</div>
<div class="col-12 col-sm-4">
<SortableList Id="sl02" Option="_optionAdd" OnAdd="OnAddItems2" OnUpdate="OnUpdateItems2" OnRemove="OnRemoveItems2">
<div class="sl-list row g-2">
@foreach (var item in AddItems2)
{
<FooSortableListItem @key="item" Value="item"></FooSortableListItem>
}
</div>
</SortableList>
</div>
<div class="col-12 col-sm-4">
<SortableList Id="sl03" Option="_optionAdd" OnAdd="OnAddItems3" OnUpdate="OnUpdateItems3" OnRemove="OnRemoveItems3">
<div class="sl-list row g-2">
@foreach (var item in AddItems3)
{
<FooSortableListRightItem @key="item" Value="item"></FooSortableListRightItem>
}
</div>
</SortableList>
</div>
</div>
</DemoBlock>
147 changes: 125 additions & 22 deletions src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,24 @@ public partial class SortableLists
[NotNull]
private List<Foo>? ItemsMultiDrags { get; set; }

[NotNull]
private List<Foo>? ItemsCloneLeft { get; set; }

[NotNull]
private List<Foo>? ItemsCloneRight { get; set; }

[NotNull]
private List<Foo>? ItemsSwaps { get; set; }

[NotNull]
private List<Foo>? AddItems1 { get; set; }

[NotNull]
private List<Foo>? AddItems2 { get; set; }

[NotNull]
private List<Foo>? AddItems3 { get; set; }

private readonly SortableOption _option1 = new()
{
RootSelector = ".sl-list"
Expand Down Expand Up @@ -89,6 +104,12 @@ public partial class SortableLists
Swap = true
};

private readonly SortableOption _optionAdd = new()
{
RootSelector = ".sl-list",
Group = "group-add"
};

/// <summary>
/// OnInitialized
/// </summary>
Expand All @@ -103,6 +124,11 @@ protected override void OnInitialized()
Items2 = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList();
ItemsMultiDrags = Foo.GenerateFoo(FooLocalizer, 8);
ItemsSwaps = Foo.GenerateFoo(FooLocalizer, 8);
ItemsCloneLeft = Foo.GenerateFoo(FooLocalizer, 4);
ItemsCloneRight = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList();
AddItems1 = Foo.GenerateFoo(FooLocalizer, 4);
AddItems2 = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList();
AddItems3 = Foo.GenerateFoo(FooLocalizer, 12).Skip(8).ToList();
}

private Task OnUpdate(SortableEvent @event)
Expand All @@ -112,7 +138,13 @@ private Task OnUpdate(SortableEvent @event)
var item = Items[oldIndex];
Items.RemoveAt(oldIndex);
Items.Insert(newIndex, item);
StateHasChanged();
return Task.CompletedTask;
}

private Task OnAdd1(SortableEvent @event)
{
var item = Items2[@event.OldIndex];
Items1.Insert(@event.NewIndex, item);
return Task.CompletedTask;
}

Expand All @@ -123,40 +155,35 @@ private Task OnUpdate1(SortableEvent @event)
var item = Items1[oldIndex];
Items1.RemoveAt(oldIndex);
Items1.Insert(newIndex, item);
StateHasChanged();
return Task.CompletedTask;
}

private Task OnUpdate2(SortableEvent @event)
private Task OnRemove1(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = Items2[oldIndex];
Items2.RemoveAt(oldIndex);
Items2.Insert(newIndex, item);
StateHasChanged();
Items1.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}

private Task OnRemove1(SortableEvent @event)
private Task OnAdd2(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = Items1[oldIndex];
Items1.RemoveAt(oldIndex);
Items2.Insert(newIndex, item);
StateHasChanged();
var item = Items1[@event.OldIndex];
Items2.Insert(@event.NewIndex, item);
return Task.CompletedTask;
}

private Task OnRemove2(SortableEvent @event)
private Task OnUpdate2(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = Items2[oldIndex];
Items2.RemoveAt(oldIndex);
Items1.Insert(newIndex, item);
StateHasChanged();
Items2.Insert(newIndex, item);
return Task.CompletedTask;
}

private Task OnRemove2(SortableEvent @event)
{
Items2.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}

Expand Down Expand Up @@ -186,9 +213,85 @@ private Task OnUpdateSwap(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = ItemsSwaps[oldIndex];
ItemsSwaps.RemoveAt(oldIndex);
ItemsSwaps.Insert(newIndex, item);
var item1 = Utility.Clone(ItemsSwaps[oldIndex]);
var item2 = Utility.Clone(ItemsSwaps[newIndex]);
ItemsSwaps[oldIndex] = item2;
ItemsSwaps[newIndex] = item1;
return Task.CompletedTask;
}

private Task OnAddItems1(SortableEvent @event)
{
var foo = @event.FromId == "sl02"
? AddItems2[@event.OldIndex]
: AddItems3[@event.OldIndex];
AddItems1.Insert(@event.NewIndex, foo);
return Task.CompletedTask;
}

private Task OnUpdateItems1(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = AddItems1[oldIndex];
AddItems1.RemoveAt(oldIndex);
AddItems1.Insert(newIndex, item);
return Task.CompletedTask;
}

private Task OnRemoveItems1(SortableEvent @event)
{
AddItems1.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}

private Task OnAddItems2(SortableEvent @event)
{
var foo = @event.FromId == "sl01"
? AddItems1[@event.OldIndex]
: AddItems3[@event.OldIndex];
AddItems2.Insert(@event.NewIndex, foo);
return Task.CompletedTask;
}

private Task OnUpdateItems2(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = AddItems2[oldIndex];
AddItems2.RemoveAt(oldIndex);
AddItems2.Insert(newIndex, item);
return Task.CompletedTask;
}

private Task OnRemoveItems2(SortableEvent @event)
{
AddItems2.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}

private Task OnAddItems3(SortableEvent @event)
{
var foo = @event.FromId == "sl01"
? AddItems1[@event.OldIndex]
: AddItems2[@event.OldIndex];
AddItems3.Insert(@event.NewIndex, foo);
return Task.CompletedTask;
}

private Task OnUpdateItems3(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = AddItems3[oldIndex];
AddItems3.RemoveAt(oldIndex);
AddItems3.Insert(newIndex, item);
return Task.CompletedTask;
}

private Task OnRemoveItems3(SortableEvent @event)
{
AddItems3.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}
}
4 changes: 3 additions & 1 deletion src/BootstrapBlazor.Server/Locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6747,7 +6747,9 @@
"SortableListClassLi2": "The default style of drag element clones is <code>sortable-ghost</code> and can be customized through <code>GhostClass</code>",
"SortableListClassLi3": "Drag elements to swap items. Default style <code>sortable-swap-highlight</code> can be customized by <code>SwapClass</code>",
"SortableListSwapTitle": "Swap",
"SortableListSwapIntro": "By setting the <code>Swap</code> parameter of <code>SortableListOption</code>, the drag item and the target item are swapped."
"SortableListSwapIntro": "By setting the <code>Swap</code> parameter of <code>SortableListOption</code>, the drag item and the target item are swapped.",
"SortableListOnAddTitle": "Multiple SortableList",
"SortableListOnAddIntro": "Get the <code>SortableList</code> to which the dragged item belongs by setting the <code>FromId</code> parameter of the <code>SortableEvent</code>. In this example, the elements in the three areas can be dragged arbitrarily"
},
"BootstrapBlazor.Server.Components.Samples.WinBoxes": {
"WinBoxTitle": "WinBox",
Expand Down
4 changes: 3 additions & 1 deletion src/BootstrapBlazor.Server/Locales/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6747,7 +6747,9 @@
"SortableListClassLi2": "拖动元素克隆项默认样式 <code>sortable-ghost</code> 可通过 <code>GhostClass</code> 自定义",
"SortableListClassLi3": "拖动元素交换想项默认样式 <code>sortable-swap-highlight</code> 可通过 <code>SwapClass</code> 自定义",
"SortableListSwapTitle": "交换",
"SortableListSwapIntro": "通过设置 <code>SortableListOption</code> 参数 <code>Swap</code> 设置拖拽项与目标项目交换"
"SortableListSwapIntro": "通过设置 <code>SortableListOption</code> 参数 <code>Swap</code> 设置拖拽项与目标项目交换",
"SortableListOnAddTitle": "多区域拖动",
"SortableListOnAddIntro": "通过设置 <code>SortableEvent</code> 参数 <code>FromId</code> 获得拖动项所属 <code>SortableList</code>。本示例中三个区域内元素可以任意拖动"
},
"BootstrapBlazor.Server.Components.Samples.WinBoxes": {
"WinBoxTitle": "WinBox 窗口组件",
Expand Down

0 comments on commit 0605991

Please sign in to comment.