cf76cf7aae
* Add handlePaste function and integrate it with options fields * Prevents function running if user does not paste a list, allows list items to be pasted without deleting following items * Subs useState for rhf useWatch to fix issues with multiple form fields * Sets options array as optional property in zod schema * Assigns default value to options array to fix possibly undefined type errors * Sets placedholder property as optional * maps selectText to options on mount * Removes comma & semicolon delimiting for pasted lists (new line only) & defines regex as a constant * Sets default value of placeholder to empty string, provides default fallback for component text field if placeholder is omitted. * Fix type error on placeholder * Extracts handlePaste to service function & tests thoroughly * Some improvements and tests arent needed * More fixes * Fix reporting as well * TS fixes * Do transforms to and fro from label * Add unit tests * Unit test reporting * Test Improvements * Self review feedback addressed --------- Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import type { App_RoutingForms_Form } from "@prisma/client";
|
|
import type { Dispatch, SetStateAction } from "react";
|
|
|
|
import getFieldIdentifier from "../lib/getFieldIdentifier";
|
|
import { getQueryBuilderConfig } from "../lib/getQueryBuilderConfig";
|
|
import isRouterLinkedField from "../lib/isRouterLinkedField";
|
|
import { getUIOptionsForSelect } from "../lib/selectOptions";
|
|
import { getFieldResponseForJsonLogic } from "../lib/transformResponse";
|
|
import type { SerializableForm, FormResponse } from "../types/types";
|
|
|
|
type Props = {
|
|
form: SerializableForm<App_RoutingForms_Form>;
|
|
response: FormResponse;
|
|
setResponse: Dispatch<SetStateAction<FormResponse>>;
|
|
};
|
|
|
|
export default function FormInputFields(props: Props) {
|
|
const { form, response, setResponse } = props;
|
|
|
|
const queryBuilderConfig = getQueryBuilderConfig(form);
|
|
|
|
return (
|
|
<>
|
|
{form.fields?.map((field) => {
|
|
if (isRouterLinkedField(field)) {
|
|
// @ts-expect-error FIXME @hariombalhara
|
|
field = field.routerField;
|
|
}
|
|
const widget = queryBuilderConfig.widgets[field.type];
|
|
if (!("factory" in widget)) {
|
|
return null;
|
|
}
|
|
const Component = widget.factory;
|
|
|
|
const options = getUIOptionsForSelect(field);
|
|
return (
|
|
<div key={field.id} className="mb-4 block flex-col sm:flex ">
|
|
<div className="min-w-48 mb-2 flex-grow">
|
|
<label id="slug-label" htmlFor="slug" className="text-default flex text-sm font-medium">
|
|
{field.label}
|
|
</label>
|
|
</div>
|
|
<Component
|
|
value={response[field.id]?.value ?? ""}
|
|
placeholder={field.placeholder ?? ""}
|
|
// required property isn't accepted by query-builder types
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
/* @ts-ignore */
|
|
required={!!field.required}
|
|
listValues={options}
|
|
data-testid={`form-field-${getFieldIdentifier(field)}`}
|
|
setValue={(value: number | string | string[]) => {
|
|
setResponse((response) => {
|
|
response = response || {};
|
|
return {
|
|
...response,
|
|
[field.id]: {
|
|
label: field.label,
|
|
value: getFieldResponseForJsonLogic({ field, value }),
|
|
},
|
|
};
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|