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

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

import Color from './ColorInput'

/**
 * SHOULD BE MOVED TO INPUTS
 * Wraps Color component with addition of text input
 */
export default class ColorCard extends Component {
	static propTypes = {
		value: PropTypes.string,
		onChange: PropTypes.func,
	}

	static defaultProps = {
		id: 0,
		value: '#FFFFFF',
		onChange: () => console.warn('[ColorCard] no onChange prop provided'),
	}

	handleInputChange = e => {
		this.props.onChange(e.target.value)
	}

	handleColorChange = color => {
		this.props.onChange('#' + color.hex)
	}

	render() {
		return (
			<div className="color-card flex">
				<Color name={this.props.name} value={this.props.value} size="xlarge" onChange={this.handleColorChange} />
				<div className="">
					<input
						type="text"
						size="xsmall"
						placeholder="#FFFFFF"
						value={this.props.value}
						onChange={this.handleInputChange}
					/>
				</div>
			</div>
		)
	}
}