From 2f2ce7d289b53943492dfff3ca75efe8ac738974 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Fri, 18 Nov 2022 12:17:31 +0800
Subject: [PATCH] feat(ui): `slides` support swipe gesture

---
 packages/site/src/styles/routes/layout.scss  |  3 ++-
 packages/ui/src/components/slides/Slides.tsx | 23 +++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/site/src/styles/routes/layout.scss b/packages/site/src/styles/routes/layout.scss
index 6abfeeff..4eaef200 100644
--- a/packages/site/src/styles/routes/layout.scss
+++ b/packages/site/src/styles/routes/layout.scss
@@ -80,7 +80,8 @@
       width: 28px;
       height: 2px;
       background-color: var(--#{$rd-prefix}text-color);
-      border-radius: 50%;
+      /* stylelint-disable-next-line declaration-property-value-allowed-list */
+      border-radius: 1px;
       /* stylelint-disable-next-line declaration-property-value-disallowed-list */
       transition: all 300ms linear;
       transform-origin: center;
diff --git a/packages/ui/src/components/slides/Slides.tsx b/packages/ui/src/components/slides/Slides.tsx
index 709b15db..27c8cb5d 100644
--- a/packages/ui/src/components/slides/Slides.tsx
+++ b/packages/ui/src/components/slides/Slides.tsx
@@ -63,8 +63,11 @@ export function DSlides<ID extends DId, T extends DSlideItem<ID>>(props: DSlides
   //#endregion
 
   const dataRef = useRef<{
+    startDragTime: number;
     clearTid?: () => void;
-  }>({});
+  }>({
+    startDragTime: 0,
+  });
 
   const async = useAsync();
 
@@ -214,7 +217,13 @@ export function DSlides<ID extends DId, T extends DSlideItem<ID>>(props: DSlides
             break;
           }
         }
-        changeActiveId(dList[newIndex].id);
+        if (newIndex === activeIndex) {
+          if (performance.now() - dataRef.current.startDragTime < 300 && Math.abs(dragDistance) > 30) {
+            changeActiveId(dList[Math.max(newIndex - 1, 0)].id);
+          }
+        } else {
+          changeActiveId(dList[newIndex].id);
+        }
       } else {
         let newIndex = activeIndex;
         let size = 0;
@@ -226,7 +235,13 @@ export function DSlides<ID extends DId, T extends DSlideItem<ID>>(props: DSlides
             break;
           }
         }
-        changeActiveId(dList[newIndex].id);
+        if (newIndex === activeIndex) {
+          if (performance.now() - dataRef.current.startDragTime < 300 && Math.abs(dragDistance) > 30) {
+            changeActiveId(dList[Math.min(newIndex + 1, dList.length - 1)].id);
+          }
+        } else {
+          changeActiveId(dList[newIndex].id);
+        }
       }
     }
     setDragStartPosition(undefined);
@@ -302,10 +317,12 @@ export function DSlides<ID extends DId, T extends DSlideItem<ID>>(props: DSlides
 
           if (e.button === 0) {
             setDragStartPosition(e[dVertical ? 'clientY' : 'clientX']);
+            dataRef.current.startDragTime = performance.now();
           }
         }}
         onTouchStart={(e) => {
           setDragStartPosition(e.touches[0][dVertical ? 'clientY' : 'clientX']);
+          dataRef.current.startDragTime = performance.now();
         }}
         onTouchEnd={() => {
           handleDragEnd();