@bigfishtv/cockpit/src/components/input/RadioButtonGroupInput.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ButtonGroup from '../button/ButtonGroup'
import Button from '../button/Button'
import { titleCase } from '../../utils/stringUtils'

export default class RadioButtonGroupInput extends Component {
	static propTypes = {
		value: PropTypes.any,
		options: PropTypes.array,
		onChange: PropTypes.func,
		size: PropTypes.string,
		disabled: PropTypes.bool,
		readOnly: PropTypes.bool,
	}

	static defaultProps = {
		options: [],
		onChange: () => {},
		size: 'xsmall',
		disabled: false,
		readOnly: false,
		style: null,
		activeStyle: 'primary',
	}

	componentDidMount() {
		if (!this.props.value && this.props.defaultValue) this.props.onChange(this.props.defaultValue)
	}

	render() {
		return (
			<ButtonGroup size={this.props.size}>
				{this.props.options.map((option, i) => {
					if (typeof option == 'string') option = { value: option, text: titleCase(option) }
					return (
						<Button
							key={option.value}
							text={option.text}
							icon={option.icon}
							disabled={this.props.disabled || this.props.readOnly}
							onClick={() => this.props.onChange(option.value)}
							style={this.props.value == option.value ? this.props.activeStyle : this.props.style}
						/>
					)
				})}
			</ButtonGroup>
		)
	}
}