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 94 95 96 97 98 | 2x 2x 62x 62x 16x 16x 43x 16x 62x 15x | import { useEffect } from "react";
import { Control, useFieldArray } from "react-hook-form";
import {
EditableText,
FormControl,
FormDescription,
FormField,
FormItem,
FormMessage,
} from "@/components";
const DEFAULT_SUFFIXES = {
1: "A",
2: "B",
3: "C",
4: "D",
5: "E",
6: "F",
7: "G",
};
const SplitSpaId = ({ control, index, spaId, ...props }) => (
<FormField
{...props}
control={control}
name={`spaIds.${index}.suffix`}
key={`spaIds.${index}`}
render={({ field }) => (
<FormItem className="max-w-sm">
<FormControl>
<div
className="items-center flex leading-[2.25]"
data-testid={`${index + 2}. ${spaId}-${field.value}`}
>
<FormDescription>
<span className="font-bold mr-4">{index + 2}.</span>
<span>{spaId}</span>
</FormDescription>
<span className="flex">
-
<EditableText
label={`${spaId} split number ${index + 2}`}
onValueChange={field.onChange}
{...field}
/>
</span>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
);
export const SplitSpaIdsForm = ({
control,
spaId,
splitCount,
}: {
control: Control;
spaId: string;
splitCount: number;
}) => {
const { fields, remove, append } = useFieldArray({
control,
name: "spaIds",
});
useEffect(() => {
remove();
const fieldData = [...Array(splitCount).keys()]
.splice(1)
.map((index) => ({ suffix: DEFAULT_SUFFIXES[index] }));
append(fieldData);
}, [splitCount]); // eslint-disable-line react-hooks/exhaustive-deps
if (!spaId || !splitCount || splitCount < 2 || splitCount > 8) {
return;
}
return (
<section className="flex flex-col space-y-2">
<div className="font-bold">SPAs after split</div>
<div className="items-center flex leading-[2.25]" data-testid={`1. ${spaId} (Base SPA)`}>
<span className="font-bold mr-4">1.</span>
<span>{spaId}</span>
<span className="flex ml-1">
(<span className="font-bold">Base SPA</span>)
</span>
</div>
{fields.map((field, index) => (
<SplitSpaId control={control} index={index} spaId={spaId} {...field} />
))}
</section>
);
};
|