tdesign-react/cjs/hooks/useMouseEvent.js

TDesign Component for React

/**
 * tdesign v1.15.1
 * (c) 2025 tdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

var useMouseEvent = function useMouseEvent(elementRef, options) {
  var _options$enabled = options.enabled,
    enabled = _options$enabled === void 0 ? true : _options$enabled,
    _options$enableTouch = options.enableTouch,
    enableTouch = _options$enableTouch === void 0 ? true : _options$enableTouch;
  var isMovingRef = React.useRef(false);
  var normalizeEvent = function normalizeEvent(e) {
    if (!enableTouch) {
      return e;
    }
    if ("touches" in e && e.touches.length > 0) {
      return e.touches[0];
    }
    if ("changedTouches" in e && e.changedTouches.length > 0) {
      return e.changedTouches[0];
    }
    if ("clientX" in e && "clientY" in e) {
      return e;
    }
    return void 0;
  };
  var getCoordinate = function getCoordinate(event) {
    var _elementRef$current;
    var rect = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
    if (!rect) {
      return {
        x: 0,
        y: 0
      };
    }
    var clientX = event.clientX,
      clientY = event.clientY;
    var left = clientX - rect.left;
    var top = clientY - rect.top;
    return {
      x: Math.min(Math.max(0, left), rect.width),
      y: Math.min(Math.max(0, top), rect.height)
    };
  };
  var emitMouseChange = function emitMouseChange(e, handler) {
    if (!handler) return;
    var event = normalizeEvent(e);
    var coordinate = getCoordinate(event);
    handler(event, {
      coordinate: coordinate
    });
  };
  var handleMouseMove = function handleMouseMove(e) {
    if (!isMovingRef.current) return;
    e.preventDefault();
    emitMouseChange(e, options.onMove);
  };
  var _handleMouseUp = function handleMouseUp(e) {
    if (!isMovingRef.current) return;
    isMovingRef.current = false;
    emitMouseChange(e, options.onUp);
    document.removeEventListener("mouseup", _handleMouseUp);
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("touchend", _handleMouseUp);
    document.removeEventListener("touchmove", handleMouseMove);
  };
  var handleMouseDown = function handleMouseDown(e) {
    isMovingRef.current = true;
    emitMouseChange(e, options.onDown);
    document.addEventListener("mouseup", _handleMouseUp);
    document.addEventListener("mousemove", handleMouseMove);
    if (!enableTouch) return;
    document.addEventListener("touchend", _handleMouseUp);
    document.addEventListener("touchmove", handleMouseMove, {
      passive: false
    });
  };
  var handleMouseEnter = function handleMouseEnter(e) {
    emitMouseChange(e, options.onEnter);
  };
  var handleMouseLeave = function handleMouseLeave(e) {
    emitMouseChange(e, options.onLeave);
  };
  React.useEffect(function () {
    var el = elementRef.current;
    if (!el || !enabled) return;
    el.addEventListener("mousedown", handleMouseDown);
    el.addEventListener("mousemove", handleMouseMove);
    el.addEventListener("mouseup", _handleMouseUp);
    options.onEnter && el.addEventListener("mouseenter", handleMouseEnter);
    options.onLeave && el.addEventListener("mouseleave", handleMouseLeave);
    if (!enableTouch) return;
    el.addEventListener("touchstart", handleMouseDown, {
      passive: false
    });
    el.addEventListener("touchend", _handleMouseUp);
    return function () {
      el.removeEventListener("mousedown", handleMouseDown);
      el.removeEventListener("mouseenter", handleMouseDown);
      el.removeEventListener("mouseleave", handleMouseLeave);
      el.removeEventListener("mousemove", handleMouseMove);
      el.removeEventListener("mouseup", _handleMouseUp);
      el.removeEventListener("touchstart", handleMouseDown);
      el.removeEventListener("touchend", _handleMouseUp);
    };
  }, [elementRef.current, options, enabled]);
  return {
    isMoving: isMovingRef.current
  };
};

exports["default"] = useMouseEvent;
//# sourceMappingURL=useMouseEvent.js.map