@arudovwen/react-form-builder/lib/form-elements/component-drag-layer.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDnd = require("react-dnd");
var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
var _componentDragPreview = require("./component-drag-preview");
const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%'
};
function getItemStyles(props) {
  const {
    initialOffset,
    currentOffset
  } = props;
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none'
    };
  }
  let {
    x,
    y
  } = currentOffset;
  const transform = `translate(${x}px, ${y}px)`;
  return {
    transform,
    WebkitTransform: transform
  };
}
const CustomDragLayer = props => {
  const {
    item,
    itemType,
    isDragging
  } = props;
  function renderItem() {
    switch (itemType) {
      case _ItemTypes.default.BOX:
        return /*#__PURE__*/_react.default.createElement(_componentDragPreview.BoxDragPreview, {
          item: item
        });
      default:
        return null;
    }
  }
  if (!isDragging) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    style: layerStyles
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: getItemStyles(props)
  }, renderItem()));
};
var _default = exports.default = (0, _reactDnd.DragLayer)(monitor => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  isDragging: monitor.isDragging()
}))(CustomDragLayer);