Allow segments re-ordering

[MAILPOET-2452]

assets/js/src/form_editor/blocks/segment_select/settings.jsx

@@ -73,6 +73,7 @@ const SegmentSelectSettings = ({
             segments={segmentsAddedIntoSelection}
             updateSegment={updateSegment}
             removeSegment={removeSegment}
+            onSegmentsReorder={setNewSelection}
           />
           <PanelRow>
             {segmentsListToBeAdded.length ? (

assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx

@@ -2,8 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CheckboxControl } from '@wordpress/components';
 import { partial } from 'lodash';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
-const Preview = ({ segments, updateSegment, removeSegment }) => {
+const getItemStyle = (isDragging, draggableStyle) => ({
+  userSelect: 'none',
+  background: isDragging ? 'lightblue' : 'rgba(0,0,0,0)',
+  ...draggableStyle,
+});
+
+const getListStyle = (isDraggingOver) => ({
+  background: isDraggingOver ? 'lightgrey' : 'rgba(0,0,0,0)',
+});
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+const Preview = ({
+  segments,
+  updateSegment,
+  removeSegment,
+  onSegmentsReorder,
+}) => {
   if (segments.length === 0) {
     return null;
   }
@@ -14,32 +38,73 @@ const Preview = ({ segments, updateSegment, removeSegment }) => {
     updateSegment(segment);
   };
 
-  return segments.map((segment) => (
-    <div className="mailpoet-form-segments-settings-list" key={segment.id}>
-      <CheckboxControl
-        label={segment.name}
-        checked={!!segment.isChecked}
-        onChange={partial(onCheck, segment.id)}
-        key={`check-${segment.id}`}
-      />
-      <span
-        role="button"
-        className="mailpoet-form-segments-segment-remove mailpoet_error"
-        onClick={partial(removeSegment, segment.id)}
-        key={`remove-${segment.id}`}
-        tabIndex={0}
-        onKeyDown={(event) => {
-          if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
-          ) {
-            event.preventDefault();
-            partial(removeSegment, segment.id);
-          }
-        }}
-      >
-        ✗
-      </span>
-    </div>
-  ));
+  const onDragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+
+    onSegmentsReorder(reorder(
+      segments,
+      result.source.index,
+      result.destination.index
+    ));
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable">
+        {(providedDroppable, snapshotDroppable) => (
+          <div
+            {...providedDroppable.droppableProps}
+            ref={providedDroppable.innerRef}
+            style={getListStyle(snapshotDroppable.isDraggingOver)}
+          >
+            {segments.map((segment, index) => (
+              <Draggable key={segment.id} draggableId={segment.id} index={index}>
+                {(providedDraggable, snapshotDraggable) => (
+                  <div
+                    className="mailpoet-form-segments-settings-list"
+                    key={segment.id}
+                    ref={providedDraggable.innerRef}
+                    {...providedDraggable.draggableProps}
+                    {...providedDraggable.dragHandleProps}
+                    style={getItemStyle(
+                      snapshotDraggable.isDragging,
+                      providedDraggable.draggableProps.style
+                    )}
+                  >
+                    <CheckboxControl
+                      label={segment.name}
+                      checked={!!segment.isChecked}
+                      onChange={partial(onCheck, segment.id)}
+                      key={`check-${segment.id}`}
+                    />
+                    <span
+                      role="button"
+                      className="mailpoet-form-segments-segment-remove mailpoet_error"
+                      onClick={partial(removeSegment, segment.id)}
+                      key={`remove-${segment.id}`}
+                      tabIndex={0}
+                      onKeyDown={(event) => {
+                        if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+                        ) {
+                          event.preventDefault();
+                          partial(removeSegment, segment.id);
+                        }
+                      }}
+                    >
+                      ✗
+                    </span>
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {providedDroppable.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
 };
 
 Preview.propTypes = {
@@ -50,6 +115,7 @@ Preview.propTypes = {
   }).isRequired).isRequired,
   updateSegment: PropTypes.func.isRequired,
   removeSegment: PropTypes.func.isRequired,
+  onSegmentsReorder: PropTypes.func.isRequired,
 };
 
 export default Preview;