Refactor to use BaseOptionseditor instead

editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx

@@ -0,0 +1,46 @@
+import {
+  BaseOptionEditor,
+  BaseOptionEditorProps,
+} from "@planx/components/shared/BaseOptionsEditor";
+import React from "react";
+import SimpleMenu from "ui/editor/SimpleMenu";
+
+export type ChecklistOptionEditorProps = BaseOptionEditorProps & {
+  index: number;
+  groupIndex?: number;
+  groups?: Array<string>;
+  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
+  showValueField?: boolean;
+};
+
+const ChecklistOptionEditor: React.FC<ChecklistOptionEditorProps> = ({
+  value,
+  onChange,
+  showValueField = false,
+  groups,
+  onMoveToGroup,
+  index,
+}) => {
+  return (
+    <BaseOptionEditor
+      value={value}
+      onChange={onChange}
+      showValueField={showValueField}
+    >
+      {typeof index !== "undefined" && groups && onMoveToGroup && (
+        <SimpleMenu
+          items={groups.map((group, groupIndex) => ({
+            label: `Move to ${group || `group ${groupIndex}`}`,
+            onClick: () => {
+              if (onMoveToGroup && typeof index === "number")
+                onMoveToGroup(index, groupIndex);
+            },
+            disabled: groupIndex === groupIndex,
+          }))}
+        />
+      )}
+    </BaseOptionEditor>
+  );
+};
+
+export default ChecklistOptionEditor;

editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx

@@ -2,7 +2,7 @@ import Delete from "@mui/icons-material/Delete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
-import { OptionEditor } from "@planx/components/shared/OptionsEditor";
+import { BaseOptionEditor } from "@planx/components/shared/BaseOptionsEditor";
 import adjust from "ramda/src/adjust";
 import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
@@ -15,6 +15,7 @@ import InputRow from "ui/shared/InputRow";
 
 import { Option } from "../../shared";
 import type { Group } from "../model";
+import ChecklistOptionEditor from "./OptionEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
@@ -70,7 +71,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                       }) as Option
                     }
                     newValueLabel="add new option"
-                    Editor={OptionEditor}
+                    Editor={BaseOptionEditor}
                     editorExtraProps={{
                       groupIndex,
                       showValueField: !!formik.values.fn,
@@ -142,7 +143,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
               },
             }) as Option
           }
-          Editor={OptionEditor}
+          Editor={ChecklistOptionEditor}
           editorExtraProps={{ showValueField: !!formik.values.fn }}
         />
       )}

editor.planx.uk/src/@planx/components/Checklist/types.ts

@@ -17,14 +17,5 @@ export interface ChecklistProps extends Checklist {
     } & BaseNodeData;
   };
 }
-export interface OptionEditorProps {
-  index: number;
-  value: Option;
-  onChange: (newVal: Option) => void;
-  groupIndex?: number;
-  groups?: Array<string>;
-  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
-  showValueField?: boolean;
-}
 
 export type Props = PublicProps<Checklist>;

editor.planx.uk/src/@planx/components/Question/Editor.tsx

@@ -16,7 +16,7 @@ import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
 import { ICONS } from "../shared/icons";
-import { OptionEditor } from "../shared/OptionsEditor";
+import QuestionOptionEditor from "./OptionEditor";
 
 interface Props {
   node: {
@@ -151,7 +151,7 @@ export const Question: React.FC<Props> = (props) => {
                 },
               }) as Option
             }
-            Editor={OptionEditor}
+            Editor={QuestionOptionEditor}
             editorExtraProps={{
               showValueField: !!formik.values.fn,
               showDescriptionField: true,

editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Input from "ui/shared/Input/Input";
+
+import {
+  BaseOptionEditor,
+  BaseOptionEditorProps,
+} from "../shared/BaseOptionsEditor";
+
+const QuestionOptionEditor: React.FC<BaseOptionEditorProps> = ({
+  value,
+  onChange,
+  showValueField = false,
+}) => {
+  return (
+    <BaseOptionEditor
+      value={value}
+      onChange={onChange}
+      showValueField={showValueField}
+    >
+      <Input
+        value={value.data.description || ""}
+        placeholder="Description"
+        multiline
+        onChange={(ev) =>
+          onChange({
+            ...value,
+            data: {
+              ...value.data,
+              description: ev.target.value,
+            },
+          })
+        }
+      />
+    </BaseOptionEditor>
+  );
+};
+
+export default QuestionOptionEditor;

editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx → editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx

@@ -1,23 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import ImgInput from "ui/editor/ImgInput/ImgInput";
-import SimpleMenu from "ui/editor/SimpleMenu";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { Option } from "../shared";
-import { FlagsSelect } from "../shared/FlagsSelect";
+import { Option } from ".";
+import { FlagsSelect } from "./FlagsSelect";
 
-export const OptionEditor: React.FC<{
+export interface BaseOptionEditorProps {
   value: Option;
-  onChange: (newVal: Option) => void;
   showValueField?: boolean;
-  showDescriptionField?: boolean;
-  index: number;
-  groupIndex?: number;
-  groups?: Array<string>;
-  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
-}> = (props) => (
+  onChange: (newVal: Option) => void;
+  children?: ReactNode;
+}
+
+export const BaseOptionEditor: React.FC<BaseOptionEditorProps> = (props) => (
   <div style={{ width: "100%" }}>
     <InputRow>
       {props.value.id && (
@@ -54,39 +51,7 @@ export const OptionEditor: React.FC<{
         }}
       />
     </InputRow>
-    <InputRow>
-      {props.showDescriptionField && (
-        <Input
-          value={props.value.data.description || ""}
-          placeholder="Description"
-          multiline
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                description: ev.target.value,
-              },
-            });
-          }}
-        />
-      )}
-      {typeof props.index !== "undefined" &&
-        props.groups &&
-        props.onMoveToGroup && (
-          <SimpleMenu
-            items={props.groups.map((group, groupIndex) => ({
-              label: `Move to ${group || `group ${groupIndex}`}`,
-              onClick: () => {
-                props.onMoveToGroup &&
-                  typeof props.index === "number" &&
-                  props.onMoveToGroup(props.index, groupIndex);
-              },
-              disabled: groupIndex === props.groupIndex,
-            }))}
-          />
-        )}
-    </InputRow>
+    {props.children && <InputRow>{props.children}</InputRow>}
     {props.showValueField && (
       <InputRow>
         <Input