Created a DNDContext singleton (#5112)

huridocs · Sep 19, 2022 · 5cf75e9 · 5cf75e9
1 parent 69bb5d7
commit 5cf75e9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/app/react/App/DNDHTML5Backend.ts b/app/react/App/DNDHTML5Backend.ts
@@ -0,0 +1,14 @@
+import { DragDropContext } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+let context: any;
+
+function DNDHTMLBackend(DecoratedClass: any) {
+  if (context) {
+    return context(DecoratedClass);
+  }
+  context = DragDropContext(HTML5Backend);
+  return context(DecoratedClass);
+}
+
+export { DNDHTMLBackend };
diff --git a/app/react/Layout/DragAndDrop/DragAndDropContainer.js b/app/react/Layout/DragAndDrop/DragAndDropContainer.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { DragDropContext, DropTarget } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DropTarget } from 'react-dnd';
+import { DNDHTMLBackend } from 'app/App/DNDHTML5Backend';
 import ID from 'shared/uniqueID';
 import { Translate } from 'app/I18N';
 import DragAndDropItem from './DragAndDropItem';
@@ -110,4 +110,4 @@ const dragAndDropContainer = DropTarget('DRAG_AND_DROP_ITEM', containerTarget, c
   connectDropTarget: connect.dropTarget(),
 }))(DragAndDropContainer);
 
-export default DragDropContext(HTML5Backend)(dragAndDropContainer);
+export default DNDHTMLBackend(dragAndDropContainer);
diff --git a/app/react/Settings/components/NavlinksSettings.js b/app/react/Settings/components/NavlinksSettings.js
@@ -1,5 +1,3 @@
-import { DragDropContext } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Form } from 'react-redux-form';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -12,6 +10,7 @@ import { loadLinks, addLink, sortLink, saveLinks } from 'app/Settings/actions/na
 import { Translate } from 'app/I18N';
 import validator from 'app/Settings/utils/ValidateNavlinks';
 
+import { DNDHTMLBackend } from 'app/App/DNDHTML5Backend';
 import NavlinkForm from './NavlinkForm';
 import './styles/menu.scss';
 
@@ -159,6 +158,4 @@ function mapDispatchToProps(dispatch) {
 
 export { NavlinksSettings, mapStateToProps };
 
-export default DragDropContext(HTML5Backend)(
-  connect(mapStateToProps, mapDispatchToProps)(NavlinksSettings)
-);
+export default DNDHTMLBackend(connect(mapStateToProps, mapDispatchToProps)(NavlinksSettings));
diff --git a/app/react/Templates/components/TemplateCreator.js b/app/react/Templates/components/TemplateCreator.js
@@ -3,14 +3,13 @@ import 'app/Templates/scss/templates.scss';
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { DragDropContext } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import PropTypes from 'prop-types';
 import { resetTemplate, saveTemplate } from 'app/Templates/actions/templateActions';
 import { saveRelationType } from 'app/RelationTypes/actions/relationTypeActions';
 import MetadataTemplate from 'app/Templates/components/MetadataTemplate';
 import PropertyOption from 'app/Templates/components/PropertyOption';
 import { Translate } from 'app/I18N';
+import { DNDHTMLBackend } from 'app/App/DNDHTML5Backend';
 
 class TemplateCreator extends Component {
   componentWillUnmount() {
@@ -128,6 +127,4 @@ const mapStateToProps = ({ settings, relationTypes, thesauris, template }, props
 });
 
 export { TemplateCreator };
-export default DragDropContext(HTML5Backend)(
-  connect(mapStateToProps, mapDispatchToProps)(TemplateCreator)
-);
+export default DNDHTMLBackend(connect(mapStateToProps, mapDispatchToProps)(TemplateCreator));