🐛 fix(TextField): watch Outlined and Label to update the width of…

… label (#1138) * 🐛 fix(TextField): watch Outlined and Label to Update the width of label * 📝 docs: use advance usage * improve
masastack · Mar 27, 2023 · a6aff57 · a6aff57
1 parent e7651a6
commit a6aff57
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 14 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/AdvanceUsage.razor b/docs/Masa.Blazor.Docs/Examples/components/text-fields/Usage/AdvanceUsage.razor
@@ -0,0 +1,44 @@
+@namespace Masa.Blazor.Docs.Examples.components.text_fields
+
+<MTextField @bind-Value="_value"
+            Label="Label"
+            Filled="Filled"
+            Solo="Solo"
+            Outlined="Outlined"
+            PrependIcon="@PrependIcon"
+            Clearable="Clearable">
+</MTextField>
+
+@code {
+
+    [Parameter]
+    public bool Filled { get; set; }
+
+    [Parameter]
+    public bool Solo { get; set; }
+
+    [Parameter]
+    public bool Outlined { get; set; }
+
+    [Parameter]
+    public string? PrependIcon { get; set; }
+
+    [Parameter]
+    public bool Clearable
+    {
+        get => _clearable;
+        set
+        {
+            if (_clearable != value && value)
+            {
+                _value ??= "Hover to Clear me";
+            }
+
+            _clearable = value;
+        }
+    }
+
+    private string? _value;
+    private bool _clearable;
+
+}
diff --git a/...les/components/text-fields/Usage.razor.cs → ...mponents/text-fields/Usage/Usage.razor.cs b/...les/components/text-fields/Usage.razor.cs → ...mponents/text-fields/Usage/Usage.razor.cs
@@ -2,6 +2,8 @@
 
 public class Usage : Masa.Blazor.Docs.Components.Usage
 {
+    protected override string ComponentName => "MTextField";
+
     protected override ParameterList<bool> GenToggleParameters() => new()
     {
         { nameof(MTextField<string>.Outlined), false },
@@ -11,19 +13,11 @@ public class Usage : Masa.Blazor.Docs.Components.Usage
 
     protected override ParameterList<CheckboxParameter> GenCheckboxParameters() => new()
     {
-        { nameof(MTextField<string>.PrependIcon), new CheckboxParameter("false",false) },
-        { nameof(MTextField<string>.Clearable), new CheckboxParameter("false",true) },
+        { nameof(MTextField<string>.PrependIcon), new CheckboxParameter("mdi-text-box", false) },
+        { nameof(MTextField<string>.Clearable), new CheckboxParameter("false", true) },
     };
 
-    public Usage() : base(typeof(MTextField<string>))
-    {
-    }
-
-    protected override Dictionary<string, object>? GenAdditionalParameters()
+    public Usage() : base(typeof(AdvanceUsage))
     {
-        return new Dictionary<string, object>()
-        {
-            { nameof(MTextField<string>.Label), "Label" },
-        };
     }
-}
+}
diff --git a/src/Masa.Blazor/Components/TextField/MTextField.cs b/src/Masa.Blazor/Components/TextField/MTextField.cs
@@ -27,7 +27,11 @@ public partial class MTextField<TValue> : MInput<TValue>, ITextField<TValue>
         public bool FullWidth { get; set; }
 
         [Parameter]
-        public string Prefix { get; set; }
+        public string Prefix
+        {
+            get => GetValue<string>();
+            set => SetValue(value);
+        }
 
         [Parameter]
         public bool SingleLine { get; set; }
@@ -45,7 +49,11 @@ public partial class MTextField<TValue> : MInput<TValue>, ITextField<TValue>
         public bool Filled { get; set; }
 
         [Parameter]
-        public virtual bool Outlined { get; set; }
+        public virtual bool Outlined
+        {
+            get => GetValue(false);
+            set => SetValue(value);
+        }
 
         [Parameter]
         public bool Reverse { get; set; }
@@ -512,6 +520,15 @@ await JsInvokeAsync(JsInteropConstants.RegisterTextFieldOnMouseDown, InputSlotEl
             }
         }
 
+        protected override void RegisterWatchers(PropertyWatcher watcher)
+        {
+            base.RegisterWatchers(watcher);
+
+            watcher.Watch<bool>(nameof(Outlined), SetLabelWidthAsync)
+                   .Watch<string>(nameof(Label), () => NextTick(SetLabelWidthAsync))
+                   .Watch<string>(nameof(Prefix), SetPrefixWidthAsync);
+        }
+
         private async Task SetLabelWidthAsync()
         {
             if (!Outlined)