feat(ClockPicker): add ClockPicker component (#2970)

* doc: 更新资源文件 * refactor: 增加 clock-panel-body 样式 * doc: 增加 ClockPicker 示例 * doc: 增加功能示例文档 * fix: 修复禁用分钟秒时仍然切换表盘问题 * refactor: 重构代码 * test: 增加单元测试 * doc: 更新注释 * doc: 增加参数文档 * refactor: 精简样式
dotnetcore · Feb 21, 2024 · 9be2926 · 9be2926
1 parent cbcb8ae
commit 9be2926
Show file tree

Hide file tree

Showing 13 changed files with 354 additions and 23 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor b/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor
@@ -4,4 +4,35 @@
 
 <h4>@Localizer["Description"]</h4>
 
+<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
+    <div class="row">
+        <div class="col-12 col-sm-6">
+            <div class="custom-clock">
+                <ClockPicker @bind-Value="@Value" IsAutoSwitch="_autoSwitch" />
+            </div>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Switch @bind-Value="_autoSwitch" ShowLabel="true" DisplayText="@Localizer["AutoSwitchText"]"></Switch>
+        </div>
+    </div>
+</DemoBlock>
 
+<DemoBlock Title="@Localizer["HasSecondsTitle"]" Introduction="@Localizer["HasSecondsIntro"]" Name="ShowSecond">
+    <div class="custom-clock">
+        <ClockPicker Value="@SecondValue" ShowSecond="false" />
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ShowMinuteTitle"]" Introduction="@Localizer["ShowMinuteIntro"]" Name="ShowMinute">
+    <div class="custom-clock">
+        <ClockPicker Value="@MinuteValue" ShowMinute="false" />
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ShowClockScaleTitle"]" Introduction="@Localizer["ShowClockScaleIntro"]" Name="ShowClockScale">
+    <div class="custom-clock">
+        <ClockPicker Value="@ScaleValue" ShowClockScale="true" />
+    </div>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor.cs
@@ -13,4 +13,49 @@ public partial class ClockPickers
     [NotNull]
     private IStringLocalizer<ClockPickers>? Localizer { get; set; }
 
+    private TimeSpan Value { get; set; } = DateTime.Now - DateTime.Today;
+
+    private TimeSpan SecondValue { get; set; } = TimeSpan.FromHours(12.5);
+
+    private TimeSpan MinuteValue { get; set; } = TimeSpan.FromHours(12);
+
+    private TimeSpan ScaleValue { get; set; } = TimeSpan.FromHours(12.5);
+
+    private bool _autoSwitch = false;
+
+    private AttributeItem[] GetAttributes() =>
+    [
+        new()
+        {
+            Name = nameof(ClockPicker.IsAutoSwitch),
+            Description = Localizer["IsAutoSwitchAttr"],
+            Type = "bool",
+            ValueList = "true / false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = nameof(ClockPicker.ShowClockScale),
+            Description = Localizer["ShowClockScaleAttr"],
+            Type = "bool",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(ClockPicker.ShowMinute),
+            Description = Localizer["ShowMinuteAttr"],
+            Type = "bool",
+            ValueList = "true / false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = nameof(ClockPicker.ShowSecond),
+            Description = Localizer["ShowSecondAttr"],
+            Type = "bool",
+            ValueList = "true / false",
+            DefaultValue = "true"
+        }
+    ];
 }
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2469,6 +2469,23 @@
     "TimeTitle": "Data is bound in both directions",
     "TimeIntro": "Click the confirm button to select the box value consistent with the text box value"
   },
+  "BootstrapBlazor.Server.Components.Samples.ClockPickers": {
+    "Title": "ClockPicker",
+    "Description": "Select a time by dragging the watch needle",
+    "BindValueTitle": "bind",
+    "BindValueIntro": "By setting<code>IsAutoSwitch=\"false\"</code> to disable automatic switching of hour, minute, and stopwatch dial functions",
+    "AutoSwitchText": "Whether to automatically switch the dial",
+    "HasSecondsTitle": "Do not set the number of seconds",
+    "HasSecondsIntro": "By setting<code>ShowSecond=\"false\"</code> to not display the second hand dial",
+    "ShowMinuteTitle": "Do not set minutes",
+    "ShowMinuteIntro": "By setting<code>ShowMinute=\"false\"</code>to not display the minute dial",
+    "ShowClockScaleTitle": "Display dial scale",
+    "ShowClockScaleIntro": "By setting<code>ShowClockScale=\"true\"</code> to display the dial scale",
+    "IsAutoSwitchAttr": "Does it automatically switch between hours, minutes, and seconds",
+    "ShowClockScaleAttr": "Is the dial scale displayed",
+    "ShowMinuteAttr": "Is the minute displayed",
+    "ShowSecondAttr": "Is seconds displayed"
+  },
   "BootstrapBlazor.Server.Components.Samples.Editors": {
     "EditorsTitle": "Editor",
     "EditorsDescription": "Convert the entered text into <code>html</code> code snippets",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2469,6 +2469,23 @@
     "TimeTitle": "数据双向绑定",
     "TimeIntro": "点击确认按钮时间选择框值与文本框值一致"
   },
