feat(DigitalClock): add HideDisallowedTimes and support auto scroll…

… to the adjacent time on first render (#2195) * 🆕 (DigitalClock): add HideDisallowedTimes parameter and auto scroll to the adjacent time on first render * update
masastack · Oct 22, 2024 · a0f2f11 · a0f2f11
1 parent bf12034
commit a0f2f11
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 14 deletions.
diff --git a/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor b/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor
@@ -59,21 +59,87 @@
     else
     {
         <ul class="@Block.Element("items")" @ref="_timesRef">
-            @foreach (var time in _singleSectionItems)
-            {
-                var active = time == InternalTime;
-                var disabled = Disabled || IsAllowedTimeCallback?.Invoke(time) is false;
-                <li class="@_itemModifierBuilder.Add(active).Add(disabled)"
-                    @onclick="() => HandleOnTimeClick(time)">
-                    @ItemContentRenderFragment(time.ToString(Format == TimeFormat.Hr24 ? "HH:mm" : "hh:mm tt"), active)
-                </li>
+            @{
+                var haveGotAdjacent = false;
+                var haveGotActive = false;
+
+                if (HideDisallowedTimes)
+                {
+                    var items = _singleSectionItems.Where(u => IsAllowedTimeCallback?.Invoke(u) is null or true).ToList();
+                    for (int i = 0; i < items.Count(); i++)
+                    {
+                        var index = i;
+                        var time = items[index];
+
+                        var active = time == InternalTime;
+                        var adjacent = false;
+                        if (!haveGotActive)
+                        {
+                            haveGotActive = active;
+                            if (!active && !haveGotAdjacent)
+                            {
+                                var isLast = index == items.Count - 1;
+                                if (isLast)
+                                {
+                                    adjacent = true;
+                                    haveGotAdjacent = true;
+                                }
+                                else
+                                {
+                                    adjacent = InternalTime < time.Add(Step);
+                                    if (adjacent)
+                                    {
+                                        haveGotAdjacent = true;
+                                    }
+                                }
+                            }
+                        }
+
+                        @GenSingleItem(active, adjacent, Disabled, time)
+                    }
+                }
+                else
+                {
+                    for (var i = 0; i < _singleSectionItems.Count; i++)
+                    {
+                        // ReSharper disable once InlineTemporaryVariable
+                        var index = i;
+                        var time = _singleSectionItems[index];
+
+                        var disabled = Disabled || IsAllowedTimeCallback?.Invoke(time) is false;
+                        var active = time == InternalTime;
+                        var adjacent = false;
+                        if (!haveGotActive)
+                        {
+                            haveGotActive = active;
+                            if (!active && !haveGotAdjacent)
+                            {
+                                adjacent = InternalTime < time.Add(Step);
+                                if (adjacent)
+                                {
+                                    haveGotAdjacent = true;
+                                }
+                            }
+                        }
+
+                        @GenSingleItem(active, adjacent, disabled, time)
+                    }
+                }
             }
         </ul>
     }
 </div>
 
 @code {
 
+    private RenderFragment GenSingleItem(bool active, bool adjacent, bool disabled, TimeOnly time) => __builder =>
+    {
+        <li class="@_itemModifierBuilder.Add(active).Add(adjacent).Add(disabled)"
+            @onclick="() => HandleOnTimeClick(time)">
+            @ItemContentRenderFragment(time.ToString(Format == TimeFormat.Hr24 ? "HH:mm" : "hh:mm tt"), active)
+        </li>
+    };
+
     private RenderFragment ItemsRenderFragment(int count, int step, int? current, Func<int, bool>? isAllowedCb, Func<int, Task> onClick) => __builder =>
     {
         @for (var i = 0; i < count; i = i + step)
@@ -109,4 +175,4 @@
         </li>
     };
 
-}
+}
diff --git a/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor.cs b/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor.cs
@@ -33,6 +33,10 @@ public partial class MDigitalClock<TValue> : MasaComponentBase
     [Parameter]
     public OneOf<Func<TimeOnly, bool>, List<TimeOnly>> AllowedTimes { get; set; }
 
+    [Parameter]
+    [MasaApiParameter(ReleasedOn = "v1.8.0")]
+    public bool HideDisallowedTimes { get; set; }
+
     [Parameter] public string? Color { get; set; }
 
     [Parameter] public bool Disabled { get; set; }
@@ -111,6 +115,7 @@ public TValue? Value
     private ModifierBuilder _itemModifierBuilder = _itemElement.CreateModifierBuilder();
     private ModifierBuilder _itemContentModifierBuilder = Block.Element("item-content").CreateModifierBuilder();
     private static string _defaultActiveClass = _itemElement.Modifier("active");
+    private static string _defaultAdjacentClass = _itemElement.Modifier("adjacent");
 
     private ElementReference _hoursRef;
     private ElementReference _minutesRef;
@@ -141,7 +146,7 @@ public bool IsDark
     }
 
     /// <summary>
-    /// 24 hour format
+    /// 24-hour format
     /// </summary>
     private int? Hour
     {
@@ -164,7 +169,7 @@ private int? Second
     private TimeOnly? InternalTime { get; set; }
 
     /// <summary>
-    /// Hour in 12 or 24 hour format, it depends on <see cref="Format"/> property.
+    /// Hour in 12 or 24-hour format, it depends on <see cref="Format"/> property.
     /// </summary>
     private int? ComputedHour => Format == TimeFormat.AmPm ? TimeHelper.Convert24To12(Hour ?? 0) : Hour;
 
@@ -292,7 +297,7 @@ private void OnValueChanged(TValue? value)
     }
 
     /// <summary>
-    /// Scroll to active element for multi section
+    /// Scroll to an active element for multi sections
     /// </summary>
     /// <param name="type"></param>
     /// <exception cref="ArgumentException"></exception>
@@ -315,7 +320,7 @@ private void ScrollToActive(string type)
     }
 
     /// <summary>
-    /// Scroll to active element for single section
+    /// Scroll to an active element for a single section
     /// </summary>
     private void ScrollToActive()
     {
@@ -330,12 +335,13 @@ private void ScrollToActive()
     private void ScrollToActive(ElementReference @ref)
     {
         _ = Js.InvokeVoidAsync(JsInteropConstants.ScrollToActiveElement, @ref, $".{_defaultActiveClass}", 4);
+        _ = Js.InvokeVoidAsync(JsInteropConstants.ScrollToActiveElement, @ref, $".{_defaultAdjacentClass}", 4);
     }
 
     /// <summary>
     /// Handle hour click
     /// </summary>
-    /// <param name="hour">value in 12 or 24 hour format</param>
+    /// <param name="hour">value in 12 or 24-hour format</param>
     private async Task HandleOnHourClick(int hour)
     {
         var hour24 = Format == TimeFormat.AmPm