feat(module: mentions): Add ability to customize the rendering (#3178)

* feat(module: mentions): Add ability to customize the rendering of the textarea. This allows using the TextArea component if you want its extended functionality. Add tests. Update demos. * fix test * fix test --------- Co-authored-by: James Yeung <shunjiey@hotmail.com>
ant-design-blazor · Apr 8, 2023 · 9c69ef4 · 9c69ef4
1 parent ab3e3c0
commit 9c69ef4
Show file tree

Hide file tree

Showing 11 changed files with 266 additions and 52 deletions.
diff --git a/components/core/JsInterop/modules/components/mentionsHelper.ts b/components/core/JsInterop/modules/components/mentionsHelper.ts
@@ -6,8 +6,9 @@
         mentionsHelper.isPopShowFlag = show;
     }
 
-    public static setEditorKeyHandler = function (Mentions: any, textArea: HTMLTextAreaElement): void {
+    public static setEditorKeyHandler = function (Mentions: any, element: HTMLTextAreaElement): void {
 
+        var textArea = mentionsHelper.getTextarea(element);
         textArea.onkeydown = async (ev): Promise<any> => {
             //判断isPopShow不能用异步方法
             if (!mentionsHelper.isPopShowFlag) return;
@@ -27,10 +28,13 @@
     }
 
     public static getProp = function (e: HTMLElement, propName: string): any {
-        return e[propName];
+        var textArea = mentionsHelper.getTextarea(e);
+
+        return textArea[propName];
     }
 
-    public static getCursorXY = function (textArea: HTMLTextAreaElement) {
+    public static getCursorXY = function (element: HTMLElement) {
+        var textArea = mentionsHelper.getTextarea(element);
         let format = function (value) {
             value = value.replace(/<|>|`|"|&/g, '?');
             return value;
@@ -60,5 +64,17 @@
         return [left, top];
     };
 
+    private static getTextarea(element: HTMLElement) {
+        const textAreaTag = "TEXTAREA";
+        var textarea = element;
+        if (element.tagName != textAreaTag) {
+            var allTextareas = element.getElementsByTagName(textAreaTag);
+            if (allTextareas.length == 0) {
+                throw "Mentions requires a textarea to be rendered, but none were found.";
+            }
+            textarea = allTextareas[0] as HTMLTextAreaElement;
+        }
 
+        return textarea as HTMLTextAreaElement;
+    }
 }
diff --git a/components/input/Input.cs b/components/input/Input.cs
@@ -89,7 +89,7 @@ public bool AutoFocus
 
         /// <summary>
         /// Delays the processing of the KeyUp event until the user has stopped
-        /// typing for a predetermined amount of time
+        /// typing for a predetermined amount of time. Default is 250 ms.
         /// </summary>
         [Parameter]
         public int DebounceMilliseconds

diff --git a/components/mentions/Mentions.razor b/components/mentions/Mentions.razor
@@ -27,15 +27,29 @@
         </Overlay>
 
         <Unbound>
-            @*！！！！！！！！！！！这里不能缩进换行代码！！！！！！！！！！！！！！！*@
-            <div class="@ClassMapper.Class"><textarea value="@Value"
+            <div class="@ClassMapper.Class">
+                @if (TextareaTemplate == null)
+                {
+                    <textarea value="@Value"
                           @ref="context.Current"
                           @attributes="@Attributes"
                           @onkeydown="OnKeyDown"
-                          @oninput="OnInput" style="@Style"
+                          @oninput="OnInput"
+                          style="@Style"
                           class="rc-textarea"
                           placeholder="@Placeholder"
-                          rows="@Rows" /></div>
+                          rows="@Rows" />
+                }
+                else
+                {
+                    @TextareaTemplate(new MentionsTextareaTemplateOptions{
+                        Value = Value,
+                        OnInput = OnInput,
+                        OnKeyDown = OnKeyDown,
+                        RefBack = context
+                    });
+                }
+            </div>
         </Unbound>
     </OverlayTrigger>
 </CascadingValue>
diff --git a/components/mentions/Mentions.razor.cs b/components/mentions/Mentions.razor.cs
@@ -1,38 +1,31 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
-using System.Runtime.CompilerServices;
-using System.Runtime.Serialization;
-using System.Security.Cryptography;
-using System.Text;
-using System.Threading;
 using System.Threading.Tasks;
-using System.Xml.Linq;
 using AntDesign.Internal;
-using AntDesign.JsInterop;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
-using Microsoft.Extensions.Options;
 using Microsoft.JSInterop;
-using OneOf;
 
 namespace AntDesign
 {
     public partial class Mentions
     {
         [Parameter] public RenderFragment ChildContent { get; set; }
         [Parameter] public bool Disable { get; set; }
-        [Parameter] public int Rows { get; set; } = 3;
+        [Parameter] public uint Rows { get; set; } = 3;
         [Parameter] public bool Focused { get; set; }
         [Parameter] public bool Readonly { get; set; }
         [Parameter] public bool Loading { get; set; }
 
-
         [Parameter] public Dictionary<string, object> Attributes { get; set; }
         [Inject] public IJSRuntime JS { get; set; }
         [Parameter] public string Placeholder { get; set; }
         [Parameter] public string Value { get; set; } = String.Empty;
         [Parameter] public EventCallback<string> ValueChanged { get; set; }
+
+        [Parameter] public RenderFragment<MentionsTextareaTemplateOptions> TextareaTemplate { get; set; }
+
         internal List<MentionsOption> OriginalOptions { get; set; } = new List<MentionsOption>();
         internal List<MentionsOption> ShowOptions { get; } = new List<MentionsOption>();
         private OverlayTrigger _overlayTrigger;

diff --git a/components/mentions/MentionsTextareaTemplateOptions.cs b/components/mentions/MentionsTextareaTemplateOptions.cs
@@ -0,0 +1,15 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace AntDesign
+{
+    public class MentionsTextareaTemplateOptions
+    {
+        public string Value { get; set; }
+        public ForwardRef RefBack { get; set; }
+        public Action<KeyboardEventArgs> OnKeyDown { get; set; }
+        public Func<ChangeEventArgs, Task> OnInput { get; set; }
+    }
+}
diff --git a/components/mentions/style/patch.less b/components/mentions/style/patch.less
@@ -1,8 +1,18 @@
+@import '../../input/style/mixin';
+
 .ant-mention-dropdown {
-  top: 100%;
-  left: 0;
-  position: relative;
-  width: 100%;
-  margin-top: 4px;
-  margin-bottom: 4px;
+    top: 100%;
+    left: 0;
+    position: relative;
+    width: 100%;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+.ant-mentions {
+    border: none;
+}
+
+.ant-mentions .rc-textarea {
+    .input();
 }
diff --git a/site/AntDesign.Docs/Demos/Components/Mentions/demo/Form.razor b/site/AntDesign.Docs/Demos/Components/Mentions/demo/Form.razor
@@ -1,35 +1,64 @@
-<div>
-    To do
-@*    <div style="margin-bottom: 10px">
-            <Mentions>
-                <MentionsOption Value="afc163">afc163</MentionsOption>
-                <MentionsOption Value="zombieJ">zombieJ</MentionsOption>
-                <MentionsOption Value="yesmeck">yesmeck</MentionsOption>
-            </Mentions>
-    </div>
+@using System.ComponentModel.DataAnnotations;
+@using System.Text.Json;
+@using System.ComponentModel
 
-    <div style="margin-bottom: 10px">
-        <Mentions Rows="6" Placeholder="You can use  to ref user here">
+<!-- TODO: Make work with validation visuals. Submission will work though. -->
+<AntDesign.Form Model="@model"
+        OnFinish="OnFinish"
+        OnFinishFailed="OnFinishFailed"
+        LabelColSpan="8"
+        WrapperColSpan="16">
+    <FormItem Label="Comment">
+        <Mentions @bind-Value=@model.Comment>
             <MentionsOption Value="afc163">afc163</MentionsOption>
             <MentionsOption Value="zombieJ">zombieJ</MentionsOption>
             <MentionsOption Value="yesmeck">yesmeck</MentionsOption>
         </Mentions>
-    </div>
-
-    <Button Type="primary">Submit</Button>
-    <Button>Reset</Button>*@
-</div>
-
-
-@code{
+    </FormItem>
+    <FormItem Label="Another Comment">
+        <Mentions @bind-Value=@model.AnotherComment>
+            <ChildContent>
+                <MentionsOption Value="afc163">afc163</MentionsOption>
+                <MentionsOption Value="zombieJ">zombieJ</MentionsOption>
+                <MentionsOption Value="yesmeck">yesmeck</MentionsOption>
+            </ChildContent>
+            <TextareaTemplate Context="mentionsContext">
+                <TextArea RefBack=@mentionsContext.RefBack
+                          OnInput=@mentionsContext.OnInput
+                          BindOnInput=false
+                          OnkeyDown=@mentionsContext.OnKeyDown
+                          Value=@mentionsContext.Value
+                          ShowCount=true
+                          MaxLength="200" />
+            </TextareaTemplate>
+        </Mentions>
+    </FormItem>
+    <FormItem WrapperColOffset="8" WrapperColSpan="16">
+        <Button Type="@ButtonType.Primary" HtmlType="submit">
+            Submit
+        </Button>
+    </FormItem>
+</AntDesign.Form>
+@code
+{
+    public class Model
+    {
+        [Required]
+        public string Comment { get; set; }
 
-    //private class FormData
-    //{
-    //    public string data1 { get; set; }
-    //    public string data2 { get; set; }
-    //}
+        [Required]
+        public string AnotherComment{ get; set; }
+    }
 
+    private Model model = new Model();
 
-    //private FormData frmData = new FormData();
+    private void OnFinish(EditContext editContext)
+    {
+        Console.WriteLine($"Success:{JsonSerializer.Serialize(model)}");
+    }
 
-}
+    private void OnFinishFailed(EditContext editContext)
+    {
+        Console.WriteLine($"Failed:{JsonSerializer.Serialize(model)}");
+    }
+}
diff --git a/site/AntDesign.Docs/Demos/Components/Mentions/demo/TextareaTemplate.razor b/site/AntDesign.Docs/Demos/Components/Mentions/demo/TextareaTemplate.razor
@@ -0,0 +1,20 @@
+<Mentions>
+    <ChildContent>
+        <MentionsOption Value="afc163">afc163</MentionsOption>
+        <MentionsOption Value="zombieJ">zombieJ</MentionsOption>
+        <MentionsOption Value="yesmeck">yesmeck</MentionsOption>
+    </ChildContent>
+    <TextareaTemplate>
+        <TextArea RefBack=@context.RefBack
+                  OnInput=@context.OnInput
+                  BindOnInput=false
+                  OnkeyDown=@context.OnKeyDown
+                  Value=@context.Value
+                  ShowCount=true
+                  MaxLength="200" />
+    </TextareaTemplate>
+</Mentions>
+
+@code {
+    string value { get; set; }
+}
diff --git a/site/AntDesign.Docs/Demos/Components/Mentions/demo/textareatemplate.md b/site/AntDesign.Docs/Demos/Components/Mentions/demo/textareatemplate.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 文本区域模板
+  en-US: Textarea Template
+---
+
+## zh-CN
+
+自定义文本区域的呈现。最常见的用例是使用 TextArea 组件。
+
+## en-US
+
+Customize the rendering of the textarea. Most common usecase will be to use the TextArea component.
diff --git a/tests/AntDesign.Tests/Input/InputTests.razor b/tests/AntDesign.Tests/Input/InputTests.razor
@@ -189,8 +189,9 @@
         cut.Find("input").Input("newValue");
         cut.Find("input").KeyUp(String.Empty);
         //Assert
-        await Task.Delay(250);
+        await Task.Delay(300);
 
+        value.Should().Be("newValue");
         cut.Instance.Value.Should().Be("newValue");
     }