Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 105x 407x 48x 3x 3x 48x | import { ControllerRenderProps, FieldPath } from "react-hook-form";
import { z } from "zod";
import { mapSubmissionTypeBasedOnActionFormTitle } from "../../utils/ReactGA/Mapper";
import { sendGAEvent } from "../../utils/ReactGA/SendGAEvent";
import { FormDescription, FormItem, FormLabel, Textarea } from "../Inputs";
import { SchemaWithEnforcableProps } from ".";
type AdditionalInformationProps<Schema extends SchemaWithEnforcableProps> = {
label: string;
field: ControllerRenderProps<z.TypeOf<Schema>, FieldPath<z.TypeOf<Schema>>>;
submissionTitle: string;
};
export const AdditionalInformation = <Schema extends SchemaWithEnforcableProps>({
label,
field,
submissionTitle,
}: AdditionalInformationProps<Schema>) => {
const handleInputChange = (event) => {
if (event.target.value.length == 1) {
const mappedSubmissionType = mapSubmissionTypeBasedOnActionFormTitle(submissionTitle);
sendGAEvent("submit_additional_info_used", { submission_type: mappedSubmissionType });
}
field.onChange(event);
};
return (
<FormItem>
<FormLabel htmlFor="additional-info" data-testid="addl-info-label" className="font-normal">
{label}
</FormLabel>
<Textarea
{...field}
maxLength={4000}
aria-describedby="character-count"
aria-live="off"
aria-multiline={true}
className="h-[200px] resize-none"
id="additional-info"
onChange={handleInputChange}
/>
<FormDescription>
<span
tabIndex={0}
id="character-count"
aria-label="character-count"
aria-live="polite"
className="text-neutral-500"
>
{`${4000 - (field?.value?.length || 0)} characters remaining`}
</span>
</FormDescription>
</FormItem>
);
};
|