You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
694 lines
18 KiB
694 lines
18 KiB
using Connected.Utilities;
|
|
using Microsoft.AspNetCore.Components;
|
|
using Microsoft.AspNetCore.Components.Web;
|
|
|
|
namespace Connected.Components;
|
|
|
|
public partial class Autocomplete<T> : InputBase<T>, IDisposable
|
|
{
|
|
private Func<T, string>? _toStringFunc;
|
|
private Task _currentSearchTask;
|
|
private CancellationTokenSource _cancellationTokenSrc;
|
|
private bool _isOpen;
|
|
private Timer _timer;
|
|
private T[] _items;
|
|
private int _selectedListItemIndex = 0;
|
|
private IList<int> _enabledItemIndices = new List<int>();
|
|
private int _itemsReturned; //the number of items returned by the search function
|
|
int _elementKey = 0;
|
|
/// <summary>
|
|
/// This boolean will keep track if the clear function is called too keep the set text function to be called.
|
|
/// </summary>
|
|
private bool _isCleared;
|
|
private Input<string> _elementReference;
|
|
/// <summary>
|
|
/// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker.
|
|
/// </summary>
|
|
private readonly string _componentId = Guid.NewGuid().ToString();
|
|
|
|
public Autocomplete()
|
|
{
|
|
Adornment = Adornment.End;
|
|
IconSize = Size.Medium;
|
|
}
|
|
|
|
[Inject]
|
|
IScrollManager ScrollManager { get; set; }
|
|
/// <summary>
|
|
/// User class names for the popover, separated by space
|
|
/// </summary>
|
|
[Parameter]
|
|
public string PopoverClass { get; set; }
|
|
/// <summary>
|
|
/// Set the anchor origin point to determen where the popover will open from.
|
|
/// </summary>
|
|
[Parameter]
|
|
public Origin AnchorOrigin { get; set; } = Origin.BottomCenter;
|
|
/// <summary>
|
|
/// Sets the transform origin point for the popover.
|
|
/// </summary>
|
|
[Parameter]
|
|
public Origin TransformOrigin { get; set; } = Origin.TopCenter;
|
|
/// <summary>
|
|
/// If true, compact vertical padding will be applied to all Autocomplete items.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool Dense { get; set; }
|
|
/// <summary>
|
|
/// The Open Autocomplete Icon
|
|
/// </summary>
|
|
[Parameter]
|
|
public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
|
|
/// <summary>
|
|
/// The Close Autocomplete Icon
|
|
/// </summary>
|
|
[Parameter]
|
|
public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
|
|
/// <summary>
|
|
/// The maximum height of the Autocomplete when it is open.
|
|
/// </summary>
|
|
[Parameter]
|
|
public int MaxHeight { get; set; } = 300;
|
|
/// <summary>
|
|
/// Defines how values are displayed in the drop-down list
|
|
/// </summary>
|
|
[Parameter]
|
|
public Func<T, string>? ToStringFunc
|
|
{
|
|
get => _toStringFunc;
|
|
set
|
|
{
|
|
if (_toStringFunc == value)
|
|
return;
|
|
|
|
_toStringFunc = value;
|
|
|
|
Converter = new LambdaConverter<T, string>(_toStringFunc ?? (x => x?.ToString()), null);
|
|
}
|
|
}
|
|
/// <summary>
|
|
/// Whether to show the progress indicator.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool ShowProgressIndicator { get; set; } = false;
|
|
/// <summary>
|
|
/// The color of the progress indicator.
|
|
/// </summary>
|
|
[Parameter]
|
|
public ThemeColor ProgressIndicatorColor { get; set; } = ThemeColor.Default;
|
|
private bool IsLoading => _currentSearchTask is not null && !_currentSearchTask.IsCompleted;
|
|
/// <summary>
|
|
/// Func that returns a list of items matching the typed text. Provides a cancellation token that
|
|
/// is marked as cancelled when the user changes the search text or selects a value from the list.
|
|
/// This can be used to cancel expensive asynchronous work occuring within the SearchFunc itself.
|
|
/// </summary>
|
|
[Parameter]
|
|
public Func<string, CancellationToken, Task<IEnumerable<T>>> SearchFuncWithCancel { get; set; }
|
|
/// <summary>
|
|
/// The SearchFunc returns a list of items matching the typed text
|
|
/// </summary>
|
|
[Parameter]
|
|
public Func<string, Task<IEnumerable<T>>> SearchFunc { get; set; }
|
|
/// <summary>
|
|
/// Maximum items to display, defaults to 10.
|
|
/// A null value will display all items.
|
|
/// </summary>
|
|
[Parameter]
|
|
public int? MaxItems { get; set; } = 10;
|
|
/// <summary>
|
|
/// Minimum characters to initiate a search
|
|
/// </summary>
|
|
[Parameter]
|
|
public int MinCharacters { get; set; } = 0;
|
|
/// <summary>
|
|
/// Reset value if user deletes the text
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool ResetValueOnEmptyText { get; set; } = false;
|
|
/// <summary>
|
|
/// If true, clicking the text field will select (highlight) its contents.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool SelectOnClick { get; set; } = true;
|
|
/// <summary>
|
|
/// Debounce interval in milliseconds.
|
|
/// </summary>
|
|
[Parameter]
|
|
public int DebounceInterval { get; set; } = 100;
|
|
/// <summary>
|
|
/// Optional presentation template for unselected items
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment<T> ItemTemplate { get; set; }
|
|
/// <summary>
|
|
/// Optional presentation template for the selected item
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment<T> ItemSelectedTemplate { get; set; }
|
|
/// <summary>
|
|
/// Optional presentation template for disabled item
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment<T> ItemDisabledTemplate { get; set; }
|
|
/// <summary>
|
|
/// Optional presentation template for when more items were returned from the Search function than the MaxItems limit
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment MoreItemsTemplate { get; set; }
|
|
/// <summary>
|
|
/// Optional presentation template for when no items were returned from the Search function
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment NoItemsTemplate { get; set; }
|
|
/// <summary>
|
|
/// Optional template for progress indicator
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment ProgressIndicatorTemplate { get; set; }
|
|
/// <summary>
|
|
/// Optional template for showing progress indicator inside the popover
|
|
/// </summary>
|
|
[Parameter]
|
|
public RenderFragment ProgressIndicatorInPopoverTemplate { get; set; }
|
|
/// <summary>
|
|
/// On drop-down close override Text with selected Value. This makes it clear to the user
|
|
/// which list value is currently selected and disallows incomplete values in Text.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool CoerceText { get; set; } = true;
|
|
/// <summary>
|
|
/// If user input is not found by the search func and CoerceValue is set to true the user input
|
|
/// will be applied to the Value which allows to validate it and display an error message.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool CoerceValue { get; set; }
|
|
/// <summary>
|
|
/// Function to be invoked when checking whether an item should be disabled or not
|
|
/// </summary>
|
|
[Parameter]
|
|
public Func<T, bool> ItemDisabledFunc { get; set; }
|
|
/// <summary>
|
|
/// Returns the open state of the drop-down.
|
|
/// </summary>
|
|
public bool IsOpen
|
|
{
|
|
get => _isOpen;
|
|
// Note: the setter is protected because it was needed by a user who derived his own autocomplete from this class.
|
|
// Note: setting IsOpen will not open or close it. Use ToggleMenu() for that.
|
|
protected set
|
|
{
|
|
if (value == _isOpen)
|
|
return;
|
|
|
|
_isOpen = value;
|
|
|
|
IsOpenChanged.InvokeAsync(_isOpen).AndForget();
|
|
}
|
|
}
|
|
/// <summary>
|
|
/// An event triggered when the state of IsOpen has changed
|
|
/// </summary>
|
|
[Parameter]
|
|
public EventCallback<bool> IsOpenChanged { get; set; }
|
|
/// <summary>
|
|
/// If true, the currently selected item from the drop-down (if it is open) is selected.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool SelectValueOnTab { get; set; } = false;
|
|
/// <summary>
|
|
/// Show clear button.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool Clearable { get; set; } = false;
|
|
/// <summary>
|
|
/// Button click event for clear button. Called after text and value has been cleared.
|
|
/// </summary>
|
|
[Parameter]
|
|
public EventCallback<MouseEventArgs> OnClearButtonClick { get; set; }
|
|
|
|
private string CurrentIcon => !string.IsNullOrWhiteSpace(AdornmentIcon) ? AdornmentIcon : _isOpen ? CloseIcon : OpenIcon;
|
|
|
|
protected string ClassList()
|
|
{
|
|
return new CssBuilder("select")
|
|
.AddClass(Class)
|
|
.Build();
|
|
}
|
|
|
|
protected string AutocompleteClassList()
|
|
{
|
|
return new CssBuilder("select")
|
|
.AddClass("autocomplete")
|
|
.AddClass("width-full", FullWidth)
|
|
.AddClass("autocomplete--with-progress", ShowProgressIndicator && IsLoading)
|
|
.Build();
|
|
}
|
|
|
|
protected string CircularProgressClassList()
|
|
{
|
|
return new CssBuilder("progress-indicator-circular")
|
|
.AddClass("progress-indicator-circular--with-adornment", Adornment == Adornment.End)
|
|
.Build();
|
|
}
|
|
|
|
public async Task SelectOption(T value)
|
|
{
|
|
await SetValueAsync(value);
|
|
|
|
if (_items is not null)
|
|
_selectedListItemIndex = Array.IndexOf(_items, value);
|
|
|
|
var optionText = GetItemString(value);
|
|
|
|
if (!_isCleared)
|
|
await SetTextAsync(optionText, false);
|
|
|
|
_timer?.Dispose();
|
|
|
|
IsOpen = false;
|
|
|
|
BeginValidate();
|
|
|
|
if (!_isCleared)
|
|
_elementReference?.SetText(optionText);
|
|
|
|
_elementReference?.FocusAsync().AndForget();
|
|
|
|
StateHasChanged();
|
|
}
|
|
/// <summary>
|
|
/// Toggle the menu (if not disabled or not readonly, and is opened).
|
|
/// </summary>
|
|
public async Task ToggleMenu()
|
|
{
|
|
if ((Disabled || ReadOnly) && !IsOpen)
|
|
return;
|
|
|
|
await ChangeMenu(!IsOpen);
|
|
}
|
|
|
|
private async Task ChangeMenu(bool open)
|
|
{
|
|
if (open)
|
|
{
|
|
if (SelectOnClick)
|
|
await _elementReference.SelectAsync();
|
|
|
|
await OnSearchAsync();
|
|
}
|
|
else
|
|
{
|
|
_timer?.Dispose();
|
|
|
|
RestoreScrollPosition();
|
|
|
|
await CoerceTextToValue();
|
|
|
|
IsOpen = false;
|
|
|
|
StateHasChanged();
|
|
}
|
|
}
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
var text = GetItemString(Value);
|
|
|
|
if (!string.IsNullOrWhiteSpace(text))
|
|
Text = text;
|
|
}
|
|
|
|
protected override void OnAfterRender(bool firstRender)
|
|
{
|
|
_isCleared = false;
|
|
|
|
base.OnAfterRender(firstRender);
|
|
}
|
|
|
|
protected override Task UpdateTextPropertyAsync(bool updateValue)
|
|
{
|
|
_timer?.Dispose();
|
|
// This keeps the text from being set when clear() was called
|
|
if (_isCleared)
|
|
return Task.CompletedTask;
|
|
|
|
return base.UpdateTextPropertyAsync(updateValue);
|
|
}
|
|
|
|
protected override async Task UpdateValuePropertyAsync(bool updateText)
|
|
{
|
|
_timer?.Dispose();
|
|
|
|
if (ResetValueOnEmptyText && string.IsNullOrWhiteSpace(Text))
|
|
await SetValueAsync(default, updateText);
|
|
|
|
if (DebounceInterval <= 0)
|
|
await OnSearchAsync();
|
|
else
|
|
_timer = new Timer(OnTimerComplete, null, DebounceInterval, Timeout.Infinite);
|
|
}
|
|
|
|
private void OnTimerComplete(object stateInfo)
|
|
{
|
|
InvokeAsync(OnSearchAsync);
|
|
}
|
|
private void CancelToken()
|
|
{
|
|
try
|
|
{
|
|
_cancellationTokenSrc?.Cancel();
|
|
}
|
|
catch
|
|
{
|
|
}
|
|
|
|
_cancellationTokenSrc = new CancellationTokenSource();
|
|
}
|
|
/// <remarks>
|
|
/// This async method needs to return a task and be awaited in order for
|
|
/// unit tests that trigger this method to work correctly.
|
|
/// </remarks>
|
|
private async Task OnSearchAsync()
|
|
{
|
|
if (MinCharacters > 0 && (string.IsNullOrWhiteSpace(Text) || Text.Length < MinCharacters))
|
|
{
|
|
IsOpen = false;
|
|
StateHasChanged();
|
|
return;
|
|
}
|
|
|
|
IEnumerable<T> searchedItems = Array.Empty<T>();
|
|
CancelToken();
|
|
|
|
try
|
|
{
|
|
if (ProgressIndicatorInPopoverTemplate is not null)
|
|
IsOpen = true;
|
|
|
|
var searchTask = SearchFuncWithCancel is not null ? SearchFuncWithCancel(Text, _cancellationTokenSrc.Token) : SearchFunc(Text);
|
|
|
|
_currentSearchTask = searchTask;
|
|
|
|
StateHasChanged();
|
|
|
|
searchedItems = await searchTask ?? Array.Empty<T>();
|
|
}
|
|
catch (TaskCanceledException)
|
|
{
|
|
}
|
|
catch (OperationCanceledException)
|
|
{
|
|
}
|
|
catch (Exception e)
|
|
{
|
|
Console.WriteLine($"The search function failed to return results: {e.Message}");
|
|
}
|
|
|
|
_itemsReturned = searchedItems.Count();
|
|
|
|
if (MaxItems.HasValue)
|
|
searchedItems = searchedItems.Take(MaxItems.Value);
|
|
|
|
_items = searchedItems.ToArray();
|
|
_enabledItemIndices = _items.Select((item, idx) => (item, idx)).Where(tuple => ItemDisabledFunc?.Invoke(tuple.item) != true).Select(tuple => tuple.idx).ToList();
|
|
_selectedListItemIndex = _enabledItemIndices.Any() ? _enabledItemIndices.First() : -1;
|
|
|
|
IsOpen = true;
|
|
|
|
if (_items?.Length == 0)
|
|
{
|
|
await CoerceValueToText();
|
|
|
|
StateHasChanged();
|
|
|
|
return;
|
|
}
|
|
|
|
StateHasChanged();
|
|
}
|
|
|
|
/// <summary>
|
|
/// Clears the autocomplete's text
|
|
/// </summary>
|
|
public async Task Clear()
|
|
{
|
|
_isCleared = true;
|
|
IsOpen = false;
|
|
|
|
await SetTextAsync(string.Empty, updateValue: false);
|
|
await CoerceValueToText();
|
|
|
|
if (_elementReference is not null)
|
|
await _elementReference.SetText(string.Empty);
|
|
|
|
_timer?.Dispose();
|
|
|
|
StateHasChanged();
|
|
}
|
|
|
|
protected override async void ResetValue()
|
|
{
|
|
await Clear();
|
|
base.ResetValue();
|
|
}
|
|
|
|
private string GetItemString(T item)
|
|
{
|
|
if (item is null)
|
|
return string.Empty;
|
|
try
|
|
{
|
|
return Converter.Convert(item);
|
|
}
|
|
catch (NullReferenceException) { }
|
|
|
|
return "null";
|
|
}
|
|
|
|
internal virtual async Task OnInputKeyDown(KeyboardEventArgs args)
|
|
{
|
|
switch (args.Key)
|
|
{
|
|
case "Tab":
|
|
// NOTE: We need to catch Tab in Keydown because a tab will move focus to the next element and thus
|
|
// in OnInputKeyUp we'd never get the tab key
|
|
if (!IsOpen)
|
|
return;
|
|
if (SelectValueOnTab)
|
|
await OnEnterKey();
|
|
else
|
|
IsOpen = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
internal virtual async Task OnInputKeyUp(KeyboardEventArgs args)
|
|
{
|
|
switch (args.Key)
|
|
{
|
|
case "Enter":
|
|
case "NumpadEnter":
|
|
if (!IsOpen)
|
|
await ToggleMenu();
|
|
else
|
|
await OnEnterKey();
|
|
|
|
break;
|
|
case "ArrowDown":
|
|
if (!IsOpen)
|
|
await ToggleMenu();
|
|
else
|
|
{
|
|
var increment = _enabledItemIndices.ElementAtOrDefault(_enabledItemIndices.IndexOf(_selectedListItemIndex) + 1) - _selectedListItemIndex;
|
|
|
|
await SelectNextItem(increment < 0 ? 1 : increment);
|
|
}
|
|
|
|
break;
|
|
case "ArrowUp":
|
|
if (args.AltKey)
|
|
await ChangeMenu(false);
|
|
else if (!IsOpen)
|
|
await ToggleMenu();
|
|
else
|
|
{
|
|
var decrement = _selectedListItemIndex - _enabledItemIndices.ElementAtOrDefault(_enabledItemIndices.IndexOf(_selectedListItemIndex) - 1);
|
|
await SelectNextItem(-(decrement < 0 ? 1 : decrement));
|
|
}
|
|
|
|
break;
|
|
case "Escape":
|
|
await ChangeMenu(false);
|
|
|
|
break;
|
|
case "Tab":
|
|
await Task.Delay(1);
|
|
|
|
if (!IsOpen)
|
|
return;
|
|
|
|
if (SelectValueOnTab)
|
|
await OnEnterKey();
|
|
else
|
|
await ToggleMenu();
|
|
|
|
break;
|
|
case "Backspace":
|
|
if (args.CtrlKey && args.ShiftKey)
|
|
Reset();
|
|
break;
|
|
}
|
|
|
|
base.InvokeKeyUp(args);
|
|
}
|
|
|
|
private ValueTask SelectNextItem(int increment)
|
|
{
|
|
if (increment == 0 || _items is null || !_items.Any() || !_enabledItemIndices.Any())
|
|
return ValueTask.CompletedTask;
|
|
// if we are at the end, or the beginning we just do an rollover
|
|
_selectedListItemIndex = Math.Clamp(value: (10 * _items.Length + _selectedListItemIndex + increment) % _items.Length, min: 0, max: _items.Length - 1);
|
|
|
|
return ScrollToListItem(_selectedListItemIndex);
|
|
}
|
|
/// <summary>
|
|
/// Scroll to a specific item index in the Autocomplete list of items.
|
|
/// </summary>
|
|
/// <param name="index">the index to scroll to</param>
|
|
public ValueTask ScrollToListItem(int index)
|
|
{
|
|
var id = GetListItemId(index);
|
|
//id of the scrolled element
|
|
return ScrollManager.ScrollToListItemAsync(id);
|
|
}
|
|
/*
|
|
* This restores the scroll position after closing the menu and element being 0
|
|
*/
|
|
private void RestoreScrollPosition()
|
|
{
|
|
if (_selectedListItemIndex != 0)
|
|
return;
|
|
|
|
ScrollManager.ScrollToListItemAsync(GetListItemId(0));
|
|
}
|
|
|
|
private string GetListItemId(in int index)
|
|
{
|
|
return $"{_componentId}_item{index}";
|
|
}
|
|
|
|
internal Task OnEnterKey()
|
|
{
|
|
if (!IsOpen)
|
|
return Task.CompletedTask;
|
|
|
|
if (_items is null || !_items.Any())
|
|
return Task.CompletedTask;
|
|
|
|
if (_selectedListItemIndex >= 0 && _selectedListItemIndex < _items.Length)
|
|
return SelectOption(_items[_selectedListItemIndex]);
|
|
|
|
return Task.CompletedTask;
|
|
}
|
|
|
|
private Task OnInputBlurred(FocusEventArgs args)
|
|
{
|
|
OnBlur.InvokeAsync(args);
|
|
|
|
return Task.CompletedTask;
|
|
// we should not validate on blur in autocomplete, because the user needs to click out of the input to select a value,
|
|
// resulting in a premature validation. thus, don't call base
|
|
//base.OnBlurred(args);
|
|
}
|
|
|
|
private Task CoerceTextToValue()
|
|
{
|
|
if (!CoerceText)
|
|
return Task.CompletedTask;
|
|
|
|
_timer?.Dispose();
|
|
|
|
var text = Value is null ? null : GetItemString(Value);
|
|
/*
|
|
* Don't update the value to prevent the popover from opening again after coercion
|
|
*/
|
|
if (text != Text)
|
|
return SetTextAsync(text, updateValue: false);
|
|
|
|
return Task.CompletedTask;
|
|
}
|
|
|
|
private Task CoerceValueToText()
|
|
{
|
|
if (!CoerceValue)
|
|
return Task.CompletedTask;
|
|
|
|
_timer?.Dispose();
|
|
|
|
var value = Converter.ConvertBack(Text);
|
|
|
|
return SetValueAsync(value, updateText: false);
|
|
}
|
|
|
|
protected override void Dispose(bool disposing)
|
|
{
|
|
_timer?.Dispose();
|
|
|
|
if (_cancellationTokenSrc is not null)
|
|
{
|
|
try
|
|
{
|
|
_cancellationTokenSrc.Dispose();
|
|
}
|
|
catch { }
|
|
}
|
|
|
|
base.Dispose(disposing);
|
|
}
|
|
/// <summary>
|
|
/// Focus the input in the Autocomplete component.
|
|
/// </summary>
|
|
public override ValueTask FocusAsync()
|
|
{
|
|
return _elementReference.FocusAsync();
|
|
}
|
|
/// <summary>
|
|
/// Blur from the input in the Autocomplete component.
|
|
/// </summary>
|
|
public override ValueTask BlurAsync()
|
|
{
|
|
return _elementReference.BlurAsync();
|
|
}
|
|
|
|
/// <summary>
|
|
/// Select all text within the Autocomplete input.
|
|
/// </summary>
|
|
public override ValueTask SelectAsync()
|
|
{
|
|
return _elementReference.SelectAsync();
|
|
}
|
|
|
|
/// <summary>
|
|
/// Select all text within the Autocomplete input and aligns its start and end points to the text content of the current input.
|
|
/// </summary>
|
|
public override ValueTask SelectRangeAsync(int pos1, int pos2)
|
|
{
|
|
return _elementReference.SelectRangeAsync(pos1, pos2);
|
|
}
|
|
|
|
private async Task OnTextChanged(string text)
|
|
{
|
|
await TextChanged.InvokeAsync();
|
|
|
|
if (text is null)
|
|
return;
|
|
|
|
await SetTextAsync(text, true);
|
|
}
|
|
|
|
private async Task ListItemOnClick(T item)
|
|
{
|
|
await SelectOption(item);
|
|
}
|
|
}
|