Replace react-sortable by beautiful-dnd lirary

[MAILPOET-2610]

assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx

@@ -80,7 +80,6 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
             mandatory={fieldSettings.mandatory ? fieldSettings.mandatory : false}
             values={fieldSettings.values ? fieldSettings.values : [{ name: '', id: Math.random().toString() }]}
             onChange={setFieldSettings}
-            useDragAndDrop={false}
           />
         );
       default:

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

@@ -5,7 +5,7 @@ import React, {
 import PropTypes from 'prop-types';
 import { Dashicon } from '@wordpress/components';
 import { partial } from 'lodash';
-import { ReactSortable } from 'react-sortablejs';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 const PreviewItem = ({
   value,
@@ -55,7 +55,6 @@ const Preview = ({
   update,
   remove,
   onReorder,
-  useDragAndDrop,
 }) => {
   const [valuesWhileMoved, setValues] = useState(values);
 
@@ -96,31 +95,54 @@ const Preview = ({
     update(sanitizeValue(value));
   };
 
+  const onDragEnd = (result) => {
+    const from = result.source.index;
+    const to = result.destination.index;
+    const newValues = [...valuesWhileMoved];
+    const [movedItem] = newValues.splice(from, 1);
+    newValues.splice(to, 0, movedItem);
+    setValues(newValues);
+    onReorder(newValues);
+  };
+
   const renderItems = () => (valuesWhileMoved.map((value, index) => (
-    <PreviewItem
-      key={value.id}
-      index={index}
-      value={value}
-      remove={remove}
-      onCheck={onCheck}
-      onUpdate={onUpdate}
-    />
+    <Draggable key={value.id} draggableId={value.id} index={index}>
+      {(provided) => (
+        <div
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          <PreviewItem
+            key={`inner${value.id}`}
+            index={index}
+            value={value}
+            remove={remove}
+            onCheck={onCheck}
+            onUpdate={onUpdate}
+          />
+        </div>
+      )}
+    </Draggable>
   )));
 
-  return (useDragAndDrop ? (
-    <ReactSortable
-      list={valuesWhileMoved}
-      setList={(reorderedValues) => onReorder(reorderedValues.map(sanitizeValue))}
-      className="mailpoet-dnd-items-list"
-      animation={100}
-    >
-      {renderItems()}
-    </ReactSortable>
-  ) : (
+  return (
     <div className="mailpoet-dnd-items-list">
-      {renderItems()}
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="droppable">
+          {(provided) => (
+            <div
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              {renderItems()}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
     </div>
-  ));
+  );
 };
 
 Preview.propTypes = {
@@ -131,11 +153,6 @@ Preview.propTypes = {
   update: PropTypes.func.isRequired,
   remove: PropTypes.func.isRequired,
   onReorder: PropTypes.func.isRequired,
-  useDragAndDrop: PropTypes.bool,
-};
-
-Preview.defaultProps = {
-  useDragAndDrop: true,
 };
 
 export default Preview;

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

@@ -5,7 +5,7 @@ import React, {
 import PropTypes from 'prop-types';
 import { CheckboxControl, Dashicon } from '@wordpress/components';
 import { partial } from 'lodash';
-import { ReactSortable } from 'react-sortablejs';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 const PreviewItem = ({
   segment,
@@ -63,18 +63,50 @@ const Preview = ({
     updateSegment(segment);
   };
 
+
+  const onDragEnd = (result) => {
+    const from = result.source.index;
+    const to = result.destination.index;
+    const newValues = [...segmentsWhileMoved];
+    const [movedItem] = newValues.splice(from, 1);
+    newValues.splice(to, 0, movedItem);
+    setSegments(newValues);
+    onSegmentsReorder(newValues);
+  };
+
+  const renderItems = () => (segmentsWhileMoved.map((segment, index) => (
+    <Draggable key={segment.id} draggableId={segment.id} index={index}>
+      {(provided) => (
+        <div
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          <PreviewItem
+            key={segment.id}
+            index={index}
+            segment={segment}
+            onCheck={onCheck}
+            removeSegment={removeSegment}
+          />
+        </div>
+      )}
+    </Draggable>
+  )));
   return (
-    <ReactSortable list={segmentsWhileMoved} setList={onSegmentsReorder}>
-      {segmentsWhileMoved.map((segment, index) => (
-        <PreviewItem
-          key={segment.id}
-          index={index}
-          segment={segment}
-          onCheck={onCheck}
-          removeSegment={removeSegment}
-        />
-      ))}
-    </ReactSortable>
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable">
+        {(provided) => (
+          <div
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+          >
+            {renderItems()}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
   );
 };