🐛 fix(DatePicker): cannot select only the year

masastack · Jul 31, 2024 · ea5d378 · ea5d378
1 parent f8f18fd
commit ea5d378
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 21 deletions.
diff --git a/src/Masa.Blazor.JS/src/interop.ts b/src/Masa.Blazor.JS/src/interop.ts
@@ -473,7 +473,8 @@ export function scrollToElement(target, offset: number, behavior?: ScrollBehavio
 export function scrollToActiveElement(
   container,
   element = ".active",
-  position: "center" | number = "center"
+  position: "center" | number = "center",
+  smooth: boolean = false
 ) {
   let containerEl: HTMLElement = getDom(container);
 
@@ -486,12 +487,9 @@ export function scrollToActiveElement(
     return;
   }
 
-  if (position === 'center') {
-    containerEl.scrollTop = activeEl.offsetTop - containerEl.offsetHeight / 2 + activeEl.offsetHeight / 2;
-  }
-  else {
-    containerEl.scrollTop = activeEl.offsetTop - position
-  }
+  const top: number = position === 'center' ? activeEl.offsetTop - containerEl.offsetHeight / 2 + activeEl.offsetHeight / 2 : activeEl.offsetTop - position;
+
+  containerEl.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
 }
 
 export function addClsToFirstChild(element, className) {

diff --git a/src/Masa.Blazor/Components/DatePicker/MDatePicker.razor b/src/Masa.Blazor/Components/DatePicker/MDatePicker.razor
@@ -46,7 +46,7 @@
         ? null
         : __builder =>
         {
-            <MDatePickerTitle Date="@(Formatters.TitleDate(MultipleValue))"
+            <MDatePickerTitle Date="@(Type == DatePickerType.Year ? Formatters.Year(TableDate) : Formatters.TitleDate(MultipleValue))"
                               Disabled="@Disabled"
                               Readonly="@Readonly"
                               SelectingYear="@(InternalActivePicker == DatePickerType.Year)"
@@ -70,15 +70,10 @@
                           Max="@MaxYear"
                           Value="@TableYear"
                           Locale="@CurrentLocale"
-                          OnInput="@OnInput"
+                          Type="@Type"
+                          OnInput="@OnYearClickAsync"
                           OnYearClick="@OnYearClick">
         </MDatePickerYears>
-
-        void OnInput(int year)
-        {
-            TableDate = new DateOnly(year, TableDate.Month, TableDate.Day);
-            InternalActivePicker = DatePickerType.Month;
-        }
     };
 
     private RenderFragment GenTableHeader() => __builder =>

diff --git a/src/Masa.Blazor/Components/DatePicker/MDatePicker.razor.cs b/src/Masa.Blazor/Components/DatePicker/MDatePicker.razor.cs
@@ -322,6 +322,32 @@ protected override IEnumerable<string> BuildComponentClass()
         yield return "m-picker--date";
     }
 
+    private async Task OnYearClickAsync(int year)
+    {
+        TableDate = new DateOnly(year, TableDate.Month, TableDate.Day);
+        if (Type == DatePickerType.Year)
+        {
+            // multiple mode is not supported in year mode 
+
+            Value = TableDate is TValue val ? val : default;
+
+            if (ValueChanged.HasDelegate)
+            {
+                await ValueChanged.InvokeAsync(Value);
+            }
+
+            //REVIEW:  
+            if (OnInput.HasDelegate)
+            {
+                await OnInput.InvokeAsync();
+            }
+        }
+        else
+        {
+            InternalActivePicker = DatePickerType.Month;
+        }
+    }
+
     private async Task OnMonthClickAsync(DateOnly value)
     {
         if (Type == DatePickerType.Date)

diff --git a/src/Masa.Blazor/Components/DatePicker/MDatePickerYears.razor.cs b/src/Masa.Blazor/Components/DatePicker/MDatePickerYears.razor.cs
@@ -21,6 +21,8 @@ public partial class MDatePickerYears : MasaComponentBase
 
     [Parameter] public CultureInfo Locale { get; set; } = null!;
 
+    [Parameter] public DatePickerType Type { get; set; }
+
     private Func<DateOnly, string> Formatter
     {
         get
@@ -39,6 +41,11 @@ private async Task HandleOnYearItemClickAsync(int year)
     {
         await OnInput.InvokeAsync(year);
         await OnYearClick.InvokeAsync(year);
+
+        if (Type == DatePickerType.Year)
+        {
+            _ = ScrollToActiveElementAsync(true);
+        }
     }
 
     protected override IEnumerable<string> BuildComponentClass()
@@ -52,14 +59,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (firstRender)
         {
-            var handle = DotNetObjectReference.Create(new IntersectInvoker(OnIntersectAsync));
+            var handle = DotNetObjectReference.Create(new IntersectInvoker(_ => ScrollToActiveElementAsync()));
             await IntersectJSModule.ObserverAsync(Ref, handle);
         }
     }
-
-    private async Task OnIntersectAsync(IntersectEventArgs arg)
+    
+    private async Task ScrollToActiveElementAsync(bool smooth = false)
     {
-        await Js.InvokeVoidAsync(JsInteropConstants.ScrollToActiveElement, Ref);
+        await Js.InvokeVoidAsync(JsInteropConstants.ScrollToActiveElement, Ref, ".active", "center", smooth);
     }
 
     protected override async ValueTask DisposeAsyncCore()

diff --git a/src/Masa.Blazor/wwwroot/js/masa-blazor.js b/src/Masa.Blazor/wwwroot/js/masa-blazor.js
diff --git a/src/Masa.Blazor/wwwroot/js/masa-blazor.js.map b/src/Masa.Blazor/wwwroot/js/masa-blazor.js.map