summaryrefslogtreecommitdiffstats
path: root/src/react/RadioGroup.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/react/RadioGroup.js')
-rw-r--r--src/react/RadioGroup.js40
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;