File "radio-group.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/forms/radio-group/radio-group.tsx
File size: 2.6 KB
MIME-type: text/html
Charset: utf-8
import {
Children,
cloneElement,
forwardRef,
isValidElement,
ReactNode,
useId,
} from 'react';
import clsx from 'clsx';
import {useController} from 'react-hook-form';
import {Orientation} from '../orientation';
import {RadioProps} from './radio';
import {getInputFieldClassNames} from '../input-field/get-input-field-class-names';
export interface RadioGroupProps {
children: ReactNode;
orientation?: Orientation;
size?: 'xs' | 'sm' | 'md' | 'lg';
className?: string;
label?: ReactNode;
disabled?: boolean;
name?: string;
errorMessage?: ReactNode;
description?: ReactNode;
invalid?: boolean;
required?: boolean;
}
export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
(props, ref) => {
const style = getInputFieldClassNames(props);
const {
label,
children,
size,
className,
orientation = 'horizontal',
disabled,
required,
invalid,
errorMessage,
description,
} = props;
const labelProps = {};
const id = useId();
const name = props.name || id;
return (
<fieldset
aria-describedby={description ? `${id}-description` : undefined}
ref={ref}
className={clsx('text-left', className)}
>
{label && (
<legend className={style.label} {...labelProps}>
{label}
</legend>
)}
<div
className={clsx(
'flex',
label ? 'mt-6' : 'mt-0',
orientation === 'vertical' ? 'flex-col gap-10' : 'flex-row gap-16'
)}
>
{Children.map(children, child => {
if (isValidElement<RadioProps>(child)) {
return cloneElement<RadioProps>(child, {
name,
size,
invalid: child.props.invalid || invalid || undefined,
disabled: child.props.disabled || disabled,
required: child.props.required || required,
});
}
})}
</div>
{description && !errorMessage && (
<div className={style.description} id={`${id}-description`}>
{description}
</div>
)}
{errorMessage && <div className={style.error}>{errorMessage}</div>}
</fieldset>
);
}
);
interface FormRadioGroupProps extends RadioGroupProps {
name: string;
}
export function FormRadioGroup({children, ...props}: FormRadioGroupProps) {
const {
fieldState: {error},
} = useController({
name: props.name!,
});
return (
<RadioGroup errorMessage={error?.message} {...props}>
{children}
</RadioGroup>
);
}