emibcn · emibcn · Nov 19, 2020 · Nov 18, 2020
diff --git a/app/package.json b/app/package.json
@@ -13,6 +13,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "array-move": "^3.0.1",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -22,6 +23,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.0",
     "react-simple-storage": "^1.4.2",
+    "react-sortable-hoc": "^1.11.0",
     "react-svg": "^11.0.39",
     "react-tooltip": "^4.2.9",
     "react-translate": "^7.0.1",

diff --git a/app/src/Widget/List.jsx b/app/src/Widget/List.jsx
@@ -5,11 +5,11 @@ import clsx from 'clsx';
 
 import { withStyles, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 
 import MenuAddWidget from './MenuAddWidget';
 import WidgetsTypes from './Widgets';
+import SortableWidgetContainer from './SortableWidgetContainer';
 
 import { withBcnDataHandler } from '../Backend/Bcn/BcnContext';
 import { withMapsDataHandler } from '../Backend/Maps/MapsContext';
@@ -304,29 +304,18 @@ class WidgetsList extends React.PureComponent {
           </div>
         </Paper>
 
-        {/* Widgets container */}
-        <Grid container spacing={3} className={classes.widgetsContainer}>
-          {/* Widgets list */}
-          { widgets.map( (widget, index) => {
-              const { Component } = WidgetsTypes.find(w => w.key === widget.type );
-              return (
-                <Grid item xs={12} sm={6} md={4} lg={3} key={ this.widgetsIds[index] }>
-                  <Component
-                    id={ this.widgetsIds[index] }
-                    key={ this.widgetsIds[index] }
-                    days={ days }
-                    chartsIndex={ chartsIndex }
-                    bcnIndex={ bcnIndex }
-                    indexValues={ current }
-                    onChangeData={ this.onChangeData }
-                    onRemove={ this.onRemove }
-                    { ...widget.payload }
-                  />
-                </Grid>
-              )
-            })
-          }
-        </Grid>
+        {/* Container that displays the widgets */}
+        <SortableWidgetContainer 
+          bcnIndex={bcnIndex}
+          chartsIndex={chartsIndex}
+          days={days}
+          indexValues={current}
+          onChangeData={this.onChangeData}
+          onRemove={this.onRemove}
+          onReorder={this.props.onChangeData}
+          widgets={widgets}
+          widgetsIds={this.widgetsIds}
+        />
       </>
     );
   }

diff --git a/app/src/Widget/SortableWidgetContainer.jsx b/app/src/Widget/SortableWidgetContainer.jsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+import { Grid, makeStyles } from '@material-ui/core';
+
+import WidgetsTypes from './Widgets';
+
+import arrayMove from 'array-move';
+
+const useStyles = makeStyles({
+  // Fixing some spotty behavior with the cursor style changing when dragging an item
+  // See this issue for more info: https://github.com/clauderic/react-sortable-hoc/issues/212
+  pointerEventsFix: {
+    pointerEvents: 'auto !important'
+  },
+  widgetsContainer: {
+    zIndex: 10,
+    width: '100%',
+    margin: 0,
+  },
+})
+
+const DraggableWidgetContainer = SortableElement((props) => {
+  const {
+    bcnIndex,
+    chartsIndex,
+    days,
+    indexValues,
+    onChangeData,
+    onRemove,
+    value,
+    widgetId,
+  } = props;
+
+  const { Component } = WidgetsTypes.find(w => w.key === value.type );
+
+  return (
+    <Grid item xs={12} sm={6} md={4} lg={3}>
+      <Component
+        id={widgetId}
+        bcnIndex={bcnIndex}
+        chartsIndex={chartsIndex}
+        days={days}
+        indexValues={indexValues}
+        onChangeData={onChangeData}
+        onRemove={onRemove}
+        {...value.payload}
+      />
+    </Grid>
+  )
+})
+
+const DraggableWidgetsList = SortableContainer((props) => {
+  const {
+    items: widgets,
+    widgetsIds,
+  } = props;
+  const classes = useStyles();
+
+  return (
+    <Grid container spacing={3} className={classes.widgetsContainer}>
+      {widgets.map((value, index) => {
+        // Create a separate id for the individual widgets
+        // The SortableElements will use the map method's index for sorting
+        const widgetId = widgetsIds[index];
+        return (
+          <DraggableWidgetContainer 
+            key={widgetId}
+            index={index}
+            widgetId={widgetId}
+            value={value}
+            {...props}
+          />
+        )
+      })}
+    </Grid>
+  )
+})
+
+const SortableWidgetContainer = (props) => {
+  const { widgets, onReorder } = props;
+  const classes = useStyles();
+
+  // Handle reordering of widgets after dragging and dropping
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    const reorderedWidgets = arrayMove(widgets, oldIndex, newIndex);
+    onReorder({ widgets: reorderedWidgets })
+  };
+
+  return (
+    <DraggableWidgetsList 
+      axis="xy"
+      items={widgets}
+      helperClass={classes.pointerEventsFix}
+      onSortEnd={onSortEnd}
+      useDragHandle
+      {...props}
+    />
+  )
+}
+
+export default SortableWidgetContainer
diff --git a/app/src/Widget/Widget.jsx b/app/src/Widget/Widget.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import { translate } from 'react-translate'
 
