Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[HxSearchBox] [HxAutoauggest] [HxInputTags] Keyboard navigation #348 #351

Merged
merged 17 commits into from Sep 7, 2022
Merged

[HxSearchBox] [HxAutoauggest] [HxInputTags] Keyboard navigation #348 #351

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c206025
[HxSearchBox] Keyboard navigation #348
Harvey1214 Sep 2, 2022
7cdcf99
Move KeybaordNavigation to a dedicated region #348
Harvey1214 Sep 5, 2022
8f5179a
[HxSearchBox} Keyboard navigation adjustments + HightLightFirstSugges…
Harvey1214 Sep 5, 2022
b30e64f
[HxAutosuggest] Keyboard navigation #348
Harvey1214 Sep 5, 2022
e5deed9
HxAuosuggest internals refactoring
hakenr Sep 6, 2022
bbc360e
HxAutosuggest & derived components cleanup - HxXyInternal components …
hakenr Sep 6, 2022
beb567d
HxAutosuggest + related refactoring + doc updates
hakenr Sep 6, 2022
a4970bf
Merge branch 'master' into feature/HxSearchBoxKeyboardNavigation
hakenr Sep 6, 2022
0eb3549
#361 [HxAutosuggest] Remove the HighlightFirstSuggestion parameter
hakenr Sep 6, 2022
d485410
[HxInputTags] Keyboard navigation + [HxSearchBox] [HxAutosuggest] fix…
Harvey1214 Sep 7, 2022
5d8588a
[HxSearchBox] Input groups + label
Harvey1214 Sep 7, 2022
50a5b70
[HxSearchBox] Set input to have focus by default
Harvey1214 Sep 7, 2022
de80823
doc - HxAutosuggest demo - removal of forgoten testing input-groups
hakenr Sep 7, 2022
c636507
doc - HxSearchBox demo - removal of forgoten testing input-groups
hakenr Sep 7, 2022
c003ec2
HxSearchBox - highlight first suggestion when AllowTextQuery="false"
hakenr Sep 7, 2022
c7f1cdf
doc - HxSearchBox - basic demo simplification
hakenr Sep 7, 2022
4deead6
HxInputTagsInternal code cleanup
hakenr Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 9 additions & 8 deletions ...onents.Web.Bootstrap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Demo.razor
View file
Open in desktop
Expand Up @@ -28,11 +28,12 @@
private string textQuery;

List<SearchBoxItem> Data { get; set; } = new()
{
new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed }
};
{
new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed },
new() { Title = "Tasks", Subtitle = "720", Icon = BootstrapIcon.ListTask }
};

private void OnItemSelected(SearchBoxItem item)
{
Expand All @@ -49,9 +50,9 @@
await Task.Delay(400); // imitate slower server API

return new()
{
Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
};
{
Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
};
}

