How to use react-dnd-html5-backend - 10 common examples

// @flow

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

(getEmptyImage(): Image);
// $ExpectError
(getEmptyImage(): number);

var a: $npm$reactDnd$NativeTypes = NativeTypes.FILE;
var a: $npm$reactDnd$NativeTypes = NativeTypes.URL;
var a: $npm$reactDnd$NativeTypes = NativeTypes.TEXT;
// $ExpectError
var a: $npm$reactDnd$NativeTypes = NativeTypes.NOPE;
// $ExpectError
var a: $npm$reactDnd$NativeTypes = "FILE";

// @flow

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

(getEmptyImage(): Image);
// $ExpectError
(getEmptyImage(): number);

var a: $npm$reactDnd$NativeTypes = NativeTypes.FILE;
var a: $npm$reactDnd$NativeTypes = NativeTypes.URL;
var a: $npm$reactDnd$NativeTypes = NativeTypes.TEXT;
// $ExpectError
var a: $npm$reactDnd$NativeTypes = NativeTypes.NOPE;
// $ExpectError
var a: $npm$reactDnd$NativeTypes = "FILE";

componentDidMount() {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    this.props.connectDragPreview(getEmptyImage(), {
      // IE fallback: specify that we'd rather screenshot the node
      // when it already knows it's being dragged so we can hide it with CSS.
      // Removginv the fallabck makes it handle variable height elements
      // captureDraggingState: true,
    });
  }

componentDidMount() {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    this.props.connectDragPreview(getEmptyImage(), {
      // IE fallback: specify that we'd rather screenshot the node
      // when it already knows it's being dragged so we can hide it with CSS.
      captureDraggingState: true,
    });

    this.handleRowSelection = this.handleRowSelection.bind(this);
  }

componentDidMount() {
    // use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    this.props.connectDragPreview(getEmptyImage(), {
      // IE fallback: specify that we'd rather screenshot the node
      // when it already knows it's being dragged so we can hide it with CSS.
      captureDraggingState: true
    });
  }

componentDidMount() {
    // Replace the native drag preview with an empty image.
    this.props.connectDragPreview(getEmptyImage(), {
      captureDraggingState: true,
    });
  }

componentDidMount() {
    if (this.props.selected) {
      if (
        this.el &&
        typeof this.el.focus === 'function' &&
        !this.props.isScrolling()
      ) {
        this.el.focus();
      }
    }

    const { connectDragPreview } = this.props;
    if (connectDragPreview) {
      // Use empty image as a drag preview so browsers don't draw it
      // and we can draw whatever we want on the custom drag layer instead.
      connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      });
    }

    this.checkScreenshot();
  }

export function connectDnD(
  Comp: React.ComponentType
) {
  return DropTarget<
    {
      index: number
      moveRow: (from: number, to: number) => void
      insert: (index: number, data: DocumentState) => void
      plugins: Record
    },
    TargetProps
  >(
    ['row', NativeTypes.FILE, NativeTypes.URL],
    {
      hover(props, monitor, component) {
        if (!component) {
          return null
        }
        const node = component.getNode()
        if (!node) {
          return null
        }
        // set the boundingRect for later use (see isDraggingAbove)
        monitor.getItem().boundingRect = node.getBoundingClientRect()

        if (monitor.getItemType() === 'row') {
          const dragIndex = monitor.getItem().index
          const hoverIndex = props.index
          if (dragIndex === hoverIndex) {

}) {
  const container = React.useRef(null)
  const dispatch = useScopedDispatch()
  const store = useScopedStore()

  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
  const [collectedDragProps, drag, dragPreview] = useDrag({
    item: { id: row.id, index, type: 'row' },
    collect(monitor) {
      return {
        isDragging: !!monitor.isDragging()
      }
    }
  })
  const drop = useDrop({
    accept: ['row', NativeTypes.FILE, NativeTypes.URL],
    hover(item: RowDragObject, monitor) {
      if (!container.current) return
      monitor.getItem().boundingRect = container.current.getBoundingClientRect()

      if (item.type !== 'row') return
      const dragIndex = item.index
      const hoverIndex = index
      // Don't replace items with themselves
      if (dragIndex === hoverIndex) return

      const draggingAbove = isDraggingAbove(monitor)
      if (dragIndex < hoverIndex && draggingAbove) return
      if (dragIndex > hoverIndex && !draggingAbove) return
      moveRow(dragIndex, hoverIndex)

      // Note: we're mutating the monitor item here!

drop(item: RowDragObject, monitor) {
      const type = monitor.getItemType()
      if (type !== NativeTypes.FILE && type !== NativeTypes.URL) return
      // handled in nested drop zone
      if (monitor.didDrop()) return
      const dropIndex = index

      let transfer: DataTransfer
      if (type === NativeTypes.FILE) {
        const files: File[] = monitor.getItem().files
        transfer = createFakeDataTransfer(files)
      } else {
        // NativeTypes.URL
        const urls: string[] = monitor.getItem().urls
        transfer = createFakeDataTransfer([], urls[0])
      }

      for (const key in plugins) {
        const { onPaste } = plugins[key]