@zohodesk/dot/lib/Hooks/Dragger/useDragger.js

In this Library, we Provide Some Basic Components to Build Your Application

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = useDragger;

var _react = require("react");

var _DraggerUtil = require("./utils/DraggerUtil");

var _Config = require("../../Provider/Config");

var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));

var _propTypes = _interopRequireDefault(require("./props/propTypes"));

var _DraggerModule = _interopRequireDefault(require("./css/Dragger.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

//Hooks from React
//CustomFunction
//GlobalConfig
//Props
//CSS
function useDragger(_ref) {
  var isActive = _ref.isActive,
      ChildRef = _ref.ChildRef,
      _ref$boundaryLimit = _ref.boundaryLimit,
      boundaryLimit = _ref$boundaryLimit === void 0 ? (0, _Config.getDotLibraryConfig)('boundaryLimit') : _ref$boundaryLimit;
  var draggableEle = (0, _react.useRef)(null);
  var parentEle = (0, _react.useRef)(null);
  var offset = (0, _react.useRef)({
    x: 0,
    y: 0
  });
  var draggable = (0, _react.useRef)(false);
  var dragStarted = (0, _react.useRef)(false);
  var initialMouse = (0, _react.useRef)({
    x: 0,
    y: 0
  });
  var DRAG_DISTANCE_THRESHOLD = 4;
  (0, _react.useEffect)(function () {
    if (isActive) {
      parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
    }
  }, [isActive]); //calculateDragPosition --> To sperate Dom action

  var calculateDragPosition = (0, _react.useCallback)(function (x, y) {
    if (parentEle.current && draggableEle.current) {
      return (0, _DraggerUtil.DragPosCalc)({
        x: x,
        y: y,
        dragWrapper: parentEle.current,
        element: draggableEle.current,
        boundaryLimit: boundaryLimit
      });
    } else {
      return {
        x: x,
        y: y
      };
    }
  }, []);
  var elementDrag = (0, _react.useCallback)(function (e) {
    e = e || window.event;
    e.preventDefault();

    if (!draggable.current) {
      return;
    }

    if (!dragStarted.current) {
      var dx = Math.abs(e.clientX - initialMouse.current.x);
      var dy = Math.abs(e.clientY - initialMouse.current.y);

      if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
        return;
      }

      var draggableEleRect = draggableEle.current.getBoundingClientRect();
      var parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
        left: 0,
        top: 0
      };
      offset.current.x = draggableEleRect.left - e.clientX;
      offset.current.y = draggableEleRect.top - e.clientY;
      var relativeRect = {
        left: draggableEleRect.left - parentEleRect.left,
        top: draggableEleRect.top - parentEleRect.top
      };
      var styleRef = draggableEle.current.style;
      styleRef.top = "".concat(relativeRect.top, "px");
      styleRef.left = "".concat(relativeRect.left, "px");
      styleRef.width = "".concat(draggableEleRect.width, "px");
      styleRef.position = "fixed";
      styleRef.bottom = "initial";
      styleRef.right = "initial";
      dragStarted.current = true;
    }

    var left = offset.current.x + e.clientX;
    var top = offset.current.y + e.clientY;

    var _calculateDragPositio = calculateDragPosition(left, top),
        x = _calculateDragPositio.x,
        y = _calculateDragPositio.y;

    draggableEle.current.style.left = "".concat(x, "px");
    draggableEle.current.style.top = "".concat(y, "px");
  }, [calculateDragPosition]);
  var closeDragElement = (0, _react.useCallback)(function () {
    document.removeEventListener('mouseup', closeDragElement);
    document.removeEventListener('mousemove', elementDrag);
    dragStarted.current = false;
    draggable.current = false;
  }, []);
  var dragMouseDown = (0, _react.useCallback)(function (e) {
    e = e || window.event; // e.preventDefault();

    initialMouse.current = {
      x: e.clientX,
      y: e.clientY
    };
    dragStarted.current = false;
    draggable.current = true;
    document.addEventListener('mouseup', closeDragElement);
    document.addEventListener('mousemove', elementDrag);
  }, []);
  var removeListener = (0, _react.useCallback)(function (draggableEle) {
    var dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');

    if (dragController) {
      dragController.removeEventListener('mousedown', dragMouseDown);
      draggableEle.current = null;
    }
  }, []);
  (0, _react.useEffect)(function () {
    if (isActive) {
      draggableEle.current = ChildRef.current.closest('[data-drag-container=true]');
      var dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
      dragController && dragController.addEventListener('mousedown', dragMouseDown);
      dragController && dragController.classList.add(_DraggerModule["default"].dragCursor);
    } else {
      removeListener(draggableEle);
    }

    return function () {
      removeListener(draggableEle);
    };
  }, [ChildRef.current, isActive]);
  return null;
} //Props


useDragger.propTypes = _propTypes["default"];
useDragger.defaultProps = _defaultProps["default"];