fix: navigation tree working

Signed-off-by: alejogm18 <[email protected]>
reactioncommerce · Aug 4, 2021 · 87af77a · 87af77a
1 parent 79fee07
commit 87af77a
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 27,308 deletions.
diff --git a/imports/client/ui/startup.js b/imports/client/ui/startup.js
@@ -8,7 +8,7 @@ import { ThemeProvider } from "styled-components";
 import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles";
 import { ApolloProvider } from "react-apollo";
 import { DndProvider } from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { ComponentsProvider } from "@reactioncommerce/components-context";
 import { TranslationProvider } from "/imports/plugins/core/ui/client/providers";
 import initApollo from "/imports/plugins/core/graphql/lib/helpers/initApollo";
@@ -68,7 +68,7 @@ Meteor.startup(() => {
 
   Tracker.autorun((computation) => {
     const primaryShopSub = Meteor.subscribe("PrimaryShop");
-
+    const el = document.getElementsByTagName("body");
     if (primaryShopSub.ready()) {
       ReactDOM.render(
         (
@@ -80,7 +80,7 @@ Meteor.startup(() => {
                     <ThemeProvider theme={theme}>
                       <MuiThemeProvider theme={defaultTheme}>
                         <SnackbarProvider anchorOrigin={snackbarPosition} maxSnack={3}>
-                          <DndProvider backend={HTML5Backend}>
+                          <DndProvider backend={HTML5Backend} options={{ rootElement: el }}>
                             <Route>
                               {(routeProps) => (
                                 <RouterContext.Provider value={routeProps}>

diff --git a/imports/plugins/core/navigation/client/components/NavigationItemList.js b/imports/plugins/core/navigation/client/components/NavigationItemList.js
@@ -2,9 +2,10 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import Button from "@material-ui/core/Button";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import NavigationItemCard from "./NavigationItemCard";
 
-
 const styles = (theme) => ({
   root: {
     display: "flex",
@@ -63,16 +64,18 @@ class NavigationItemList extends Component {
   render() {
     const { classes, onClickAddNavigationItem } = this.props;
     return (
-      <div className={classes.root}>
-        <div className={classes.header}>
-          <Button color="primary" variant="outlined" onClick={onClickAddNavigationItem}>Add navigation item</Button>
-        </div>
-        <div className={classes.list}>
-          <div className={classes.listContent}>
-            {this.renderNavigationItems()}
+      <DndProvider backend={HTML5Backend}>
+        <div className={classes.root}>
+          <div className={classes.header}>
+            <Button color="primary" variant="outlined" onClick={onClickAddNavigationItem}>Add navigation item</Button>
+          </div>
+          <div className={classes.list}>
+            <div className={classes.listContent}>
+              {this.renderNavigationItems()}
+            </div>
           </div>
         </div>
-      </div>
+      </DndProvider>
     );
   }
 }

diff --git a/imports/plugins/core/navigation/client/components/NavigationTreeContainer.js b/imports/plugins/core/navigation/client/components/NavigationTreeContainer.js
@@ -4,7 +4,7 @@ import IconButton from "@material-ui/core/IconButton";
 import withStyles from "@material-ui/core/styles/withStyles";
 import PencilIcon from "mdi-material-ui/Pencil";
 import CloseIcon from "mdi-material-ui/Close";
-import { SortableTreeWithoutDndContext as SortableTree, removeNodeAtPath } from "react-sortable-tree";
+import SortableTree, { removeNodeAtPath } from "react-sortable-tree";
 import "react-sortable-tree/style.css";
 import ConfirmDialog from "@reactioncommerce/catalyst/ConfirmDialog";
 import SortableTheme from "./SortableTheme";
@@ -30,7 +30,7 @@ class NavigationTreeContainer extends Component {
   }
 
   static defaultProps = {
-    onSetSortableNavigationTree() {}
+    onSetSortableNavigationTree() { }
   }
 
   getNodeKey = ({ treeIndex }) => treeIndex;