refactor: create baseOptionsEditor and delete duplicates

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

@@ -14,7 +14,7 @@ import InputRow from "ui/shared/InputRow";
 
 import { Option } from "../../shared";
 import type { Group } from "../model";
-import { OptionEditor } from "./OptionsEditor";
+import ChecklistOptionsEditor from "./OptionsEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
@@ -70,7 +70,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                       }) as Option
                     }
                     newValueLabel="add new option"
-                    Editor={OptionEditor}
+                    Editor={ChecklistOptionsEditor}
                     editorExtraProps={{
                       groupIndex,
                       showValueField: !!formik.values.fn,
@@ -142,7 +142,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
               },
             }) as Option
           }
-          Editor={OptionEditor}
+          Editor={ChecklistOptionsEditor}
           editorExtraProps={{ showValueField: !!formik.values.fn }}
         />
       )}

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

@@ -1,104 +1,46 @@
+import {
+  BaseOptionsEditor,
+  BaseOptionsEditorProps,
+} from "@planx/components/shared/BaseOptionsEditor";
 import React 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 { FlagsSelect } from "../../shared/FlagsSelect";
-import { OptionEditorProps } from "../types";
+export type ChecklistOptionsEditorProps = BaseOptionsEditorProps & {
+  index: number;
+  groupIndex?: number;
+  groups?: Array<string>;
+  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
+  showValueField?: boolean;
+};
 
-export const OptionEditor: React.FC<OptionEditorProps> = (props) => {
+const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
+  value,
+  onChange,
+  showValueField = false,
+  groups,
+  onMoveToGroup,
+  index,
+}) => {
   return (
-    <div style={{ width: "100%" }}>
-      <InputRow>
-        {props.value.id ? (
-          <input type="hidden" value={props.value.id} readOnly />
-        ) : null}
-        <InputRowItem width="200%">
-          <Input
-            required
-            format="bold"
-            multiline
-            value={props.value.data.text || ""}
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  text: ev.target.value,
-                },
-              });
-            }}
-            placeholder="Option"
-          />
-        </InputRowItem>
-
-        <ImgInput
-          img={props.value.data.img}
-          onChange={(img) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                img,
-              },
-            });
-          }}
+    <BaseOptionsEditor
+      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,
+          }))}
         />
-
-        {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.showValueField && (
-        <InputRow>
-          <Input
-            format="data"
-            value={props.value.data.val || ""}
-            placeholder="Data Value"
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  val: ev.target.value,
-                },
-              });
-            }}
-          />
-        </InputRow>
       )}
-
-      <FlagsSelect
-        value={
-          Array.isArray(props.value.data.flag)
-            ? props.value.data.flag
-            : [props.value.data.flag]
-        }
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              flag: ev,
-            },
-          });
-        }}
-      />
-    </div>
+    </BaseOptionsEditor>
   );
 };
+
+export default ChecklistOptionsEditor;

editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx

@@ -22,7 +22,7 @@ describe("Checklist Component - Grouped Layout", () => {
         text="home type?"
         handleSubmit={handleSubmit}
         groupedOptions={groupedOptions}
-      />,
+      />
     );
 
     await user.click(screen.getByText("Section 1"));
@@ -46,7 +46,7 @@ describe("Checklist Component - Grouped Layout", () => {
         handleSubmit={handleSubmit}
         previouslySubmittedData={{ answers: ["S1_Option1", "S3_Option1"] }}
         groupedOptions={groupedOptions}
-      />,
+      />
     );
 
     expect(screen.getByTestId("group-0-expanded")).toBeTruthy();
@@ -67,7 +67,7 @@ describe("Checklist Component - Grouped Layout", () => {
         description=""
         text="home type?"
         groupedOptions={groupedOptions}
-      />,
+      />
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -83,7 +83,7 @@ describe("Checklist Component - Grouped Layout", () => {
         text="home type?"
         handleSubmit={handleSubmit}
         groupedOptions={groupedOptions}
-      />,
+      />
     );
     const [section1Button, section2Button, section3Button] =
       screen.getAllByRole("button");
@@ -140,7 +140,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           text="home type?"
           handleSubmit={handleSubmit}
           options={options[type]}
-        />,
+        />
       );
 
       expect(screen.getByRole("heading")).toHaveTextContent("home type?");
@@ -177,7 +177,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           handleSubmit={handleSubmit}
           previouslySubmittedData={{ answers: ["flat_id", "house_id"] }}
           options={options[type]}
-        />,
+        />
       );
 
       await user.click(screen.getByTestId("continue-button"));
@@ -194,7 +194,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           description=""
           text="home type?"
           options={options[type]}
-        />,
+        />
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -210,7 +210,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           text="home type?"
           handleSubmit={handleSubmit}
           options={options[type]}
-        />,
+        />
       );
 
       await user.tab();

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

@@ -10,14 +10,13 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
-import InputRowItem from "ui/shared/InputRowItem";
 import { Switch } from "ui/shared/Switch";
 
 import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
-import { FlagsSelect } from "../shared/FlagsSelect";
 import { ICONS } from "../shared/icons";
+import QuestionOptionsEditor from "./OptionsEditor";
 
 interface Props {
   node: {
@@ -34,100 +33,6 @@ interface Props {
   handleSubmit?: Function;
 }
 
-const OptionEditor: React.FC<{
-  value: Option;
-  onChange: (newVal: Option) => void;
-  showValueField?: boolean;
-}> = (props) => (
-  <div style={{ width: "100%" }}>
-    <InputRow>
-      {props.value.id && (
-        <input type="hidden" value={props.value.id} readOnly />
-      )}
-      <InputRowItem width="200%">
-        <Input
-          required
-          format="bold"
-          multiline
-          value={props.value.data.text || ""}
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                text: ev.target.value,
-              },
-            });
-          }}
-          placeholder="Option"
-        />
-      </InputRowItem>
-      <ImgInput
-        img={props.value.data.img}
-        onChange={(img) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              img,
-            },
-          });
-        }}
-      />
-    </InputRow>
-    <InputRow>
-      <Input
-        value={props.value.data.description || ""}
-        placeholder="Description"
-        multiline
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              description: ev.target.value,
-            },
-          });
-        }}
-      />
-    </InputRow>
-    {props.showValueField && (
-      <InputRow>
-        <Input
-          format="data"
-          value={props.value.data.val || ""}
-          placeholder="Data Value"
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                val: ev.target.value,
-              },
-            });
-          }}
-        />
-      </InputRow>
-    )}
-    <FlagsSelect
-      value={
-        Array.isArray(props.value.data.flag)
-          ? props.value.data.flag
-          : [props.value.data.flag]
-      }
-      onChange={(ev) => {
-        props.onChange({
-          ...props.value,
-          data: {
-            ...props.value.data,
-            flag: ev,
-          },
-        });
-      }}
-    />
-  </div>
-);
-
 export const Question: React.FC<Props> = (props) => {
   const type = TYPES.Question;
 
@@ -246,7 +151,7 @@ export const Question: React.FC<Props> = (props) => {
                 },
               }) as Option
             }
-            Editor={OptionEditor}
+            Editor={QuestionOptionsEditor}
             editorExtraProps={{ showValueField: !!formik.values.fn }}
           />
         </ModalSectionContent>