@wordpress/compose/build/hooks/use-dragging/index.js

WordPress higher-order components (HOCs).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useDragging;
var _element = require("@wordpress/element");
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../use-isomorphic-layout-effect"));
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Event handlers that are triggered from `document` listeners accept a MouseEvent,
// while those triggered from React listeners accept a React.MouseEvent.
/**
 * @param {Object}                                  props
 * @param {(e: import('react').MouseEvent) => void} props.onDragStart
 * @param {(e: MouseEvent) => void}                 props.onDragMove
 * @param {(e?: MouseEvent) => void}                props.onDragEnd
 */
function useDragging({
  onDragStart,
  onDragMove,
  onDragEnd
}) {
  const [isDragging, setIsDragging] = (0, _element.useState)(false);
  const eventsRef = (0, _element.useRef)({
    onDragStart,
    onDragMove,
    onDragEnd
  });
  (0, _useIsomorphicLayoutEffect.default)(() => {
    eventsRef.current.onDragStart = onDragStart;
    eventsRef.current.onDragMove = onDragMove;
    eventsRef.current.onDragEnd = onDragEnd;
  }, [onDragStart, onDragMove, onDragEnd]);

  /** @type {(e: MouseEvent) => void} */
  const onMouseMove = (0, _element.useCallback)(event => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event), []);
  /** @type {(e?: MouseEvent) => void} */
  const endDrag = (0, _element.useCallback)(event => {
    if (eventsRef.current.onDragEnd) {
      eventsRef.current.onDragEnd(event);
    }
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', endDrag);
    setIsDragging(false);
  }, []);
  /** @type {(e: import('react').MouseEvent) => void} */
  const startDrag = (0, _element.useCallback)(event => {
    if (eventsRef.current.onDragStart) {
      eventsRef.current.onDragStart(event);
    }
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', endDrag);
    setIsDragging(true);
  }, []);

  // Remove the global events when unmounting if needed.
  (0, _element.useEffect)(() => {
    return () => {
      if (isDragging) {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', endDrag);
      }
    };
  }, [isDragging]);
  return {
    startDrag,
    endDrag,
    isDragging
  };
}
//# sourceMappingURL=index.js.map