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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 71x 283x 283x | import {
FormField,
FormItem,
FormLabel,
FormMessage,
RequiredIndicator,
SectionCard,
Upload,
} from "@/components";
import { useFormContext } from "react-hook-form";
import { z } from "zod";
import { Fragment } from "react/jsx-runtime";
import {
AttachmentFAQInstructions,
AttachmentFileFormatInstructions,
AttachmentInstructions,
} from "./actionForm.components";
export type AttachmentsOptions = {
title?: string;
requiredIndicatorForTitle?: boolean;
instructions?: JSX.Element[];
callout?: string;
faqLink?: string;
};
type ActionFormAttachmentsProps = {
attachmentsFromSchema: [string, z.ZodObject<z.ZodRawShape, "strip">][];
} & AttachmentsOptions;
export const ActionFormAttachments = ({
attachmentsFromSchema,
title = "Attachments",
faqLink,
requiredIndicatorForTitle,
instructions,
callout,
}: ActionFormAttachmentsProps) => {
const form = useFormContext();
const attachmentInstructions = instructions ?? [
<AttachmentFAQInstructions faqLink={faqLink} />,
<AttachmentFileFormatInstructions />,
];
return (
<SectionCard
testId="attachment-section"
title={
<>
{title} {requiredIndicatorForTitle && <RequiredIndicator />}
</>
}
>
<div>
{callout && (
<>
<p className="font-medium">{callout}</p>
<br />
</>
)}
{attachmentInstructions.map((instruction, i) => (
<Fragment key={i}>
{instruction}
{i < attachmentInstructions.length - 1 && <br />}
</Fragment>
))}
</div>
<section className="space-y-8" data-testid="attachments-section">
{attachmentsFromSchema.map(([key, value]) => (
<FormField
key={key}
control={form.control}
name={`attachments.${key}.files`}
render={({ field }) => (
<FormItem>
<FormLabel className="font-bold" data-testid={`${key}-label`}>
{value.shape.label._def.defaultValue()}{" "}
{value.shape.files instanceof z.ZodOptional ? null : <RequiredIndicator />}
</FormLabel>
<AttachmentInstructions fileValidation={value.shape.files._def} />
<Upload files={field.value ?? []} setFiles={field.onChange} dataTestId={key} />
<FormMessage />
</FormItem>
)}
/>
))}
</section>
</SectionCard>
);
};
|