41 lines
No EOL
1 KiB
TypeScript
41 lines
No EOL
1 KiB
TypeScript
import React from 'react';
|
|
|
|
import List, { type IListItem, ListItem } from './list';
|
|
|
|
interface IRadioGroup {
|
|
onChange: React.ChangeEventHandler;
|
|
children: React.ReactElement<{ onChange: React.ChangeEventHandler }>[];
|
|
}
|
|
|
|
const RadioGroup = ({ onChange, children }: IRadioGroup) => {
|
|
const childrenWithProps = React.Children.map(children, child =>
|
|
React.cloneElement(child, { onChange }),
|
|
);
|
|
|
|
return <List>{childrenWithProps}</List>;
|
|
};
|
|
|
|
interface IRadioItem extends IListItem {
|
|
label: React.ReactNode;
|
|
hint?: React.ReactNode;
|
|
value: string;
|
|
checked: boolean;
|
|
onChange?: React.ChangeEventHandler;
|
|
}
|
|
|
|
const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value, ...props }) => (
|
|
<ListItem label={label} hint={hint} {...props}>
|
|
<input
|
|
type='radio'
|
|
checked={checked}
|
|
onChange={onChange}
|
|
value={value}
|
|
className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
|
/>
|
|
</ListItem>
|
|
);
|
|
|
|
export {
|
|
RadioGroup,
|
|
RadioItem,
|
|
}; |