Skip to content

Add AfterBindValue to FluentInputBase (Fixes #472) #473

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

Merged
vnbaaij merged 2 commits into from
Jun 22, 2023
Merged

Add AfterBindValue to FluentInputBase (Fixes #472) #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24ae704
Add AfterBindValue to FluentInputBase (Fixes #472)
mrpmorris Jun 21, 2023
68e55cd
Update docs to explain AfterBindValue is akin to @bind-Value:after
mrpmorris Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml
View file
Open in desktop

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

11 changes: 4 additions & 7 deletions examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
@*<PropertyColumn Property="@(c => c.Name)" InitialSortDirection=SortDirection.Descending Sortable="true" Comparer="@StringLengthComparer.Instance">
<ColumnOptions>
<div class="search-box">
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onchange="HandleClear" Placeholder="Country name..." />
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
</div>
</ColumnOptions>
</PropertyColumn>*@
<TemplateColumn Title="Name" InitialSortDirection=SortDirection.Descending SortBy="@nameSort" IsDefaultSortColumn=true>
<ColumnOptions>
<div class="search-box">
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onchange="HandleClear" Placeholder="Country name..." />
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
</div>
</ColumnOptions>
<ChildContent>
Expand Down Expand Up @@ -60,12 +60,9 @@
}
}

private void HandleClear(ChangeEventArgs args)
private void HandleClear(string? value)
{
if (args is not null && string.IsNullOrWhiteSpace(args.Value?.ToString()))
{
nameFilter = string.Empty;
}
nameFilter = value ?? string.Empty;
}

public class StringLengthComparer : IComparer<string>
Expand Down
9 changes: 3 additions & 6 deletions examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridTypical.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<PropertyColumn Property="@(c => c.Name)" Sortable="true">
<ColumnOptions>
<div class="search-box">
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onchange="HandleClear" Placeholder="Country name..." />
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
</div>
</ColumnOptions>
</PropertyColumn>
Expand Down Expand Up @@ -47,11 +47,8 @@
}
}

private void HandleClear(ChangeEventArgs args)
private void HandleClear(string? value)
{
if (args is not null && string.IsNullOrWhiteSpace(args.Value?.ToString()))
{
nameFilter = string.Empty;
}
nameFilter = value ?? string.Empty;
}
}
2 changes: 1 addition & 1 deletion examples/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<p>
<div class="form-grid">
<div id="item-0">
<FluentSearch Style="width: 100%" Name="Searchterm" @bind-Value="Form.Searchterm" @onchange=@(x => HandleSearchField(x)) Placeholder="Part of icon name..."></FluentSearch>
<FluentSearch Style="width: 100%" Name="Searchterm" @bind-Value="Form.Searchterm" AfterBindValue="HandleSearchField" Placeholder="Part of icon name..."></FluentSearch>
</div>
<div id="item-1">
@if (IconService.Configuration.Variants.Contains(IconVariant.Filled))
Expand Down
4 changes: 2 additions & 2 deletions examples/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ public void HandleColor(ChangeEventArgs args)
HandleSearch();
}

public void HandleSearchField(ChangeEventArgs args)
public void HandleSearchField(string value)
{
Form.Searchterm = (string?)args.Value;
Form.Searchterm = value;

HandleSearch();
}
Expand Down
19 changes: 9 additions & 10 deletions examples/FluentUI.Demo.Shared/Pages/Search/Examples/SearchInteractive.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<FluentSearch @ref=searchTest
@oninput=handleSearchInput
@onchange=handleSearchInput
@bind-Value="@searchValue"
AfterBindValue=HandleSearchInput
Placeholder="Search for State" />
<br />
<FluentListbox Items=@searchResults TOption="string" SelectedOptionChanged="@(e => searchValue = (e != defaultResultsText ? e : string.Empty) )" />
Expand Down Expand Up @@ -76,11 +75,16 @@
return new() { defaultResultsText };
}

