* corrected byref comparison objects (#2)

* copy functionality

Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>
This commit is contained in:
elgransan 2022-04-11 17:22:41 -03:00 committed by GitHub
parent 38d3043267
commit 4da845c7ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 7 deletions

View file

@ -3,11 +3,12 @@
<PageTitle>Blazor Reorder Example</PageTitle> <PageTitle>Blazor Reorder Example</PageTitle>
<h1>Drag between lists</h1> <h1>Drag between lists</h1>
<input id="copy" type="checkbox" @bind="@copy" />
<label for="copy">Copy</label>
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<div class="card"> <div class="card">
<Reorder Items="list1" TItem="ListItem"> <Reorder Items="list1" TItem="ListItem" Copy='(i) => copy ? i with { title = i.title + " copy" } : null'>
<div class="mb-2 mx-2"> <div class="mb-2 mx-2">
<h5>@context.title</h5> <h5>@context.title</h5>
<p>@context.details <a href="@context.url">Go</a></p> <p>@context.details <a href="@context.url">Go</a></p>
@ -38,6 +39,7 @@
</div> </div>
@code { @code {
private bool copy = true;
public List<ListItem> list1 = new() public List<ListItem> list1 = new()
{ {

View file

@ -24,7 +24,7 @@
<div class="sortable" @ref="sortable"> <div class="sortable" @ref="sortable">
@foreach (var item in Items.Select((v, i) => (v, i))) @foreach (var item in Items.Select((v, i) => (v, i)))
{ {
<div @ref="itemElem[item.i]" class="item @(item.v.Equals(rs.selected) ? "active" : "")" <div @ref="itemElem[item.i]" class="item @((object)item.v == (object)rs.selected ? "active" : "")"
@onmousedown="async (e) => await onPress(e, item.v, item.i)"> @onmousedown="async (e) => await onPress(e, item.v, item.i)">
@ChildContent(item.v) @ChildContent(item.v)
</div> </div>
@ -36,7 +36,7 @@
{ {
[Parameter, EditorRequired] public RenderFragment<TItem> ChildContent { get; set; } = null!; [Parameter, EditorRequired] public RenderFragment<TItem> ChildContent { get; set; } = null!;
[Parameter, EditorRequired] public List<TItem> Items { get; set; } = null!; [Parameter, EditorRequired] public List<TItem> Items { get; set; } = null!;
[Parameter] public bool Copy { get; set; } = false; [Parameter] public Func<TItem, TItem> Copy { get; set; }
[Parameter] public bool WithShadow { get; set; } = true; [Parameter] public bool WithShadow { get; set; } = true;
[Parameter] public bool Debug { get; set; } = false; [Parameter] public bool Debug { get; set; } = false;
@ -84,12 +84,14 @@
public async Task onPress(MouseEventArgs m, TItem item, int index) public async Task onPress(MouseEventArgs m, TItem item, int index)
{ {
if (itemElem == null) return; if (itemElem == null) return;
shouldRender = false; // Because the method triggers re-render, the click propagation is canceled, if you have a link/or any click event inside it's going to stop working shouldRender = false; // Because the method triggers re-render, the click propagation is canceled, if you have a link/or any click event inside it's going to stop working
var ghostElem = itemElem[index]; var ghostElem = itemElem[index];
elemWidth = await rs.getWidth(ghostElem); elemWidth = await rs.getWidth(ghostElem);
elemPosition = await rs.getPosition(ghostElem); elemPosition = await rs.getPosition(ghostElem);
clickPosition = await rs.getPoint(m); clickPosition = await rs.getPoint(m);
rs.Set(Items, item, index, clickPosition); TItem? clone = Copy != null ? Copy(item) : default(TItem);
rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
} }
[JSInvokable] [JSInvokable]
@ -138,7 +140,8 @@
newElemIndex = b; newElemIndex = b;
if (WithShadow) if (WithShadow)
{ {
rs.originItems.RemoveAt(rs.elemIndex); if (!rs.isCopy())
rs.originItems.RemoveAt(rs.elemIndex);
Items.Insert(newElemIndex, rs.selected); Items.Insert(newElemIndex, rs.selected);
rs.elemIndex = newElemIndex; rs.elemIndex = newElemIndex;
if (rs.originItems != Items) rs.originItems = Items; if (rs.originItems != Items) rs.originItems = Items;

View file

@ -12,6 +12,7 @@ public class ReorderService<TItem> : IAsyncDisposable
public TItem selected = default(TItem); public TItem selected = default(TItem);
public point elemClickPosition = new point(0, 0); public point elemClickPosition = new point(0, 0);
public bool isDragging = false; public bool isDragging = false;
private bool _copy = false;
public ReorderService(IJSRuntime jsRuntime) public ReorderService(IJSRuntime jsRuntime)
{ {
@ -19,13 +20,22 @@ public class ReorderService<TItem> : IAsyncDisposable
"import", "./_content/BlazorReorderList/ReorderJsInterop.js").AsTask()); "import", "./_content/BlazorReorderList/ReorderJsInterop.js").AsTask());
} }
public void Set(List<TItem> list, TItem item, int index, point clickPoint) public void Set(List<TItem> list, TItem item, int index, point clickPoint, bool copy)
{ {
isDragging = true; isDragging = true;
originItems = list; originItems = list;
selected = item; selected = item;
elemIndex = index; elemIndex = index;
elemClickPosition = clickPoint; elemClickPosition = clickPoint;
_copy = copy;
}
// whe copy only the first time
public bool isCopy()
{
var tempcopy = _copy;
_copy = false;
return tempcopy;
} }
public void Reset() public void Reset()
@ -34,6 +44,7 @@ public class ReorderService<TItem> : IAsyncDisposable
originItems = default(List<TItem>); originItems = default(List<TItem>);
selected = default(TItem); selected = default(TItem);
elemClickPosition = new point(0, 0); elemClickPosition = new point(0, 0);
_copy = false;
} }
public async ValueTask initEvents(DotNetObjectReference<Reorder<TItem>> dotNetInstance) public async ValueTask initEvents(DotNetObjectReference<Reorder<TItem>> dotNetInstance)