Allow segments re-ordering

[MAILPOET-2452]

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -56,11 +56,16 @@ $gutenberg-control-border-color-focus: #007cba;
 
   .components-base-control {
     flex-grow: 1;
-    margin-bottom: 16px;
+    margin: 8px 0;
+
+    .components-base-control__field {
+      margin: 0;
+    }
   }
 
   .mailpoet-form-segments-segment-remove {
     cursor: pointer;
     flex-grow: 0;
+    margin: 8px 0;
   }
 }

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) => (
+  const onDragEnd = (result) => {
-    <div className="mailpoet-form-segments-settings-list" key={segment.id}>
+    if (!result.destination) {
-      <CheckboxControl
+      return;
-        label={segment.name}
+    }
-        checked={!!segment.isChecked}
+
-        onChange={partial(onCheck, segment.id)}
+    onSegmentsReorder(reorder(
-        key={`check-${segment.id}`}
+      segments,
-      />
+      result.source.index,
-      <span
+      result.destination.index
-        role="button"
+    ));
-        className="mailpoet-form-segments-segment-remove mailpoet_error"
+  };
-        onClick={partial(removeSegment, segment.id)}
+
-        key={`remove-${segment.id}`}
+  return (
-        tabIndex={0}
+    <DragDropContext onDragEnd={onDragEnd}>
-        onKeyDown={(event) => {
+      <Droppable droppableId="droppable">
-          if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+        {(providedDroppable, snapshotDroppable) => (
-          ) {
+          <div
-            event.preventDefault();
+            {...providedDroppable.droppableProps}
-            partial(removeSegment, segment.id);
+            ref={providedDroppable.innerRef}
-          }
+            style={getListStyle(snapshotDroppable.isDraggingOver)}
-        }}
+          >
-      >
+            {segments.map((segment, index) => (
-        ✗
+              <Draggable key={segment.id} draggableId={segment.id} index={index}>
-      </span>
+                {(providedDraggable, snapshotDraggable) => (
-    </div>
+                  <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;