bug(DateTimePicker): can't drag clock in NET6 (dotnetcore#3376)

* fix: 更新脚本兼容 NET6 * fix: 修复 NET6.0 版本无法拖动表针问题 * chore: bump version 8.5.1-beta01
wozpren · Apr 30, 2024 · 4451772 · 4451772
1 parent a6b5a01
commit 4451772
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.5.0</Version>
+    <Version>8.5.1-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.cs b/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.cs
@@ -3,6 +3,7 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.Extensions.Localization;
+using System.Runtime.CompilerServices;
 
 namespace BootstrapBlazor.Components;
 
@@ -81,6 +82,12 @@ public partial class ClockPicker
 
     private string HourValue => (Value.Hours > 12 ? (Value.Hours - 12) : Value.Hours).ToString("D2");
 
+#if NET6_0
+    private string _version = "NET6.0";
+#else
+    private string _version = $"NET{Environment.Version}";
+#endif
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -90,17 +97,17 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (!firstRender && Module != null)
+        if (!firstRender)
         {
-            await Module.InvokeVoidAsync("update", Id, Value.Hours, Value.Minutes, Value.Seconds);
+            await InvokeVoidAsync("update", Id, new { Hour = Value.Hours, Minute = Value.Minutes, Second = Value.Seconds, Version = _version });
         }
     }
 
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Value.Hours, Value.Minutes, Value.Seconds);
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new { Invoke = Interop, Hour = Value.Hours, Minute = Value.Minutes, Second = Value.Seconds, Version = _version });
 
     private void SetMode(TimeMode mode) => Mode = mode;
 

diff --git a/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.js b/src/BootstrapBlazor/Components/ClockPicker/ClockPicker.razor.js
@@ -8,7 +8,8 @@ const setValue = (picker, point, value) => {
 
     if (mode === "Hour") {
         val.Hour = Math.floor(value)
-        if (picker.isPM) {
+        const isPM = el.querySelector('.bb-time-footer > .active').classList.contains('btn-pm');
+        if (isPM) {
             val.Hour += 12;
         }
     }
@@ -61,20 +62,9 @@ const setDeg = (point, value, rate) => {
     point.style.setProperty('transform', `rotate(${deg}deg)`);
 }
 
-export function init(id, invoke, hour, minute, second) {
-    const el = document.getElementById(id);
-    const picker = {
-        el, invoke,
-        val:
-        {
-            Hour: hour, Minute: minute, Second: second
-        },
-        body: el.querySelector('.bb-time-body'),
-        isPM: el.querySelector('.bb-time-footer > .active').classList.contains('btn-pm'),
-        pointers: [...el.querySelectorAll('.bb-clock-point')]
-    };
-
-    picker.pointers.forEach(p => {
+const initDrag = (picker, pointers) => {
+    const { el, invoke } = picker;
+    pointers.forEach(p => {
         Drag.drag(p,
             e => {
                 el.classList.add('dragging');
@@ -95,15 +85,30 @@ export function init(id, invoke, hour, minute, second) {
             },
             e => {
                 el.classList.remove('dragging');
+                console.log('drop-end')
                 invoke.invokeMethodAsync('SetTime', picker.val.Hour, picker.val.Minute, picker.val.Second);
             }
         );
 
         setPoint(picker, p);
     })
+}
+
+export function init(id, options) {
+    const { invoke, hour, minute, second } = options;
+    const el = document.getElementById(id);
+    const picker = {
+        el, invoke,
+        val:
+        {
+            Hour: hour, Minute: minute, Second: second
+        }
+    };
     Data.set(id, picker);
 
-    EventHandler.on(picker.body, 'click', '.bb-clock-panel > div', e => {
+    initDrag(picker, [...el.querySelectorAll('.bb-clock-point')]);
+
+    EventHandler.on(el, 'click', '.bb-time-body .bb-clock-panel > div', e => {
         const val = parseInt(e.delegateTarget.textContent);
         const point = e.delegateTarget.parentNode.querySelector('.bb-clock-point');
 
@@ -123,10 +128,18 @@ export function init(id, invoke, hour, minute, second) {
     })
 }
 
-export function update(id, hour, minute, second) {
+export function update(id, options) {
+    const { hour, minute, second, version } = options;
     const picker = Data.get(id);
     if (picker) {
         const { el, val } = picker;
+        if (version === 'NET6.0') {
+            const pointers = [...el.querySelectorAll('.bb-clock-point')];
+            pointers.forEach(p => {
+                Drag.dispose(p);
+            });
+            initDrag(picker, pointers);
+        }
         if (val.Hour !== hour) {
             val.Hour = hour;
             const point = el.querySelector('.bb-clock-panel-hour > .bb-clock-point')
@@ -142,8 +155,6 @@ export function update(id, hour, minute, second) {
             const point = el.querySelector('.bb-clock-panel-second > .bb-clock-point')
             setDeg(point, second, 6)
         }
-
-        picker.isPM = el.querySelector('.bb-time-footer > .active').classList.contains('btn-pm');
     }
 }