Merge branch 'master' into fix/tabs-animated-cause-display-issue

ant-design-blazor · Apr 8, 2023 · 424fcda · 424fcda
2 parents 2bdea75 + 9c69ef4
commit 424fcda
Show file tree

Hide file tree

Showing 34 changed files with 644 additions and 488 deletions.
diff --git a/components/checkbox/CheckboxGroup.razor.cs b/components/checkbox/CheckboxGroup.razor.cs
@@ -173,7 +173,7 @@ protected override void OnAfterRender(bool firstRender)
         {
             if (firstRender)
             {
-                if (ChildContent is not null && _checkboxItems.Count > 0)
+                if (ChildContent is not null && _checkboxItems?.Count > 0)
                 {
                     _constructedOptions = CreateConstructedOptions();
                 }

diff --git a/components/core/Base/AntInputComponentBase.cs b/components/core/Base/AntInputComponentBase.cs
@@ -226,13 +226,6 @@ protected virtual string FormatValueAsString(TValue value)
         /// <returns>True if the value could be parsed; otherwise false.</returns>
         protected virtual bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
         {
-            if (string.IsNullOrWhiteSpace(value))
-            {
-                result = default;
-                validationErrorMessage = null;
-                return true;
-            }
-
             TValue parsedValue = default;
             bool success;
 

diff --git a/components/core/Helpers/DateHelper.cs b/components/core/Helpers/DateHelper.cs
@@ -158,7 +158,13 @@ public static DateTime GetNextStartDateOfDay(DateTime date)
             int? minute = null,
             int? second = null)
         {
-            return new DateTime(year ?? date.Year, month ?? date.Month, day ?? date.Day, hour ?? date.Hour, minute ?? date.Minute, second ?? date.Second);
+            var yearValue = year ?? date.Year;
+            var monthValue = month ?? date.Month;
+            var dayValue = day ?? date.Day;
+            var daysInMonth = DateTime.DaysInMonth(yearValue, monthValue);
+            dayValue = dayValue > daysInMonth ? daysInMonth : dayValue;
+
+            return new DateTime(yearValue, monthValue, dayValue, hour ?? date.Hour, minute ?? date.Minute, second ?? date.Second);
         }
 
         public static DateTime? FormatDateByPicker(DateTime? dateTime, string picker)

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/image/ImagePreview.razor b/components/image/ImagePreview.razor
@@ -1,33 +1,43 @@
 @namespace AntDesign
 
 <Dialog Config="@GetDialogOptions()" Visible="@_visible">
-    <ul class="ant-image-preview-operations">
-        <li class="ant-image-preview-operations-operation" @onclick="HandleClose" @onclick:stopPropagation>
-            <Icon Type="close" Class="ant-image-preview-operations-icon" />
-        </li>
-        <li class="ant-image-preview-operations-operation" @onclick="HandleZoomIn" @onclick:stopPropagation>
-            <Icon Type="zoom-in" Class="ant-image-preview-operations-icon" />
-        </li>
-        <li class="ant-image-preview-operations-operation @(_zoomOutTimes==1?"ant-image-preview-operations-operation-disabled":"")" @onclick="HandleZoomOut" @onclick:stopPropagation>
-            <Icon Type="zoom-out" Class="ant-image-preview-operations-icon" />
-        </li>
-        <li class="ant-image-preview-operations-operation" @onclick="HandleRotateRight" @onclick:stopPropagation>
-            <Icon Type="rotate-right" Class="ant-image-preview-operations-icon" />
-        </li>
-        <li class="ant-image-preview-operations-operation" @onclick="HandleRotateLeft" @onclick:stopPropagation>
-            <Icon Type="rotate-left" Class="ant-image-preview-operations-icon" />
-        </li>
-    </ul>
-    <div class="ant-image-preview-img-wrapper" style="font-size:0; transform: translate3d(0px, 0px, 0px);">
-        <img class="ant-image-preview-img" src="@ImageRef.ImageSrc" style="transform: scale3d(@_zoomOutTimes, @_zoomOutTimes, 1) rotate(@(90*_rotateTimes)deg);">
-    </div>
-    @if (ImageRef.ImageCount > 1)
-    {
-        <div class="ant-image-preview-switch-left @(ImageRef.CurrentIndex==0?"ant-image-preview-switch-left-disabled":"")" @onclick="()=>ImageRef.SwitchTo(ImageRef.CurrentIndex-1)" @onclick:stopPropagation>
-            <Icon Type="left" />
+    <ChildContent>
+        <div class="ant-image-preview-img-wrapper" style="font-size:0; transform: translate3d(0px, 0px, 0px);">
+            <img class="ant-image-preview-img" src="@ImageRef.ImageSrc" style="transform: scale3d(@_zoomOutTimes, @_zoomOutTimes, 1) rotate(@(90*_rotateTimes)deg);">
         </div>
-        <div class="ant-image-preview-switch-right @(ImageRef.CurrentIndex==ImageRef.ImageCount-1?"ant-image-preview-switch-right-disabled":"")" @onclick="()=>ImageRef.SwitchTo(ImageRef.CurrentIndex+1)" @onclick:stopPropagation>
-            <Icon Type="right" />
+        @if (ImageRef.ImageCount > 1)
+        {
+            <div class="ant-image-preview-switch-left @(ImageRef.CurrentIndex==0?"ant-image-preview-switch-left-disabled":"")" @onclick="()=>ImageRef.SwitchTo(ImageRef.CurrentIndex-1)" @onclick:stopPropagation>
+                <Icon Type="left" />
+            </div>
+            <div class="ant-image-preview-switch-right @(ImageRef.CurrentIndex==ImageRef.ImageCount-1?"ant-image-preview-switch-right-disabled":"")" @onclick="()=>ImageRef.SwitchTo(ImageRef.CurrentIndex+1)" @onclick:stopPropagation>
+                <Icon Type="right" />
+            </div>
+        }
+    </ChildContent>
+    <AdditionalContent>
+        <div class="ant-image-preview-operations-wrapper">
+            <ul class="ant-image-preview-operations">
+                @if (ImageRef.ImageCount > 1)
+                {
+                    <li class="ant-image-preview-operations-progress">@(ImageRef.CurrentIndex+1) / @ImageRef.ImageCount</li>
+                }
+                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close" @onclick="HandleClose" @onclick:stopPropagation>
+                    <Icon Type="close" Class="ant-image-preview-operations-icon" />
+                </li>
+                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn" @onclick="HandleZoomIn" @onclick:stopPropagation>
+                    <Icon Type="zoom-in" Class="ant-image-preview-operations-icon" />
+                </li>
+                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut @(_zoomOutTimes==1?"ant-image-preview-operations-operation-disabled":"")" @onclick="HandleZoomOut" @onclick:stopPropagation>
+                    <Icon Type="zoom-out" Class="ant-image-preview-operations-icon" />
+                </li>
+                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight" @onclick="HandleRotateRight" @onclick:stopPropagation>
+                    <Icon Type="rotate-right" Class="ant-image-preview-operations-icon" />
+                </li>
+                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft" @onclick="HandleRotateLeft" @onclick:stopPropagation>
+                    <Icon Type="rotate-left" Class="ant-image-preview-operations-icon" />
+                </li>
+            </ul>
         </div>
-    }
+    </AdditionalContent>
 </Dialog>
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/input/TextArea.razor b/components/input/TextArea.razor
@@ -39,29 +39,34 @@
     }
 }
 
