57 lines
2 KiB
Text
57 lines
2 KiB
Text
<div class="media-picker">
|
|
<div class="media-picker-items">
|
|
@foreach (var image in Images)
|
|
{
|
|
var id = Guid.NewGuid();
|
|
|
|
<div class="media-picker-item" style="width: @(Size)px; max-height: @(Size)px">
|
|
@if (MultiSelect)
|
|
{
|
|
<input type="checkbox" id="media-picker-item-@id" checked="@(SelectedValues.Contains(image.Key))" name="SelectedResult" @onchange="@(() => ToggleSelection(image.Key))" />
|
|
}
|
|
else
|
|
{
|
|
<input type="radio" id="media-picker-item-@id" checked="@(Value == image.Key)" name="SelectedResult" @onchange="@(() => SelectionChanged(image.Key))" />
|
|
}
|
|
<label for="media-picker-item-@id" @ondblclick="@(() => Pick(image.Key))"></label>
|
|
<img src="@image.Value" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public double Size { get; set; }
|
|
[Parameter] public string Value { get; set; }
|
|
[Parameter] public EventCallback<string> ValueChanged { get; set; }
|
|
[Parameter] public EventCallback<string> OnPicked { get; set; }
|
|
[Parameter] public Dictionary<string, string> Images { get; set; }
|
|
[Parameter] public bool MultiSelect { get; set; }
|
|
[Parameter] public HashSet<string> SelectedValues { get; set; } = new();
|
|
[Parameter] public EventCallback<HashSet<string>> SelectedValuesChanged { get; set; }
|
|
|
|
async Task SelectionChanged(string key)
|
|
{
|
|
Value = key;
|
|
|
|
if (ValueChanged.HasDelegate)
|
|
await ValueChanged.InvokeAsync(key);
|
|
}
|
|
|
|
async Task ToggleSelection(string key)
|
|
{
|
|
if (!SelectedValues.Add(key))
|
|
SelectedValues.Remove(key);
|
|
|
|
if (SelectedValuesChanged.HasDelegate)
|
|
await SelectedValuesChanged.InvokeAsync(SelectedValues);
|
|
}
|
|
|
|
async Task Pick(string key)
|
|
{
|
|
Value = key;
|
|
|
|
if (OnPicked.HasDelegate)
|
|
await OnPicked.InvokeAsync(key);
|
|
}
|
|
}
|