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