@lonli-lokli/react-mosaic-component/lib/RootDropTargets.mjs

A React Tiling Window Manager

// libs/react-mosaic-component/src/lib/RootDropTargets.tsx
import classNames from "classnames";
import { values } from "lodash-es";
import React from "react";
import { useDrop } from "react-dnd";
import { MosaicDropTargetPosition } from "./internalTypes.mjs";
import { MosaicDropTarget } from "./MosaicDropTarget.mjs";
import { MosaicDragType } from "./types.mjs";
var RootDropTargets = React.memo(() => {
  const [{ isDragging }] = useDrop({
    accept: MosaicDragType.WINDOW,
    collect: (monitor) => ({
      isDragging: monitor.getItem() !== null && monitor.getItemType() === MosaicDragType.WINDOW
    })
  });
  const delayedIsDragging = useDelayedTrue(isDragging, 0);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("drop-target-container", {
        "-dragging": delayedIsDragging
      })
    },
    values(MosaicDropTargetPosition).map(
      (position) => /* @__PURE__ */ React.createElement(MosaicDropTarget, { position, path: [], key: position })
    )
  );
});
RootDropTargets.displayName = "RootDropTargets";
function useDelayedTrue(currentValue, delay) {
  const delayedRef = React.useRef(currentValue);
  const [, setCounter] = React.useState(0);
  const setAndRender = (newValue) => {
    delayedRef.current = newValue;
    setCounter((count) => count + 1);
  };
  if (!currentValue) {
    delayedRef.current = false;
  }
  React.useEffect(() => {
    if (delayedRef.current === currentValue || !currentValue) {
      return;
    }
    const timer = window.setTimeout(() => setAndRender(true), delay);
    return () => {
      window.clearTimeout(timer);
    };
  }, [currentValue]);
  return delayedRef.current;
}
export {
  RootDropTargets
};