PullDownToRefresh: fix the trigger

src/timelines/PullDownToRefresh.tsx

@@ -52,7 +52,7 @@ const PullDownToRefresh: Component<{
   let lts = -1;
   let ds = 0;
   let holding = false;
-  const K = 10;
+  const K = 20;
   const updatePullDown = (ts: number) => {
     released = false;
     try {
@@ -60,8 +60,9 @@ const PullDownToRefresh: Component<{
       const dt = lts !== -1 ? ts - lts : 1 / 60;
       const vspring = holding ? 0 : K * x * dt;
       v = ds / dt - vspring;
+      const final = Math.max(Math.min(x + v * dt, stopPos()), 0);
 
-      setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0));
+      setPullDown(final);
 
       if (Math.abs(x) > 1 || Math.abs(v) > 1) {
         requestAnimationFrame(updatePullDown);
@@ -69,15 +70,6 @@ const PullDownToRefresh: Component<{
         v = 0;
         lts = -1;
       }
-
-      if (
-        !holding &&
-        untrack(pullDown) >= stopPos() &&
-        !props.loading &&
-        props.onRefresh
-      ) {
-        setTimeout(props.onRefresh, 0);
-      }
     } finally {
       ds = 0;
       released = true;
@@ -89,6 +81,11 @@ const PullDownToRefresh: Component<{
   const onWheelNotUpdated = () => {
     wheelTimeout = undefined;
     holding = false;
+
+    if (released) {
+      released = false;
+      requestAnimationFrame(updatePullDown);
+    }
   };
 
   const handleLinkedWheel = (event: WheelEvent) => {
@@ -97,11 +94,18 @@ const PullDownToRefresh: Component<{
       const d = untrack(pullDown);
       if (d > 1) event.preventDefault();
       ds = -(event.deltaY / window.devicePixelRatio / 2);
-      holding = d < stopPos();
       if (wheelTimeout) {
         clearTimeout(wheelTimeout);
       }
-      wheelTimeout = setTimeout(onWheelNotUpdated, 200);
+      if (d >= stopPos() && !props.loading) {
+        props.onRefresh?.();
+
+        holding = false;
+        wheelTimeout = undefined;
+      } else {
+        holding = true;
+        wheelTimeout = setTimeout(onWheelNotUpdated, 200);
+      }
 
       if (released) {
         released = false;
@@ -151,12 +155,8 @@ const PullDownToRefresh: Component<{
     lastTouchId = undefined;
     lastTouchScreenY = 0;
     holding = false;
-    if (
-      untrack(indicatorOfsY) >= stopPos() &&
-      !props.loading &&
-      props.onRefresh
-    ) {
-      setTimeout(props.onRefresh, 0);
+    if (untrack(pullDown) >= stopPos() && !props.loading) {
+      props.onRefresh?.();
     } else {
       if (released) {
         released = false;
@@ -203,9 +203,7 @@ const PullDownToRefresh: Component<{
       background-color: var(--tutu-color-surface);
 
       > :global(.refresh-icon) {
-        transform: rotate(
-          ${`${((indicatorOfsY() / 160) * 180).toString()}deg`}
-        );
+        transform: rotate(${`${(indicatorOfsY() / 160 / 2).toString()}turn`});
         will-change: transform;
       }