feat: support scroll speed (#50)

linxianxi · Nov 28, 2024 · 42b0122 · 42b0122
1 parent af205e6
commit 42b0122
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/docs/guides/api.md b/docs/guides/api.md
@@ -17,6 +17,7 @@ nav: Get Started
 | mode             | Selection mode                                                                                                                                              | `add` \| `remove` \| `reverse`                                    | `add`           |
 | items            | The collection value of all items, only the virtual list needs to be passed [（FAQ）](#faq)                                                                 | any[]                                                             | -               |
 | selectStartRange | Where to start with box selection                                                                                                                           | `all` \| `inside` \| `outside`                                    | `all`           |
+| scrollSpeed      | Scroll speed                                                                                                                                                | number                                                            | 4               |
 | scrollContainer  | Specify the scrolling container                                                                                                                             | () => HTMLElement                                                 |
 | dragContainer    | Specify the container that can start dragging. If `scrollContainer` is set, please do not set it because the two should be equal in a scrollable container. | () => HTMLElement                                                 | scrollContainer |
 | boxStyle         | Selection box style                                                                                                                                         | React.CSSProperties                                               | -               |

diff --git a/docs/guides/api.zh-CN.md b/docs/guides/api.zh-CN.md
@@ -17,6 +17,7 @@ nav: 快速上手
 | mode             | 模式                                                                                               | `add` \| `remove` \| `reverse`                                    | `add`           |
 | items            | 全部 item 的集合值，只有虚拟列表时要传[（FAQ）](#faq)                                              | any[]                                                             | -               |
 | selectStartRange | 从哪里可以开始进行框选                                                                             | `all` \| `inside` \| `outside`                                    | `all`           |
+| scrollSpeed      | 滚动速度                                                                                           | number                                                            | 4               |
 | scrollContainer  | 指定滚动的容器                                                                                     | () => HTMLElement                                                 |
 | dragContainer    | 指定可以开始拖拽的容器， 如果设置了 `scrollContainer` 请不要设置，因为在可滚动容器中这两个应该相等 | () => HTMLElement                                                 | scrollContainer |
 | boxStyle         | 框选框的样式                                                                                       | React.CSSProperties                                               | -               |

diff --git a/src/Selectable.tsx b/src/Selectable.tsx
@@ -17,6 +17,7 @@ export interface SelectableProps<T> {
   children?: React.ReactNode;
   mode?: 'add' | 'remove' | 'reverse';
   selectStartRange?: 'all' | 'inside' | 'outside';
+  scrollSpeed?: number;
   scrollContainer?: () => HTMLElement;
   dragContainer?: () => HTMLElement;
   boxStyle?: React.CSSProperties;
@@ -47,6 +48,7 @@ function Selectable<T>(
     mode = 'add',
     children,
     selectStartRange = 'all',
+    scrollSpeed,
     getContainer,
     scrollContainer: propsScrollContainer,
     dragContainer: propsDragContainer,
@@ -76,7 +78,7 @@ function Selectable<T>(
   const scrollContainer = useContainer(propsScrollContainer || getContainer);
   const dragContainer = useContainer(propsDragContainer || propsScrollContainer || getContainer);
 
-  const { smoothScroll, cancelScroll } = useScroll();
+  const { smoothScroll, cancelScroll } = useScroll(scrollSpeed);
   const startCoordsRef = useLatest(startCoords);
   const isDraggingRef = useLatest(isDragging);
   const selectStartRangeRef = useLatest(selectStartRange);

diff --git a/src/hooks/useScroll.ts b/src/hooks/useScroll.ts
@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
 import { getClientXY } from '../utils';
 
-const SCROLL_STEP = 4;
+const DEFAULT_SCROLL_SPEED = 4;
 
 const EDGE_OFFSET = 1;
 
-export default function useScroll() {
+export default function useScroll(scrollSpeed = DEFAULT_SCROLL_SPEED) {
   const topRaf = useRef<number | null>(null);
   const bottomRaf = useRef<number | null>(null);
   const leftRaf = useRef<number | null>(null);
@@ -39,7 +39,7 @@ export default function useScroll() {
         const callback = () => {
           if (container.scrollTop > 0) {
             topRaf.current = requestAnimationFrame(() => {
-              container.scrollTop -= SCROLL_STEP;
+              container.scrollTop -= scrollSpeed;
               callback();
             });
           }
@@ -59,7 +59,7 @@ export default function useScroll() {
         const callback = () => {
           if (container.scrollTop < container.scrollHeight - container.clientHeight) {
             bottomRaf.current = requestAnimationFrame(() => {
-              container.scrollTop += SCROLL_STEP;
+              container.scrollTop += scrollSpeed;
               callback();
             });
           }
@@ -76,7 +76,7 @@ export default function useScroll() {
         const callback = () => {
           if (container.scrollLeft > 0) {
             leftRaf.current = requestAnimationFrame(() => {
-              container.scrollLeft -= SCROLL_STEP;
+              container.scrollLeft -= scrollSpeed;
               callback();
             });
           }
@@ -96,7 +96,7 @@ export default function useScroll() {
         const callback = () => {
           if (container.scrollLeft < container.scrollWidth - container.clientWidth) {
             rightRaf.current = requestAnimationFrame(() => {
-              container.scrollLeft += SCROLL_STEP;
+              container.scrollLeft += scrollSpeed;
               callback();
             });
           }