ci4sManagement-cloud/react-ui/src/hooks/useDraggable.ts

import { useState } from 'react';

/**
 * 处理 react-draggable 组件拖动结束时，响应了点击事件的
 */
export const useDraggable = (onClick: () => void) => {
  const [isDragging, setIsDragging] = useState(false);

  const handleStart = () => {
    setIsDragging(false);
  };

  const handleDrag = () => {
    if (!isDragging) {
      setIsDragging(true);
    }
  };

  const handleStop = () => {
    // 延迟设置 isDragging 为 false 是为了确保在点击事件触发之前它仍然为 true
    setTimeout(() => setIsDragging(false), 0);
  };

  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
    if (isDragging) {
      e.preventDefault();
      e.stopPropagation();
    } else {
      onClick();
    }
  };

  return {
    handleStart,
    handleDrag,
    handleStop,
    handleClick,
  };
};