fix: onEnd should be correct when items exist (#38)

linxianxi · Jun 14, 2024 · e3a1bdc · e3a1bdc
1 parent da36613
commit e3a1bdc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/src/Selectable.tsx b/src/Selectable.tsx
@@ -110,7 +110,7 @@ function Selectable<T>(
  if (onEnd) {
  if (virtual) {
  unmountItemsInfo.current.forEach((info, item) => {
- if (items.includes(item)) {
+ if (items.some((i) => compareFn(i, item))) {
  const inRange = isInRange(
  info.rule,
  {
@@ -212,10 +212,10 @@ function Selectable<T>(
  const scrollListenerElement = scrollContainer === document.body ? document : scrollContainer;
 
  const onScroll = (e: Event) => {
- if (isDraggingRef.current && scrollContainer) {
- const target = e.target as HTMLElement;
- scrollInfo.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft };
+ const target = e.target as HTMLElement;
+ scrollInfo.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft };
 
+ if (isDraggingRef.current && scrollContainer) {
  const containerRect = scrollContainer.getBoundingClientRect();
  const x = Math.min(
  moveClient.current.x - containerRect.left + scrollContainer.scrollLeft,
@@ -237,7 +237,6 @@ function Selectable<T>(
  window.removeEventListener('mouseup', onMouseUp);
  window.removeEventListener('touchmove', onMouseMove);
  window.removeEventListener('touchend', onMouseUp);
- scrollListenerElement.removeEventListener('scroll', onScroll);
 
  if (isDraggingRef.current) {
  scrollContainer.style.position = scrollContainerOriginPosition;
@@ -268,11 +267,11 @@ function Selectable<T>(
  window.addEventListener('mouseup', onMouseUp);
  window.addEventListener('touchmove', onMouseMove, { passive: false });
  window.addEventListener('touchend', onMouseUp);
- scrollListenerElement.addEventListener('scroll', onScroll);
  };
 
  dragContainer.addEventListener('mousedown', onMouseDown);
  dragContainer.addEventListener('touchstart', onMouseDown);
+ scrollListenerElement.addEventListener('scroll', onScroll);
 
  return () => {
  if (scrollContainerOriginPosition) {

diff --git a/src/hooks/useSelectable.ts b/src/hooks/useSelectable.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Rule, useSelectableContext } from '../context';
 import { isInRange } from '../utils';
 import useUpdateEffect from './useUpdateEffect';
@@ -30,15 +30,14 @@ export default function useSelectable<T>({
  compareFn,
  } = useSelectableContext();
  const node = useRef<HTMLElement | null>(null);
- const rectRef = useRef<DOMRect>();
 
  const [inRange, setInRange] = useState(false);
 
  useEffect(() => {
- const nodeRect = node.current?.getBoundingClientRect();
- rectRef.current = nodeRect;
- setInRange(isInRange(rule, nodeRect, scrollContainer, boxPosition, boxRef));
- }, [rectRef.current, rule, scrollContainer, boxPosition]);
+ setInRange(
+  isInRange(rule, node.current?.getBoundingClientRect(), scrollContainer, boxPosition, boxRef),
+ );
+ }, [rule, scrollContainer, boxPosition]);
 
  const isSelected = contextValue.some((i) => compareFn(i, value));
 
@@ -72,15 +71,15 @@ export default function useSelectable<T>({
  }, [isSelecting]);
 
  // collect item unmount information when virtual
- useEffect(() => {
+ useLayoutEffect(() => {
  if (virtual) {
  unmountItemsInfo.current.delete(value);
 
  return () => {
- if (rectRef.current) {
+ if (node.current) {
  unmountItemsInfo.current.set(value, {
  rule,
- rect: rectRef.current,
+ rect: node.current.getBoundingClientRect(),
  disabled,
  scrollLeft: scrollInfo.current.scrollLeft,
  scrollTop: scrollInfo.current.scrollTop,