-<div class="@ClassMapper.Class" style="@Style" @ref="Ref" data-count="@(Count)">
-    @if (Suffix != null || AllowClear || FormItem?.FeedbackIcon != null)
-    {
-        <span class="@_warpperClassMapper.Class">
-            <textarea @ref="_textareaRef" class="@_textareaClassMapper.Class" @attributes="attributes" @onchange:stopPropagation="@StopPropagation" @onblur:stopPropagation="@StopPropagation" />
-            <span class="ant-input-textarea-suffix">
-                @if (AllowClear)
-                {
-                    @ClearIcon
-                }
-                @if (Suffix != null)
-                {
-                    @Suffix
-                }
-                @if (FormItem?.FeedbackIcon != null)
-                {
-                    @FormItem.FeedbackIcon
-                }
-            </span>
+
+@if (Suffix != null || AllowClear || FormItem?.FeedbackIcon != null)
+{
+    <span class="@_warpperClassMapper.Class">
+        <textarea @ref="Ref" class="@_textareaClassMapper.Class" @attributes="attributes" @onchange:stopPropagation="@StopPropagation" @onblur:stopPropagation="@StopPropagation" />
+        <span class="ant-input-textarea-suffix">
+            @if (AllowClear)
+            {
+                @ClearIcon
+            }
+            @if (Suffix != null)
+            {
+                @Suffix
+            }
+            @if (FormItem?.FeedbackIcon != null)
+            {
+                @FormItem.FeedbackIcon
+            }
         </span>
-    }
-    else
-    {
-        <textarea @ref="_textareaRef" class="@_textareaClassMapper.Class" @attributes="attributes" @onchange:stopPropagation="@StopPropagation" @onblur:stopPropagation="@StopPropagation" />
-    }
-</div>
+    </span>
+}
+else if (ShowCount)
+{
+    <div class="@ClassMapper.Class" style="@Style" data-count="@Count">
+        <textarea @ref="Ref" class="@_textareaClassMapper.Class" @attributes="attributes" @onchange:stopPropagation="@StopPropagation" @onblur:stopPropagation="@StopPropagation" />
+    </div>
+}
+else
+{
+    <textarea @ref="Ref" class="@_textareaClassMapper.Class" @attributes="attributes" @onchange:stopPropagation="@StopPropagation" @onblur:stopPropagation="@StopPropagation" />
+}
diff --git a/components/input/TextArea.razor.cs b/components/input/TextArea.razor.cs
@@ -215,15 +215,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 }
                 else if (_afterFirstRender)
                 {
-                    await JsInvokeAsync(JSInteropConstants.InputComponentHelper.ResizeTextArea, _textareaRef, InnerMinRows, MaxRows);
+                    await JsInvokeAsync(JSInteropConstants.InputComponentHelper.ResizeTextArea, Ref, InnerMinRows, MaxRows);
                 }
             }
             if (_styleHasChanged)
             {
                 _styleHasChanged = false;
                 if (AutoSize && !string.IsNullOrWhiteSpace(Style) && _afterFirstRender)
                 {
-                    await JsInvokeAsync(JSInteropConstants.StyleHelper.SetStyle, _textareaRef, Style);
+                    await JsInvokeAsync(JSInteropConstants.StyleHelper.SetStyle, Ref, Style);
                 }
             }
         }
