{isEmpty &&
{gettext('No groupings applied to this view.')}
}
{!isEmpty && groupbys.map((groupby, index) => {
return (
@@ -47,8 +58,4 @@ Groupbys.propTypes = {
onMove: PropTypes.func,
};
-const DndGroupbysContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
- connectDropTarget: connect.dropTarget()
-}))(Groupbys);
-
-export default html5DragDropContext(DndGroupbysContainer);
+export default Groupbys;
diff --git a/frontend/src/metadata/components/popover/options-popover/option/index.js b/frontend/src/metadata/components/popover/options-popover/option/index.js
index 6f0d36ec61..4a181d0a1d 100644
--- a/frontend/src/metadata/components/popover/options-popover/option/index.js
+++ b/frontend/src/metadata/components/popover/options-popover/option/index.js
@@ -1,6 +1,6 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
-import { DragSource, DropTarget } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
import classnames from 'classnames';
import Icon from '../../../../../components/icon';
import IconBtn from '../../../../../components/icon-btn';
@@ -9,56 +9,73 @@ import Name from './name';
import './index.css';
-const dragSource = {
- beginDrag: props => {
- return { idx: props.index, data: props.option, mode: 'sfMetadataSingleSelectOption' };
- },
- endDrag(props, monitor) {
- const optionSource = monitor.getItem();
- const didDrop = monitor.didDrop();
- let optionTarget = {};
- if (!didDrop) {
- return { optionSource, optionTarget };
- }
- },
- isDragging(props, monitor) {
- const { index, dragged } = props;
- const { idx } = dragged;
- return idx > index;
- }
-};
+// const dragSource = {
+// beginDrag: props => {
+// return { idx: props.index, data: props.option, mode: 'sfMetadataSingleSelectOption' };
+// },
+// endDrag(props, monitor) {
+// const optionSource = monitor.getItem();
+// const didDrop = monitor.didDrop();
+// let optionTarget = {};
+// if (!didDrop) {
+// return { optionSource, optionTarget };
+// }
+// },
+// isDragging(props, monitor) {
+// const { index, dragged } = props;
+// const { idx } = dragged;
+// return idx > index;
+// }
+// };
-const dragCollect = (connect, monitor) => ({
- connectDragSource: connect.dragSource(),
- connectDragPreview: connect.dragPreview(),
- isDragging: monitor.isDragging()
-});
+// const dragCollect = (connect, monitor) => ({
+// connectDragSource: connect.dragSource(),
+// connectDragPreview: connect.dragPreview(),
+// isDragging: monitor.isDragging()
+// });
-const dropTarget = {
- drop(props, monitor) {
- const optionSource = monitor.getItem();
- const { index: targetIdx } = props;
- if (targetIdx !== optionSource.idx) {
- const optionTarget = { idx: targetIdx, data: props.option };
- props.onMove(optionSource, optionTarget);
- }
- }
-};
+// const dropTarget = {
+// drop(props, monitor) {
+// const optionSource = monitor.getItem();
+// const { index: targetIdx } = props;
+// if (targetIdx !== optionSource.idx) {
+// const optionTarget = { idx: targetIdx, data: props.option };
+// props.onMove(optionSource, optionTarget);
+// }
+// }
+// };
-const dropCollect = (connect, monitor) => ({
- connectDropTarget: connect.dropTarget(),
- isOver: monitor.isOver(),
- canDrop: monitor.canDrop(),
- dragged: monitor.getItem()
-});
+// const dropCollect = (connect, monitor) => ({
+// connectDropTarget: connect.dropTarget(),
+// isOver: monitor.isOver(),
+// canDrop: monitor.canDrop(),
+// dragged: monitor.getItem()
+// });
const Option = ({
- isOver, isDragging, canDrop, connectDragSource, connectDragPreview, connectDropTarget,
isViewing, isDeleting, isEditing, isPredefined,
option,
onDelete: propsDelete, onUpdate,
onMouseLeave, onMouseEnter: propsMouseEnter, onToggleFreeze, onOpenNameEditor, onCloseNameEditor,
}) => {
+ const [{ isDragging }, drag] = useDrag({
+ type: 'sfMetadataSingleSelectOption',
+ item: () => ({
+ idx: option.id,
+ data: option,
+ }),
+ collect: (monitor) => ({
+ isDragging: monitor.isDragging(),
+ }),
+ });
+
+ const [{ isOver, canDrop }, drop] = useDrop({
+ accept: 'sfMetadataSingleSelectOption',
+ collect: (monitor) => ({
+ isOver: monitor.isOver(),
+ canDrop: monitor.canDrop(),
+ })
+ });
const onDelete = useCallback((event) => {
event.nativeEvent.stopImmediatePropagation();
@@ -69,44 +86,41 @@ const Option = ({
propsMouseEnter(option.id);
}, [option, propsMouseEnter]);
- return connectDropTarget(
- connectDragPreview(
-
onMouseEnter()}
- onMouseLeave={onMouseLeave}
- >
- {connectDragSource(
-
-
-
- )}
-
-
-
-
-
- {(isViewing || isDeleting) && (
-
- )}
-
+ return (
+
drag(drop(node))}
+ className={classnames('sf-metadata-edit-option-container', {
+ 'sf-metadata-edit-option-can-drop': isOver && canDrop && !isDragging,
+ 'sf-metadata-edit-deleting-option': isDeleting,
+ 'sf-metadata-edit-option-can-drop-top': isOver && canDrop && isDragging,
+ 'sf-metadata-edit-option-viewing': isViewing,
+ 'sf-metadata-edit-option-editing': isEditing,
+ 'sf-metadata-edit-option-disabled': isPredefined,
+ })}
+ onMouseEnter={() => onMouseEnter()}
+ onMouseLeave={onMouseLeave}
+ >
+
+
- )
+
+
+
+
+
+ {(isViewing || isDeleting) && (
+
+ )}
+
+
);
};
@@ -127,15 +141,13 @@ Option.propTypes = {
onOpenNameEditor: PropTypes.func.isRequired,
onCloseNameEditor: PropTypes.func.isRequired,
- // drag
- isOver: PropTypes.bool,
- canDrop: PropTypes.bool,
- dragged: PropTypes.object,
- connectDragSource: PropTypes.func.isRequired,
- connectDropTarget: PropTypes.func.isRequired,
- connectDragPreview: PropTypes.func.isRequired,
+ // // drag
+ // isOver: PropTypes.bool,
+ // canDrop: PropTypes.bool,
+ // dragged: PropTypes.object,
+ // connectDragSource: PropTypes.func.isRequired,
+ // connectDropTarget: PropTypes.func.isRequired,
+ // connectDragPreview: PropTypes.func.isRequired,
};
-export default DropTarget('sfMetadataSingleSelectOption', dropTarget, dropCollect)(
- DragSource('sfMetadataSingleSelectOption', dragSource, dragCollect)(Option)
-);
+export default Option;
diff --git a/frontend/src/metadata/components/popover/options-popover/options-container.js b/frontend/src/metadata/components/popover/options-popover/options-container.js
index 04b9db553d..44d2c2768a 100644
--- a/frontend/src/metadata/components/popover/options-popover/options-container.js
+++ b/frontend/src/metadata/components/popover/options-popover/options-container.js
@@ -1,7 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import html5DragDropContext from '../../../../pages/wiki2/wiki-nav/html5DragDropContext';
const OptionsContainer = ({ inputRef, options }) => {
if (!Array.isArray(options) || options.length === 0) return null;
@@ -17,8 +15,4 @@ OptionsContainer.propTypes = {
options: PropTypes.array
};
-const DndOptionsContainer = DropTarget('sfMetadataSingleSelectOption', {}, connect => ({
- connectDropTarget: connect.dropTarget()
-}))(OptionsContainer);
-
-export default html5DragDropContext(DndOptionsContainer);
+export default OptionsContainer;
diff --git a/frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js b/frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js
index a9708ef978..7cf93399de 100644
--- a/frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js
+++ b/frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js
@@ -1,4 +1,4 @@
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+// import { DragDropContext } from 'react-dnd';
+// import HTML5Backend from 'react-dnd-html5-backend';
-export default DragDropContext(HTML5Backend);
+// export default DragDropContext(HTML5Backend);
diff --git a/frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js b/frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js
index 7410a37358..688dc5f70f 100644
--- a/frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js
+++ b/frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js
@@ -1,4 +1,4 @@
-import { DragSource, DropTarget } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
import PageItem from './page-item';
import wikiAPI from '../../../../utils/wiki-api';
import { wikiId, gettext } from '../../../../utils/constants';
@@ -77,6 +77,4 @@ const dropCollect = (connect, monitor) => ({
draggedPage: monitor.getItem()
});
-export default DropTarget('WikiNav', dropTarget, dropCollect)(
- DragSource('WikiNav', dragSource, dragCollect)(PageItem)
-);
+export default PageItem;
diff --git a/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js b/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
index f835a38a4c..c70164b3eb 100644
--- a/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
+++ b/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { UncontrolledTooltip } from 'reactstrap';
-import { DropTarget, DragLayer } from 'react-dnd';
-import html5DragDropContext from './html5DragDropContext';
+import { useDragLayer, useDrop } from 'react-dnd';
import DraggedPageItem from './pages/dragged-page-item';
import { gettext, wikiPermission } from '../../../utils/constants';
import { Utils } from '../../../utils/utils';
@@ -158,14 +157,14 @@ class WikiNav extends Component {
};
render() {
- const StructureBody = html5DragDropContext(
- DropTarget('WikiNav', {}, connect => ({
- connectDropTarget: connect.dropTarget()
- }))(DragLayer(this.collect)(this.renderStructureBody))
- );
+ // const StructureBody = html5DragDropContext(
+ // DropTarget('WikiNav', {}, connect => ({
+ // connectDropTarget: connect.dropTarget()
+ // }))(DragLayer(this.collect)(this.renderStructureBody))
+ // );
return (
-
+ {this.renderStructureBody()}
);
}