test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-11-29 18:49:08 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(Dropzone): Insertions should be committed when drag ends without a drop. (#4313)

Browse Source 
* 在drag元素但未drop时,items依然会插入变化，也需要commit

如果无此代码，拖拽立刻放下，将导致 此拖拽元素 hover等事件不再响应

* Revert "在drag元素但未drop时,items依然会插入变化，也需要commit"

This reverts commit fda87476a36f2774384c2c59f516f19337712e73.

* fix(Dropzone): Insertions should be committed while drag end without drop.

当drap但未drop而直接放下取消时，会调用 items.insert处理，此时需要commit;
否则可能导致 拖拽元素 hover 等响应异常

* chore: 更新字典

* test: 更新单元测试

* style: 更新样式名称

* refactor: 更新方法名称

* refactor: 精简代码

* refactor: 重构代码

* test: 更新单元测试

* chore: 补充字典

---------

Co-authored-by: Argo-AscioTech <argo@live.ca>
This commit is contained in:
AApuci 2024-09-20 12:17:40 +08:00 committed by GitHub
parent 96aef4df16
commit cf67c8552c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exclusion.dic
View File

@ -10,6 +10,7 @@ cors
dest
dissubmit
dropup
dropzone
editform
ellips
fullscreen
@ -102,3 +103,4 @@ vimeo
scrlang
Validata
Validatable
noselect

2
src/BootstrapBlazor/Components/DragDrap/DragDropService.cs
View File

@ -58,7 +58,7 @@ internal class DragDropService<T>
if (StateHasChanged != null)
{
StateHasChanged.Invoke(this, EventArgs.Empty);
StateHasChanged(this, EventArgs.Empty);
}
}
}

2
src/BootstrapBlazor/Components/DragDrap/Dropzone.razor
View File

