Compare commits
No commits in common. 'ce3cbb5889f257b36ba83847d13dc62488068032' and 'eea562dde06ce43a2561369a5d902629267dfb8b' have entirely different histories.
ce3cbb5889
...
eea562dde0
@ -1,18 +0,0 @@
|
|||||||
@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>
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
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; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
@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>
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
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]
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
@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