Move preview into a separate file

[MAILPOET-2452]

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

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import Settings from './settings.jsx';
 
-
 const SegmentSelectEdit = ({ attributes, setAttributes }) => {
   const renderValues = () => {
     if (attributes.values.length === 0) {

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

@@ -1,10 +1,8 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import { partial } from 'lodash';
 import { InspectorControls } from '@wordpress/block-editor';
 import {
-  CheckboxControl,
   Panel,
   PanelBody,
   PanelRow,
@@ -13,57 +11,10 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
+import Preview from './settings_preview.jsx';
+
 const findSegment = (segments, segmentId) => segments.find((s) => s.id === segmentId);
 
-const Preview = ({ segments, updateSegment, removeSegment }) => {
-  if (segments.length === 0) {
-    return null;
-  }
-
-  const onCheck = (segmentId, isChecked) => {
-    const segment = findSegment(segments, segmentId);
-    segment.isChecked = isChecked;
-    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>
-  ));
-};
-
-Preview.propTypes = {
-  segments: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    isChecked: PropTypes.boolean,
-    id: PropTypes.string.isRequired,
-  }).isRequired).isRequired,
-  updateSegment: PropTypes.func.isRequired,
-  removeSegment: PropTypes.func.isRequired,
-};
-
 const SegmentSelectSettings = ({
   label,
   onLabelChanged,

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CheckboxControl } from '@wordpress/components';
+import { partial } from 'lodash';
+
+const Preview = ({ segments, updateSegment, removeSegment }) => {
+  if (segments.length === 0) {
+    return null;
+  }
+
+  const onCheck = (segmentId, isChecked) => {
+    const segment = segments.find((s) => s.id === segmentId);
+    segment.isChecked = isChecked;
+    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>
+  ));
+};
+
+Preview.propTypes = {
+  segments: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    isChecked: PropTypes.boolean,
+    id: PropTypes.string.isRequired,
+  }).isRequired).isRequired,
+  updateSegment: PropTypes.func.isRequired,
+  removeSegment: PropTypes.func.isRequired,
+};
+
+export default Preview;