* corrected byref comparison objects (#2)
* copy functionality Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>
This commit is contained in:
parent
38d3043267
commit
4da845c7ad
3 changed files with 23 additions and 7 deletions
|
@ -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()
|
||||||
{
|
{
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in a new issue