diff options
Diffstat (limited to 'src/react/RadioGroup.js')
-rw-r--r-- | src/react/RadioGroup.js | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/react/RadioGroup.js b/src/react/RadioGroup.js new file mode 100644 index 0000000..59eaca7 --- /dev/null +++ b/src/react/RadioGroup.js @@ -0,0 +1,40 @@ +import React from 'react'; +import Radio from './Radio.js'; + +class RadioGroup extends React.Component { + constructor(props) { + super(props); + this.radios = {}; + } + + render() { + let {name, disabled, title, options, value, className} = this.props; + let dataTestId = this.props['data-test-id']; + return (<div data-test-id={dataTestId} className={`sdc-radio-group ${className || ''}`}> + { title && <label className='sdc-radio-group__legend'>{title}</label> } + <div className='sdc-radio-group__radios'> + {options.map(option => { + let rName = name + '_' + option.value; + return (<Radio ref={(radio) => {this.radios[rName] = radio;}} data-test-id={dataTestId + '_' + option.value} + key={rName} value={option.value} + label={option.label} checked={value === option.value} disabled={disabled} + name={name} onChange={() => this.onChange(rName)} /> + );})} + </div> + </div>); + } + + onChange(rName) { + let {onChange} = this.props; + let val = this.radios[rName].getValue(); + if (onChange) { + onChange(val); + } + } + + getValue() { + return this.props.value; + } +} + +export default RadioGroup; |