Disable DND in create custom field block

[MAILPOET-2463]

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

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

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

@@ -18,6 +18,7 @@ const CustomFieldSettings = ({
   isDeleting,
   onCustomFieldDelete,
   onChange,
+  useDragAndDrop,
 }) => {
   const [localMandatory, setLocalMandatory] = useState(mandatory);
   const [localValues, setLocalValues] = useState(JSON.parse(JSON.stringify(values)));
@@ -88,6 +89,7 @@ const CustomFieldSettings = ({
         update={update}
         values={localValues}
         onReorder={setLocalValues}
+        useDragAndDrop={useDragAndDrop}
       />
       <Button
         isLink
@@ -117,6 +119,7 @@ CustomFieldSettings.propTypes = {
   isDeleting: PropTypes.bool,
   onCustomFieldDelete: PropTypes.func,
   onChange: PropTypes.func,
+  useDragAndDrop: PropTypes.bool,
 };
 
 CustomFieldSettings.defaultProps = {
@@ -127,6 +130,7 @@ CustomFieldSettings.defaultProps = {
   onCustomFieldDelete: null,
   onSave: null,
   onChange: null,
+  useDragAndDrop: true,
 };
 
 export default CustomFieldSettings;

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

@@ -53,6 +53,7 @@ const Preview = ({
   update,
   remove,
   onReorder,
+  useDragAndDrop,
 }) => {
   const [valuesWhileMoved, setValues] = useState(values);
 
@@ -83,22 +84,31 @@ const Preview = ({
     update(value);
   };
 
-  return (
+  const renderItems = () => (valuesWhileMoved.map((value, index) => (
+    <PreviewItem
+      key={value.id}
+      index={index}
+      value={value}
+      remove={remove}
+      onCheck={onCheck}
+      onUpdate={onUpdate}
+    />
+  )));
+
+  return (useDragAndDrop ? (
+    <ReactSortable
+      list={valuesWhileMoved}
+      setList={onReorder}
+      className="mailpoet-dnd-items-list"
+      animation={100}
+    >
+      {renderItems()}
+    </ReactSortable>
+  ) : (
     <div className="mailpoet-dnd-items-list">
-      <ReactSortable list={valuesWhileMoved} setList={onReorder}>
+      {renderItems()}
-        {valuesWhileMoved.map((value, index) => (
-          <PreviewItem
-            key={value.id}
-            index={index}
-            value={value}
-            remove={remove}
-            onCheck={onCheck}
-            onUpdate={onUpdate}
-          />
-        ))}
-      </ReactSortable>
     </div>
-  );
+  ));
 };
 
 Preview.propTypes = {
@@ -109,6 +119,11 @@ Preview.propTypes = {
   update: PropTypes.func.isRequired,
   remove: PropTypes.func.isRequired,
   onReorder: PropTypes.func.isRequired,
+  useDragAndDrop: PropTypes.bool,
+};
+
+Preview.defaultProps = {
+  useDragAndDrop: true,
 };
 
 export default Preview;