+  "BootstrapBlazor.Server.Components.Samples.ClockPickers": {
+    "Title": "ClockPicker 时间选择器",
+    "Description": "通过拖动表针选择时间",
+    "BindValueTitle": "数据双向绑定",
+    "BindValueIntro": "通过设置 <code>IsAutoSwitch=\"false\"</code> 禁止小时、分钟、秒表盘自动切换功能",
+    "AutoSwitchText": "是否自动切换表盘",
+    "HasSecondsTitle": "不设置秒数",
+    "HasSecondsIntro": "通过设置 <code>ShowSecond=\"false\"</code> 不显示秒针表盘",
+    "ShowMinuteTitle": "不设置分钟",
+    "ShowMinuteIntro": "通过设置 <code>ShowMinute=\"false\"</code> 不显示分针表盘",
+    "ShowClockScaleTitle": "显示表盘刻度",
+    "ShowClockScaleIntro": "通过设置 <code>ShowClockScale=\"true\"</code> 显示表盘刻度",
+    "IsAutoSwitchAttr": "是否自动切换 小时、分钟、秒 自动切换",
+    "ShowClockScaleAttr": "是否显示表盘刻度",
+    "ShowMinuteAttr": "是否显示分钟",
+    "ShowSecondAttr": "是否显示秒"
+  },
   "BootstrapBlazor.Server.Components.Samples.Editors": {
     "EditorsTitle": "Editor 富文本框",
     "EditorsDescription": "将输入的文字转化为 <code>html</code> 代码片段",

diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -253,6 +253,13 @@ code {
     margin-bottom: 1rem;
 }
 
+.custom-clock {
+    border: 1px solid var(--bs-border-color);
+    padding: .5rem;
+    border-radius: var(--bs-border-radius);
+    width: 320px;
+}
+
 @media (min-width: 768px) {
     :root {
         --bs-header-height: 50px;

diff --git a/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor b/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor
@@ -10,9 +10,23 @@
         }
         <span class="bb-time-text hour" @onclick="() => SetMode(TimeMode.Hour)">@HourValue</span>
         <span>:</span>
-        <span class="bb-time-text minute" @onclick="() => SetMode(TimeMode.Minute)">@Value.Minutes.ToString("D2")</span>
+        @if(ShowMinute)
+        {
+            <span class="bb-time-text minute" @onclick="() => SetMode(TimeMode.Minute)">@Value.Minutes.ToString("D2")</span>
+        }
+        else
+        {
+            <span class="bb-time-text minute">@Value.Minutes.ToString("D2")</span>
+        }
         <span>:</span>
-        <span class="bb-time-text second" @onclick="() => SetMode(TimeMode.Second)">@Value.Seconds.ToString("D2")</span>
+        @if(ShowMinute && ShowSecond)
+        {
+            <span class="bb-time-text second" @onclick="() => SetMode(TimeMode.Second)">@Value.Seconds.ToString("D2")</span>
+        }
+        else
+        {
+            <span class="bb-time-text second">@Value.Seconds.ToString("D2")</span>
+        }
     </div>
     <div class="bb-time-body">
         @if (ShowClockScale)

diff --git a/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.cs b/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.cs
@@ -19,37 +19,38 @@ public partial class ClockPicker
         .Build();
 
     /// <summary>
-    /// 是否显示表盘刻度 默认 false
+    /// 获得/设置 是否显示表盘刻度 默认 false
     /// </summary>
     [Parameter]
     public bool ShowClockScale { get; set; }
 
     /// <summary>
-    /// 是否显示秒 默认 true
+    /// 获得/设置 是否显示秒 默认 true
     /// </summary>
     [Parameter]
     public bool ShowSecond { get; set; } = true;
 
     /// <summary>
-    /// 是否显示分钟 默认 true
+    /// 获得/设置 是否显示分钟 默认 true
     /// </summary>
     [Parameter]
     public bool ShowMinute { get; set; } = true;
 
     /// <summary>
-    /// 是否自动切换 小时、分钟、秒 自动切换 默认 true
+    /// 获得/设置 是否自动切换 小时、分钟、秒 自动切换 默认 true
     /// </summary>
     [Parameter]
     public bool IsAutoSwitch { get; set; } = true;
 
     [CascadingParameter]
+    [NotNull]
     private DatePickerBody? DatePicker { get; set; }
 
     [Inject]
     [NotNull]
     private IStringLocalizer<ClockPicker>? Localizer { get; set; }
 
-    private string? CurrentDateString => DatePicker?.Value.ToString(DatePicker.DateFormat);
+    private string? CurrentDateString => DatePicker.Value.ToString(DatePicker.DateFormat);
 
     /// <summary>
     /// is hour or min or sec mode
@@ -118,24 +119,20 @@ private void SetTimePeriod(int hour)
     }
 
     /// <summary>
-    /// 设置小时调用此方法
+    /// JSInvoke 调用此方法
     /// </summary>
     [JSInvokable]
     public void SetTime(int hour, int minute, int second)
     {
         if (IsAutoSwitch)
         {
-            switch (Mode)
+            if (Mode == TimeMode.Hour && ShowMinute)
+            {
+                Mode = TimeMode.Minute;
+            }
+            else if (Mode == TimeMode.Minute && ShowSecond)
             {
-                case TimeMode.Hour:
-                    Mode = TimeMode.Minute;
-                    break;
-                case TimeMode.Minute:
-                    Mode = TimeMode.Second;
-                    break;
-                case TimeMode.Second:
-                default:
-                    break;
+                Mode = TimeMode.Second;
             }
         }
 
@@ -167,7 +164,7 @@ private static int GetSafeHour(int val)
     private void SwitchView()
     {
         Mode = TimeMode.Hour;
-        DatePicker?.SwitchDateView();
+        DatePicker.SwitchDateView();
     }
 
     private enum TimeMode

diff --git a/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.scss b/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.scss
@@ -18,7 +18,6 @@
     --bb-time-footer-btn-hover-bg-color: #409eff;
     --bb-time-footer-btn-active-color: #409eff;
     --bb-time-footer-btn-active-border-color: #409eff;
-    width: var(--bb-picker-panel-body-width);
 
     &.dragging {
         user-select: none;

diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
@@ -147,7 +147,7 @@
                         @ChildContent
                     </CascadingValue>
                     <CascadingValue Value="this" IsFixed="true">
-                        <ClockPicker Value="CurrentTime" OnValueChanged="OnTimeChanged" @ref="TimePickerPanel"
+                        <ClockPicker Value="CurrentTime" OnValueChanged="OnTimeChanged" @ref="TimePickerPanel" class="clock-panel-body"
                                      ShowClockScale="TimePickerOption.ShowClockScale" IsAutoSwitch="TimePickerOption.IsAutoSwitch"
                                      ShowMinute="TimePickerOption.ShowMinute" ShowSecond="TimePickerOption.ShowSecond">
                         </ClockPicker>

diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss
@@ -214,6 +214,10 @@
             }
         }
     }
+
+    .clock-panel-body {
+        width: var(--bb-picker-panel-body-width);
+    }
 }
 
 .popover-body {

diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
@@ -352,7 +352,7 @@
     "AscText": "Ascending",
     "DescText": "Descending"
   },
-  "BootstrapBlazor.Components.TimePickerPanel": {
+  "BootstrapBlazor.Components.ClockPicker": {
     "AMText": "AM",
     "PMText": "PM"
   }

diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
@@ -352,7 +352,7 @@
     "AscText": "升序",
     "DescText": "降序"
   },
-  "BootstrapBlazor.Components.TimePickerPanel": {
+  "BootstrapBlazor.Components.ClockPicker": {
     "AMText": "上午",
     "PMText": "下午"
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -214,6 +214,10 @@ @@
                 }
             }
         }
+        .clock-panel-body {
+            width: var(--bb-picker-panel-body-width);
+        }
     }
     .popover-body {
@@ Expand Down @@