Fix Icon Button for cases where command also toggles icon

Ensure that always the correct icon will be used when not overwritten by progress
b-straub · Jul 7, 2024 · cf096c4 · cf096c4
1 parent c60b41a
commit cf096c4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/RxMudBlazorLight/ButtonBase/ButtonBaseRx.cs b/RxMudBlazorLight/ButtonBase/ButtonBaseRx.cs
@@ -170,18 +170,23 @@ public RenderFragment RenderProgress() => builder =>
             return (startIcon, endIcon, label);
         }
 
-        public string GetIconButtonParameters(IStateCommandAsync stateCommand, string icon, MBIconVariant? iconVariant)
+        public void SetButtonIcon(string icon)
         {
+            _buttonIcon = icon;
+        }
+
+        public string GetIconButtonParameters(IStateCommandAsync stateCommand, MBIconVariant? iconVariant)
+        {
+            ArgumentNullException.ThrowIfNull(_buttonIcon);
+            var icon = _buttonIcon;
+
             if (_iconForState is IconForState.None)
             {
                 _iconForState = IconForState.Start;
-                _buttonIcon = icon;
             }
 
             if (!stateCommand.Changing() || stateCommand.ChangeCallerID != _id)
             {
-                ArgumentNullException.ThrowIfNull(_buttonIcon);
-                icon = _buttonIcon;
                 _iconForState = IconForState.None;
             }
             else

diff --git a/RxMudBlazorLight/IconButtons/MudIconButtonAsyncRx.razor b/RxMudBlazorLight/IconButtons/MudIconButtonAsyncRx.razor
@@ -44,9 +44,15 @@
     {
         ArgumentNullException.ThrowIfNull(_buttonRx);
         ArgumentNullException.ThrowIfNull(Icon);
+
+        if (!StateCommand.Changing())
+        {
+            _buttonRx.SetButtonIcon(Icon);
+        }
+
         _buttonRx.SetParameter(StateCommand, ExecuteAsyncCallback, CanChangeCallback, DeferredNotification);
 
-        Icon = _buttonRx.GetIconButtonParameters(StateCommand, Icon, IconVariant);
+        Icon = _buttonRx.GetIconButtonParameters(StateCommand, IconVariant);
         Color = _buttonRx.Color;
         OnClick = (EventCallback<MouseEventArgs>)_buttonRx.OnClick;
         Disabled = _buttonRx.Disabled;

diff --git a/RxMudBlazorLightTestBase/Components/IconButtons.razor b/RxMudBlazorLightTestBase/Components/IconButtons.razor
@@ -1,9 +1,10 @@
 @inherits RxBLServiceSubscriber<TestService>
 
 <MudStack Row=@true AlignItems=@AlignItems.Center>
-    <MudIconButtonRx Color="Color.Primary" Icon="@Icons.Material.Filled.PlusOne" StateCommand=@Service.Command ExecuteCallback=@Service.IncrementCounter />
-    <MudIconButtonRx Color="Color.Primary" Icon="@Icons.Material.Filled.Add" StateCommand=@Service.Command ExecuteCallback=@(Service.AddToCounter(5)) />
-    <MudIconButtonAsyncRx Color="Color.Secondary" Icon="@Icons.Material.Filled.PlusOne" StateCommand=@Service.CommandAsync ExecuteAsyncCallback=@Service.IncrementCounterAsync CanChangeCallback=@(Service.CounterCanChangeLowerBound(4)) />
+    <MudIconButtonRx Color="Color.Primary" Icon="@Icons.Material.Filled.PlusOne" StateCommand=@Service.Command ExecuteCallback=@Service.IncrementCounter/>
+    <MudIconButtonRx Color="Color.Primary" Icon="@Icons.Material.Filled.Add" StateCommand=@Service.Command ExecuteCallback=@(Service.AddToCounter(5))/>
+    <MudIconButtonAsyncRx Color="Color.Secondary" Icon="@Icons.Material.Filled.PlusOne" StateCommand=@Service.CommandAsync ExecuteAsyncCallback=@Service.IncrementCounterAsync CanChangeCallback=@(Service.CounterCanChangeLowerBound(4))/>
+    <MudIconButtonAsyncRx Color="Color.Secondary" Icon=@GetAddModeIcon() StateCommand=@Service.CommandAsync ExecuteAsyncCallback=@Service.ToggleAddModeDelayedAsync />
 </MudStack>
 
 <MudStack>
@@ -12,13 +13,19 @@
     </MudStack>
 
     <MudStack Row=@true AlignItems=@AlignItems.Center>
-        <MudIconButtonRx Color="Color.Secondary" Variant=@Variant.Filled Icon="@Icons.Material.Filled.Add" StateCommand=@Scope.Command ExecuteCallback=@(TestService.IncrementCounterIndirect(Scope.Counter, v => Scope.Counter = v)) />
-        <MudIconButtonAsyncRx Color="Color.Secondary" Variant=@Variant.Filled Icon="@Icons.Material.Filled.Add" StateCommand=@Scope.CommandAsync ExecuteAsyncCallback=@Scope.IncrementCounterAsync />
-        <MudIconButtonAsyncRx Color="Color.Secondary" Variant=@Variant.Filled Icon="@Icons.Material.Filled.Add" StateCommand=@Scope.CancellableCommandAsync ExecuteAsyncCallback=@(Scope.AddToCounterAsync(5)) />
+        <MudIconButtonRx Color="Color.Secondary" Variant=@Variant.Filled Icon="@Icons.Material.Filled.Add" StateCommand=@Scope.Command ExecuteCallback=@(TestService.IncrementCounterIndirect(Scope.Counter, v => Scope.Counter = v))/>
+        <MudIconButtonAsyncRx Color="Color.Secondary" Variant=@Variant.Filled Icon="@Icons.Material.Filled.Add" StateCommand=@Scope.CommandAsync ExecuteAsyncCallback=@Scope.IncrementCounterAsync/>
+        <MudIconButtonAsyncRx Color="Color.Secondary" Variant=@Variant.Filled Icon="@Icons.Material.Filled.Add" StateCommand=@Scope.CancellableCommandAsync ExecuteAsyncCallback=@(Scope.AddToCounterAsync(5))/>
     </MudStack>
 </MudStack>
 
 @code {
+
     [CascadingParameter]
     public required TestService.Scope Scope { get; init; }
-}
+
+    private string GetAddModeIcon()
+    {
+        return Service.AddMode.Value ? Icons.Material.Filled.ExposurePlus1 : Icons.Material.Filled.ExposureNeg1;
+    }
+}
diff --git a/RxMudBlazorLightTestBase/Service/TestService.State.cs b/RxMudBlazorLightTestBase/Service/TestService.State.cs
@@ -133,6 +133,17 @@ public bool AddModeCanChange()
         {
             return !Command.Changing() && !CommandAsync.Changing();
         }
+
+        public Func<IStateCommandAsync, Task> ToggleAddModeDelayedAsync => async _ =>
+        {
+            await Task.Delay(1000);
+            Observable.Interval(TimeSpan.FromMilliseconds(1000))
+                .Take(1)
+                .Subscribe(_ =>
+                {
+                    AddMode.Value = !AddMode.Value;
+                });
+        };
 
         public bool IncrementStateCanChangeCheck()
         {