rsuite/cjs/Slider/useDrag.js

A suite of react components

'use client';
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = require("react");
var _PointerMoveTracker = _interopRequireDefault(require("dom-lib/PointerMoveTracker"));
var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
var _hooks = require("../internals/hooks");
const useDrag = props => {
  const rootRef = (0, _react.useRef)(null);
  const tooltipRef = (0, _react.useRef)(null);
  const {
    tooltip,
    disabled,
    onDragMove,
    onDragEnd,
    onDragStart,
    keepTooltipOpen
  } = props;
  const [active, setActive] = (0, _react.useState)(false);
  const moveTracker = (0, _react.useRef)(null);

  // Release the move event
  const releaseMoves = (0, _react.useCallback)(() => {
    moveTracker.current?.releaseMoves();
    moveTracker.current = null;
  }, []);
  const setTooltipPosition = (0, _react.useCallback)(() => {
    const tooltipElement = tooltipRef.current;
    if (tooltip && tooltipElement) {
      const width = (0, _getWidth.default)(tooltipElement);

      // Set the position of the tooltip
      (0, _addStyle.default)(tooltipElement, '--rs-tooltip-offset', `-${width / 2}px`);
    }
  }, [tooltip]);
  const handleDragMove = (0, _hooks.useEventCallback)((_deltaX, _deltaY, event) => {
    if (moveTracker.current?.isDragging()) {
      onDragMove?.(event, rootRef.current?.dataset);
      setTooltipPosition();
    }
  });
  const handleDragEnd = (0, _hooks.useEventCallback)(event => {
    setActive(false);
    releaseMoves();
    onDragEnd?.(event, rootRef.current?.dataset);
  });
  const getMouseMoveTracker = (0, _react.useCallback)(() => {
    return moveTracker.current || new _PointerMoveTracker.default(document.body, {
      onMove: handleDragMove,
      onMoveEnd: handleDragEnd,
      useTouchEvent: true
    });
  }, [handleDragEnd, handleDragMove]);
  const onMoveStart = (0, _hooks.useEventCallback)(event => {
    if (disabled) {
      return;
    }
    moveTracker.current = getMouseMoveTracker();
    moveTracker.current?.captureMoves(event);
    rootRef.current?.focus();
    setActive(true);
    onDragStart?.(event);
  });
  const onMouseEnter = (0, _hooks.useEventCallback)(() => {
    setTooltipPosition();
  });
  (0, _react.useEffect)(() => {
    if (keepTooltipOpen) {
      onMouseEnter();
    }
    return () => {
      releaseMoves();
    };
  }, [releaseMoves, keepTooltipOpen]);
  return {
    active,
    rootRef,
    tooltipRef,
    onMoveStart,
    onMouseEnter
  };
};
var _default = exports.default = useDrag;