Merge pull request 'features/rewrite/dropdown' (#14) from features/rewrite/dropdown into features/rewrite/main
Reviewed-on: #14 Requires property comments and style fine-tuning.pull/15/head^2
commit
bf60457369
@ -0,0 +1,18 @@
|
||||
@page "/demo/components/dropdown"
|
||||
|
||||
@namespace Connected.Components.Showcase.Runner
|
||||
|
||||
@using Connected.Components;
|
||||
|
||||
<Dropdown Items=@Items ItemToKey=@((e) => e.Value.ToString()) @bind-SelectedItems="@SelectedItems" AllowMultiple=true>
|
||||
<OptionTemplate>
|
||||
@context.Name
|
||||
</OptionTemplate>
|
||||
<SelectedValueTemplate>
|
||||
@context.Name
|
||||
</SelectedValueTemplate>
|
||||
</Dropdown>
|
||||
|
||||
<div>
|
||||
@string.Join(", ", SelectedItems.Select(e=> e.Value))
|
||||
</div>
|
||||
@ -0,0 +1,29 @@
|
||||
using System.Collections.ObjectModel;
|
||||
|
||||
namespace Connected.Components.Showcase.Runner;
|
||||
|
||||
public partial class DropdownDemo
|
||||
{
|
||||
private ObservableCollection<TestObject> SelectedItems { get; set; } = new();
|
||||
|
||||
private ObservableCollection<TestObject> Items { get; set; } = new ObservableCollection<TestObject>
|
||||
{
|
||||
new TestObject
|
||||
{
|
||||
Name= "Simple",
|
||||
Value = 1
|
||||
},
|
||||
new TestObject
|
||||
{
|
||||
Name = "Simpler",
|
||||
Value = 2
|
||||
}
|
||||
};
|
||||
|
||||
public class TestObject
|
||||
{
|
||||
public string Name { get; set; }
|
||||
|
||||
public long Value { get; set; }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
@typeparam T;
|
||||
@inherits Connected.Models.InputBase;
|
||||
|
||||
<div class="@InputFieldClassList">
|
||||
<select type="textarea" @onfocus="(()=> Open())" @onblur="(()=> Close())">
|
||||
@if (SelectedItems.Any())
|
||||
{
|
||||
<option selected>
|
||||
@foreach (var item in SelectedItems)
|
||||
{
|
||||
@SelectedValueTemplate?.Invoke(item)
|
||||
}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<span class="highlight"></span><span class="bar"></span>
|
||||
<label class="label-animated">@Label</label>
|
||||
<div class="input-helper-text">@HelperText</div>
|
||||
<div class="input-error-text">@ErrorText</div>
|
||||
<span class="input-glyph-wraper">
|
||||
<span class="input-glyph button">
|
||||
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" Click="_ => { SelectedItems.Clear(); Close(); }" />
|
||||
</span>
|
||||
<span class="input-glyph">
|
||||
<Glyph SVG="@Icons.Material.Filled.ArrowDropDown" class="icon-root svg-icon icon-size-md" Click="()=> Toggle()" />
|
||||
</span>
|
||||
<span class="input-glyph error">
|
||||
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<TransitionAnimator TransitionDuration="5000" TransitionInClass="drop-down fade-in" TransitionOutClass="drop-down fade-out" Visible=@DropdownOpen>
|
||||
<div class="backdrop d-sm-none">
|
||||
</div>
|
||||
<div class="dropdown-menu">
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
<div class="dropdown-item @(IsItemSelected(item)?"active":"")"
|
||||
@onclick="(async () => await OptionSelected(item))">
|
||||
@OptionTemplate?.Invoke(item)
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</TransitionAnimator>
|
||||
</div>
|
||||
@ -0,0 +1,112 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Collections.ObjectModel;
|
||||
using Connected.Models;
|
||||
using System.Collections.Immutable;
|
||||
|
||||
namespace Connected.Components;
|
||||
|
||||
public partial class Dropdown<T> : InputBase, IAsyncDisposable
|
||||
{
|
||||
[Parameter, EditorRequired]
|
||||
public ObservableCollection<T> Items { get; set; } = new ObservableCollection<T>();
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment<T>? OptionTemplate { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment<T>? SelectedValueTemplate { get; set; }
|
||||
|
||||
[Parameter, EditorRequired]
|
||||
public Func<T, string> ItemToKey { get; set; } = default!;
|
||||
|
||||
[Parameter]
|
||||
public ObservableCollection<T> SelectedItems { get; set; } = new();
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<ObservableCollection<T>> SelectedItemsChanged { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool AllowMultiple { get; set; }
|
||||
|
||||
private bool DropdownOpen { get; set; }
|
||||
|
||||
private bool IsItemSelected(T item)
|
||||
{
|
||||
return SelectedItems.Contains(item);
|
||||
}
|
||||
|
||||
public void Open()
|
||||
{
|
||||
DropdownOpen = true;
|
||||
}
|
||||
|
||||
public void Close()
|
||||
{
|
||||
DropdownOpen = false;
|
||||
}
|
||||
|
||||
public void Toggle()
|
||||
{
|
||||
DropdownOpen = !DropdownOpen;
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
OptionTemplate ??= (T item) => (builder) =>
|
||||
{
|
||||
builder.OpenElement(0, "div");
|
||||
builder.SetKey(item);
|
||||
builder.AddContent(1, item?.ToString());
|
||||
builder.CloseElement();
|
||||
};
|
||||
|
||||
SelectedValueTemplate ??= (T item) => (builder) =>
|
||||
{
|
||||
builder.OpenElement(0, "span");
|
||||
builder.SetKey(item);
|
||||
builder.AddContent(1, item?.ToString());
|
||||
builder.CloseElement();
|
||||
};
|
||||
}
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
base.OnParametersSet();
|
||||
|
||||
Items.CollectionChanged += CollectionChanged;
|
||||
SelectedItems.CollectionChanged += CollectionChanged;
|
||||
}
|
||||
|
||||
private void CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
|
||||
{
|
||||
if (sender == SelectedItems)
|
||||
SelectedItemsChanged.InvokeAsync(SelectedItems);
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task OptionSelected(T item)
|
||||
{
|
||||
if (AllowMultiple)
|
||||
{
|
||||
if (SelectedItems.Contains(item))
|
||||
{
|
||||
SelectedItems.Remove(item);
|
||||
return;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
SelectedItems.Clear();
|
||||
}
|
||||
|
||||
SelectedItems.Add(item);
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
Items.CollectionChanged -= CollectionChanged;
|
||||
SelectedItems.CollectionChanged -= CollectionChanged;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
@using Connected.Utilities;
|
||||
|
||||
<div class="@ClassList" @ontransitionend="TransitionEnd" @onanimationend="TransitionEnd">
|
||||
@if (ContentVisible)
|
||||
{
|
||||
@ChildContent
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.transition-container-component {
|
||||
transition: all @(TransitionDuration)ms;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private bool _visible = false;
|
||||
|
||||
/// <summary>
|
||||
/// The class to append to the container while content is visible and transitioning in
|
||||
/// </summary>
|
||||
[Parameter, EditorRequired]
|
||||
public string? TransitionInClass { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// The class to append to the container while content is transitioning out and hidden
|
||||
/// </summary>
|
||||
[Parameter, EditorRequired]
|
||||
public string? TransitionOutClass { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// The class to append to the container to control transitions
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string? TransitionContainerClass { get; set; } = "transition-container-component";
|
||||
|
||||
/// <summary>
|
||||
/// Controls the visibility of the child content
|
||||
/// </summary>
|
||||
[Parameter, EditorRequired]
|
||||
public bool Visible { get => _visible; set => StartTransition(value); }
|
||||
|
||||
/// <summary>
|
||||
/// The content to show/hide
|
||||
/// </summary>
|
||||
[Parameter, EditorRequired]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Indicates a transition has ended. Useful for visual cleanup.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback TransitionEnded { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// The duration of transitions in milliseconds.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int TransitionDuration { get; set; } = 2000;
|
||||
|
||||
private bool TransitioningIn { get; set; }
|
||||
|
||||
private bool TransitioningOut { get; set; }
|
||||
|
||||
private bool ContentVisible { get; set; }
|
||||
|
||||
private CssBuilder ClassList
|
||||
{
|
||||
get
|
||||
{
|
||||
return new CssBuilder(TransitionContainerClass)
|
||||
.AddClass(TransitionInClass, TransitioningIn)
|
||||
.AddClass(TransitionOutClass, TransitioningOut);
|
||||
}
|
||||
}
|
||||
|
||||
private void StartTransition(bool visible)
|
||||
{
|
||||
if (visible == Visible)
|
||||
return;
|
||||
|
||||
_visible = visible;
|
||||
|
||||
TransitioningIn = visible;
|
||||
|
||||
TransitioningOut = !visible;
|
||||
|
||||
if (visible)
|
||||
ContentVisible = true;
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void TransitionEnd()
|
||||
{
|
||||
ContentVisible = Visible;
|
||||
StateHasChanged();
|
||||
|
||||
TransitionEnded.InvokeAsync();
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
ContentVisible = Visible;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue