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); type VariantStyles = { commonClass?: string; toggleGroupPrimitiveClass?: string; }; const getVariantStyles = (variant: string) => { const variants: Record = { default: { commonClass: "px-4 w-full py-[10px]", }, small: { commonClass: "w-[49px] px-3 py-1.5", toggleGroupPrimitiveClass: "space-x-1", }, }; return variants[variant]; }; export const BooleanToggleGroup = function BooleanToggleGroup({ defaultValue = true, value, disabled = false, // eslint-disable-next-line @typescript-eslint/no-empty-function onValueChange = () => {}, variant = "default", ...passThrough }: { defaultValue?: boolean; value?: boolean; onValueChange?: (value?: boolean) => void; disabled?: boolean; variant?: "default" | "small"; }) { // 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 = classNames( getVariantStyles(variant).commonClass, "inline-flex items-center justify-center rounded text-sm font-medium leading-4", disabled && "cursor-not-allowed" ); const selectedClass = classNames(commonClass, "bg-emphasis text-emphasis"); const unselectedClass = classNames(commonClass, "text-default hover:bg-subtle hover:text-emphasis"); 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 && ( )}
); };