40 lines
949 B
TypeScript
40 lines
949 B
TypeScript
import React from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
|
|
import { RadioProps } from './Radio';
|
|
|
|
type RadioGroupProps = React.PropsWithChildren & {
|
|
value?: string;
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onValueChange?: (value: string) => void;
|
|
};
|
|
|
|
export const RadioGroup = ({
|
|
value,
|
|
onChange,
|
|
onValueChange,
|
|
children,
|
|
}: RadioGroupProps) => {
|
|
const theme = useTheme();
|
|
|
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
onChange?.(event);
|
|
onValueChange?.(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{React.Children.map(children, (child) => {
|
|
if (React.isValidElement<RadioProps>(child)) {
|
|
return React.cloneElement(child, {
|
|
style: { marginBottom: theme.spacing(2) },
|
|
checked: child.props.value === value,
|
|
onChange: handleChange,
|
|
});
|
|
}
|
|
return child;
|
|
})}
|
|
</>
|
|
);
|
|
};
|