@@ -266,7 +266,7 @@ protected override void Dispose(bool disposing)
 
                 _ = InvokeAsync(async () =>
                 {
-                    await JsInvokeAsync(JSInteropConstants.DisposeResizeTextArea, _textareaRef);
+                    await JsInvokeAsync(JSInteropConstants.DisposeResizeTextArea, Ref);
                 });
             }
 
@@ -285,8 +285,6 @@ protected override void Dispose(bool disposing)
         private bool _styleHasChanged;
         private string _heightStyle;
 
-        private ElementReference _textareaRef;
-
         private void Reloading(JsonElement jsonElement) => _isReloading = true;
 
         [JSInvokable]
@@ -306,12 +304,12 @@ private async Task RegisterResizeEvents()
             if (AutoSize)
             {
                 await JsInvokeAsync<TextAreaInfo>(
-                    JSInteropConstants.InputComponentHelper.RegisterResizeTextArea, _textareaRef, InnerMinRows, MaxRows, _reference);
+                    JSInteropConstants.InputComponentHelper.RegisterResizeTextArea, Ref, InnerMinRows, MaxRows, _reference);
             }
             else
             {
                 var textAreaInfo = await JsInvokeAsync<TextAreaInfo>(
-                    JSInteropConstants.InputComponentHelper.GetTextAreaInfo, _textareaRef);
+                    JSInteropConstants.InputComponentHelper.GetTextAreaInfo, Ref);
 
                 var rowHeight = textAreaInfo.LineHeight;
                 var offsetHeight = textAreaInfo.PaddingTop + textAreaInfo.PaddingBottom

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();
 }