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 | 35x 35x 35x 2x 1x 1x 1x 1x 35x 378x 35x 35x 378x 378x 378x 2x | import { Box, Stack } from "@mui/material";
import GiveCheckbox from "@shared/GiveCheckbox/GiveCheckbox";
import GiveText from "@shared/Text/GiveText";
import React from "react";
import { useFormContext } from "react-hook-form";
import { RadioMultiselect } from "../giveExportTypes";
function ExportRadioMultiselect({ field }: { field: RadioMultiselect }) {
const { setValue, watch } = useFormContext();
const selectedValues = watch(field.fieldName) || [];
const handleChangeCheckbox = (
option: { label: string; value: string | number | boolean | null },
checked: boolean,
) => {
if (checked) {
// Add option.value to the array if not already present
Eif (!selectedValues.includes(option.value)) {
setValue(field.fieldName, [...selectedValues, option.value], {
shouldValidate: true,
});
}
} else {
// Remove option.value from the array
setValue(
field.fieldName,
selectedValues.filter((value: string) => value !== option.value),
{
shouldValidate: true,
},
);
}
};
const isOptionChecked = (option: {
label: string;
value: string | number | boolean | null;
}) => {
return selectedValues.includes(option.value);
};
const onlyOneSelected = selectedValues.length === 1;
return (
<Stack gap="16px">
{field.options.map((option) => {
const checked = isOptionChecked(option);
const isLastSelected = onlyOneSelected && checked;
return (
<Stack
alignItems="center"
gap="12px"
flexDirection="row"
key={option.label}
>
<GiveCheckbox
data-testid={`give-export-checkbox-${option.label}`}
checked={checked}
disabled={isLastSelected}
onChange={(e) => {
handleChangeCheckbox(option, e.target.checked);
}}
/>
<Box>
<GiveText fontWeight={400} fontSize="14px">
{option.label}
</GiveText>
{option?.description && (
<GiveText color="secondary" fontWeight={400} fontSize="12px">
{option.description}
</GiveText>
)}
</Box>
</Stack>
);
})}
</Stack>
);
}
export default ExportRadioMultiselect;
|