* created callback functionality (#3)
* added example page * added example class and service * removed logs Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>
This commit is contained in:
parent
7cec636d69
commit
0c3ba4ea0b
5 changed files with 104 additions and 22 deletions
|
@ -15,4 +15,10 @@
|
|||
<ProjectReference Include="..\BlazorReorderList\BlazorReorderList.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Update="Pages\Callbacks.razor">
|
||||
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
|
||||
</Content>
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
71
BlazorReorderExample/Pages/Callbacks.razor
Normal file
71
BlazorReorderExample/Pages/Callbacks.razor
Normal file
|
@ -0,0 +1,71 @@
|
|||
@page "/Callbacks"
|
||||
|
||||
<PageTitle>Blazor Reorder Example</PageTitle>
|
||||
|
||||
<h1>Callbacks</h1>
|
||||
<div>@callback: @data</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<Reorder Items="list1" TItem="ItemList"
|
||||
OnStart='(i) => { callback = "OnStart"; data = i.ToString(); }'
|
||||
OnChange='(i) => { callback = "OnChange"; data = i.ToString(); }'
|
||||
OnFinish='(i) => { callback = "OnFinish"; data = i.ToString(); }'>
|
||||
<div class="mb-2 mx-2">
|
||||
<h5>@context.title</h5>
|
||||
<p>@context.details</p>
|
||||
</div>
|
||||
</Reorder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<Reorder Items="list2" TItem="ItemList"
|
||||
OnStart='(i) => i.domClass = "bg-danger"'
|
||||
OnChange='(i) => i.domClass = "bg-info"'
|
||||
OnFinish='(i) => i.domClass = "bg-success"'>
|
||||
<div class="mb-2 mx-2">
|
||||
<h5>@context.title</h5>
|
||||
<p class="@context.domClass">@context.details</p>
|
||||
</div>
|
||||
</Reorder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<Reorder Items="list3" TItem="ItemList">
|
||||
<div class="mb-2 mx-2">
|
||||
<h5>@context.title</h5>
|
||||
<p>@context.details</p>
|
||||
</div>
|
||||
</Reorder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private string callback = "";
|
||||
private string data = "";
|
||||
|
||||
public List<ItemList> list1 = new()
|
||||
{
|
||||
new ItemList("Google", "Again looking for a bug ..."),
|
||||
new ItemList("StackOverflow", "Could be this the solution?"),
|
||||
new ItemList("GitHub", "Let's get awesome code"),
|
||||
new ItemList("Twitter", "I want to rest"),
|
||||
new ItemList("Another", "The solution must be somewhere!!!")
|
||||
};
|
||||
|
||||
public List<ItemList> list2 = new()
|
||||
{
|
||||
new ItemList("Facebook", "Meta"),
|
||||
new ItemList("Instagram", "Meta"),
|
||||
new ItemList("Whatsapp", "Meta"),
|
||||
};
|
||||
|
||||
public List<ItemList> list3 = new()
|
||||
{
|
||||
new ItemList("Oculus", "Meta"),
|
||||
};
|
||||
}
|
|
@ -8,7 +8,22 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
|
|||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
builder.Services.AddScoped<BlazorReorderList.ReorderService<ListItem>>();
|
||||
builder.Services.AddScoped<BlazorReorderList.ReorderService<ItemList>>();
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
|
||||
public record ListItem(string title, string url, string details);
|
||||
|
||||
public class ItemList
|
||||
{
|
||||
public string title { get; set; }
|
||||
public string details { get; set; }
|
||||
public string domClass { get; set; }
|
||||
|
||||
public ItemList(string a, string c)
|
||||
{
|
||||
title = a;
|
||||
domClass = "";
|
||||
details = c;
|
||||
}
|
||||
}
|
|
@ -24,6 +24,11 @@
|
|||
<span class="oi oi-plus" aria-hidden="true"></span> BetweenLists
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Callbacks">
|
||||
<span class="oi oi-plus" aria-hidden="true"></span> Callbacks
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -5,12 +5,6 @@
|
|||
@inject NavigationManager nav
|
||||
@implements IDisposable
|
||||
|
||||
@if (Debug)
|
||||
{
|
||||
<p>@log</p>
|
||||
<p>@log2</p>
|
||||
}
|
||||
|
||||
@if(rs.isDragging && elemPosition.x != -1000)
|
||||
{
|
||||
<div class="dragging item"
|
||||
|
@ -37,8 +31,10 @@
|
|||
[Parameter, EditorRequired] public RenderFragment<TItem> ChildContent { get; set; } = null!;
|
||||
[Parameter, EditorRequired] public List<TItem> Items { get; set; } = null!;
|
||||
[Parameter] public Func<TItem, TItem> Copy { get; set; }
|
||||
[Parameter] public EventCallback<TItem> OnStart { get; set; }
|
||||
[Parameter] public EventCallback<TItem> OnChange { get; set; }
|
||||
[Parameter] public EventCallback<TItem> OnFinish { get; set; }
|
||||
[Parameter] public bool WithShadow { get; set; } = true;
|
||||
[Parameter] public bool Debug { get; set; } = false;
|
||||
|
||||
private bool shouldRender = true; // cancel re-rendering
|
||||
private DotNetObjectReference<Reorder<TItem>>? dotNetHelper; //js-interop 2-ways
|
||||
|
@ -50,8 +46,6 @@
|
|||
int elemWidth = 0;
|
||||
int newElemIndex = -1;
|
||||
|
||||
string log = "", log2 = "";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
nav.LocationChanged += HandleLocationChanged;
|
||||
|
@ -92,14 +86,16 @@
|
|||
clickPosition = await rs.getPoint(m);
|
||||
TItem? clone = Copy != null ? Copy(item) : default(TItem);
|
||||
rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
|
||||
await OnStart.InvokeAsync(rs.selected);
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public void onRelease(MouseEventArgs m)
|
||||
public async Task onRelease(MouseEventArgs m)
|
||||
{
|
||||
elemPosition = new point(-1000, 0);
|
||||
if (rs.isDragging && rs.originItems == Items)
|
||||
{
|
||||
await OnFinish.InvokeAsync(rs.selected);
|
||||
rs.Reset();
|
||||
|
||||
// flip
|
||||
|
@ -109,7 +105,6 @@
|
|||
shouldRender = false;
|
||||
Items.RemoveAt(rs.elemIndex);
|
||||
Items.Insert(newElemIndex, item);
|
||||
Log("mouseup");
|
||||
}
|
||||
shouldRender = true;
|
||||
}
|
||||
|
@ -124,7 +119,6 @@
|
|||
{
|
||||
shouldRender = false;
|
||||
ghostTrans = new point(pos.x - rs.elemClickPosition.x, pos.y - rs.elemClickPosition.y);
|
||||
Log($"onMove ({elemPosition.x}, {elemPosition.y})");
|
||||
|
||||
// check if current drag item is over another item and swap places
|
||||
for (var b = 0; b < itemElem.Count; ++b)
|
||||
|
@ -145,6 +139,7 @@
|
|||
Items.Insert(newElemIndex, rs.selected);
|
||||
rs.elemIndex = newElemIndex;
|
||||
if (rs.originItems != Items) rs.originItems = Items;
|
||||
await OnChange.InvokeAsync(rs.selected);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@ -165,20 +160,10 @@
|
|||
{
|
||||
var box = await rs.getClientRect(item);
|
||||
if (box.width < 0) return false;
|
||||
Log($"\npos x: {pos.x}, y: {pos.y}\n item: left:{box.left}, width:{box.width}\nitem: top:{box.top}, height:{box.height}", true);
|
||||
var isx = (pos.x > box.left && pos.x < (box.left + box.width));
|
||||
var isy = (pos.y > box.top && pos.y < (box.top + box.height));
|
||||
var res = isx && isy;
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
void Log(string info, bool sublog = false)
|
||||
{
|
||||
if (Debug)
|
||||
{
|
||||
if (sublog) log2 = info;
|
||||
else log = info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue