66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { IInputGroup } from '../../Interfaces/IInputGroup';
|
|
|
|
interface IRadioGroupButtonsProps {
|
|
name: string
|
|
value?: string
|
|
defaultValue?: string
|
|
inputClassName: string
|
|
labelText: string
|
|
inputGroups: IInputGroup[]
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
|
|
}
|
|
|
|
export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
|
|
let inputGroups;
|
|
if (props.value !== undefined) {
|
|
// dynamic
|
|
inputGroups = props.inputGroups.map((inputGroup) => (
|
|
<div key={inputGroup.value}>
|
|
<input
|
|
id={inputGroup.value}
|
|
type='radio'
|
|
name={props.name}
|
|
className={`peer m-2 ${props.inputClassName}`}
|
|
value={inputGroup.value}
|
|
checked={props.value === inputGroup.value}
|
|
onChange={props.onChange}
|
|
/>
|
|
<label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
|
|
{inputGroup.text}
|
|
</label>
|
|
</div>
|
|
|
|
));
|
|
} else {
|
|
// static
|
|
inputGroups = props.inputGroups.map((inputGroup) => (
|
|
<div key={inputGroup.value}>
|
|
<input
|
|
id={inputGroup.value}
|
|
type='radio'
|
|
name={props.name}
|
|
className={`peer m-2 ${props.inputClassName}`}
|
|
value={inputGroup.value}
|
|
defaultChecked={props.defaultValue === inputGroup.value}
|
|
/>
|
|
<label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
|
|
{inputGroup.text}
|
|
</label>
|
|
</div>
|
|
));
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<label>
|
|
{props.labelText}
|
|
</label>
|
|
<div id='XPositionReference'
|
|
className='flex flex-col'
|
|
>
|
|
{ inputGroups }
|
|
</div>
|
|
</>
|
|
);
|
|
};
|