wix-style-react/src/DragDropContextProvider/DragDropContextProvider.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import TouchBackend from './TouchBackend';
import { DndProvider, createDndContext } from 'react-dnd';

let defaultManager;
function getDefaultManager(backend) {
  if (!defaultManager) {
    defaultManager = createDndContext(
      backend,
      {},
      {
        enableMouseEvents: true,
      },
    ).dragDropManager;
  }

  return defaultManager;
}

// https://github.com/react-dnd/react-dnd/issues/186#issuecomment-110333064
class DragDropContextProvider extends React.Component {
  static propTypes = {
    children: PropTypes.node,
    backend: PropTypes.func,
  };

  static defaultProps = {
    backend: TouchBackend,
  };

  static contextTypes = {
    dragDropManager: PropTypes.object,
  };

  static childContextTypes = {
    dragDropManager: PropTypes.object,
  };

  // we add `manager` to instance to allow to manipulate d&d in tests
  getManager() {
    return (
      this.context.dragDropManager || getDefaultManager(this.props.backend)
    );
  }

  getChildContext() {
    return {
      dragDropManager: this.getManager(),
    };
  }

  render() {
    const { backend, children } = this.props;

    return (
      <DndProvider manager={this.getManager(backend)}>{children}</DndProvider>
    );
  }
}

export default DragDropContextProvider;