+import { SortableHandle } from 'react-sortable-hoc';
+
 import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
@@ -17,6 +19,11 @@ const useStyles = makeStyles((theme) => ({
   root: {
     height: '100%',
   },
+  draggableWidgetTitle: {
+    '&:hover': {
+      cursor: 'move',
+    },
+  },
 }));
 
 // HOC to create widgets easily
@@ -49,18 +56,29 @@ const withWidget = (sectionsOrig) => {
   // Get a shortcut to view's render function
   const View = sections.view.render;
 
+  const WidgetDragHandle = SortableHandle((props) => {
+    const { children } = props;
+    const classes = useStyles();
+
+    return (
+      <div className={classes.draggableWidgetTitle}>
+        {children}
+      </div>
+    );
+  })
+
   // Renders the view with a header containing the title and the menu with the rest of sections
   const Widget = (props) => {
     const classes = useStyles();
     // Prevent trigger actions components update when changing the day
     const { indexValues, ...restProps } = props;
     const action = <WidgetActions { ...restProps } sections={ sections } />;
-
+    const title = <WidgetDragHandle>{sections.view.title(props)||props.name}</WidgetDragHandle>
     return (
       <Card className={classes.root}>
         <CardHeader
           action={ action }
-          title={ sections.view.title(props)||props.name }
+          title={ title }
           subheader={ props.subtitle }
         />
         <CardContent>

diff --git a/app/yarn.lock b/app/yarn.lock
@@ -1047,6 +1047,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.2.0":
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.0.tgz#98bd7666186969c04be893d747cf4a6c6c8fa6b0"
+  integrity sha512-lS4QLXQ2Vbw2ubfQjeQcn+BZgZ5+ROHW9f+DWjEp5Y+NHYmkRGKqHSJ1tuhbUauKu2nhZNTBIvsIQ8dXfY5Gjw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -2327,6 +2334,11 @@ array-includes@^3.0.3, array-includes@^3.1.1:
     es-abstract "^1.17.0"
     is-string "^1.0.5"
 
+array-move@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/array-move/-/array-move-3.0.1.tgz#179645cc0987b65953a4fc06b6df9045e4ba9618"
+  integrity sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -9267,7 +9279,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9648,6 +9660,15 @@ react-smooth@^1.0.5:
     raf "^3.4.0"
     react-transition-group "^2.5.0"
 
+react-sortable-hoc@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz#fe4022362bbafc4b836f5104b9676608a40a278f"
+  integrity sha512-v1CDCvdfoR3zLGNp6qsBa4J1BWMEVH25+UKxF/RvQRh+mrB+emqtVHMgZ+WreUiKJoEaiwYoScaueIKhMVBHUg==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    invariant "^2.2.4"
+    prop-types "^15.5.7"
+
 react-svg@^11.0.39:
   version "11.0.39"
   resolved "https://registry.yarnpkg.com/react-svg/-/react-svg-11.0.39.tgz#06b2af08e69266e8c923220b467631439693842a"