@wulperstudio/cms/node/organisms/AlterBoard/components/SelectionOverlay/SelectionOverlay.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SelectionOverlay = void 0;
var _react = _interopRequireDefault(require("react"));
var _core = require("@dnd-kit/core");
var _reactDom = require("react-dom");
var _ColumnDragOverlay = require("../ColumnDragOverlay");
var _ItemDragOverlay = require("../ItemDragOverlay");
var _jsxRuntime = require("react/jsx-runtime");
var dropAnimation = {
  sideEffects: (0, _core.defaultDropAnimationSideEffects)({
    styles: {
      active: {
        opacity: '0.5'
      }
    }
  })
};
var SelectionOverlay = exports.SelectionOverlay = function SelectionOverlay(_ref) {
  var activeId = _ref.activeId,
    containers = _ref.containers,
    items = _ref.items,
    renderItemColumn = _ref.renderItemColumn,
    renderItem = _ref.renderItem,
    columnStyle = _ref.columnStyle,
    columnVariant = _ref.columnVariant;
  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_core.DragOverlay, {
    dropAnimation: dropAnimation,
    children: [activeId && containers.includes(activeId) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnDragOverlay.ColumnDragOverlay, {
      id: activeId,
      items: items[activeId],
      renderItem: renderItemColumn,
      variant: columnVariant,
      style: columnStyle
    }) : null, activeId && !containers.includes(activeId) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemDragOverlay.ItemDragOverlay, {
      id: activeId,
      renderItem: renderItem
    }) : null]
  }), document.body);
};