Add TextField IsError property

mdc-maui · Dec 8, 2023 · 57baa2a · 57baa2a
1 parent 8eb6421
commit 57baa2a
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 8 deletions.
diff --git a/src/Material.Components.Maui/Components/TextField/TextField.cs b/src/Material.Components.Maui/Components/TextField/TextField.cs
@@ -1,5 +1,5 @@
-using Microsoft.Maui.Animations;
-using System.ComponentModel;
+using System.ComponentModel;
+using Microsoft.Maui.Animations;
 
 namespace Material.Components.Maui;
 
@@ -23,7 +23,14 @@ protected override void ChangeVisualState()
         var state = this.ViewState switch
         {
             ViewState.Disabled => "disabled",
-            _ => this.IsFocused ? "focused" : "normal",
+            _
+                => this.IsFocused
+                    ? this.IsError
+                        ? "error_focused"
+                        : "focused"
+                    : this.IsError
+                        ? "error_normal"
+                        : "normal",
         };
 
         VisualStateManager.GoToState(this, state);
@@ -53,6 +60,23 @@ protected override void ChangeVisualState()
                 else
                     (view as IElement).OnPropertyChanged();
             }
+
+            view.TextChanged?.Invoke(view, new(ov as string, nv as string));
+            view.Command?.Execute(
+                view.CommandParameter ?? new TextChangedEventArgs(ov as string, nv as string)
+            );
+        }
+    );
+
+    public static readonly BindableProperty IsErrorProperty = BindableProperty.Create(
+        nameof(IsError),
+        typeof(bool),
+        typeof(IEditableElement),
+        default,
+        propertyChanged: (bo, ov, nv) =>
+        {
+            var view = bo as TextField;
+            view.ChangeVisualState();
         }
     );
 
@@ -108,6 +132,12 @@ public string Text
         set => this.SetValue(TextProperty, value);
     }
 
+    public bool IsError
+    {
+        get => (bool)this.GetValue(IsErrorProperty);
+        set => this.SetValue(IsErrorProperty, value);
+    }
+
     public TextRange SelectionRange
     {
         get => (TextRange)this.GetValue(SelectionRangeProperty);
@@ -132,7 +162,6 @@ public bool IsReadOnly
         set => this.SetValue(IsReadOnlyProperty, value);
     }
 
-
     [EditorBrowsable(EditorBrowsableState.Never)]
     public Thickness EditablePadding
     {
@@ -358,8 +387,10 @@ public void StartLabelTextAnimation()
             return;
         }
 
-        this.animationManager ??=
-            this.Handler.MauiContext?.Services.GetRequiredService<IAnimationManager>();
+        this.animationManager ??= this.Handler
+            .MauiContext
+            ?.Services
+            .GetRequiredService<IAnimationManager>();
         var start = 0f;
         var end = 1f;
 
@@ -411,8 +442,10 @@ protected override void StartRippleEffect()
             && y <= this.Bounds.Center.Y + 20f
         )
         {
-            this.animationManager ??=
-                this.Handler.MauiContext?.Services.GetRequiredService<IAnimationManager>();
+            this.animationManager ??= this.Handler
+                .MauiContext
+                ?.Services
+                .GetRequiredService<IAnimationManager>();
 
             this.animationManager?.Add(
                 new Microsoft.Maui.Animations.Animation(

diff --git a/src/Material.Components.Maui/Styles/TextFieldStyles.xaml b/src/Material.Components.Maui/Styles/TextFieldStyles.xaml
@@ -55,6 +55,36 @@
                             <Setter Property="FontColor" Value="{DynamicResource OnSurfaceColor}" />
                         </VisualState.Setters>
                     </VisualState>
+
+                    <VisualState x:Name="error_normal">
+                        <VisualState.Setters>
+                            <Setter Property="ActiveIndicatorHeight" Value="1" />
+                            <Setter Property="BackgroundColor" Value="{DynamicResource SurfaceContainerHighestColor}" />
+                            <Setter Property="IconColor" Value="{DynamicResource OnSurfaceVariantColor}" />
+                            <Setter Property="LabelFontColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="SupportingFontColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="TrailingIconColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="ActiveIndicatorColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="StateLayerColor" Value="{DynamicResource OnSurfaceVariantColor}" />
+                            <Setter Property="CaretColor" Value="{DynamicResource PrimaryColor}" />
+                            <Setter Property="FontColor" Value="{DynamicResource OnSurfaceColor}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="error_focused">
+                        <VisualState.Setters>
+                            <Setter Property="ActiveIndicatorHeight" Value="2" />
+                            <Setter Property="BackgroundColor" Value="{DynamicResource SurfaceContainerHighestColor}" />
+                            <Setter Property="IconColor" Value="{DynamicResource OnSurfaceVariantColor}" />
+                            <Setter Property="LabelFontColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="SupportingFontColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="TrailingIconColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="ActiveIndicatorColor" Value="{DynamicResource ErrorColor}" />
+                            <Setter Property="StateLayerColor" Value="{DynamicResource OnSurfaceVariantColor}" />
+                            <Setter Property="CaretColor" Value="{DynamicResource PrimaryColor}" />
+                            <Setter Property="FontColor" Value="{DynamicResource OnSurfaceColor}" />
+                        </VisualState.Setters>
+                    </VisualState>
+
                     <VisualState x:Name="disabled">
                         <VisualState.Setters>
                             <Setter Property="ActiveIndicatorHeight" Value="1" />