Migrate to twenty-ui - input components (#7914)
### Description Migrate Input components: - CardPicker - Radio - RadioGroup - Checkbox - Toggle - IconListViewGrip ### Demo Radio Component on Storybook  Checkbox component on Storybook  ###### Fixes twentyhq/private-issues#92 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
committed by
GitHub
parent
ff388f56ea
commit
fc8c9d9167
39
packages/twenty-ui/src/input/components/RadioGroup.tsx
Normal file
39
packages/twenty-ui/src/input/components/RadioGroup.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
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;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user