From 31eab01145e136fe0601930393688ff2c22dfb17 Mon Sep 17 00:00:00 2001 From: Luke Vo Date: Mon, 18 Dec 2023 15:38:13 -0600 Subject: [PATCH] Added Array support for Select and Tabs' methods. --- BlazorMaterialWeb.Demo/Pages/Progress.razor | 6 ++-- BlazorMaterialWeb.Demo/Pages/Tabs.razor | 15 ++++++++++ BlazorMaterialWeb/Common/IJSArrayReference.cs | 30 +++++++++++++++++++ BlazorMaterialWeb/Extensions/JsExtensions.cs | 8 ++++- BlazorMaterialWeb/Select/MdSelect.razor.cs | 14 ++++++--- BlazorMaterialWeb/Tabs/MdTabs.razor.cs | 20 ++++++++----- pack.ps1 | 2 +- 7 files changed, 79 insertions(+), 16 deletions(-) create mode 100644 BlazorMaterialWeb/Common/IJSArrayReference.cs diff --git a/BlazorMaterialWeb.Demo/Pages/Progress.razor b/BlazorMaterialWeb.Demo/Pages/Progress.razor index b392a85..26137b7 100644 --- a/BlazorMaterialWeb.Demo/Pages/Progress.razor +++ b/BlazorMaterialWeb.Demo/Pages/Progress.razor @@ -3,9 +3,9 @@ + ComponentSourcePath="progress" + BlazorComponentSourcePath="MdProgress.razor" + BlazorDemoSourceName="Progress"> Progress indicators show the status of a process in real time diff --git a/BlazorMaterialWeb.Demo/Pages/Tabs.razor b/BlazorMaterialWeb.Demo/Pages/Tabs.razor index 128c8e5..590d102 100644 --- a/BlazorMaterialWeb.Demo/Pages/Tabs.razor +++ b/BlazorMaterialWeb.Demo/Pages/Tabs.razor @@ -98,6 +98,10 @@ Programmatically select the 3rd tabs + + + Programmatically get the 2nd tab then select it + @@ -138,4 +142,15 @@ } } + async Task GetAndSelectTab() + { + foreach (var t in tabRefs.Values) + { + var tabs = await t.GetTabsAsync(); + + var secondTab = await tabs.GetItemAsync(1); + await t.SetActiveTabAsync(secondTab); + } + } + } \ No newline at end of file diff --git a/BlazorMaterialWeb/Common/IJSArrayReference.cs b/BlazorMaterialWeb/Common/IJSArrayReference.cs new file mode 100644 index 0000000..8e0bf49 --- /dev/null +++ b/BlazorMaterialWeb/Common/IJSArrayReference.cs @@ -0,0 +1,30 @@ +namespace BlazorMaterialWeb.Common; + +public interface IJSArrayReference +{ + IJSObjectReference JSObjectReference { get; } + + Task GetItemAsync(long index); + Task GetLengthAsync(); +} + +class JSArrayReference : IJSArrayReference +{ + readonly IJSObjectReference jsRef; + readonly IJSRuntime js; + + public JSArrayReference(IJSObjectReference jsRef, IJSRuntime js) + { + this.jsRef = jsRef; + this.js = js; + } + + public IJSObjectReference JSObjectReference => jsRef; + + public async Task GetLengthAsync() => + await js.GetObjectPropertyAsync(jsRef, "length"); + + public async Task GetItemAsync(long index) => + await js.GetArrayElementAsync(jsRef, index); + +} diff --git a/BlazorMaterialWeb/Extensions/JsExtensions.cs b/BlazorMaterialWeb/Extensions/JsExtensions.cs index 2f2c096..e43f2b1 100644 --- a/BlazorMaterialWeb/Extensions/JsExtensions.cs +++ b/BlazorMaterialWeb/Extensions/JsExtensions.cs @@ -6,10 +6,16 @@ internal static class JsExtensions public static async Task GetElementPropertyAsync(this IJSRuntime js, ElementReference el, string propertyName) => await js.InvokeAsync(Prefix("getElementProperty"), el, propertyName); - + + public static async Task GetObjectPropertyAsync(this IJSRuntime js, IJSObjectReference obj, string propertyName) => + await js.InvokeAsync(Prefix("getElementProperty"), obj, propertyName); + public static async Task SetElementPropertyAsync(this IJSRuntime js, ElementReference el, string propertyName, object? value) => await js.InvokeVoidAsync(Prefix("setElementProperty"), el, propertyName, value); + public static async Task SetObjectPropertyAsync(this IJSRuntime js, IJSObjectReference obj, string propertyName, object? value) => + await js.InvokeVoidAsync(Prefix("setElementProperty"), obj, propertyName, value); + public static async Task InvokeElementMethodAsync(this IJSRuntime js, ElementReference el, string methodName, params object?[] parameters) => await js.InvokeVoidAsync( Prefix("invokeElementMethodAsync"), diff --git a/BlazorMaterialWeb/Select/MdSelect.razor.cs b/BlazorMaterialWeb/Select/MdSelect.razor.cs index 5bf2473..fed1d7f 100644 --- a/BlazorMaterialWeb/Select/MdSelect.razor.cs +++ b/BlazorMaterialWeb/Select/MdSelect.razor.cs @@ -114,11 +114,17 @@ async Task OnChangeAsync(MdSelectChangeEventArgs e) await OnChange.InvokeAsync(e); } - public async Task GetOptionsAsync() => - await Js.GetElementPropertyAsync(el, "options"); + public async Task> GetOptionsAsync() + { + var options = await Js.GetElementPropertyAsync(el, "options"); + return new JSArrayReference(options, Js); + } - public async Task GetSelectedOptionsAsync() => - await Js.GetElementPropertyAsync(el, "selectedOptions"); + public async Task> GetSelectedOptionsAsync() + { + var options = await Js.GetElementPropertyAsync(el, "selectedOptions"); + return new JSArrayReference(options, Js); + } public async Task ResetAsync() => await InvokeElAsync("reset"); diff --git a/BlazorMaterialWeb/Tabs/MdTabs.razor.cs b/BlazorMaterialWeb/Tabs/MdTabs.razor.cs index 4c8f32e..2686658 100644 --- a/BlazorMaterialWeb/Tabs/MdTabs.razor.cs +++ b/BlazorMaterialWeb/Tabs/MdTabs.razor.cs @@ -1,4 +1,6 @@ -namespace BlazorMaterialWeb; +using BlazorMaterialWeb.Common; + +namespace BlazorMaterialWeb; /// /// Tabs organize content across different screens and views. @@ -17,8 +19,12 @@ partial class MdTabs [Parameter] public EventCallback OnTabChanged { get; set; } - public async Task GetTabsAsync() => - await GetPropertyAsync("tabs"); + public async Task> GetTabsAsync() + { + var tabs = await GetPropertyAsync("tabs"); + + return new JSArrayReference(tabs, Js); + } public async Task GetActiveTabIndexAsync() => await GetPropertyAsync("activeTabIndex"); @@ -26,13 +32,13 @@ public async Task GetActiveTabIndexAsync() => public async Task SetActiveTabIndexAsync(int index) => await SetPropertyAsync("activeTabIndex", index); - public async Task GetActiveTabAsync() => - await GetPropertyAsync("activeTab"); + public async Task GetActiveTabAsync() => + await GetPropertyAsync("activeTab"); - public async Task SetActiveTabAsync(ElementReference tab) => + public async Task SetActiveTabAsync(IJSObjectReference tab) => await SetPropertyAsync("activeTab", tab); - public async Task ScrollToTabAsync(ElementReference tab) => + public async Task ScrollToTabAsync(IJSObjectReference tab) => await InvokeMethodAsync("scrollToTab", tab); } diff --git a/pack.ps1 b/pack.ps1 index 7da0405..556c40d 100644 --- a/pack.ps1 +++ b/pack.ps1 @@ -4,7 +4,7 @@ foreach($file in $files) { rm $file.FullName } -$version="--property:Version=1.0.3" +$version="--property:Version=1.1.1" dotnet pack .\BlazorMaterialWeb\BlazorMaterialWeb.csproj -c Release "--property:PackageOutputPath=.\bin\nuget" "$version" dotnet pack .\BlazorMaterialWeb.Bundled\BlazorMaterialWeb.Bundled.csproj -c Release "--property:PackageOutputPath=.\bin\nuget" "$version" \ No newline at end of file