void handleSearchInput(ChangeEventArgs args)
void HandleSearchInput(string? value)
{
if (args is not null && ! string.IsNullOrWhiteSpace(args.Value?.ToString()))
if (string.IsNullOrWhiteSpace(value))
{
string searchTerm = args.Value.ToString()!.ToLower();
searchResults = defaultResults();
searchValue = string.Empty;
}
else
{
string searchTerm = value.ToLower();

if (searchTerm.Length > 0)
{
Expand All @@ -91,10 +95,5 @@
}
}
}
else
{
searchResults = defaultResults();
searchValue = string.Empty;
}
}
}
28 changes: 14 additions & 14 deletions examples/FluentUI.Demo.Shared/Pages/Search/Examples/SearchInteractiveWithDebounce.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@using System.Timers;

<FluentSearch @ref=searchTest
@bind-Value="SearchValue"
@oninput="@(e => SearchValue = e.Value?.ToString())"
@onchange="HandleClear"
@bind-Value="SearchValue"
@oninput="@(e => SearchValue = e.Value?.ToString())"
AfterBindValue="HandleClear"
Placeholder="Search for name" />
<br />
<FluentListbox Items=@searchResults TOption="string" SelectedOptionChanged="@(e => SearchValue = (e != defaultResultsText ? e : string.Empty))" />
Expand Down Expand Up @@ -64,7 +64,7 @@

private async Task OnSearchAsync()
{
if (!string.IsNullOrWhiteSpace(SearchValue))
if (!string.IsNullOrWhiteSpace(SearchValue))
{
string searchTerm = SearchValue.ToLower();

Expand All @@ -83,21 +83,21 @@
else
{
searchResults = defaultResults();
await InvokeAsync(StateHasChanged);
await InvokeAsync(StateHasChanged);
}
}

private void HandleClear(ChangeEventArgs args)
private void HandleClear(string value)
{
if (args is not null && string.IsNullOrWhiteSpace(args.Value?.ToString()))
{
DisposeTimer();
searchResults = defaultResults();
SearchValue = string.Empty;
StateHasChanged();
}
if (string.IsNullOrWhiteSpace(value))
return;

DisposeTimer();
searchResults = defaultResults();
SearchValue = string.Empty;
StateHasChanged();
}

//This component is made for a lot of data. You can copy and paste a list with 6000 entries here https://sharetext.me/vfknowohwl"
private List<string> searchData = new()
{
Expand Down
6 changes: 3 additions & 3 deletions examples/FluentUI.Demo.Shared/Shared/DemoMainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,16 @@
TOption="OfficeColor"
Position="SelectPosition.Below"
@bind-SelectedOption="@_selectedColorOption"
@onchange="@(x => HandleColorChange(x))"
@onchange="@(x => HandleColorChange((OfficeColor?)x.Value))"
aria-label="Accent color selector"/>
</div>
<div class="switches">
<FluentSwitch @bind-Value="@_inDarkMode" @onchange=SwitchTheme title="Switch theme">
<FluentSwitch @bind-Value="@_inDarkMode" AfterBindValue="UpdateTheme" title="Switch theme">
<span class="label">Theme</span>
<span slot="unchecked-message">light</span>
<span slot="checked-message">dark</span>
</FluentSwitch>
<FluentSwitch @bind-Value="@_ltr" @onchange="SwitchDirection" title="Switch direction">
<FluentSwitch @bind-Value="@_ltr" AfterBindValue="UpdateDirection" title="Switch direction">
<span>Direction</span>
<span slot="unchecked-message">LTR</span>
<span slot="checked-message">RTL</span>
Expand Down
38 changes: 20 additions & 18 deletions examples/FluentUI.Demo.Shared/Shared/DemoMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
"./_content/FluentUI.Demo.Shared/Shared/DemoMainLayout.razor.js");

_inDarkMode = await _jsModule!.InvokeAsync<bool>("isDarkMode");
if (_inDarkMode)
UpdateTheme();

_mobile = await _jsModule!.InvokeAsync<bool>("isDevice");

if (_selectedColorOption != OfficeColor.Default)
Expand All @@ -91,20 +94,18 @@ private async Task RefreshTableOfContents()
await _toc!.Refresh();
}

public async Task SwitchDirection()
public async Task UpdateDirection()
{
dir = (dir == LocalizationDirection.rtl) ? LocalizationDirection.ltr : LocalizationDirection.rtl;
dir = _ltr ? LocalizationDirection.ltr : LocalizationDirection.rtl;

GlobalState.SetDirection(dir);

await _jsModule!.InvokeVoidAsync("switchDirection", dir.ToString());
await Direction.SetValueFor(container, dir.ToAttributeValue());
}

