@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);
  (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) {
      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 = x + 'px';
      draggableEle.current.style.top = y + 'px';
    }
  }, [calculateDragPosition]);
  var closeDragElement = (0, _react.useCallback)(function () {
    document.removeEventListener('mouseup', closeDragElement);
    document.removeEventListener('mousemove', elementDrag);
  }, []);
  var dragMouseDown = (0, _react.useCallback)(function (e) {
    e = e || window.event; // e.preventDefault();

    var draggableEleRect = draggableEle.current.getBoundingClientRect();
    var style = draggableEle.current.style;
    var width = draggableEleRect.width;
    var parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
      left: 0,
      top: 0
    };
    var relativeRect = {
      left: draggableEleRect.left - parentEleRect.left,
      top: draggableEleRect.top - parentEleRect.top
    };
    var top = relativeRect.top,
        left = relativeRect.left;
    style.top = "".concat(top, "px");
    style.left = "".concat(left, "px");
    style.width = "".concat(width, "px");
    style.bottom = 'initial';
    style.right = 'initial';
    style.position = 'fixed';
    offset.current.x = draggableEle.current.offsetLeft - e.clientX;
    offset.current.y = draggableEle.current.offsetTop - e.clientY;
    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"];