Remove react-dnd
wrapper lib.
`react-simple-dnd` is just a wrapper for `react-dnd`, and it doesn't support React 16. This PR changes to using the underlying library directly.
This commit is contained in:
51
src/components/UI/dndHelpers.js
Normal file
51
src/components/UI/dndHelpers.js
Normal file
@ -0,0 +1,51 @@
|
||||
import ReactDNDHTML5Backend from 'react-dnd-html5-backend';
|
||||
import { DragDropContext as ReactDNDDragDropContext, DragSource as ReactDNDDragSource, DropTarget as ReactDNDDropTarget } from 'react-dnd';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export const DragSource = ({ namespace, ...props }) => {
|
||||
const DragComponent = ReactDNDDragSource(
|
||||
namespace,
|
||||
{
|
||||
beginDrag({ children, isDragging, connectDragComponent, ...ownProps }) {
|
||||
// We return the rest of the props as the ID of the element being dragged.
|
||||
return ownProps;
|
||||
},
|
||||
},
|
||||
(connect, monitor) => ({
|
||||
connectDragComponent: connect.dragSource(),
|
||||
}),
|
||||
)(
|
||||
({ children, connectDragComponent }) => children(connectDragComponent)
|
||||
);
|
||||
|
||||
return React.createElement(DragComponent, props, props.children);
|
||||
};
|
||||
DragSource.propTypes = {
|
||||
children: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export const DropTarget = ({ onDrop, namespace, ...props }) => {
|
||||
const DropComponent = ReactDNDDropTarget(
|
||||
namespace,
|
||||
{
|
||||
drop(ownProps, monitor) {
|
||||
onDrop(monitor.getItem());
|
||||
},
|
||||
},
|
||||
(connect, monitor) => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isHovered: monitor.isOver(),
|
||||
}),
|
||||
)(
|
||||
({ children, connectDropTarget, isHovered }) => children(connectDropTarget, { isHovered })
|
||||
);
|
||||
|
||||
return React.createElement(DropComponent, props, props.children);
|
||||
};
|
||||
DropTarget.propTypes = {
|
||||
onDrop: PropTypes.func.isRequired,
|
||||
children: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export const HTML5DragDrop = component => ReactDNDDragDropContext(ReactDNDHTML5Backend)(component);
|
Reference in New Issue
Block a user