🆕 feat(compact-date-time-picker): switch to time picker automatically…

… when selecting a date
masastack · Jun 18, 2024 · 2b30e3d · 2b30e3d
1 parent df2739f
commit 2b30e3d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 4 deletions.
diff --git a/.../DateTimePicker/Views/DateDigitalClockPickerView/PDateDigitalClockCompactPickerView.razor b/.../DateTimePicker/Views/DateDigitalClockPickerView/PDateDigitalClockCompactPickerView.razor
@@ -2,7 +2,7 @@
 @inherits PDateDigitalClockPickerViewBase<TValue>
 @typeparam TValue
 
-<div class="@ViewModifierBuilder.Build()">
+<div class="@ViewModifier">
     <MTabs @bind-Value="_tabValue" FixedTabs>
         <MTab Value="@DATE" Ripple="false">
             @if (InternalDate.HasValue)
@@ -73,6 +73,7 @@
                          YearIcon="@YearIcon"
                          Dark="@Dark"
                          Light="@Light"
+                         OnDateClick="@HandleOnDateClick"
                          @ref="_datePicker">
             </MDatePicker>
         </MWindowItem>

diff --git a/...teTimePicker/Views/DateDigitalClockPickerView/PDateDigitalClockCompactPickerView.razor.cs b/...teTimePicker/Views/DateDigitalClockPickerView/PDateDigitalClockCompactPickerView.razor.cs
@@ -8,6 +8,12 @@ public partial class PDateDigitalClockCompactPickerView<TValue> : PDateDigitalCl
 
     [Parameter] public string? Transition { get; set; }
 
+    /// <summary>
+    /// Switch to time picker automatically when selecting a date
+    /// </summary>
+    [Parameter] [MasaApiParameter(defaultValue: true, releasedOn: "v1.6.0")]
+    public bool AutoSwitchToTime { get; set; } = true;
+
     private const string DATE = "date";
     private const string TIME = "time";
 
@@ -84,4 +90,15 @@ private void OnNextClick()
     {
         _timeActivePicker = (TimePickerType)(((int)_timeActivePicker) + 1);
     }
+
+    private void HandleOnDateClick()
+    {
+        if (!AutoSwitchToTime)
+        {
+            return;
+        }
+
+        _tabValue = TIME;
+    }
+
 }
diff --git a/...lazor/Components/DateTimePicker/Views/DateTimePickerView/PDateTimeCompactPickerView.razor b/...lazor/Components/DateTimePicker/Views/DateTimePickerView/PDateTimeCompactPickerView.razor
@@ -2,7 +2,7 @@
 @inherits PDateTimePickerViewBase<TValue>
 @typeparam TValue
 
-<div class="@ViewModifierBuilder.Build()">
+<div class="@ViewModifier">
     <MTabs @bind-Value="_tabValue" FixedTabs>
         <MTab Value="@DATE" Ripple="false">
             @if (InternalDate.HasValue)
@@ -73,6 +73,7 @@
                          YearIcon="@YearIcon"
                          Dark="@Dark"
                          Light="@Light"
+                         OnDateClick="@HandleOnDateClick"
                          @ref="_datePicker">
             </MDatePicker>
         </MTabItem>

diff --git a/...or/Components/DateTimePicker/Views/DateTimePickerView/PDateTimeCompactPickerView.razor.cs b/...or/Components/DateTimePicker/Views/DateTimePickerView/PDateTimeCompactPickerView.razor.cs
@@ -10,6 +10,12 @@ public partial class PDateTimeCompactPickerView<TValue> : PDateTimePickerViewBas
     [Parameter]
     public string? Transition { get; set; }
 
+    /// <summary>
+    /// Switch to time picker automatically when selecting a date
+    /// </summary>
+    [Parameter] [MasaApiParameter(defaultValue: true, releasedOn: "v1.6.0")]
+    public bool AutoSwitchToTime { get; set; } = true;
+
     private const string DATE = "date";
     private const string TIME = "time";
 
@@ -88,4 +94,14 @@ private void OnNextClick()
     {
         _timeActivePicker = (TimePickerType)(((int)_timeActivePicker) + 1);
     }
+
+    private void HandleOnDateClick(DateOnly dateOnly)
+    {
+        if (!AutoSwitchToTime)
+        {
+            return;
+        }
+
+        _tabValue = TIME;
+    }
 }
diff --git a/src/Masa.Blazor/Components/DateTimePicker/Views/PDateTimePickerViewBase.cs b/src/Masa.Blazor/Components/DateTimePicker/Views/PDateTimePickerViewBase.cs
@@ -125,8 +125,8 @@ public DateTime? Max
 
     protected static Block BasePickerBlock = new Block("m-date-time-picker");
     protected ModifierBuilder BasePickerModifierBuilder = BasePickerBlock.CreateModifierBuilder();
-    protected ModifierBuilder ViewModifierBuilder =
-        BasePickerBlock.Element("view").CreateModifierBuilder().Add("compact");
+    protected string ViewModifier =
+        BasePickerBlock.Element("view").CreateModifierBuilder().Add("compact").Build();
 
     public bool IsDark
     {