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 | 18x 18x 18x 18x 18x | import { FormControlLabel, Stack, SxProps } from "@mui/material";
import GiveRadio from "@shared/Radio/GiveRadio";
import GiveText from "@shared/Text/GiveText";
import { useFormContext } from "react-hook-form";
interface Props {
name: string;
isDisabled?: boolean;
label: string;
description?: string;
sx?: SxProps;
onChangeCallback?: (checked: boolean) => void;
inverse?: boolean;
}
export default function HFGiveRadio({
name,
label,
isDisabled,
description,
sx,
inverse,
}: Props) {
const { watch, setValue } = useFormContext();
const onChange = (
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) => {
const usedCheck = inverse ? !checked : checked;
setValue(name, usedCheck);
};
const formValue = watch(name);
const checked = inverse ? !formValue : formValue;
return (
<FormControlLabel
control={
<GiveRadio
checked={checked}
onChange={onChange}
disabled={isDisabled}
/>
}
label={
<Stack gap="4px">
<GiveText variant="bodyS">{label}</GiveText>
{Boolean(description) && (
<GiveText color="secondary" variant="bodyS">
{description}
</GiveText>
)}
</Stack>
}
labelPlacement="end"
sx={{
gap: "12px",
alignItems: "flex-start",
marginLeft: 0,
...sx,
}}
/>
);
}
|