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

Wulper Studio Library Components CMS

import React from 'react';
import { defaultDropAnimationSideEffects, DragOverlay } from '@dnd-kit/core';
import { createPortal } from 'react-dom';
import { ColumnDragOverlay } from '../ColumnDragOverlay';
import { ItemDragOverlay } from '../ItemDragOverlay';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var dropAnimation = {
  sideEffects: defaultDropAnimationSideEffects({
    styles: {
      active: {
        opacity: '0.5'
      }
    }
  })
};
export var 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__*/createPortal(/*#__PURE__*/_jsxs(DragOverlay, {
    dropAnimation: dropAnimation,
    children: [activeId && containers.includes(activeId) ? /*#__PURE__*/_jsx(ColumnDragOverlay, {
      id: activeId,
      items: items[activeId],
      renderItem: renderItemColumn,
      variant: columnVariant,
      style: columnStyle
    }) : null, activeId && !containers.includes(activeId) ? /*#__PURE__*/_jsx(ItemDragOverlay, {
      id: activeId,
      renderItem: renderItem
    }) : null]
  }), document.body);
};