@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDGridItem.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["gridItemConfigurationSettings", "area", "index", "children", "moveItem", "draggable", "onClick", "onDragStart", "onDragOver", "onDragDrop", "onDragEnd", "dragEffect", "scaleOnDrag", "opacityOnDrag", "dragShadow", "dragImage"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useRef } from "react";
function HUDGridItem(_ref) {
  var _ref$gridItemConfigur = _ref.gridItemConfigurationSettings,
    gridItemConfigurationSettings = _ref$gridItemConfigur === void 0 ? {} : _ref$gridItemConfigur,
    area = _ref.area,
    index = _ref.index,
    children = _ref.children,
    moveItem = _ref.moveItem,
    _ref$draggable = _ref.draggable,
    draggable = _ref$draggable === void 0 ? false : _ref$draggable,
    onClick = _ref.onClick,
    onDragStart = _ref.onDragStart,
    onDragOver = _ref.onDragOver,
    onDragDrop = _ref.onDragDrop,
    onDragEnd = _ref.onDragEnd,
    _ref$dragEffect = _ref.dragEffect,
    dragEffect = _ref$dragEffect === void 0 ? "move" : _ref$dragEffect,
    _ref$scaleOnDrag = _ref.scaleOnDrag,
    scaleOnDrag = _ref$scaleOnDrag === void 0 ? 1.05 : _ref$scaleOnDrag,
    _ref$opacityOnDrag = _ref.opacityOnDrag,
    opacityOnDrag = _ref$opacityOnDrag === void 0 ? 0.8 : _ref$opacityOnDrag,
    dragShadow = _ref.dragShadow,
    dragImage = _ref.dragImage,
    gridItemConfigurations = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    dragging = _useState2[0],
    setDragging = _useState2[1];
  var ref = useRef(null);
  var itemStyle = _objectSpread({
    gridArea: area,
    alignSelf: "stretch",
    justifySelf: "stretch",
    opacity: dragging ? opacityOnDrag : 1,
    transform: dragging ? "scale(".concat(scaleOnDrag, ")") : "scale(1)",
    cursor: draggable ? "move" : "default",
    transition: "transform 0.2s ease, opacity 0.2s ease",
    boxShadow: dragging ? dragShadow || "0 10px 20px rgba(0, 0, 0, 0.3)" : "0px 4px 8px rgba(0, 0, 0, 0.5)"
  }, gridItemConfigurationSettings);
  var handleDragStart = function handleDragStart(e) {
    if (!draggable) {
      return;
    }
    setDragging(true);
    e.dataTransfer.effectAllowed = dragEffect;
    e.dataTransfer.setData("text/plain", index);
    var image = dragImage || document.createElement("div");
    image.style.position = "absolute";
    image.style.top = "-9999px";
    document.body.appendChild(image);
    e.dataTransfer.setDragImage(image, 0, 0);
    if (onDragStart) {
      onDragStart(e);
    }
    return;
  };
  var handleDragEnd = function handleDragEnd(e) {
    setDragging(false);
    if (onDragEnd) {
      onDragEnd(e);
    }
    return;
  };
  var handleDragOver = function handleDragOver(e) {
    e.preventDefault();
    if (onDragOver) {
      onDragOver(e);
    }
    return;
  };
  var handleDrop = function handleDrop(e) {
    e.preventDefault();
    var dragIndex = parseInt(e.dataTransfer.getData("text/plain"), 10);
    moveItem(dragIndex, index);
    setDragging(false);
    if (onDragDrop) {
      onDragDrop(e);
    }
    return;
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    style: itemStyle,
    draggable: draggable,
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragOver: handleDragOver,
    onDrop: handleDrop,
    onClick: onClick
  }, gridItemConfigurations), children);
}
export default HUDGridItem;