diff --git a/docs/guides/api.md b/docs/guides/api.md index 4fea843..874788a 100644 --- 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 index 158888f..9b8ff4d 100644 --- 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 index 3b3215c..fad0a43 100644 --- a/src/Selectable.tsx +++ b/src/Selectable.tsx @@ -17,6 +17,7 @@ export interface SelectableProps { 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( mode = 'add', children, selectStartRange = 'all', + scrollSpeed, getContainer, scrollContainer: propsScrollContainer, dragContainer: propsDragContainer, @@ -76,7 +78,7 @@ function Selectable( 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 index 3e51aa8..c1a643b 100644 --- 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(null); const bottomRaf = useRef(null); const leftRaf = useRef(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(); }); }