react-layouts-builder/packages/esm/layouts-builder/LayoutContainer/DragNDrop.js

Lightweight and powerfull react layouts drag and drop

import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { LayoutContext } from '../Context/LayoutContext.js';
import React, { useState, useContext, useRef } from 'react';

var DragNDrop = function DragNDrop(_a) {
  var children = _a.children,
      layout = _a.layout,
      handleDrop = _a.handleDrop;

  var _b = useState(false),
      isDragging = _b[0],
      setIsDragging = _b[1];

  var _c = useState(),
      dragOverPosition = _c[0],
      setDragOverPosition = _c[1];

  var _d = useContext(LayoutContext),
      dataItem = _d.dataItem,
      setDataItem = _d.setDataItem;

  var _e = useState(),
      mouseOver = _e[0],
      setMouseOver = _e[1];

  var ref = useRef(null);

  var handleDragStart = function handleDragStart(event) {
    setDataItem(layout);
    console.log('This run setters');
    changeEditable(false);
  };

  var layoutId = layout['@id'] || layout.id;

  var handleDragOver = function handleDragOver(event) {
    event.preventDefault();
    event.stopPropagation();

    if (!dataItem) {
      return;
    }

    setIsDragging(true);
    if (!ref.current) return;
    var _a = ref.current,
        offsetLeft = _a.offsetLeft,
        offsetTop = _a.offsetTop; // Calculate the height and width of the target element

    var height = ref.current.offsetHeight;
    ref.current.offsetWidth; // Calculate the vertical and horizontal thresholds for positioning

    var verticalThreshold = height / 2;
    // Calculate the cursor position relative to the target element

    var cursorY = event.clientY - offsetTop;
    event.clientX - offsetLeft; // Determine the position based on the cursor position and thresholds
    // if (cursorX < horizontalThreshold) {
    //   setDragOverPosition('left');
    //   return;
    // } else if (cursorX > width - horizontalThreshold) {
    //   setDragOverPosition('right');
    //   return;
    // }

    if (cursorY < verticalThreshold) {
      setDragOverPosition('top');
      return;
    } else {
      setDragOverPosition('bottom');
      return;
    }
  };

  var handleDropEvent = function handleDropEvent(event) {
    event.preventDefault();
    var position = dragOverPosition;
    changeEditable(true);

    if (dataItem && position) {
      event.dataTransfer.clearData();
      handleDrop({
        item: dataItem,
        targetItemId: layoutId,
        position: position
      });
    } // Clear the dragged item state


    setDataItem(undefined);
    handleDragLeave();
  };

  var handleDragLeave = function handleDragLeave() {
    setIsDragging(false);
    setDragOverPosition(undefined);
  };

  var changeEditable = function changeEditable(b) {
    var editableElements = document.querySelectorAll('.your-class-name');
    editableElements.forEach(function (element) {
      element.setAttribute('contenteditable', !b ? 'false' : 'true');
    });
  };

  var attrs = layout.block ? {
    draggable: true,
    onDragStart: handleDragStart,
    className: "droppable-container ".concat(isDragging ? "lb-indice drop-".concat(dragOverPosition) : '', " ")
  } : {};
  return /*#__PURE__*/React.createElement("div", __assign({
    ref: ref,
    onDragOver: handleDragOver,
    onDrop: handleDropEvent,
    onDragLeave: handleDragLeave
  }, attrs), /*#__PURE__*/React.createElement("div", {
    className: "border-hidden ".concat(mouseOver === layoutId ? 'border-gray-200' : ''),
    onMouseOver: function onMouseOver(e) {
      e.preventDefault();
      e.stopPropagation();
      setMouseOver(layoutId);
    },
    onMouseLeave: function onMouseLeave() {
      return setMouseOver(undefined);
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: ""
  }, children)));
};

export { DragNDrop };