Function useDrop

packages/react-aria/src/dnd/useDrop.ts:104–428

(options: DropOptions)

 * based drag and drop, in addition to full parity for keyboard and screen reader users.
 */
export function useDrop(options: DropOptions): DropResult {
  let {hasDropButton, isDisabled} = options;
  let [isDropTarget, setDropTarget] = useState(false);
  let state = useRef<{
    x: number;
    y: number;
    dragOverElements: Set<Element>;
    dropEffect: DataTransfer['dropEffect'];
    allowedOperations: DROP_OPERATION;
    dropActivateTimer: ReturnType<typeof setTimeout> | undefined;
  }>({
    x: 0,
    y: 0,
    dragOverElements: new Set<Element>(),
    dropEffect: 'none',
    allowedOperations: DROP_OPERATION.all,
    dropActivateTimer: undefined
  }).current;

  let fireDropEnter = (e: DragEvent) => {
    setDropTarget(true);

    if (typeof options.onDropEnter === 'function') {
      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
      options.onDropEnter({
        type: 'dropenter',
        x: e.clientX - rect.x,
        y: e.clientY - rect.y
      });
    }
  };

  let fireDropExit = (e: DragEvent) => {
    setDropTarget(false);

    if (typeof options.onDropExit === 'function') {
      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
      options.onDropExit({
        type: 'dropexit',
        x: e.clientX - rect.x,
        y: e.clientY - rect.y
      });
    }
  };

  let onDragOver = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();

    let allowedOperations = getAllowedOperations(e);
    if (
      e.clientX === state.x &&
      e.clientY === state.y &&
      allowedOperations === state.allowedOperations
    ) {
      e.dataTransfer.dropEffect = state.dropEffect;
      return;
    }