react-mosaic-component2/MosaicDropTarget.mjs

A React Tiling Window Manager

// src/MosaicDropTarget.tsx
import classNames from "classnames";
import React, { useContext } from "react";
import { useDrop } from "react-dnd";
import { MosaicContext } from "./contextTypes.mjs";
import { MosaicDragType } from "./types.mjs";
function MosaicDropTarget({ path, position }) {
  const { mosaicId } = useContext(MosaicContext);
  const [{ isOver, draggedMosaicId }, connectDropTarget] = useDrop({
    accept: MosaicDragType.WINDOW,
    drop: (item, _monitor) => {
      if (mosaicId === item?.mosaicId) {
        return { path, position };
      } else {
        return {};
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      draggedMosaicId: (monitor.getItem() || {}).mosaicId
    })
  });
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      ref: (element) => {
        connectDropTarget(element);
      },
      className: classNames("drop-target", position, {
        "drop-target-hover": isOver && draggedMosaicId === mosaicId
      })
    }
  );
}
export {
  MosaicDropTarget
};