diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx new file mode 100644 index 0000000000..1e54704039 --- /dev/null +++ b/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; + onMoveToGroup?: (itemIndex: number, groupIndex: number) => void; + showValueField?: boolean; +}; + +const ChecklistOptionEditor: React.FC = ({ + value, + onChange, + showValueField = false, + groups, + onMoveToGroup, + index, +}) => { + return ( + + {typeof index !== "undefined" && groups && onMoveToGroup && ( + ({ + label: `Move to ${group || `group ${groupIndex}`}`, + onClick: () => { + if (onMoveToGroup && typeof index === "number") + onMoveToGroup(index, groupIndex); + }, + disabled: groupIndex === groupIndex, + }))} + /> + )} + + ); +}; + +export default ChecklistOptionEditor; diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx index 62229141dc..32f3dd88cd 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx +++ b/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 }} /> )} diff --git a/editor.planx.uk/src/@planx/components/Checklist/types.ts b/editor.planx.uk/src/@planx/components/Checklist/types.ts index cdebd204ad..76ef9d47bd 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/types.ts +++ b/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; - onMoveToGroup?: (itemIndex: number, groupIndex: number) => void; - showValueField?: boolean; -} export type Props = PublicProps; diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx index 025590803b..9130dde3cb 100644 --- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx +++ b/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) => { }, }) as Option } - Editor={OptionEditor} + Editor={QuestionOptionEditor} editorExtraProps={{ showValueField: !!formik.values.fn, showDescriptionField: true, diff --git a/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx b/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx new file mode 100644 index 0000000000..eb0e9a4996 --- /dev/null +++ b/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 = ({ + value, + onChange, + showValueField = false, +}) => { + return ( + + + onChange({ + ...value, + data: { + ...value.data, + description: ev.target.value, + }, + }) + } + /> + + ); +}; + +export default QuestionOptionEditor; diff --git a/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx similarity index 58% rename from editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx rename to editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx index 39227423ca..cebe5fd076 100644 --- a/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx +++ b/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; - onMoveToGroup?: (itemIndex: number, groupIndex: number) => void; -}> = (props) => ( + onChange: (newVal: Option) => void; + children?: ReactNode; +} + +export const BaseOptionEditor: React.FC = (props) => (
{props.value.id && ( @@ -54,39 +51,7 @@ export const OptionEditor: React.FC<{ }} /> - - {props.showDescriptionField && ( - { - props.onChange({ - ...props.value, - data: { - ...props.value.data, - description: ev.target.value, - }, - }); - }} - /> - )} - {typeof props.index !== "undefined" && - props.groups && - props.onMoveToGroup && ( - ({ - label: `Move to ${group || `group ${groupIndex}`}`, - onClick: () => { - props.onMoveToGroup && - typeof props.index === "number" && - props.onMoveToGroup(props.index, groupIndex); - }, - disabled: groupIndex === props.groupIndex, - }))} - /> - )} - + {props.children && {props.children}} {props.showValueField && (