class SearchBoxItem
Expand Down
31 changes: 20 additions & 11 deletions ...r.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions ...uggests/Internal/HxAutosuggestInput.razor → ...Internal/HxAutosuggestInputInternal.razor
View file
Open in desktop
Expand Up @@ -10,10 +10,10 @@
data-bs-offset="@($"{DropdownOffset.Skidding},{DropdownOffset.Distance}")"
value="@Value"
@oninput="HandleInput"
@onkeydown="HandleKeyDown"
@onfocus="OnInputFocus"
@onblur="OnInputBlur"
@onmousedown="OnInputMouseDown"
@onkeydown="OnKeyDown"
@onfocus="OnFocus"
@onblur="OnBlur"
@onmousedown="OnMouseDown"
@onclick:stopPropagation
placeholder="@Placeholder"
onfocusin="this.select()"
Expand Down
22 changes: 7 additions & 15 deletions ...ests/Internal/HxAutosuggestInput.razor.cs → ...ernal/HxAutosuggestInputInternal.razor.cs
View file
Open in desktop
@@ -1,20 +1,20 @@
namespace Havit.Blazor.Components.Web.Bootstrap.Internal
{
public partial class HxAutosuggestInput
public partial class HxAutosuggestInputInternal
{
[Parameter] public string Value { get; set; }

[Parameter] public string Placeholder { get; set; }

[Parameter] public EventCallback<string> OnInputInput { get; set; }
[Parameter] public EventCallback<string> OnInput { get; set; }

[Parameter] public EventCallback OnInputFocus { get; set; }
[Parameter] public EventCallback OnFocus { get; set; }

[Parameter] public EventCallback OnInputBlur { get; set; }
[Parameter] public EventCallback OnBlur { get; set; }

[Parameter] public EventCallback OnInputMouseDown { get; set; }
[Parameter] public EventCallback OnMouseDown { get; set; }

[Parameter] public EventCallback OnEnter { get; set; }
[Parameter] public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }

[Parameter] public string InputId { get; set; }

Expand All @@ -37,15 +37,7 @@ public partial class HxAutosuggestInput

private async Task HandleInput(ChangeEventArgs changeEventArgs)
{
await OnInputInput.InvokeAsync((string)changeEventArgs.Value);
}

private async Task HandleKeyDown(KeyboardEventArgs keyboardEventArgs)
{
if ((keyboardEventArgs.Code == "Enter") || (keyboardEventArgs.Code == "NumpadEnter"))
{
await OnEnter.InvokeAsync();
}
await OnInput.InvokeAsync((string)changeEventArgs.Value);
}

public async ValueTask FocusAsync()
Expand Down
0 ...sts/Internal/HxAutosuggestInput.razor.css → ...rnal/HxAutosuggestInputInternal.razor.css
View file
Open in desktop
File renamed without changes.
140 changes: 73 additions & 67 deletions ...t.Blazor.Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInternal.razor
View file
Open in desktop
Expand Up @@ -3,74 +3,80 @@
@typeparam TValue

<div id="@dropdownId" class="@CssClassHelper.Combine("hx-autosuggest dropdown", (LabelTypeEffective == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating) ? "form-floating" : null, HasInputGroupsEffective ? "input-group" : null, InputGroupCssClass)">
@if (InputGroupStartText is not null)
{
<span class="input-group-text">@InputGroupStartText</span>
}

@InputGroupStartTemplate

<HxAutosuggestInput @ref="autosuggestInput"
InputId="@InputId"
EnabledEffective="@EnabledEffective"
Value="@userInput"
OnInputInput="HandleInputInput"
OnInputFocus="HandleInputFocus"
OnInputBlur="HandleInputBlur"
OnEnter="HandleInputEnterKeyDown"
Placeholder="@Placeholder"
CssClass="@((!HasAnyInputGroupEnd ? "rounded-end " : null) + InputCssClass)"
DropdownOffset="@DropdownOffset"
AdditionalAttributes="this.AdditionalAttributes" />
@if (InputGroupStartText is not null)
{
<span class="input-group-text">@InputGroupStartText</span>
}

@InputGroupEndTemplate
@InputGroupStartTemplate

@if (InputGroupEndText is not null)
{
<span class="input-group-text rounded-end">@InputGroupEndText</span>
}
<HxAutosuggestInputInternal @ref="autosuggestInput"
InputId="@InputId"
EnabledEffective="@EnabledEffective"
Value="@userInput"
OnInput="HandleInputInput"
OnFocus="HandleInputFocus"
OnBlur="HandleInputBlur"
OnKeyDown="HandleInputKeyDown"
Placeholder="@Placeholder"
CssClass="@((!HasAnyInputGroupEnd ? "rounded-end " : null) + InputCssClass)"
DropdownOffset="@DropdownOffset"
AdditionalAttributes="this.AdditionalAttributes" />

@if (LabelTypeEffective == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating)
{
<HxFormValueComponentRenderer_Label FormValueComponent="@FormValueComponent" />
}
@if (EnabledEffective)
{
<div class="@CssClassHelper.Combine("hx-autosuggest-input-icon", HasAnyInputGroupEnd ? "d-none" : null)">
@if (dataProviderInProgress)
{
<div>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</div>
}
else if (!EqualityComparer<TValue>.Default.Equals(Value, default))
{
if (this.ClearIconEffective is not null)
{
<div role="button" @onclick="HandleCrossClick" @onclick:stopPropagation>
<HxIcon Icon="ClearIconEffective" />
</div>
}
}
else if (this.SearchIconEffective is not null)
{
<HxIcon Icon="@SearchIconEffective" />
}
</div>
<HxAutosuggestItems CssClass="w-100" TItem="TItem" Items="@suggestions" OnItemClick="HandleItemClick" HighlightFirstSuggestionEffective="HighlightFirstSuggestionEffective">
<ItemTemplate>
@if (ItemTemplate != null)
{
<text>@ItemTemplate(context)</text>
}
else
{
<text>@TextSelectorEffective(context)</text>
}
</ItemTemplate>
<EmptyTemplate>
@EmptyTemplate
</EmptyTemplate>
</HxAutosuggestItems>
}
@InputGroupEndTemplate

@if (InputGroupEndText is not null)
{
<span class="input-group-text rounded-end">@InputGroupEndText</span>
}

@if (LabelTypeEffective == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating)
{
<HxFormValueComponentRenderer_Label FormValueComponent="@FormValueComponent" />
}
@if (EnabledEffective)
{
<div class="@CssClassHelper.Combine("hx-autosuggest-input-icon", HasAnyInputGroupEnd ? "d-none" : null)">
@if (dataProviderInProgress)
{
<div>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</div>
}
else if (!EqualityComparer<TValue>.Default.Equals(Value, default))
{
if (this.ClearIconEffective is not null)
{
<div role="button" @onclick="HandleCrossClick" @onclick:stopPropagation>
<HxIcon Icon="ClearIconEffective" />
</div>
}
}
else if (this.SearchIconEffective is not null)
{
<HxIcon Icon="@SearchIconEffective" />
}
</div>
<HxAutosuggestItemsInternal CssClass="w-100"
TItem="TItem"
Items="@suggestions"
OnItemClick="HandleItemSelected"
FocusedItem="GetFocusedItem()">

<ItemTemplate>
@if (ItemTemplate != null)
{
<text>@ItemTemplate(context)</text>
}
else
{
<text>@TextSelectorEffective(context)</text>
}
</ItemTemplate>
<EmptyTemplate>
@EmptyTemplate
</EmptyTemplate>

</HxAutosuggestItemsInternal>
}
</div>