public async void SwitchTheme()
public async void UpdateTheme()
{
await Task.Delay(50);

if (_inDarkMode)
baseLayerLuminance = StandardLuminance.DarkMode;
else
Expand All @@ -122,21 +123,22 @@ private void HandleChecked()
menuchecked = !menuchecked;
}

private async void HandleColorChange(ChangeEventArgs args)
private async void HandleColorChange(OfficeColor? value)
{
string? value = args.Value?.ToString();
if (!string.IsNullOrEmpty(value))
string? textValue = value?.ToString();

if (string.IsNullOrEmpty(textValue))
return;

if (textValue != "default")
{
if (value != "default")
{
//_selectValue = value;
await AccentBaseColor.SetValueFor(container, value.ToSwatch());
}
else
{
//_selectValue = "default";
await AccentBaseColor.DeleteValueFor(container);
}
//_selectValue = value;
await AccentBaseColor.SetValueFor(container, textValue.ToSwatch());
}
else
{
//_selectValue = "default";
await AccentBaseColor.DeleteValueFor(container);
}
}

Expand Down
11 changes: 4 additions & 7 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridCustomComparer.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
@*<PropertyColumn Property="@(c => c.Name)" InitialSortDirection=SortDirection.Descending Sortable="true" Comparer="@StringLengthComparer.Instance">
<ColumnOptions>
<div class="search-box">
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onchange="HandleClear" Placeholder="Country name..." />
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
</div>
</ColumnOptions>
</PropertyColumn>*@
<TemplateColumn Title="Name" InitialSortDirection=SortDirection.Descending SortBy="@nameSort" IsDefaultSortColumn=true>
<ColumnOptions>
<div class="search-box">
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onchange="HandleClear" Placeholder="Country name..." />
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
</div>
</ColumnOptions>
<ChildContent>
Expand Down Expand Up @@ -60,12 +60,9 @@
}
}

private void HandleClear(ChangeEventArgs args)
private void HandleClear(string? value)
{
if (args is not null && string.IsNullOrWhiteSpace(args.Value?.ToString()))
{
nameFilter = string.Empty;
}
nameFilter = value ?? string.Empty;
}

public class StringLengthComparer : IComparer<string>
Expand Down
9 changes: 3 additions & 6 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridTypical.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<PropertyColumn Property="@(c => c.Name)" Sortable="true">
<ColumnOptions>
<div class="search-box">
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onchange="HandleClear" Placeholder="Country name..." />
<FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
</div>
</ColumnOptions>
</PropertyColumn>
Expand Down Expand Up @@ -47,11 +47,8 @@
}
}

private void HandleClear(ChangeEventArgs args)
private void HandleClear(string? value)
{
if (args is not null && string.IsNullOrWhiteSpace(args.Value?.ToString()))
{
nameFilter = string.Empty;
}
nameFilter = value ?? string.Empty;
}
}
19 changes: 9 additions & 10 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/SearchInteractive.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<FluentSearch @ref=searchTest
@oninput=handleSearchInput
@onchange=handleSearchInput
@bind-Value="@searchValue"
AfterBindValue=HandleSearchInput
Placeholder="Search for State" />
<br />
<FluentListbox Items=@searchResults TOption="string" SelectedOptionChanged="@(e => searchValue = (e != defaultResultsText ? e : string.Empty) )" />
Expand Down Expand Up @@ -76,11 +75,16 @@
return new() { defaultResultsText };
}

void handleSearchInput(ChangeEventArgs args)
void HandleSearchInput(string? value)
{
if (args is not null && ! string.IsNullOrWhiteSpace(args.Value?.ToString()))
if (string.IsNullOrWhiteSpace(value))
{
string searchTerm = args.Value.ToString()!.ToLower();
searchResults = defaultResults();
searchValue = string.Empty;
}
else
{
string searchTerm = value.ToLower();

if (searchTerm.Length > 0)
{
Expand All @@ -91,10 +95,5 @@
}
}
}
else
{
searchResults = defaultResults();
searchValue = string.Empty;
}
}
}
Loading