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

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classnames from 'classnames'

export default class RadioColorGroupInput extends Component {
	static propTypes = {
		value: PropTypes.any,
		onChange: PropTypes.func,
		options: PropTypes.arrayOf(
			PropTypes.shape({
				value: PropTypes.any,
				color: PropTypes.string,
			})
		),
		disabled: PropTypes.bool,
		readOnly: PropTypes.bool,
		size: PropTypes.string,
	}

	static defaultProps = {
		options: [],
		onChange: () => {},
		size: 'medium',
	}

	render() {
		return (
			<div className="swatches">
				{this.props.options.map((option, i) => (
					<div
						key={option.value || `_${i}`}
						onClick={this.props.disabled || this.props.readOnly ? undefined : () => this.props.onChange(option.value)}
						className={classnames('swatch', 'swatch-' + this.props.size, {
							selected: option.value == this.props.value,
							transparent: option.color === 'transparent',
						})}
						style={{
							background: option.color,
							cursor: this.props.disabled || this.props.readOnly ? 'default' : undefined,
						}}
					/>
				))}
			</div>
		)
	}
}