From a0f2f113230d3f454196613056727a0c6087dced Mon Sep 17 00:00:00 2001 From: capdiem Date: Tue, 22 Oct 2024 14:04:22 +0800 Subject: [PATCH] feat(DigitalClock): add `HideDisallowedTimes` and support auto scroll to the adjacent time on first render (#2195) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🆕 (DigitalClock): add HideDisallowedTimes parameter and auto scroll to the adjacent time on first render * update --- .../DigitalClock/MDigitalClock.razor | 84 +++++++++++++++++-- .../DigitalClock/MDigitalClock.razor.cs | 16 ++-- 2 files changed, 86 insertions(+), 14 deletions(-) diff --git a/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor b/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor index 950f9e0a5d..4279ace377 100644 --- a/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor +++ b/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor @@ -59,14 +59,72 @@ else { } @@ -74,6 +132,14 @@ @code { + private RenderFragment GenSingleItem(bool active, bool adjacent, bool disabled, TimeOnly time) => __builder => + { +
  • + @ItemContentRenderFragment(time.ToString(Format == TimeFormat.Hr24 ? "HH:mm" : "hh:mm tt"), active) +
  • + }; + private RenderFragment ItemsRenderFragment(int count, int step, int? current, Func? isAllowedCb, Func onClick) => __builder => { @for (var i = 0; i < count; i = i + step) @@ -109,4 +175,4 @@ }; -} +} \ No newline at end of file diff --git a/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor.cs b/src/Masa.Blazor/Components/DigitalClock/MDigitalClock.razor.cs index 2ec0331ca7..52a924a91a 100644 --- 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 : MasaComponentBase [Parameter] public OneOf, List> 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 } /// - /// 24 hour format + /// 24-hour format /// private int? Hour { @@ -164,7 +169,7 @@ private int? Second private TimeOnly? InternalTime { get; set; } /// - /// Hour in 12 or 24 hour format, it depends on property. + /// Hour in 12 or 24-hour format, it depends on property. /// private int? ComputedHour => Format == TimeFormat.AmPm ? TimeHelper.Convert24To12(Hour ?? 0) : Hour; @@ -292,7 +297,7 @@ private void OnValueChanged(TValue? value) } /// - /// Scroll to active element for multi section + /// Scroll to an active element for multi sections /// /// /// @@ -315,7 +320,7 @@ private void ScrollToActive(string type) } /// - /// Scroll to active element for single section + /// Scroll to an active element for a single section /// 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); } /// /// Handle hour click /// - /// value in 12 or 24 hour format + /// value in 12 or 24-hour format private async Task HandleOnHourClick(int hour) { var hour24 = Format == TimeFormat.AmPm