styled and mostly working x3 component types

theopensystemslab · Dec 11, 2024 · 76676e5 · 76676e5
1 parent 3b2c2c5
commit 76676e5
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 38 deletions.
diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
@@ -9,8 +9,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { ICONS } from "../shared/icons";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
+import { ICONS } from "../shared/icons";
 
 function Component(props: any) {
   const formik = useFormik<{
@@ -43,8 +43,8 @@ function Component(props: any) {
     validate: () => { },
   });
 
-  // Rather than default to generic `useStore().geFlowSchema()`
-  //   File Upload components can specificly reference ODP Schema enum options
+  // Rather than default to generic `useStore().getFlowSchema()`
+  //   File Upload components can specifically reference ODP Schema enum options
   const schema = getValidSchemaValues("FileType");
 
   return (
@@ -53,6 +53,7 @@ function Component(props: any) {
         <ModalSectionContent title="File upload" Icon={ICONS[TYPES.FileUpload]}>
           <InputRow>
             <Input
+              required
               format="large"
               placeholder="Title"
               name="title"
@@ -68,7 +69,12 @@ function Component(props: any) {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <DataFieldAutocomplete schema={schema} value={formik.values.fn} onChange={formik.handleChange} /> 
+          <DataFieldAutocomplete
+            required
+            schema={schema}
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />

diff --git a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
@@ -14,6 +14,8 @@ import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 import { Switch } from "ui/shared/Switch";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
 export type Props = EditorProps<TYPES.NumberInput, NumberInput>;
@@ -28,6 +30,9 @@ export default function NumberInputComponent(props: Props): FCReturn {
     },
     validate: () => {},
   });
+
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -52,16 +57,11 @@ export default function NumberInputComponent(props: Props): FCReturn {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              // required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            schema={schema}
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <InputRow>
             <InputRowLabel>units</InputRowLabel>
             <InputRowItem>

diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -13,9 +13,11 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import { Switch } from "ui/shared/Switch";
 
+import { useStore } from "pages/FlowEditor/lib/store";
 import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { FlagsSelect } from "../shared/FlagsSelect";
 import { ICONS } from "../shared/icons";
 
@@ -38,6 +40,7 @@ const OptionEditor: React.FC<{
   value: Option;
   onChange: (newVal: Option) => void;
   showValueField?: boolean;
+  schema?: string[];
 }> = (props) => (
   <div style={{ width: "100%" }}>
     <InputRow>
@@ -108,6 +111,19 @@ const OptionEditor: React.FC<{
           }}
         />
       </InputRow>
+      // <DataFieldAutocomplete
+      //   schema={props.schema}
+      //   value={props.value.data.val || ""}
+      //   onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+      //     props.onChange({
+      //       ...props.value,
+      //       data: {
+      //         ...props.value.data,
+      //         val: ev.target.value,
+      //       },
+      //     });
+      //   }}
+      // />
     )}
     <FlagsSelect
       value={
@@ -166,6 +182,8 @@ export const Question: React.FC<Props> = (props) => {
     },
   });
 
+  const schema = useStore().getFlowSchema();
+
   const focusRef = useRef<HTMLInputElement | null>(null);
 
   // horrible hack to remove focus from Rich Text Editor