@ -20,7 +20,7 @@
@foreach (var item in Items)
{
<div draggable="@IsItemDragable(item)"
<div draggable="@IsItemDraggable(item)"
@ondragstart="() => OnDragStart(item)"
@ondragend="@OnDragEnd"
@ondragenter="() => OnDragEnter(item)"

8
src/BootstrapBlazor/Components/DragDrap/Dropzone.razor.cs
View File

@ -84,7 +84,7 @@ public partial class Dropzone<TItem> : IDisposable
private DragDropService<TItem>? DragDropService { get; set; }
private string? ItemClass => CssBuilder.Default()
.AddClass("bb-dd-inprogess", DragDropService.ActiveItem != null)
.AddClass("bb-dd-process", DragDropService.ActiveItem != null)
.Build();
[ExcludeFromCodeCoverage]
@ -149,7 +149,7 @@ public partial class Dropzone<TItem> : IDisposable
return builder.ToString();
}
private string IsItemDragable(TItem? item)
private string IsItemDraggable(TItem? item)
{
if (item == null)
{
@ -257,6 +257,10 @@ public partial class Dropzone<TItem> : IDisposable
if (DragDropService.ActiveItem != null)
{
DragDropService.Items.Insert(DragDropService.OldIndex.Value, DragDropService.ActiveItem);
// 增加这行代码后单元测试有问题，等排查后再决定是否加上
// commit the changes
//DragDropService.Commit();
}
}
StateHasChanged();

98
test/UnitTest/Components/DragDropTest.cs
View File

@ -138,13 +138,13 @@ public class DragDropTest : BootstrapBlazorTestBase
cut.InvokeAsync(() =>
{
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[^2];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[^2];
div.DragStart();
div.DragEnd();
divs = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[0];
items = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = items[0];
divTarget.DragEnter();
div.DragLeave();
divTarget.DragEnter();
@ -176,22 +176,22 @@ public class DragDropTest : BootstrapBlazorTestBase
cut.InvokeAsync(() =>
{
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[1];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[1];
div.DragStart();
});
cut1.InvokeAsync(() =>
{
var divs = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[0];
var items = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = items[0];
divTarget.DragEnter();
divTarget.Drop();
});
}
[Fact]
public void IsItemDragable_Ok()
public void IsItemDraggable_Ok()
{
var cut = Context.RenderComponent<Dropzone<string>>(pb =>
{
@ -202,16 +202,16 @@ public class DragDropTest : BootstrapBlazorTestBase
cut.InvokeAsync(() =>
{
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[^2];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[^2];
div.DragStart();
div.DragEnd();
});
cut.InvokeAsync(() =>
{
var divs = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[0];
var items = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = items[0];
divTarget.DragEnter();
divTarget.Drop();
});
@ -228,13 +228,13 @@ public class DragDropTest : BootstrapBlazorTestBase
pb.Add(a => a.OnItemDropRejected, EventCallback<string>.Empty);
pb.Add(a => a.OnItemDrop, EventCallback<string>.Empty);
});
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[^2];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[^2];
await cut.InvokeAsync(() => div.DragStart());
await cut.InvokeAsync(() => div.DragEnd());
divs = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[0];
items = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = items[0];
await cut.InvokeAsync(() => divTarget.DragEnter());
await cut.InvokeAsync(() => div.Drop());
}
@ -248,13 +248,13 @@ public class DragDropTest : BootstrapBlazorTestBase
pb.Add(a => a.ChildContent, v => builder => builder.AddContent(0, v));
pb.Add(a => a.OnReplacedItemDrop, EventCallback<string>.Empty);
});
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[^2];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[^2];
await cut.InvokeAsync(() => div.DragStart());
await cut.InvokeAsync(() => div.DragEnd());
divs = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[1];
items = cut.FindAll(".bb-dd-dropzone > div");
var divTarget = items[1];
await cut.InvokeAsync(() => divTarget.DragEnter());
await cut.InvokeAsync(() => div.Drop());
}
@ -274,12 +274,12 @@ public class DragDropTest : BootstrapBlazorTestBase
pb.Add(a => a.CopyItem, s => s);
});
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[1];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[1];
await cut.InvokeAsync(() => div.DragStart());
divs = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[1];
items = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = items[1];
await cut.InvokeAsync(() => divTarget.DragEnter());
await cut.InvokeAsync(() => divTarget.Drop());
}
@ -299,12 +299,12 @@ public class DragDropTest : BootstrapBlazorTestBase
pb.Add(a => a.CopyItem, s => s);
});
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[1];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[1];
await cut.InvokeAsync(() => div.DragStart());
divs = cut1.FindAll(".bb-dd-dropzone");
var divTarget = divs[0];
items = cut1.FindAll(".bb-dd-dropzone");
var divTarget = items[0];
await cut.InvokeAsync(() => divTarget.DragEnter());
await cut.InvokeAsync(() => divTarget.Drop());
}
@ -324,24 +324,24 @@ public class DragDropTest : BootstrapBlazorTestBase
pb.Add(a => a.CopyItem, s => s);
});
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[1];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[1];
await cut.InvokeAsync(() => div.DragStart());
divs = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[2];
items = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = items[2];
await cut.InvokeAsync(() => divTarget.DragEnter());
divs = cut1.FindAll(".bb-dd-dropzone > div");
divTarget = divs[4];
items = cut1.FindAll(".bb-dd-dropzone > div");
divTarget = items[4];
await cut.InvokeAsync(() => divTarget.DragLeave());
divs = cut1.FindAll(".bb-dd-dropzone > div");
divTarget = divs[2];
items = cut1.FindAll(".bb-dd-dropzone > div");
divTarget = items[2];
await cut.InvokeAsync(() => divTarget.DragEnter());
divs = cut1.FindAll(".bb-dd-dropzone > div");
divTarget = divs[4];
items = cut1.FindAll(".bb-dd-dropzone > div");
divTarget = items[4];
await cut.InvokeAsync(() => divTarget.Drop());
}
@ -366,23 +366,23 @@ public class DragDropTest : BootstrapBlazorTestBase
pb.Add(a => a.Accepts, ((s, s1) => false));
});
var divs = cut.FindAll(".bb-dd-dropzone > div");
var div = divs[1];
var items = cut.FindAll(".bb-dd-dropzone > div");
var div = items[1];
await cut.InvokeAsync(() => div.DragEnter());
divs = cut.FindAll(".bb-dd-dropzone > div");
div = divs[3];
items = cut.FindAll(".bb-dd-dropzone > div");
div = items[3];
await cut.InvokeAsync(() => div.DragStart());
divs = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = divs[1];
items = cut1.FindAll(".bb-dd-dropzone > div");
var divTarget = items[1];
await cut.InvokeAsync(() => divTarget.DragEnter());
divs = cut1.FindAll(".bb-dd-dropzone > div");
div = divs[3];
items = cut1.FindAll(".bb-dd-dropzone > div");
div = items[3];
await cut.InvokeAsync(() => div.DragStart());
divs = cut2.FindAll(".bb-dd-dropzone > div");
divTarget = divs[1];
items = cut2.FindAll(".bb-dd-dropzone > div");
divTarget = items[1];
await cut.InvokeAsync(() => divTarget.DragEnter());
}
}