Iceshrimp.NET/Iceshrimp.Frontend/Components/EmojiPicker.razor

56 lines
No EOL
1.5 KiB
Text

@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas.Web
@inject EmojiService EmojiService
@if (_display)
{
<div @ref="EmojiPickerRef" @onfocusout="Close" class="emoji-picker @(Fixed ? "fixed" : "")" tabindex="0">
@foreach (var el in EmojiList)
{
<div class="emoji">
<img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
</div>
}
</div>
}
@code {
[Parameter] public bool Fixed { get; set; }
[Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; }
private List<EmojiResponse> EmojiList { get; set; } = [];
private bool _display = false;
private ElementReference EmojiPickerRef { get; set; }
protected override async Task OnInitializedAsync()
{
EmojiList = await EmojiService.GetEmoji();
}
private async void Select(EmojiResponse emoji)
{
await OnEmojiSelect.InvokeAsync(emoji);
_display = false;
StateHasChanged();
}
private void Close()
{
_display = false;
StateHasChanged();
}
protected override void OnAfterRender(bool firstRender)
{
if (_display)
{
EmojiPickerRef.FocusAsync();
}
}
public async Task Toggle()
{
_display = !_display;
await InvokeAsync(StateHasChanged);
}
}