@@ -205,18 +223,11 @@ export const Question: React.FC<Props> = (props) => {
                 onChange={formik.handleChange}
               />
             </InputRow>
-            <InputRow>
-              <Input
-                // required
-                format="data"
-                name="fn"
-                value={formik.values.fn}
-                placeholder="Data Field"
-                onChange={formik.handleChange}
-                error={Boolean(formik.errors?.fn)}
-                errorMessage={formik.errors?.fn}
-              />
-            </InputRow>
+            <DataFieldAutocomplete
+              schema={schema?.nodes}
+              value={formik.values.fn}
+              onChange={(value) => formik.setFieldValue("fn", value)}
+            />
             <InputRow>
               <Switch
                 checked={formik.values.neverAutoAnswer}

diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -1,7 +1,7 @@
 import {
   AutocompleteChangeReason,
   AutocompleteProps,
-  createFilterOptions,
+  createFilterOptions
 } from "@mui/material/Autocomplete";
 import ListItem from "@mui/material/ListItem";
 import React, { useMemo } from "react";
@@ -11,9 +11,22 @@ import InputRow from "ui/shared/InputRow";
 interface Props {
   schema?: string[];
   value?: string;
-  onChange: (value: string) => void;
+  onChange: (value: string | null) => void;
+  required?: boolean;
 }
 
+const renderOptions: AutocompleteProps<
+  string,
+  false,
+  false,
+  true,
+  "div"
+>["renderOption"] = (props, value) => (
+  <ListItem key={value} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
+    {value}
+  </ListItem>
+);
+
 const filter = createFilterOptions<string>();
 
 export const DataFieldAutocomplete: React.FC<Props> = (props) => {
@@ -26,7 +39,7 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
 
   const handleChange = (
     _event: React.SyntheticEvent,
-    value: string,
+    value: string | null,
     _reason: AutocompleteChangeReason,
   ) => {
     props.onChange(value);
@@ -38,6 +51,7 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
         id="data-field-autocomplete"
         key="data-field-autocomplete"
         placeholder="Data field"
+        required={Boolean(props.required)}
         options={options}
         onChange={handleChange}
         isOptionEqualToValue={(option: string, value: string) =>
@@ -54,6 +68,10 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
           }
           return filtered;
         }}
+        renderOption={renderOptions}
+        selectOnFocus
+        clearOnEscape
+        handleHomeEndKeys
       />
     </InputRow>
   );

diff --git a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -2,7 +2,6 @@ import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
 import Autocomplete, {
   autocompleteClasses,
   AutocompleteProps,
-  createFilterOptions,
 } from "@mui/material/Autocomplete";
 import FormControl from "@mui/material/FormControl";
 import { inputLabelClasses } from "@mui/material/InputLabel";
@@ -19,25 +18,26 @@ const PopupIcon = (
   />
 );
 
-// T = value = string, multiple=false, disableClearable=true, freeSolo=true, chip="div"
 type RequiredAutocompleteProps<T> = Pick<
-  AutocompleteProps<T, false, true, true, "div">,
+  AutocompleteProps<T, false, false, true, "div">,
   "options" | "onChange"
 >;
 
 type OptionalAutocompleteProps<T> = Partial<
-  AutocompleteProps<T, false, true, true, "div">
+  AutocompleteProps<T, false, false, true, "div">
 >;
 
 type WithLabel<T> = {
   label: string;
   placeholder?: never;
+  required: boolean;
 } & RequiredAutocompleteProps<T> &
   OptionalAutocompleteProps<T>;
 
 type WithPlaceholder<T> = {
   label?: never;
   placeholder: string;
+  required: boolean;
 } & RequiredAutocompleteProps<T> &
   OptionalAutocompleteProps<T>;
 
@@ -74,7 +74,9 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   [`& .${outlinedInputClasses.root}, input`]: {
     cursor: "pointer",
-    backgroundColor: theme.palette.background.default,
+    // TODO extract as `format="data"` prop more like `Input` ? 
+    backgroundColor: "#f0f0f0",
+    fontFamily: theme.typography.data.fontFamily,
   },
   [`& .${inputLabelClasses.root}`]: {
     textDecoration: "underline",
@@ -94,12 +96,10 @@ export default function AutocompleteInput<T>(props: Props<T>) {
 
   return (
     <FormControl sx={{ display: "flex", flexDirection: "column" }}>
-      <StyledAutocomplete<T, false, true, true, "div">
-        sx={{ width: 300 }}
+      <StyledAutocomplete<T, false, false, true, "div">
         role="status"
         aria-atomic={true}
         aria-live="polite"
-        disableClearable
         popupIcon={PopupIcon}
         renderInput={(params) => (
           <StyledTextField
@@ -109,7 +109,8 @@ export default function AutocompleteInput<T>(props: Props<T>) {
               notched: false,
             }}
             label={props.label}
-            placeholder={props.placeholder}
+            placeholder={placeholder}
+            required={props.required}
           />
         )}
         componentsProps={{