@uiw/react-drag-event-interactive/cjs/index.js

react drag event interactive

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {};
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("./utils");
Object.keys(_utils).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _utils[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _utils[key];
    }
  });
});
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "onMove", "onDown"];
var Interactive = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-interactive' : _props$prefixCls,
    className = props.className,
    onMove = props.onMove,
    onDown = props.onDown,
    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var container = (0, _react.useRef)(null);
  var hasTouched = (0, _react.useRef)(false);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    isDragging = _useState2[0],
    setDragging = _useState2[1];
  var onMoveCallback = (0, _utils.useEventCallback)(onMove);
  var onKeyCallback = (0, _utils.useEventCallback)(onDown);

  // Prevent mobile browsers from handling mouse events (conflicting with touch ones).
  // If we detected a touch interaction before, we prefer reacting to touch events only.
  var isValid = function isValid(event) {
    if (hasTouched.current && !(0, _utils.isTouch)(event)) return false;
    hasTouched.current = (0, _utils.isTouch)(event);
    return true;
  };
  var handleMove = (0, _react.useCallback)(function (event) {
    (0, _utils.preventDefaultMove)(event);
    if (!container.current) return;
    var isDown = (0, _utils.isTouch)(event) ? event.touches.length > 0 : event.buttons > 0;
    if (!isDown) {
      setDragging(false);
      return;
    }
    onMoveCallback === null || onMoveCallback === void 0 || onMoveCallback((0, _utils.getRelativePosition)(container.current, event), event);
  }, [onMoveCallback]);
  var handleMoveEnd = (0, _react.useCallback)(function () {
    return setDragging(false);
  }, []);
  var toggleDocumentEvents = (0, _react.useCallback)(function (state) {
    if (state) {
      window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
      window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
    } else {
      window.removeEventListener('mousemove', handleMove);
      window.removeEventListener('mouseup', handleMoveEnd);
      window.removeEventListener('touchmove', handleMove);
      window.removeEventListener('touchend', handleMoveEnd);
    }
  }, [handleMove, handleMoveEnd]);
  (0, _react.useEffect)(function () {
    toggleDocumentEvents(isDragging);
    return function () {
      toggleDocumentEvents(false);
    };
  }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
  var handleMoveStart = (0, _react.useCallback)(function (event) {
    var activeEl = document.activeElement;
    activeEl === null || activeEl === void 0 || activeEl.blur();
    (0, _utils.preventDefaultMove)(event.nativeEvent);
    if (!isValid(event.nativeEvent)) return;
    if (!container.current) return;
    onKeyCallback === null || onKeyCallback === void 0 || onKeyCallback((0, _utils.getRelativePosition)(container.current, event.nativeEvent), event.nativeEvent);
    setDragging(true);
  }, [onKeyCallback]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
    className: [prefixCls, className || ''].filter(Boolean).join(' '),
    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), {}, {
      touchAction: 'none'
    }),
    ref: container,
    tabIndex: 0,
    onMouseDown: handleMoveStart,
    onTouchStart: handleMoveStart
  }));
});
Interactive.displayName = 'Interactive';
var _default = exports["default"] = Interactive;