import { useId } from "@radix-ui/react-id"; import { Root as ToggleGroupPrimitive, Item as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group"; import { useState } from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Label } from "../../../components/form/inputs/Label"; const boolean = (yesNo: "yes" | "no") => (yesNo === "yes" ? true : yesNo === "no" ? false : undefined); const yesNo = (boolean?: boolean) => (boolean === true ? "yes" : boolean === false ? "no" : undefined); export const BooleanToggleGroup = function BooleanToggleGroup({ defaultValue = true, value, disabled = false, // eslint-disable-next-line @typescript-eslint/no-empty-function onValueChange = () => {}, ...passThrough }: { defaultValue?: boolean; value?: boolean; onValueChange?: (value?: boolean) => void; disabled?: boolean; }) { // Maintain a state because it is not necessary that onValueChange the parent component would re-render. Think react-hook-form // Also maintain a string as boolean isn't accepted as ToggleGroupPrimitive value const [yesNoValue, setYesNoValue] = useState<"yes" | "no" | undefined>(yesNo(value)); if (!yesNoValue) { setYesNoValue(yesNo(defaultValue)); onValueChange(defaultValue); return null; } const commonClass = "w-full inline-flex items-center justify-center rounded py-[10px] px-4 text-sm font-medium leading-4"; const selectedClass = classNames(commonClass, "bg-gray-200 text-gray-900"); const unselectedClass = classNames(commonClass, "text-gray-600 hover:bg-gray-100 hover:text-gray-900"); return ( { setYesNoValue(yesNoValue); onValueChange(boolean(yesNoValue)); }} {...passThrough}> Yes No ); }; export const BooleanToggleGroupField = function BooleanToggleGroupField( props: Parameters[0] & { label?: string; containerClassName?: string; name?: string; labelProps?: React.ComponentProps; className?: string; error?: string; } ) { const { t } = useLocale(); const { label = t(props.name || ""), containerClassName, labelProps, className, ...passThrough } = props; const id = useId(); return (
{!!label && ( )}
); };