Native Drag Sources

/**
 * Native HTML5 drag source type constants
 * These are used to identify different types of external drag sources
 */
namespace NativeTypes {
  /** Constant for file drag operations from the file system */
  const FILE: "__NATIVE_FILE__";
  /** Constant for URL/link drag operations from browsers or applications */
  const URL: "__NATIVE_URL__";
  /** Constant for text drag operations */
  const TEXT: "__NATIVE_TEXT__";
  /** Constant for HTML content drag operations */
  const HTML: "__NATIVE_HTML__";
}

import { useDrop } from "react-dnd";
import { NativeTypes } from "react-dnd-html5-backend";

// Accept file drops
function FileDropZone() {
  const [{ isOver }, drop] = useDrop({
    accept: NativeTypes.FILE,
    drop: (item: { files: File[] }) => {
      console.log("Files dropped:", item.files);
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <div ref={drop} style={{ background: isOver ? "lightblue" : "white" }}>
      Drop files here
    </div>
  );
}

// Accept URL drops
function URLDropZone() {
  const [{ isOver }, drop] = useDrop({
    accept: NativeTypes.URL,
    drop: (item: { urls: string[] }) => {
      console.log("URLs dropped:", item.urls);
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <div ref={drop} style={{ background: isOver ? "lightgreen" : "white" }}>
      Drop URLs here
    </div>
  );
}

// Accept text drops
function TextDropZone() {
  const [{ isOver }, drop] = useDrop({
    accept: NativeTypes.TEXT,
    drop: (item: { text: string }) => {
      console.log("Text dropped:", item.text);
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <div ref={drop} style={{ background: isOver ? "lightyellow" : "white" }}>
      Drop text here
    </div>
  );
}

// Accept multiple native types
function MultiTypeDropZone() {
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: [NativeTypes.FILE, NativeTypes.URL, NativeTypes.TEXT, NativeTypes.HTML],
    drop: (item: any, monitor) => {
      const itemType = monitor.getItemType();
      
      switch (itemType) {
        case NativeTypes.FILE:
          console.log("Files:", item.files);
          break;
        case NativeTypes.URL:
          console.log("URLs:", item.urls);
          break;
        case NativeTypes.TEXT:
          console.log("Text:", item.text);
          break;
        case NativeTypes.HTML:
          console.log("HTML:", item.html);
          break;
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  });

  return (
    <div 
      ref={drop} 
      style={{ 
        background: isOver && canDrop ? "lightcoral" : "white",
        minHeight: "100px",
        border: "2px dashed #ccc"
      }}
    >
      Drop files, URLs, text, or HTML here
    </div>
  );
}